/* ÍNDIGO — base gethyped 1:1 + capa de rediseño v11. Motion: js/clon.js (GSAP + Lenis). */

:root {
  --bg: #FAF4EC;
  --bg-2: #F1EADD;
  --ink: #161616;
  --ink-2: #5b554d;
  --blue: #0D8DFF;
  --blue-deep: #0A6CD6; /* AA-safe surface for cream text (≥4.5:1) */
  --green: #33C791;
  --pink: #FCB8FA;
  --orange: #FA5424;
  --peach: #FC997B;
  --cream: #EAE4D8;
  --white: #FFFFFF;
  --line: rgba(22, 22, 22, 0.12);

  --r: 16px;
  --r-card: clamp(22px, 2.2vw, 32px);
  --r-sm: 10px;
  --r-pill: 999px;
  --maxw: 1920px;
  --pad: clamp(1.25rem, 3.5vw, 4rem);
  --navh: clamp(85px, 6.8vw, 120px);

  --f: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

/* easings de la referencia */
  --bounce: cubic-bezier(0.34, 2.27, 0.64, 1);
  --radius-ease: cubic-bezier(0.34, 1.37, 0.64, 1);
  --smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --color-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --speed: 0.45s;
  /* curva elástica del swoosh */
  --elastic: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--f);
  font-size: 1.0625rem; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
/* `height: auto` es obligatorio en cuanto las imagenes llevan width/height en el
   HTML. Sin el, `max-width: 100%` encoge el ancho pero la altura se queda clavada
   en el atributo y la foto sale estirada. Con el, el navegador reserva el hueco
   con la proporcion correcta antes de descargar nada — que es justo lo que evita
   que el texto salte al cargar (CLS). Los iconos que fijan su propio width y
   height por CSS no se ven afectados: esas reglas son mas especificas. */
img, svg, video { display: block; max-width: 100%; height: auto; }

/* skip-to-content (keyboard a11y) */
.skip-link { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 200; background: var(--ink); color: var(--bg); padding: 0.7rem 1.1rem; border-radius: 8px; font-weight: 600; transform: translateY(-150%); transition: transform 0.2s var(--expo); }
.skip-link:focus { transform: translateY(0); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- type scale (from the reference) ---------- */

.heading-xxl, .hero__title, .footer__title {
  font-weight: 600; letter-spacing: -0.05em; line-height: 0.95;
  font-size: clamp(2.85rem, 0.4rem + 11.5vw, 8rem);
}
.heading-xl, .work__title { font-weight: 600; letter-spacing: -0.05em; line-height: 1.0; font-size: clamp(2.6rem, 0.4rem + 11.5vw, 8rem); }
.heading-m { font-weight: 600; letter-spacing: -0.04em; line-height: 1.0; font-size: clamp(2.2rem, 1rem + 5.6vw, 5rem); }
.heading-xs { font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-size: clamp(1.4rem, 0.9rem + 1.7vw, 2rem); }
.paragraph-l { font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; font-size: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); }
.label { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.62; }

/* ---------- buttons (button-default) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem; font-weight: 600; font-size: 1.05rem; line-height: 1; letter-spacing: -0.02em;
  border-radius: 1.1rem; isolation: isolate; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none;
}
.btn__bg {
  position: absolute; inset: 0; z-index: -1; border-radius: 1.1rem;
  transition: width var(--speed) var(--radius-ease), border-radius var(--speed) var(--radius-ease), left var(--speed) var(--radius-ease);
  width: 100%;
}
.btn__t, .btn__i { display: inline-flex; transition: transform 0.15s ease-out; }
.btn__i { font-size: 1.05em; }
.btn__inner { display: contents; }
.btn--fill { color: var(--bg); }
.btn--fill .btn__bg { background: var(--ink); }
.btn--outline { color: var(--ink); }
.btn--outline .btn__bg { background: transparent; border: 1.5px solid var(--ink); }

.btn__sq { display: inline-grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 8px; margin-left: 0.1em; flex: 0 0 auto; }
.btn__sq--ink { background: var(--ink); }
.btn__sq--light { background: var(--white); }
.btn__sq img { width: 0.95em; height: 1em; }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: transform var(--speed) var(--bounce); }
  .btn:hover { transform: skewY(-4deg) rotate(-1deg) scale(1.02); }
  .btn:hover .btn__bg { width: calc(100% - 0.5em); border-radius: 0.7em; left: 0.25em; }
  .btn:hover .btn__i { transform: translateX(3px) scale(0.94); }
  .btn:active { transform: scale(0.96); }
}

.theme-blue .btn--fill .btn__bg, .theme-green .btn--fill .btn__bg, .theme-pink .btn--fill .btn__bg { background: var(--ink); }
.theme-blue .btn--fill, .theme-green .btn--fill, .theme-pink .btn--fill, .theme-white .btn--fill { color: var(--bg); }

/* ---------- swoosh nav links (text swap on hover) ---------- */
.swoosh { position: relative; display: inline-block; overflow: hidden; font-weight: 600; color: var(--ink-2); letter-spacing: -0.0205em; }
.swoosh > span { display: inline-block; transition: translate 0.75s var(--elastic), rotate 0.5s var(--smooth), opacity 0.2s ease-out, color 0.2s var(--color-ease); }
.swoosh::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; color: var(--ink); font-weight: 600;
  translate: 0 2em; rotate: 1 1 0.45 30deg; opacity: 0;
  transition: translate 0.75s var(--elastic), rotate 0.5s var(--smooth), opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .swoosh:hover > span { translate: 0 -2em; rotate: 1 1 0.45 -60deg; opacity: 0; }
  .swoosh:hover::after { translate: 0 0; rotate: 1 1 0.45 0deg; opacity: 1; }
}

