/* ============================================================
   LCS — pages.css
   Page-specific sections + reusable content components.
   Depends on base.css (tokens, layout primitives, type).
   ============================================================ */

/* ============================================================
   REUSABLE CONTENT COMPONENTS
   ============================================================ */

/* Servicios — banda de trabajo reciente (mockups reales) */
.work-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.work-strip__item { position: relative; display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.work-strip__item img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.work-strip__item:hover img { transform: scale(1.05); }
.work-strip__item span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.work-strip__item:hover span { opacity: 1; transform: translateY(0); }
.work-strip__all { margin-top: clamp(24px, 3.5vh, 40px); }
@media (max-width: 860px) { .work-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .work-strip { grid-template-columns: 1fr; } }

/* Typewriter title */
.js [data-typewriter] > span { visibility: hidden; }
.js h2.title { visibility: hidden; }   /* revealed as it types (JS); no-JS/reduced shows it */
.tw-caret {
  display: inline-block; width: .055em; height: .82em; margin-left: .06em;
  vertical-align: -.06em; background: var(--green);
  animation: twBlink .8s steps(1, end) infinite;
}
@keyframes twBlink { 50% { opacity: 0; } }

/* Card grid + generic feature card */
.cards { display: grid; gap: clamp(16px, 2vw, 28px); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.feature {
  position: relative; padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--cream) 3%, transparent);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.section--paper .feature { border-color: var(--line-d); background: color-mix(in srgb, var(--paper) 3%, transparent); }
.feature:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.feature__no { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--accent-text); }
.feature h3 { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.02em; line-height: 1.04; }
.feature p { font-size: clamp(14px, 1.3vw, 16px); font-weight: 300; line-height: 1.55; color: color-mix(in srgb, currentColor 78%, transparent); }
.feature ul { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.feature li { position: relative; padding-left: 16px; font-size: 14px; font-weight: 300; line-height: 1.45; color: color-mix(in srgb, currentColor 80%, transparent); }
.feature li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-size: 10px; top: 2px; }


/* FAQ (native <details>) */
.faq { border-top: 1px solid var(--line); }
.section--paper .faq { border-top-color: var(--line-d); }
.faq__item { border-bottom: 1px solid var(--line); }
.section--paper .faq__item { border-bottom-color: var(--line-d); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: clamp(20px, 2.6vh, 30px) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.9vw, 24px);
  letter-spacing: -.01em; transition: color .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary .ic { flex: none; width: 22px; height: 22px; position: relative; }
.faq__item summary .ic::before,
.faq__item summary .ic::after { content: ""; position: absolute; background: var(--accent); transition: transform .35s var(--ease); }
.faq__item summary .ic::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq__item summary .ic::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }
.faq__item[open] summary .ic::after { transform: translateX(-50%) scaleY(0); }
.faq__answer { overflow: hidden; }
.faq__answer p { padding-bottom: clamp(20px, 2.6vh, 30px); font-size: clamp(14px, 1.4vw, 17px); font-weight: 300; line-height: 1.65; color: color-mix(in srgb, currentColor 76%, transparent); max-width: 70ch; }

/* Legal / plain-text pages (terms, policies) */
.legal { display: flex; flex-direction: column; gap: clamp(30px, 4vh, 46px); max-width: 70ch; }
.legal__item h2 { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -.01em; margin-bottom: 12px; }
.legal__item p { font-size: clamp(14px, 1.4vw, 16px); font-weight: 300; line-height: 1.7; color: color-mix(in srgb, currentColor 76%, transparent); }
.legal__item p a { color: currentColor; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: color .25s; }
.legal__item p a:hover { color: var(--accent); }

/* Breadcrumb-ish back link used atop interior pages */
.kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vh, 34px); }

/* ============================================================
   HOME — split hero
   ============================================================ */
/* Dos columnas reales: el texto manda a la izquierda y la marca acompaña
   a la derecha. Sin posiciones absolutas ni desplazamientos en centímetros,
   así el titular puede crecer sin pisar el logo en ninguna pantalla.

   La sección va a sangre para que el papel llegue a los bordes; la grilla
   vive dentro de un .shell, el mismo contenedor que usan todas las demás
   secciones. Por eso el texto del hero arranca exactamente en la misma
   línea vertical que el contenido de abajo, también en pantallas anchas
   donde el .shell ya topó su ancho máximo. */
.home-hero {
  position: relative; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(116px, 15vh, 172px) clamp(64px, 9vh, 112px);
  background: var(--cream);
}
.home-hero__inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 4vw, 80px);
}
.home-hero__fill {
  position: relative; z-index: 2; color: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
}
/* Sin z-index propio a propósito: si el contenedor abriera su propio
   contexto de apilado, la fusión del video se mezclaría contra la nada
   y el fondo blanco del archivo quedaría visible como un recuadro. */
.home-hero__logo {
  justify-self: end;
  width: min(100%, clamp(300px, 40vw, 560px));
  background: var(--cream);
}
.home-hero__logo img,
.home-hero__logo video { display: block; width: 100%; height: auto; }
/* El video viene con fondo claro: la fusión lo recorta contra el papel */
.home-hero__video { mix-blend-mode: multiply; }
.hero-title { font-family: var(--display); font-weight: 700; line-height: .9; letter-spacing: -.035em; font-size: clamp(40px, 5.6vw, 88px); color: var(--ink); }
.hero-title .ln { display: block; overflow: hidden; padding-block: .015em; }
.hero-title .ln > span { display: block; }
.hero-title em { font-style: normal; color: inherit; }
.hero-mbrk { display: none; }
.hero-sub-wrap { overflow: hidden; margin-top: 1.4em; }
.hero-sub { max-width: 38ch; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.js .hero-sub { animation: heroReveal .85s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--intro-d, 0s) + .65s); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 4vh, 44px); }
.js .hero-actions { animation: heroReveal .85s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--intro-d, 0s) + .8s); }