/* ---------- nav (fixed, floating white pill group) ---------- */
.nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 90; background: transparent; transition: transform 0.45s var(--expo), background 0.3s ease, backdrop-filter 0.3s ease; }
.nav.is-hidden { transform: translateY(-120%); }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(12px); }
.nav__bar { max-width: var(--maxw); margin: 0 auto; height: var(--navh); padding: 0 var(--pad); display: flex; align-items: center; gap: 1.2rem; }
.nav__logo { display: inline-flex; align-items: center; gap: 0.5rem; }
.nav__mark { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; background: var(--ink); color: var(--bg); border-radius: 8px; font-weight: 700; font-size: 1.25rem; }
.nav__word { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; }

/* pill central */
.navpill { display: none; align-items: center; gap: 0.15em; margin: 0 auto; background: var(--white); border-radius: 999px; padding: 0.35em; box-shadow: 0 16px 36px -20px rgba(22, 22, 22, 0.32); }
.np { position: relative; border-radius: 999px; padding: 0.62em 1.05em; overflow: hidden; isolation: isolate; font-weight: 600; font-size: 0.98rem; letter-spacing: -0.02em; color: var(--ink); transition: color 0.25s var(--color-ease); }
.np__sweep { position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--c, var(--blue)); transform: translateY(102%); transition: transform 0.55s var(--elastic); }
.np__t { position: relative; }
.np.is-active { background: var(--ink); color: var(--bg); }
.np.is-active .np__sweep { display: none; }
@media (hover: hover) and (pointer: fine) { .np:hover .np__sweep { transform: translateY(0); } }

.nav__cta { display: none; align-items: center; gap: 0.55em; }
.nav__cta .btn__bg { background: var(--orange); }
.nav__cta { color: var(--ink); }
.nav__flame { display: inline-grid; place-items: center; width: 1.85em; height: 1.85em; background: var(--white); border-radius: 8px; }
.nav__flame img { width: 0.95em; height: 1.1em; }

.burger { margin-left: auto; display: inline-flex; flex-direction: column; gap: 5px; justify-content: center; width: 44px; height: 44px; padding: 12px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 50%; cursor: pointer; }
.burger span { height: 2px; background: var(--ink); transition: transform 0.3s var(--expo); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width: 940px) {
  .navpill { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
}

main { padding-top: var(--navh); }

.mmenu { position: fixed; inset: 0; z-index: 75; background: var(--ink); color: var(--bg); display: flex; align-items: center; padding: var(--pad); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--expo), visibility 0s linear 0.4s; }
.mmenu.open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--expo); }
.mmenu__nav { display: flex; flex-direction: column; gap: 0.3rem; }
.mmenu__nav a { font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 600; letter-spacing: -0.03em; }
.mmenu__cta { color: var(--green); }
@media (min-width: 940px) { .mmenu { display: none; } }

/* ---------- hero ---------- */
.hero { padding-top: clamp(4rem, 9vw, 11rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); overflow: hidden; }
.hero__head { max-width: 60rem; }
.hero__title { margin-bottom: 1.6rem; }
.hero__sub { font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.45rem); color: var(--ink-2); max-width: 52ch; font-weight: 500; }