.js .hero-title .ln > span { animation: heroReveal .85s cubic-bezier(0.22, 1, 0.36, 1) both; }
.js .hero-title .ln:nth-child(1) > span { animation-delay: calc(var(--intro-d, 0s) + .15s); }
.js .hero-title .ln:nth-child(2) > span { animation-delay: calc(var(--intro-d, 0s) + .3s); }
.js .hero-title .ln:nth-child(3) > span { animation-delay: calc(var(--intro-d, 0s) + .45s); }
@keyframes heroReveal { from { transform: translateY(110%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-title .ln > span, .hero-sub, .hero-actions { animation: none !important; }
}

/* ---------- Intro del logo (solo home) ----------
   Papel blanco, el logo se arma pieza por pieza y la cortina sube
   descubriendo el hero, que entra justo detrás (--intro-d corre sus
   retrasos). Todo en CSS: arranca en el primer cuadro sin esperar a
   ningún script, anima solo transform/opacity/clip-path y termina sola
   aunque falle el JS. Es fixed, así que no mueve el layout (CLS 0), y el
   contenido indexable queda debajo, intacto. La marca html.intro-on la
   pone el <head> solo al recargar o al llegar desde afuera. */
.intro { display: none; }
html.intro-on { --intro-d: 1.6s; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: #fff; color: var(--green);
  animation: introOut .72s cubic-bezier(.76, 0, .24, 1) 1.42s forwards;
}
.intro__mark {
  display: flex; flex-direction: column; align-items: center;
  animation: introMarkOut .45s cubic-bezier(.7, 0, .84, 0) 1.34s forwards;
}
.intro__logo { display: block; width: clamp(190px, 34vw, 360px); height: auto; overflow: visible; }
.intro__logo g { transform-box: fill-box; }
.intro__l, .intro__c { animation: introRise .75s cubic-bezier(.16, 1, .3, 1) .1s both; }
.intro__c { animation-delay: .2s; }
.intro__s { animation: introWipe .8s cubic-bezier(.65, 0, .35, 1) .3s both; }
.intro__head { transform-origin: 0% 100%; animation: introHead .75s cubic-bezier(.16, 1, .3, 1) .55s both; }
.intro__tag {
  margin-top: clamp(14px, 2.2vw, 22px);
  font: 600 clamp(10px, 1.1vw, 13px)/1 var(--body);
  color: var(--ink); letter-spacing: .48em; text-indent: .48em;
  animation: introTag .9s cubic-bezier(.16, 1, .3, 1) .62s both;
}
@keyframes introRise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes introWipe {
  from { clip-path: inset(0 0 100% 0); transform: translateY(6%); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}
@keyframes introHead {
  from { opacity: 0; transform: translate(-14%, 10%) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes introTag {
  from { opacity: 0; letter-spacing: 1.1em; text-indent: 1.1em; }
  to   { opacity: 1; }
}
@keyframes introMarkOut { to { opacity: 0; transform: translateY(-28px) scale(.97); } }
@keyframes introOut { to { transform: translateY(-100%); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.intro-on .intro { display: none; } }
@media print { .intro { display: none !important; } }

/* ============================================================
   HOME — kinetic redesign (work carousel, manifesto fill, flow)
   ============================================================ */

/* Editorial line + link row (no section labels on home) */
.home-line { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.home-line .lead { margin: 0; }

/* ---------- Manifesto (word-fill on scroll) ---------- */
.manifesto__text {
  font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.12;
  font-size: clamp(28px, 4.6vw, 66px); max-width: 19ch; margin-bottom: clamp(28px, 4vh, 48px);
}
.manifesto__text .word { display: inline-block; }
.manifesto__text em { font-style: normal; color: inherit; }

/* ---------- Por qué — el antes y el después, uno al lado del otro ----------
   La columna del problema se lee en gris y con una cruz; la de la
   solución en verde y con un tilde. La lectura es de un vistazo: no
   hace falta leer las dos para entender cuál conviene. */
.why {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(36px, 5vh, 64px);
}
.why__col {
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--line-d);
  background: color-mix(in srgb, var(--paper) 2.5%, transparent);
  transition: border-color .45s var(--ease), transform .45s var(--ease), background-color .45s var(--ease);
}
.why__col--gain {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.why__col:hover { transform: translateY(-4px); }
.why__col--pain:hover { border-color: color-mix(in srgb, var(--paper) 28%, transparent); }
.why__col--gain:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.why__head {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 1.9vw, 25px); letter-spacing: -.02em; line-height: 1.1;
  padding-bottom: clamp(16px, 2vh, 22px); margin-bottom: clamp(16px, 2vh, 22px);
  border-bottom: 1px solid var(--line-d);
}
.why__col--gain .why__head { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 26%, transparent); }

.why__list { display: flex; flex-direction: column; gap: clamp(12px, 1.6vh, 17px); }
.why__list li {
  position: relative; padding-left: 30px;
  font-size: clamp(14px, 1.35vw, 16.5px); font-weight: 300; line-height: 1.5;
  color: color-mix(in srgb, var(--paper) 74%, transparent);
}
.why__list li::before {
  content: ""; position: absolute; left: 0; top: .12em;
  width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico-cross) center / contain no-repeat;
          mask: var(--ico-cross) center / contain no-repeat;
  opacity: .45;
}
.why__col--gain .why__list li::before {
  -webkit-mask-image: var(--ico-check); mask-image: var(--ico-check);
  background: var(--accent); opacity: 1;
}
@media (max-width: 760px) { .why { grid-template-columns: 1fr; } }

/* El pie de las dudas alinea el enlace a la derecha, como el resto */
.faq-foot { margin-top: clamp(26px, 3.6vh, 40px); }

/* ---------- El estudio (interactive index) ---------- */
.studio { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.studio__title { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: .98; font-size: clamp(30px, 4.4vw, 60px); }
.studio__title em { font-style: normal; color: inherit; }
.studio__intro .lead { margin-top: 24px; max-width: 46ch; }
.studio__intro .link-arrow { margin-top: 26px; }

.studio__list { border-top: 1px solid var(--line); }
.studio__row { position: relative; padding: clamp(18px, 2.4vh, 28px) 0 clamp(18px, 2.4vh, 28px) 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: padding-left .45s var(--ease); }
.studio__row::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.studio__row:hover { padding-left: 20px; }
.studio__row:hover::after { transform: scaleY(1); }
.studio__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.studio__row h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.8vw, 38px); letter-spacing: -.02em; line-height: 1; transition: color .35s var(--ease); }
.studio__row:hover h3 { color: var(--accent); }
.studio__n { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: color-mix(in srgb, var(--cream) 38%, transparent); }
.studio__row p { margin-top: 12px; font-size: clamp(14px, 1.3vw, 16px); font-weight: 300; line-height: 1.55; color: color-mix(in srgb, var(--cream) 60%, transparent); max-width: 52ch; transition: color .35s var(--ease); }
.studio__row:hover p { color: color-mix(in srgb, var(--cream) 90%, transparent); }

/* ---------- Selected work — carrusel arrastrable (14 casos) ----------
   Sin degradés en los costados y sin loop infinito: el track arranca y
   termina. Se recorre con las flechas, arrastrando con el mouse, con
   swipe en touch o con las teclas ← →. El scroll es nativo (scroll-snap),
   así que sigue funcionando sin JS.                                     */
.wc {
  --wc-card: clamp(280px, 31vw, 430px);
  --wc-gap: clamp(16px, 1.6vw, 28px);
  position: relative;
  margin-top: clamp(28px, 4vh, 52px);
}
.wc__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.wc__viewport::-webkit-scrollbar { display: none; }
.wc__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wc.is-dragging .wc__viewport { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.wc.is-dragging .wc-card { pointer-events: none; }
.wc__track {
  display: flex; gap: var(--wc-gap);
  padding-inline: var(--gutter);
  width: max-content;
}
.wc__item { flex: 0 0 var(--wc-card); scroll-snap-align: start; }

.wc-card { display: block; -webkit-user-drag: none; }
.wc-card__shot {
  position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden;
  border: 1px solid var(--line-d);
  background: linear-gradient(160deg, #0e211b, #060c0a 72%);
  transition: border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.wc-card__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .7s var(--ease);
  user-select: none; -webkit-user-drag: none;
}
.wc-card__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: .45em;
  padding: 8px 14px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.wc-card__tag::after {
  content: ""; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
          mask: var(--ico-arrow) center / contain no-repeat;
}
.wc-card:hover .wc-card__shot,
.wc-card:focus-visible .wc-card__shot { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-d)); box-shadow: 0 26px 50px -34px rgba(17,17,17,.55); }
.wc-card:hover img,
.wc-card:focus-visible img { transform: scale(1.045); }
.wc-card:hover .wc-card__tag,
.wc-card:focus-visible .wc-card__tag { opacity: 1; transform: none; }

.wc-card__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-d);
}
.wc-card__name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(16px, 1.7vw, 21px); letter-spacing: -.01em;
  transition: color .35s var(--ease);
}
.wc-card:hover .wc-card__name { color: var(--accent); }
.wc-card__cat { font-size: 12px; color: var(--gray); white-space: nowrap; }