/* collage: solapado con márgenes negativos */
.collage { display: flex; justify-content: center; align-items: center; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: clamp(1.5rem, 4vw, 4rem) var(--pad); perspective: 1600px; }
.rcard { flex: 0 0 auto; width: clamp(17rem, 27vw, 28rem); aspect-ratio: 4.8 / 6; border-radius: var(--r-card); overflow: hidden; will-change: transform; box-shadow: 0 28px 56px -28px rgba(22,22,22,0.55); }
.rcard + .rcard { margin-left: -10vw; }
.rcard--stat { padding: 2em; display: flex; flex-direction: column; justify-content: space-between; color: var(--bg); }
.rcard__num { font-size: clamp(3rem, 1rem + 7vw, 5.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; }
.rcard__body { display: flex; flex-direction: column; gap: 0.6rem; }
.rcard__sub { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.rcard__div { height: 1px; background: currentColor; opacity: 0.35; }
.rcard__p { font-size: 1rem; opacity: 0.9; line-height: 1.35; }
.rcard--media { padding: 0; }
.media { width: 100%; height: 100%; position: relative; display: flex; align-items: flex-end; padding: 1.2rem; }
.media--peach { background: linear-gradient(150deg, var(--peach), var(--orange)); }
.media--blue { background: linear-gradient(150deg, #4facff, var(--blue)); }
.media--green { background: linear-gradient(150deg, #5fe0b3, var(--green)); }
.media--pink { background: linear-gradient(150deg, #ffd6fd, var(--pink)); }
.media__tag { font-size: 0.78rem; font-weight: 600; color: var(--bg); padding: 0.3rem 0.7rem; border: 1px solid rgba(250,244,236,0.5); border-radius: 999px; }
.media__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(255,255,255,0.92); }
.media__play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%); border-left: 13px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.hero__hint { margin-top: 1.8rem; text-align: center; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
@media (hover: none), (pointer: coarse) { .hero__hint { display: none; } }
@media (max-width: 991px) { .rcard { width: clamp(13rem, 44vw, 18rem); } .rcard + .rcard { margin-left: -9vw; } .hide-tablet { display: none; } }
@media (max-width: 600px) { .rcard { width: clamp(13rem, 52vw, 17rem); } .rcard + .rcard { margin-left: -14vw; } .hide-mobile { display: none; } .collage { padding: 0 var(--pad); } }

/* ---------- intro / value ---------- */
.intro { padding: clamp(3rem, 6vw, 6rem) 0 clamp(4.5rem, 9vw, 9rem); }
.intro__title { max-width: 22ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.intro__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
/* max-width aquí y en .portrait: la chatcard (absolute) debe colgar del retrato. */
.intro__media { position: relative; max-width: 26rem; }
/* Chip arriba, tarjeta abajo: separados por eje no chocan. */
.portrait { aspect-ratio: 3 / 4; border-radius: var(--r); max-width: 26rem; position: relative; display: flex; align-items: flex-start; padding: 1.4rem; }
.portrait--orange { background: linear-gradient(160deg, var(--peach), var(--orange)); }
.portrait__chip { font-size: 0.85rem; font-weight: 600; color: var(--bg); padding: 0.35rem 0.8rem; background: rgba(22,22,22,0.25); border-radius: 999px; }
/* 68%: a 78% la tarjeta tapaba el chip en columnas <420px. */
.chatcard { position: absolute; right: -0.5rem; bottom: 1.5rem; width: min(17rem, 68%); background: var(--white); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 14px 30px -18px rgba(22,22,22,0.4); display: flex; flex-direction: column; gap: 0.55rem; }
.chatcard__who { font-size: 0.78rem; color: var(--ink-2); }
.chatcard__who strong { color: var(--ink); }
.chatcard__msg { font-size: 0.92rem; line-height: 1.4; }
.chatcard__row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
/* <button>/<a> reales: neutralizar UA styles y dar estados. */
.chatcard__btn { font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.2; padding: 0.45rem 0.85rem; border: 0; border-radius: 999px; background: var(--green); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: transform var(--dur-fast, 150ms) ease, filter var(--dur-fast, 150ms) ease, background-color var(--dur-fast, 150ms) ease; }
.chatcard__btn:hover { filter: brightness(0.95); transform: translateY(-1px); }
.chatcard__btn:active { transform: translateY(0); }
.chatcard__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chatcard__btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.chatcard__btn--ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); filter: none; }

/* ---------- FAQ: en flujo, empuja la página, nunca se superpone ---------- */
.faq { margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 860px) { .faq { grid-template-columns: 1.25fr 0.75fr; align-items: start; } }

/* Sin scroll propio: la banda crece con la página. */
.faq__thread { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.faq__msg--me { align-self: flex-end; background: var(--ink); color: var(--bg); border-radius: 16px 16px 4px 16px; padding: 0.6rem 0.95rem; font-size: 0.95rem; max-width: 80%; }
.faq__msg--bot { background: var(--white); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 0.75rem 1rem; font-size: 0.95rem; line-height: 1.5; max-width: 92%; }
.faq__kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.85rem; }
/* En columna: los chips en fila se parten mal. */
.faq__opts { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.faq__opts .chatcard__btn { font-size: 0.88rem; padding: 0.55rem 1rem; }

/* Tres puntos: el sistema "escribiendo". */
.chatcard__typing { display: inline-flex; gap: 5px; padding: 0.75rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; }
.chatcard__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: chat-dot 1s infinite ease-in-out; }
.chatcard__typing i:nth-child(2) { animation-delay: 0.15s; }
.chatcard__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .chatcard__typing i { animation: none; opacity: 0.6; }
  .chatcard__btn:hover { transform: none; }
}
.intro__copy { display: flex; flex-direction: column; gap: 1.8rem; align-items: flex-start; justify-content: center; }
.intro__copy .paragraph-l { color: var(--ink); max-width: 28ch; }
.intro__copy strong { color: var(--orange); }
/* -1.5rem: -2.5rem pisaba el texto entre 860 y 1000px. */
@media (min-width: 860px) { .intro__grid { grid-template-columns: 0.95fr 1.05fr; align-items: center; } .chatcard { right: -1.5rem; } }
@media (max-width: 560px) {
  .portrait { max-width: 100%; }
  .chatcard { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 1rem; box-shadow: 0 18px 36px -24px rgba(22,22,22,0.45); }
}

/* ---------- expertise (mwg_effect031 pinned 3D stack) ---------- */
.exps { padding: clamp(3rem, 6vw, 6rem) 0 0; }
.exps__stack { position: relative; }
.exp { min-height: calc(100vh - 4em); display: flex; align-items: center; justify-content: center; padding: 0 var(--pad); perspective: 250vw; }
.exp__card { width: 100%; max-width: var(--maxw); border-radius: clamp(24px, 2.6vw, 40px); padding: clamp(2rem, 3.5vw, 3.5rem); transform-origin: 50% 10%; will-change: transform, opacity; display: grid; gap: clamp(1.2rem, 2vw, 2rem); box-shadow: 0 40px 80px -50px rgba(22,22,22,0.6); }

.exp .label { display: inline-flex; align-items: center; justify-content: center; height: 2.6em; padding: 0 0.85em; background: color-mix(in srgb, var(--white) 70%, transparent); border-radius: 8px; opacity: 1; }
.theme-white .exp .label, .exp .theme-white .label { background: var(--bg); }
.theme-white { background: var(--white); color: var(--ink); }
.theme-blue { background: var(--blue-deep); color: var(--bg); }
.theme-green { background: var(--green); color: #08311f; }
.theme-pink { background: var(--pink); color: var(--ink); }
.theme-orange { background: var(--orange); color: var(--bg); }
.exp__top { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0.6rem 1.5rem; }
.exp__top .label { grid-column: 1 / -1; }
.exp__name { font-size: clamp(3rem, 6vw, 7.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.92; }
.exp__no { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 700; opacity: 0.5; letter-spacing: -0.03em; }
.exp__media { border-radius: var(--r); aspect-ratio: 16 / 7; }
.exp__bottom { display: grid; gap: 0.9rem; align-items: start; max-width: 52rem; }
.exp__lead { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; }
.exp__desc { font-size: clamp(0.98rem, 1.2vw, 1.12rem); line-height: 1.45; opacity: 0.92; }
.exp__bottom .btn { margin-top: 0.4rem; }
.theme-white .btn--fill .btn__bg { background: var(--ink); }
@media (min-width: 860px) {
  .exp__card { grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "top media" "bottom media"; align-content: center; gap: 1.4rem clamp(1.5rem, 3vw, 3rem); }
  .exp__top { grid-area: top; }
  .exp__media { grid-area: media; aspect-ratio: auto; height: 100%; min-height: 22rem; }
  .exp__bottom { grid-area: bottom; }
}
@media (max-width: 859px) {
  .exp__media { aspect-ratio: 16 / 9; max-height: 200px; }
  .exp__name { font-size: clamp(2.6rem, 9vw, 4.2rem); }
  .exp__card { gap: 1rem; }
}

/* ---------- selected work ---------- */
.work { padding: clamp(4.5rem, 9vw, 9rem) 0; overflow: hidden; }
.work__head { max-width: 46rem; display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.work__title strong { font-weight: 600; }
.work__sub { color: var(--ink-2); }
.work__grid { display: grid; gap: 1.2rem; }
.wk { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; will-change: transform; box-shadow: 0 28px 56px -30px rgba(22,22,22,0.5); }
.wk__media { position: absolute; inset: 0; }
.wk__wrap { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; }
.wk__content { background: var(--bg); color: var(--ink); border-radius: 12px; padding: 0.55rem 0.9rem; display: flex; flex-direction: column; gap: 0.1rem; box-shadow: 0 10px 24px -12px rgba(22,22,22,0.4); }
.wk__name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.wk__brand { font-size: 0.78rem; opacity: 0.65; }
.wk__shape { position: relative; flex: 0 0 auto; width: clamp(5rem, 9vw, 7rem); aspect-ratio: 429 / 174; transition: transform 0.4s var(--expo); }
.wk__blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk__arrow { position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); width: clamp(1.2rem, 2vw, 1.6rem); }
.wk:hover .wk__shape { transform: translateX(5px) rotate(-4deg); }
@media (min-width: 820px) {
  .work__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .wk:nth-child(2) { margin-top: 4rem; }
  .wk:nth-child(3) { margin-top: 8rem; }
}
@media (max-width: 819px) { .wk:nth-child(2) { transform: rotate(1deg); } .wk:nth-child(3) { transform: rotate(-1deg); } }

/* ---------- clients marquee (mwg_effect008) ---------- */
.clients { padding: clamp(3rem, 6vw, 6rem) 0 0; }
.clients__title { max-width: 18ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.marquee { overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; }
.marquee:active { cursor: grabbing; }
.marquee__track { display: flex; gap: 1.5rem; width: max-content; white-space: nowrap; will-change: transform; padding-right: 1.5rem; }
.mq { flex: 0 0 auto; will-change: transform; }

.mq__logo { display: grid; place-items: center; width: clamp(10rem, 16vw, 13rem); height: clamp(10rem, 16vw, 13rem); background: var(--bg); border: 1px solid rgba(22, 22, 22, 0.22); border-radius: var(--r); font-size: clamp(1.05rem, 1.4vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-align: center; padding: 0.5rem; }
.divider { height: 1px; background: var(--line); margin-top: clamp(3rem, 6vw, 6rem); }

/* ---------- mouse-trail playground (mwg_effect020) ---------- */
.trail { position: relative; height: clamp(14rem, 26vw, 24rem); overflow: hidden; display: grid; place-items: center; }
.trail__label { font-size: clamp(2rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.05em; color: var(--bg-2); pointer-events: none; }
.trail__src[hidden] { position: absolute; visibility: hidden; pointer-events: none; }
.chip { position: absolute; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 18px; font-size: 2rem; font-weight: 800; color: var(--bg); pointer-events: none; z-index: 5; will-change: transform, opacity; }
.theme-orange { background: var(--orange); color: var(--bg); }
.chip.theme-pink { color: var(--ink); }

/* ---------- footer cta + diagonal band ---------- */
.footer { padding-top: clamp(4rem, 8vw, 8rem); }
.footer__cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(1.8rem, 3vw, 2.6rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.footer__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 5vw, 3em); }
.footer__btns .btn--fill .btn__bg { background: var(--orange); }
.footer__btns .btn--fill { color: var(--ink); }
.band { position: relative; margin-top: 2rem; }
.band__svg { width: 100%; height: clamp(26rem, 40vw, 38rem); }
.band__sticker { position: absolute; top: clamp(-1.5rem, -2vw, -1rem); right: clamp(1rem, 5vw, 6rem); width: clamp(6rem, 11vw, 11rem); height: clamp(6rem, 11vw, 11rem); border-radius: 50%; background: var(--pink); color: var(--ink); display: grid; place-items: center; text-align: center; font-weight: 700; line-height: 1.05; transform: rotate(-12deg); box-shadow: 0 18px 40px -22px rgba(22,22,22,0.5); z-index: 2; }
@media (max-width: 480px) { .band__sticker { right: 1rem; width: clamp(5.5rem, 22vw, 7rem); height: clamp(5.5rem, 22vw, 7rem); font-size: 0.85rem; } }
.band__inner { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad) clamp(1.5rem, 3vw, 2.5rem); }
.band__logo { font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 700; letter-spacing: -0.05em; color: var(--ink); line-height: 1; }
.band__info { display: grid; gap: 1.6rem; margin-top: auto; }
.band__col { display: flex; flex-direction: column; gap: 0.5rem; }
.band__lab { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); margin-bottom: 0.2rem; }
.band__col a { color: var(--ink); }
.band__socials { display: flex; gap: 0.6rem; }
.band__socials a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; transition: transform 0.25s var(--expo); }
.band__socials a:hover { transform: translateY(-2px); }
.band__socials img { width: 1.4rem; height: 1.4rem; }
.band__col .swoosh { padding: 0.5rem 0; min-height: 44px; display: inline-flex; align-items: center; }
.band__addr { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }
.band__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; padding-top: 1.4rem; margin-top: 1.4rem; border-top: 1px solid rgba(22,22,22,0.15); font-size: 0.85rem; color: var(--ink-2); }
.band__bottom a { color: var(--ink); }
@media (min-width: 760px) { .band__info { grid-template-columns: 1.2fr 1fr 1.3fr; gap: 2rem; } }

/* ---------- masked split lines + reduced motion ---------- */
.split-line, .iline { display: block; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .exp { min-height: 0; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
}

/* ============ capa v11: imagen + grano, estados, movil ============ */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Los bloques de media dejan de ser relleno: el gradiente pasa a ser tinte de marca (multiply) sobre foto opcional (.ph) y grano SVG encima. Sin foto, queda gradiente + grano: textura con intencion. */
.media,.portrait,.exp__media,.wk__media,.scard,.ex-intro__media{position:relative;overflow:hidden;isolation:isolate}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.media::before,.portrait::before,.exp__media::before,.wk__media::before,.scard::before,.ex-intro__media::before{content:"";position:absolute;inset:0;background:inherit;mix-blend-mode:multiply;opacity:.35;z-index:1;pointer-events:none}
.media::after,.portrait::after,.exp__media::after,.wk__media::after,.scard::after,.ex-intro__media::after{content:"";position:absolute;inset:0;background:var(--grain);background-size:140px;opacity:.5;mix-blend-mode:overlay;z-index:2;pointer-events:none}
.media__tag,.media__play,.portrait__chip,.scard__tag{z-index:3}
.media__tag,.portrait__chip{position:relative}
/* titulares balanceados */
h1,h2,.hero__title,.footer__title,.work__title,.clients__title{text-wrap:balance}
/* estados hover con intencion (solo transform/opacity) */
@media (hover:hover) and (pointer:fine){
  .wk{transition:transform .45s var(--expo)}
  .wk:hover{transform:translateY(-8px)}
  .ph{transition:transform .7s var(--expo)}
  .wk:hover .ph,.scard:hover .ph{transform:scale(1.05)}
  .mq__logo{transition:transform .35s var(--expo),border-color .35s ease}
  .mq:hover .mq__logo{transform:translateY(-4px) rotate(-1.5deg);border-color:var(--ink)}
  .band__col a:not(.swoosh):hover,.band__bottom a:hover{text-decoration:underline;text-underline-offset:3px}
}
/* foco visible tambien sobre superficies oscuras */
.np:focus-visible{outline-offset:-3px}
.theme-blue :focus-visible,.theme-green :focus-visible,.mmenu :focus-visible{outline-color:var(--bg)}
/* movil 320-768: titulares sin desbordes, collage dentro del viewport */
@media (max-width:480px){
  .heading-xxl,.heading-xl,.hero__title,.footer__title,.work__title{letter-spacing:-.035em}
  .rcard{width:clamp(11.5rem,54vw,15rem)}
  .rcard+.rcard{margin-left:-16vw}
  .band__svg{min-height:29rem}
  .exp__name{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  .wk:hover,.mq:hover .mq__logo,.wk:hover .ph,.scard:hover .ph{transform:none}
}