/* Flechas — una de cada lado, centradas sobre la altura de la captura */
.wc__arrow {
  position: absolute; z-index: 3;
  top: calc(var(--wc-card) * 11 / 16 / 2); transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--cream); color: var(--paper);
  border: 1px solid var(--line-d);
  box-shadow: 0 14px 30px -18px rgba(17,17,17,.5);
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), opacity .3s var(--ease), transform .35s var(--ease);
}
.wc__arrow::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ico-east) center / contain no-repeat;
          mask: var(--ico-east) center / contain no-repeat;
}
html:not(.js) .wc__arrow { display: none; }   /* sin JS queda el scroll nativo */
.wc__arrow--prev { left: max(12px, calc(var(--gutter) - 26px)); }
.wc__arrow--prev::after { rotate: 180deg; }
.wc__arrow--next { right: max(12px, calc(var(--gutter) - 26px)); }
.wc__arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-50%) scale(1.06); }
.wc__arrow:active { transform: translateY(-50%) scale(.96); }

/* Barra de progreso */
.wc__foot { margin-top: clamp(24px, 3.4vh, 40px); }
.wc__rail { position: relative; height: 2px; background: var(--line-d); overflow: hidden; }
.wc__bar {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: var(--accent); transform-origin: left center;
  transform: scaleX(.2); will-change: transform;
  transition: transform .18s linear;
}

/* ---------- How I work — interactive flow ---------- */
.flow { margin-top: clamp(34px, 5vh, 62px); }
.flow__rail { position: relative; height: 2px; background: var(--line); }
.flow__progress { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(1); will-change: transform; }
.flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 48px); margin-top: clamp(26px, 3.5vh, 40px); }
.flow__step { position: relative; }
.flow__step .n { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--accent-text); }
.flow__step h3 { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2.3vw, 30px); letter-spacing: -.02em; margin: 14px 0 12px; transition: transform .4s var(--ease); }
.flow__step p { font-size: 14px; font-weight: 300; line-height: 1.55; color: color-mix(in srgb, var(--cream) 52%, transparent); transition: color .4s var(--ease); max-width: 34ch; }
.flow__step:hover h3 { transform: translateX(6px); }
.flow__step:hover p { color: color-mix(in srgb, var(--cream) 90%, transparent); }

/* ---------- Studio + Flow sobre la banda verde ----------
   El verde de marca es claro: sobre él, ni el blanco puro pasa holgado el
   mínimo de contraste. Por eso acá nada se atenúa con transparencias —
   todo el texto va en blanco lleno, que es lo máximo que ese fondo permite.
   La jerarquía la marcan el tamaño y el peso, no la opacidad. */
.section--accent .studio__title em { color: #fff; }
.section--accent .studio__list { border-top-color: rgba(255,255,255,.4); }
.section--accent .studio__row { border-bottom-color: rgba(255,255,255,.4); }
.section--accent .studio__row::after { background: #fff; }
.section--accent .studio__row h3,
.section--accent .studio__row:hover h3 { color: #fff; }
.section--accent .studio__n { color: #fff; }
.section--accent .studio__row p,
.section--accent .studio__row:hover p { color: #fff; }
.section--accent .lead { color: #fff; }
.section--accent .flow__rail { background: rgba(255,255,255,.4); }
.section--accent .flow__progress { background: #fff; }
.section--accent .flow__step .n { color: #fff; }
/* Sobre negro el verde oscuro se apaga: ahí manda el verde claro */
.section--ink .flow__step .n,
.section--ink .svc-incl h3,
.section--ink .phase__col h3,
.section--ink .feature__no,
.section--ink .page-hero__num { color: var(--green-l); }
.section--accent .flow__step p { color: #fff; }

/* ---------- Flow + CTA links on light (paper) sections ---------- */
.section--paper .flow__rail { background: var(--line-d); }
.section--paper .flow__step p { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.section--paper .flow__step:hover p { color: var(--paper); }
.section--paper .cta-link { border-top-color: var(--line-d); }
.section--paper .cta-link:last-child { border-bottom-color: var(--line-d); }
.section--paper .cta-link::after { background: var(--accent); }
.section--paper .cta-link .k { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.section--paper .cta-link .v { color: var(--paper); }
.section--paper .cta-link .ar { color: var(--paper); }

/* ---------- Magnetic ---------- */
.magnetic { will-change: transform; }

/* ---------- Home CTA (rich, interactive) ---------- */
.cta { overflow: clip; }
.cta-grid { display: grid; grid-template-columns: 1.25fr 0.95fr; gap: clamp(32px, 5vw, 88px); align-items: stretch; }
.cta-title { margin: 0; font-size: clamp(40px, 6.4vw, 108px); }
.cta-title .ln > span { transform: none !important; }
.section--paper .cta-title em { color: var(--paper); }
.cta-head .lead { margin-top: clamp(20px, 3vh, 30px); }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(26px, 4vh, 40px); }

.cta-links { display: flex; flex-direction: column; justify-content: space-between; }
.cta-link {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  padding: clamp(15px, 2vh, 22px) 0; border-top: 1px solid rgba(247,246,243,.32);
  transition: padding-left .4s var(--ease);
}
.cta-link:last-child { border-bottom: 1px solid rgba(247,246,243,.32); }
.cta-link::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #fff; transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.cta-link:hover { padding-left: 16px; }
.cta-link:hover::after { transform: scaleY(1); }
.cta-link .k { flex: none; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.cta-link .v { flex: 1; text-align: right; font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.6vw, 21px); letter-spacing: -.01em; color: var(--cream); }
.cta-link .ar { flex: none; color: #fff; transition: transform .4s var(--ease); }
.cta-link:hover .ar { transform: translate(4px, -4px); }

/* ---------- Home responsive ---------- */
@media (max-width: 860px) {
  .flow__steps { grid-template-columns: 1fr 1fr; row-gap: clamp(28px, 5vh, 40px); }
  .manifesto__text { max-width: none; }
  .studio { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 860px) {
  .wc__arrow { width: 46px; height: 46px; }
  .wc__arrow::after { width: 17px; height: 17px; }
}
@media (max-width: 560px) {
  .flow__steps { grid-template-columns: 1fr; }
  .wc { --wc-card: 78vw; }
  /* En touch se pasa con el dedo: las flechas ocuparían media captura */
  .wc__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wc__viewport { scroll-behavior: auto; }
  .wc-card__shot img, .wc-card__tag { transition: none; }
  .flow__progress { transform: scaleX(1) !important; }
}

/* ============================================================
   SERVICES (servicios page)
   ============================================================ */
/* Detailed service block (servicios page) */
.svc-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 80px); padding-block: clamp(40px, 6vh, 80px); border-top: 1px solid var(--line); }
.svc-detail:first-of-type { border-top: 0; }
.section--paper .svc-detail { border-top-color: var(--line-d); }
.svc-detail__head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.4vw, 60px); letter-spacing: -.03em; line-height: .98; margin: 14px 0 18px; }
.svc-detail__head p { font-size: clamp(15px, 1.5vw, 18px); font-weight: 300; line-height: 1.55; color: color-mix(in srgb, currentColor 80%, transparent); max-width: 44ch; }
.svc-detail__head .svc-detail__cta { margin-top: 20px; }
.svc-detail__head .svc-detail__cta:first-child { margin-top: 0; }
.svc-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 36px); }
.svc-incl h3 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.svc-incl ul { display: flex; flex-direction: column; gap: 11px; }
.svc-incl li { position: relative; padding-left: 18px; font-size: 14.5px; font-weight: 300; line-height: 1.45; color: color-mix(in srgb, currentColor 82%, transparent); }
.svc-incl li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }

/* ============================================================
   PROCESS (proceso page)
   ============================================================ */
/* Expanded phase block (proceso page) */
.phase { display: grid; grid-template-columns: clamp(58px, 8vw, 104px) 1fr; gap: clamp(20px, 3vw, 48px); padding-block: clamp(26px, 4vh, 50px); border-top: 1px solid var(--line); }
.phase:first-of-type { border-top: 0; padding-top: clamp(18px, 2.5vh, 32px); }
.section--paper .phase { border-top-color: var(--line-d); }
.phase__no { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5vw, 76px); letter-spacing: -.04em; line-height: .82; color: var(--accent); }
.phase__head h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 46px); letter-spacing: -.02em; margin: 10px 0 14px; }
.phase__head p { font-size: clamp(15px, 1.5vw, 18px); font-weight: 300; line-height: 1.55; color: color-mix(in srgb, currentColor 80%, transparent); }
.phase__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 44px); margin-top: 6px; }
.phase__col h3 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.phase__col ul { display: flex; flex-direction: column; gap: 10px; }
.phase__col li { position: relative; padding-left: 18px; font-size: 14px; font-weight: 300; line-height: 1.45; color: color-mix(in srgb, currentColor 80%, transparent); }
.phase__col li::before { content: ""; position: absolute; left: 0; top: .35em; width: .85em; height: .85em; background: var(--accent); -webkit-mask: var(--ico-east) center / contain no-repeat; mask: var(--ico-east) center / contain no-repeat; }

/* Compact variant — feature rows (servicios: "Cómo se siente trabajar con LCS"),
   sin listas ni sub-columnas, no necesitan el número ni el título tan grandes. */
.phases--compact .phase { grid-template-columns: clamp(38px, 5vw, 60px) 1fr; padding-block: clamp(20px, 3vh, 36px); }
.phases--compact .phase__no { font-size: clamp(22px, 2.6vw, 36px); }
.phases--compact .phase__head h3 { font-size: clamp(19px, 2vw, 26px); margin: 4px 0 8px; }
.phases--compact .phase__head p { font-size: clamp(14px, 1.3vw, 16px); }

/* ============================================================
   WORK (project grid)
   ============================================================ */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 26px); }
.work__card { cursor: pointer; border: 1px solid var(--line-d); background: #fff; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s; }
.work__card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-d)); box-shadow: 0 26px 50px -30px rgba(17,17,17,.4); }
.work__shot { position: relative; aspect-ratio: 16/11; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 80% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%), linear-gradient(160deg, #0e211b, #060c0a 72%); }
/* Los casos que exceden los 6 primeros quedan plegados hasta que se pide
   "Ver todos los proyectos". Siguen en el DOM: el modal ya los tiene enganchados. */
.work__card--more { display: none; }
.work.is-expanded .work__card--more { display: block; animation: workCardIn .5s var(--ease) backwards; }
@keyframes workCardIn { from { opacity: 0; transform: translateY(24px); } }
.work-more { display: flex; justify-content: center; margin-top: clamp(28px, 4vh, 46px); }
@media (prefers-reduced-motion: reduce) { .work.is-expanded .work__card--more { animation: none; } }

.work__meta { padding: clamp(16px, 1.5vw, 22px); }
.work__meta h3 { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.8vw, 23px); color: var(--paper); letter-spacing: -.01em; }
.work__meta p { font-size: 12.5px; color: var(--gray); margin-top: 5px; }
.work__cta { display: inline-flex; align-items: center; gap: .45em; margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.work__cta::after, .inv__cta::after {
  content: ""; flex: none; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
          mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform .3s var(--ease);
}
.work__card:hover .work__cta::after, .inv__cta:hover::after { transform: translate(3px, -3px); }

/* ============================================================
   INVESTMENT (pricing)
   ============================================================ */
.inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 40px); }
.inv__card { position: relative; overflow: hidden; padding: 28px 24px 24px; border: 1.5px solid rgba(247,246,243,.15); display: flex; flex-direction: column; transition: border-color .4s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); }
.inv__card::before { content: ""; position: absolute; inset: 0; background: rgba(247,246,243,.03); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.inv__card:hover { transform: translateY(-8px); box-shadow: 0 28px 64px rgba(0,0,0,.5); border-color: rgba(247,246,243,.42); }
.inv__card:hover::before { opacity: 1; }
.inv__card--highlight { border-color: var(--accent); }
.inv__card--highlight::before { background: rgba(1,135,81,.07); }
.inv__card--highlight:hover { border-color: var(--accent); box-shadow: 0 28px 64px rgba(1,135,81,.2); }
.inv__tag { position: absolute; top: 18px; right: 18px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); border: 1px solid rgba(1,135,81,.5); padding: 5px 10px; border-radius: 999px; }
.inv__no { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .12em; opacity: .4; transition: opacity .35s var(--ease); }
.inv__card:hover .inv__no { opacity: .9; }
.inv__name { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -.02em; line-height: 1; margin: 14px 0 18px; transition: color .35s var(--ease); }
.inv__card--highlight .inv__name { color: var(--accent); }
.inv__card:not(.inv__card--highlight):hover .inv__name { color: var(--accent); }
.inv__price { font-size: 13px; font-weight: 400; letter-spacing: .04em; color: color-mix(in srgb, var(--cream) 65%, transparent); margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(247,246,243,.12); }
.inv__price strong { font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -.03em; color: var(--cream); display: block; margin-top: 4px; transition: transform .4s var(--ease), color .35s var(--ease); transform-origin: left; }
.inv__card:hover .inv__price strong { transform: scale(1.06); color: var(--accent); }
.inv__card--highlight .inv__price strong,
.inv__card--highlight:hover .inv__price strong { color: var(--cream); }
.inv__list { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 28px; }
.inv__list li { font-size: clamp(13px, 1.2vw, 15px); font-weight: 300; line-height: 1.4; color: color-mix(in srgb, var(--cream) 75%, transparent); padding-left: 14px; position: relative; transition: color .3s var(--ease); }
.inv__list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-size: 10px; top: 3px; transition: transform .35s var(--ease); }
.inv__card:hover .inv__list li { color: color-mix(in srgb, var(--cream) 90%, transparent); }
.inv__card:hover .inv__list li::before { transform: translateX(4px); }
.inv__note { font-size: 12px; font-weight: 300; font-style: italic; line-height: 1.5; color: color-mix(in srgb, var(--cream) 55%, transparent); margin: -16px 0 22px; }
.inv__cta { display: inline-flex; align-items: center; gap: .45em; align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); border-bottom: 1px solid rgba(247,246,243,.3); padding-bottom: 3px; transition: color .25s, border-color .25s, letter-spacing .3s var(--ease); }
.inv__cta:hover { color: var(--accent); border-color: var(--accent); letter-spacing: .2em; }

/* ---- Inv cards on light (paper) background ---- */
.section--paper .inv__card { border-color: var(--line-d); }
.section--paper .inv__card::before { background: rgba(17,17,17,.03); }
.section--paper .inv__card:hover { border-color: rgba(17,17,17,.42); box-shadow: 0 24px 56px rgba(0,0,0,.14); }
.section--paper .inv__card--highlight,
.section--paper .inv__card--highlight:hover { border-color: var(--accent); }
.section--paper .inv__card--highlight:hover { box-shadow: 0 24px 56px rgba(1,135,81,.18); }
.section--paper .inv__price { color: color-mix(in srgb, var(--paper) 65%, transparent); border-bottom-color: var(--line-d); }
.section--paper .inv__price strong,
.section--paper .inv__card--highlight .inv__price strong,
.section--paper .inv__card--highlight:hover .inv__price strong { color: var(--paper); }
.section--paper .inv__list li { color: color-mix(in srgb, var(--paper) 75%, transparent); }
.section--paper .inv__card:hover .inv__list li { color: color-mix(in srgb, var(--paper) 92%, transparent); }
.section--paper .inv__note { color: color-mix(in srgb, var(--paper) 68%, transparent); }
/* Aviso de que los tres precios son estimativos: cierra la grilla, no una tarjeta */
.inv__aviso {
  max-width: 62ch; margin: clamp(26px, 3.5vh, 40px) auto 0;
  font-size: clamp(13px, 1.15vw, 15px); font-weight: 300; line-height: 1.6; text-align: center;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}
.section--paper .inv__aviso { color: color-mix(in srgb, var(--paper) 72%, transparent); }

.section--paper .inv__cta { color: var(--paper); border-bottom-color: rgba(17,17,17,.28); }
.section--paper .inv__cta:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Add-ons grid */
.addon { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.addon:last-child { border-bottom: 1px solid var(--line); }
.addon__name { font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.8vw, 22px); letter-spacing: -.01em; }
.addon__name span { display: block; font-family: var(--body); font-weight: 300; font-size: 13px; color: color-mix(in srgb, currentColor 62%, transparent); margin-top: 4px; max-width: 48ch; }
.addon__price { font-family: var(--display); font-weight: 600; font-size: clamp(15px, 1.6vw, 20px); color: var(--accent); white-space: nowrap; }

/* ============================================================
   CONTACT (page) — canales directos + info
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(32px, 5vw, 88px); align-items: start; }

.channels { display: flex; flex-direction: column; }
.channels__title { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; line-height: 1; }
.channels__note { margin-top: 12px; max-width: 46ch; font-size: clamp(13.5px, 1.3vw, 15px); font-weight: 300; line-height: 1.6; color: color-mix(in srgb, var(--paper) 58%, transparent); }
.channels__list { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(24px, 3.4vh, 38px); }

/* Tarjeta de canal — toda el área es clickeable (el link se estira) */
.ch { position: relative; }
.ch__link {
  position: relative; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(16px, 1.9vw, 22px) clamp(16px, 2vw, 24px);
  border: 1.5px solid var(--line-d); background: color-mix(in srgb, var(--paper) 2.5%, transparent);
  overflow: hidden; isolation: isolate;
  transition: transform .45s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
}
/* Barra de acento que entra desde la izquierda */
.ch__link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: -1;
  background: var(--accent); transform: scaleY(0); transform-origin: center;
  transition: transform .45s var(--ease);
}
/* Halo suave que se enciende al pasar el mouse */
.ch__link::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  transition: opacity .45s var(--ease);
}
.ch__link:hover,
.ch__link:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-d));
  box-shadow: 0 24px 44px -32px rgba(17,17,17,.45);
}
.ch__link:hover::before, .ch__link:focus-visible::before { transform: scaleY(1); }
.ch__link:hover::after,  .ch__link:focus-visible::after  { opacity: 1; }

.ch__ico {
  flex: none; width: clamp(44px, 4vw, 52px); height: clamp(44px, 4vw, 52px); border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-d);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease);
}
.ch__ico::before {
  content: ""; width: 21px; height: 21px; background: var(--paper);
  -webkit-mask: var(--ico-mail) center / contain no-repeat;
          mask: var(--ico-mail) center / contain no-repeat;
  transition: background-color .35s var(--ease);
}
.ch--wa .ch__ico::before { -webkit-mask-image: var(--ico-whatsapp); mask-image: var(--ico-whatsapp); }
.ch--ig .ch__ico::before { -webkit-mask-image: var(--ico-instagram); mask-image: var(--ico-instagram); }
.ch__link:hover .ch__ico,
.ch__link:focus-visible .ch__ico { background: var(--accent); border-color: var(--accent); transform: rotate(-6deg) scale(1.04); }
.ch__link:hover .ch__ico::before,
.ch__link:focus-visible .ch__ico::before { background: #fff; }

.ch__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: transform .45s var(--ease); }
.ch__link:hover .ch__body, .ch__link:focus-visible .ch__body { transform: translateX(4px); }
.ch__k { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.ch__v {
  font-family: var(--display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(16px, 1.55vw, 20px); color: var(--paper);
  overflow-wrap: anywhere; transition: color .35s var(--ease);
}
.ch__h { font-size: 12.5px; font-weight: 400; line-height: 1.45; color: color-mix(in srgb, var(--paper) 68%, transparent); }

.ch__ar {
  flex: none; margin-left: auto; position: relative;
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-d);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease);
}
.ch__ar::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: var(--paper);
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
          mask: var(--ico-arrow) center / contain no-repeat;
  transition: background-color .35s var(--ease);
}
.ch__link:hover .ch__ar,
.ch__link:focus-visible .ch__ar { background: var(--accent); border-color: var(--accent); transform: translateX(3px) translateY(-3px); }
.ch__link:hover .ch__ar::after,
.ch__link:focus-visible .ch__ar::after { background: #fff; }

/* Copiar email — flota sobre el link, a la izquierda de la flecha */
.ch--mail .ch__body { padding-right: 104px; }
.ch__copy {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  right: calc(clamp(16px, 2vw, 24px) + 36px + 14px);
  padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--line-d);
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 62%, transparent); background: var(--cream); white-space: nowrap;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.ch__copy:hover { color: var(--paper); border-color: color-mix(in srgb, var(--accent) 55%, var(--line-d)); }
.ch__copy.is-done { color: #fff; background: var(--accent); border-color: var(--accent); }

@media (max-width: 620px) {
  /* El dato pasa abajo: arriba quedan el icono, el copiar y la flecha */
  .ch__link { flex-wrap: wrap; row-gap: 12px; }
  .ch__body { order: 3; flex-basis: 100%; }
  .ch__link:hover .ch__body { transform: none; }
  .ch--mail .ch__body { padding-right: 0; }
  /* El botón se ancla al centro del icono, no al de la tarjeta */
  .ch__copy { top: calc(clamp(16px, 1.9vw, 22px) + clamp(44px, 4vw, 52px) / 2); }
}

.contact-aside { display: flex; flex-direction: column; gap: clamp(22px, 3vh, 36px); }
.contact-aside__rows { display: grid; gap: 1px; background: rgba(247,246,243,.16); border: 1px solid rgba(247,246,243,.16); }
.contact-aside__row { background: var(--ink); display: flex; flex-direction: column; gap: 5px; padding: clamp(16px, 1.8vw, 22px); transition: background .3s var(--ease); }
.contact-aside__row:hover { background: #141414; }
.contact-aside__row .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.contact-aside__row .v { font-size: clamp(15px, 1.5vw, 18px); font-weight: 300; }

/* ---- Aside de contacto sobre fondo claro ---- */
.section--paper .contact-aside__rows { background: var(--line-d); border-color: var(--line-d); }
.section--paper .contact-aside__row { background: var(--cream); }
.section--paper .contact-aside__row:hover { background: #ece6d9; }

/* ============================================================
   CASE-STUDY MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.modal.open { visibility: visible; pointer-events: auto; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10,10,10,.75); backdrop-filter: blur(8px); opacity: 0; transition: opacity .45s var(--ease); }
.modal.open .modal__scrim { opacity: 1; }
.modal__panel { position: absolute; inset: 2cm 4cm; background: var(--cream); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; transform: translateY(5%) scale(.98); opacity: 0; transition: transform .65s var(--ease), opacity .5s var(--ease); border: 2px solid var(--accent); border-radius: 18px; }
.modal.open .modal__panel { transform: none; opacity: 1; }
.modal__close { position: fixed; top: calc(2cm + clamp(14px, 1.6vw, 22px)); right: calc(4cm + clamp(14px, 1.6vw, 22px)); z-index: 210; display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 60%, transparent); padding: 10px 18px; border: 1px solid var(--line-d); background: color-mix(in srgb, var(--cream) 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .25s, border-color .25s, background .25s; }
.modal__close:hover { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--cream)); }
.cs-inner { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vh, 80px) var(--gutter) clamp(80px, 10vh, 140px); }
.cs-cat { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.cs-title { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: .95; font-size: clamp(36px, 6vw, 88px); margin-bottom: clamp(36px, 5vh, 60px); }
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-d); margin-bottom: clamp(44px, 6vh, 72px); }
.cs-meta__cell { padding: 22px 24px; border-right: 1px solid var(--line-d); }
.cs-meta__cell:last-child { border-right: none; }
.cs-meta__cell .k { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.cs-meta__cell .v { font-size: 14px; font-weight: 400; line-height: 1.4; }
.cs-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-bottom: clamp(44px, 6vh, 72px); }
.cs-block { margin-bottom: 36px; }
.cs-block:last-child { margin-bottom: 0; }
.cs-block h4 { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(1,135,81,.35); }
.cs-block p { font-size: clamp(14px, 1.4vw, 16px); font-weight: 400; line-height: 1.7; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.cs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); margin-bottom: clamp(44px, 6vh, 72px); }
.cs-step { padding-top: 16px; border-top: 2px solid var(--accent); transition: border-color .3s; }
.cs-step:hover { border-color: var(--ink); }
.cs-step b { display: block; font-family: var(--display); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.cs-step span { font-size: 12px; color: color-mix(in srgb, var(--ink) 60%, transparent); line-height: 1.45; }
.cs-stack { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: 9px 18px; border: 1px solid var(--line-d); color: color-mix(in srgb, var(--ink) 70%, transparent); transition: border-color .25s, color .25s; }
.cs-tag:hover { border-color: var(--accent); color: var(--ink); }
@keyframes csIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.modal.open .cs-inner > :nth-child(1) { animation: csIn .5s var(--ease) .35s both; }
.modal.open .cs-inner > :nth-child(2) { animation: csIn .5s var(--ease) .43s both; }
.modal.open .cs-inner > :nth-child(3) { animation: csIn .5s var(--ease) .51s both; }
.modal.open .cs-inner > :nth-child(4) { animation: csIn .5s var(--ease) .59s both; }
.modal.open .cs-inner > :nth-child(5) { animation: csIn .5s var(--ease) .67s both; }
.modal.open .cs-inner > :nth-child(6) { animation: csIn .5s var(--ease) .75s both; }
.modal.open .cs-inner > :nth-child(7) { animation: csIn .5s var(--ease) .83s both; }

/* ============================================================
   WORK CARD — imagen hero
   ============================================================ */
.work__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s var(--ease); }
.work__card:hover .work__img { transform: scale(1.045); }

/* ============================================================
   MODAL PREVIEW — MINI BROWSER SCROLLEABLE
   ============================================================ */
.modal-preview {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-d);
  margin-bottom: 2.25rem;
  box-shadow: 0 16px 50px rgba(10,10,10,.18);
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.modal-preview:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-d));
  box-shadow: 0 22px 64px rgba(10,10,10,.24);
}
.modal-preview__bar {
  background: #e7e1d3;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--line-d);
}
.modal-preview__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.modal-preview__dot--red    { background: #ff5f57; }
.modal-preview__dot--yellow { background: #febc2e; }
.modal-preview__dot--green  { background: #28c840; }
.modal-preview__url {
  flex: 1;
  background: #f4f1e9;
  border-radius: 4px;
  padding: 4px 11px;
  font-size: 10px;
  font-family: monospace;
  color: rgba(10,10,10,.5);
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-preview__screen {
  height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f4f1e9;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,10,10,.22) transparent;
}
.modal-preview__screen::-webkit-scrollbar { width: 5px; }
.modal-preview__screen::-webkit-scrollbar-track { background: transparent; }
.modal-preview__screen::-webkit-scrollbar-thumb { background: rgba(10,10,10,.22); border-radius: 2px; }
.modal-preview__screen::-webkit-scrollbar-thumb:hover { background: rgba(10,10,10,.4); }
.modal-preview__screen img { width: 100%; display: block; height: auto; pointer-events: none; user-select: none; }
/* Placeholder: el screen queda vacío si la imagen no existe (onerror la quita) */
.modal-preview__screen:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ece6d8 0%, color-mix(in srgb, var(--accent) 12%, transparent) 100%);
}
.modal-preview__screen:empty::after {
  content: attr(data-empty);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(10,10,10,.4);
}
.modal-preview__hint {
  text-align: center;
  padding: .55rem;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  background: #e7e1d3;
  border-top: 1px solid var(--line-d);
}
@media (max-width: 768px) {
  .modal-preview__screen { height: 380px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .work { grid-template-columns: 1fr 1fr; }
  .inv { grid-template-columns: 1fr; }
  .phase__no { font-size: clamp(34px, 7vw, 58px); }
}
@media (max-width: 860px) {
  .hero-mbrk { display: inline; }
  /* En vertical la marca va arriba, chica, y el mensaje debajo entero */
  .home-hero {
    min-height: auto;
    padding-block: clamp(104px, 15vh, 140px) clamp(56px, 9vh, 92px);
  }
  .home-hero__inner {
    position: relative;
    display: block;
  }
  /* El logo flota a la derecha, un poco por debajo del título: cae en el
     hueco que dejan las líneas cortas del título, no sobre el bloque de
     texto entero, así queda integrado y no tapa nada. */
  .hero-title { font-size: clamp(48px, 9.6vw, 66px); }
  .home-hero__logo {
    position: absolute;
    top: clamp(88px, 14vh, 148px);
    right: clamp(28px, 10vw, 68px);
    width: clamp(112px, 33vw, 168px);
  }
  /* El bloque de texto + botones baja para no pisar el logo: queda el
     título arriba, el logo flotando a la derecha, y debajo el texto. */
  .home-hero__fill .hero-sub-wrap { margin-top: clamp(92px, 23vw, 150px); }
  .hero-actions { margin-top: clamp(26px, 4vh, 40px); }
  .svc-detail, .svc-detail__grid, .phase, .phase__cols, .contact-grid { grid-template-columns: 1fr; }
  .page-hero + .section:has(.svc-detail) { padding-top: clamp(20px, 3vh, 36px); }
  .svc-detail:first-of-type { padding-top: clamp(16px, 2.5vh, 28px); }
  .work { grid-template-columns: 1fr 1fr; }
  .modal__panel { inset: 0.75cm; border-radius: 14px; }
  .modal__close { top: calc(0.75cm + 14px); right: calc(0.75cm + 14px); }
  .cs-title { font-size: clamp(28px, 7vw, 56px); }
  .cs-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .work { grid-template-columns: 1fr; }
  .cards--3 { grid-template-columns: 1fr; }
  .cards--4 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-body, .cs-steps { grid-template-columns: 1fr; }
  .modal__panel { inset: 0; border-radius: 0; border-left: none; border-right: none; }
  .modal__close { top: 14px; right: 14px; padding: 8px 14px; font-size: 10px; }
  .cs-inner { padding-inline: clamp(16px, 4vw, 32px); }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .cta-grid { gap: clamp(28px, 5vw, 48px); }
  .cta-actions { flex-direction: column; align-items: flex-start; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .contact-aside__rows { grid-template-columns: 1fr; }
  .cs-meta__cell { padding: 16px 18px; }
  .modal-preview__screen { height: 340px; }
}
@media (max-width: 480px) {
  .cs-meta { grid-template-columns: 1fr; }
  .cs-meta__cell { border-right: none; border-bottom: 1px solid var(--line-d); }
  .cs-meta__cell:last-child { border-bottom: none; }
  .modal-preview__screen { height: 300px; }
  .modal-preview__bar { padding: 8px 10px; }
  .modal-preview__url { font-size: 9px; padding: 3px 8px; }
  .modal-preview__hint { font-size: .54rem; }
}

/* ============================================================
   BRANDING — el segundo camino del estudio (/branding/…)
   Reutiliza los bloques de la home de diseño web (why, studio,
   carrusel, flow, faq, cta). Acá vive solo lo propio: el hero
   oscuro con la construcción del isotipo y la página del caso.
   ============================================================ */

/* ---------- Hero: el isotipo se construye a la vista ---------- */
.brand-hero {
  position: relative; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(116px, 15vh, 172px) clamp(64px, 9vh, 112px);
  background: var(--ink); color: var(--cream);
}
.brand-hero__inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 96px);
}
.brand-hero__kicker {
  display: flex; align-items: center; gap: 10px; margin-bottom: clamp(18px, 3vh, 30px);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}
.brand-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-l); }
.brand-hero .hero-title { color: var(--cream); }
.brand-hero .hero-sub { color: color-mix(in srgb, var(--cream) 72%, transparent); }
.brand-hero .btn--solid:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.brand-hero .btn--ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

.brand-hero__art { position: relative; justify-self: end; width: min(100%, 560px); }
.cx { display: block; width: 100%; height: auto; overflow: visible; }
.cx line, .cx circle { fill: none; vector-effect: non-scaling-stroke; }
.cx__grid line { stroke: color-mix(in srgb, var(--cream) 9%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.cx__guides circle, .cx__guides line { stroke: color-mix(in srgb, var(--green-l) 55%, transparent); stroke-width: 1; }
.cx__mark path {
  fill: var(--green); fill-opacity: 0;
  stroke: var(--green-l); stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.cx__marks circle { fill: var(--cream); stroke: none; }
.brand-hero__spec {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: clamp(14px, 2.4vh, 26px);
  font-family: var(--display); font-size: 12px; letter-spacing: .06em;
  color: color-mix(in srgb, var(--cream) 58%, transparent);
}
.brand-hero__spec li { display: flex; align-items: center; gap: 8px; }
.brand-hero__spec i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(247,246,243,.22); }

/* Coreografía (todo CSS, arranca sin esperar scripts):
   grilla, círculos guía, contorno, relleno y las guías se apagan. */
.cx__grid line { opacity: 0; animation: cxFade .9s var(--ease) forwards; animation-delay: .15s; }
.cx__grid line:nth-child(n+5) { animation-delay: .3s; }
.cx__guides circle, .cx__guides line {
  stroke-dasharray: 760; stroke-dashoffset: 760;
  animation: cxDraw 1.5s cubic-bezier(.65, 0, .35, 1) forwards, cxDim 1.2s var(--ease) 3.4s forwards;
}
.cx__guides circle:nth-child(1) { animation-delay: .35s, 3.4s; }
.cx__guides circle:nth-child(2) { animation-delay: .55s, 3.4s; }
.cx__guides circle:nth-child(3) { animation-delay: .7s, 3.4s; }
.cx__guides circle:nth-child(4) { animation-delay: .85s, 3.4s; }
.cx__guides line              { animation-delay: 1s, 3.4s; }
.cx__mark path { animation: cxStroke 1.9s cubic-bezier(.65, 0, .35, 1) 1.1s forwards, cxFill 1s var(--ease) 2.7s forwards; }
.cx__mark path:nth-child(2) { animation-delay: 1.35s, 2.85s; }
.cx__marks circle { opacity: 0; scale: 0; transform-box: fill-box; transform-origin: center; animation: cxPop .5s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: 1.2s; }
.cx__marks circle:nth-child(n+4) { animation-delay: 1.45s; }
.brand-hero__spec li { opacity: 0; animation: brandSpec .7s var(--ease) forwards; animation-delay: 3s; }
.brand-hero__spec li:nth-child(2) { animation-delay: 3.1s; }
.brand-hero__spec li:nth-child(3) { animation-delay: 3.2s; }
@keyframes cxFade   { to { opacity: 1; } }
@keyframes cxDraw   { to { stroke-dashoffset: 0; } }
@keyframes cxDim    { to { opacity: .35; } }
@keyframes cxStroke { to { stroke-dashoffset: 0; } }
@keyframes cxFill   { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes cxPop    { to { opacity: 1; scale: 1; } }
@keyframes brandSpec { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .cx *, .brand-hero__spec li { animation: none !important; opacity: 1 !important; scale: 1 !important; stroke-dashoffset: 0 !important; }
  .cx__mark path { fill-opacity: 1; stroke-opacity: 0; }
  .cx__guides { opacity: .35; }
}

/* ---------- Carrusel con páginas del brandbook ---------- */
.wc-card__shot--bb { background: #f2ece6; }
.wc-card__shot--bb img { object-position: center; }

/* ---------- Página del caso ---------- */
.bcase__head {
  display: grid; align-items: center; gap: clamp(28px, 4vw, 72px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
}
.bcase__cover, .bcase__shot {
  overflow: hidden; border-radius: clamp(10px, 1vw, 16px);
  border: 1px solid var(--line-d); background: #f2ece6;
}
.bcase__cover img, .bcase__shot img { width: 100%; height: auto; transition: transform .8s var(--ease); }
.bcase__kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.bcase__title {
  margin: 10px 0 18px;
  font-family: var(--display); font-weight: 700; letter-spacing: -.04em; line-height: .9;
  font-size: clamp(48px, 6vw, 92px); color: var(--ink);
}
.bcase__meta { display: grid; gap: 14px; margin-top: clamp(22px, 3vh, 34px); padding-top: 22px; border-top: 1px solid var(--line-d); }
.bcase__meta div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; font-size: 14px; line-height: 1.45; }
.bcase__meta dt { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); padding-top: 2px; }
.bcase__meta dd { color: var(--ink); }
.bcase__story {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px);
  margin-block: clamp(56px, 9vh, 110px);
  padding-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--line-d);
}
.bcase__story h3 { font-family: var(--display); font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-bottom: 12px; }
.bcase__story p { font-size: 15px; line-height: 1.62; color: color-mix(in srgb, var(--ink) 74%, transparent); }
.bcase__story em { font-style: normal; font-weight: 600; color: var(--ink); }
.bcase__group {
  display: flex; align-items: center; gap: 16px;
  margin: clamp(40px, 6vh, 72px) 0 clamp(18px, 3vh, 28px);
  font-family: var(--display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.03em; color: var(--ink);
}
.bcase__group::after { content: ""; flex: 1; height: 1px; background: var(--line-d); }
.bcase__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.bcase__fig { scroll-margin-top: clamp(80px, 11vh, 110px); }
.bcase__fig figcaption {
  margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.bcase__fig:hover .bcase__shot img { transform: scale(1.03); }
.bcase__fig:target .bcase__shot { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.bcase__next {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px;
  margin-top: clamp(56px, 9vh, 110px); padding-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--line-d);
}
.bcase__next .lead { max-width: 44ch; color: var(--ink); }

@media (max-width: 960px) {
  .brand-hero__inner { grid-template-columns: 1fr; }
  .brand-hero__art { justify-self: center; width: min(86%, 420px); order: -1; }
  .bcase__head { grid-template-columns: 1fr; }
  .bcase__story { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .brand-hero { padding-top: 104px; }
  .bcase__grid { grid-template-columns: 1fr; }
  .bcase__meta div { grid-template-columns: 1fr; gap: 4px; }
}