@font-face {
  font-family: "Romana";
  src: url("assets/fonts/romana-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* --- paleta ODD ---
     leida a ojo de la muestra: si los hex no son exactos, se corrigen
     aqui y se propagan a todo el sitio */
  --odd-violet: #4a1ca8;
  --odd-blue:   #1b26ee;
  --odd-teal:   #56bca6;
  --odd-acid:   #e9fa5a;
  --odd-coral:  #e8655c;
  --odd-orange: #ee5027;
  --odd-amber:  #f2b44e;
  /* tinte palido de --odd-teal para el fondo de admisiones: sale de la
     paleta y no es un verde suelto inventado aparte */
  --odd-mint:   #cfe3d7;

  --bg: #e9f1f7;
  --ink: #f2efe9;
  --muted: #6c6862;
  --accent: var(--odd-acid);

  /* el PNG corta en el torso y la gorra toca su borde superior: no trae aire
     propio. El aire de arriba sale de ocupar solo el 76% del alto, anclado
     abajo -> la gorra cae a ~1/4 de la pantalla. 1.777 = 1100/619 del PNG. */
  --stage-w: min(100vw, calc(76svh * 1.777));
}

html,
body {
  margin: 0;
  height: 100%;
}

/* El nav va fijo, asi que un salto de ancla deja el arranque de la
   seccion DEBAJO de los enlaces. scroll-margin-top lo compensa: es la
   propiedad que existe para esto, y no hace falta ni offset en JS ni un
   div espaciador invisible. */
main > section[id],
footer[id] {
  scroll-margin-top: clamp(4.5rem, 9vh, 6rem);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* clip y no hidden: hidden crea un contenedor de scroll y rompe
     position:sticky en los descendientes */
  overflow-x: clip;
  cursor: crosshair;
}

/* --- solo para lectores y buscadores ---
   El sitio apenas tiene encabezados visibles porque su jerarquia es
   visual, no tipografica. Estos existen en el codigo, no en la pagina.

   Se saca de pantalla con clip, NO con display:none ni visibility:
   hidden: eso los sacaria tambien del arbol de accesibilidad y del
   indice, que es justo lo contrario de lo que se busca. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- grain overlay: keeps the black from feeling like a dead void --- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 9;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(1) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 1%); }
}

/* --- nav --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  /* sin la marca a la izquierda ya no hay nada que repartir: los enlaces
     se anclan a la derecha */
  justify-content: flex-end;
  padding: 1.6rem clamp(1.2rem, 4vw, 3rem);
  mix-blend-mode: difference;
}

/* enlaces + redes viajan juntos, pegados a la esquina superior derecha */
.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3.5vw, 3rem);
}

.nav__links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.4rem);
}

.social {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: block;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 220ms ease;
}

.social a:hover {
  opacity: 1;
}

.social svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.nav__links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  opacity: 0.72;
  transition: opacity 220ms ease;
}

.nav__links a:hover {
  opacity: 1;
}

/* --- hero --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* --- frase de fondo ---
   dos capas identicas y superpuestas: el relleno va detras del David (z-index 1)
   y el contorno delante (z-index 3). Como el contorno tambien es blanco, sobre
   el relleno no se nota; solo aparece donde el marmol lo pisa. */
.phrase {
  position: absolute;
  left: 0;
  right: 0;
  /* anclada al David, no al viewport: cae siempre justo encima de los ojos.
     El alto del stage es --stage-w / 1.777 y esta pegado abajo, asi que
     100% - 0.7 * alto = 30% desde la coronilla. */
  top: calc(100% - (var(--stage-w) / 1.777) * 0.7);
  transform: translateY(-50%);
  font-family: "Romana", Georgia, serif;
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  /* el tamano lo calcula el JS para que cada frase llene el ancho */
  font-size: 100px;
}

.phrase--fill {
  z-index: 1;
  color: #fff;
}

.phrase--line {
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: 1.6px #fff;
}

/* entrada y salida: revelado vertical + un empujon corto */
.phrase__word {
  display: inline-block;
  clip-path: inset(-0.25em 0 100% 0);
  transform: translateY(0.14em);
  opacity: 0;
}

.phrase__word.is-in {
  animation: phrase-in 760ms cubic-bezier(0.16, 0.9, 0.25, 1) forwards;
}

.phrase__word.is-out {
  animation: phrase-out 560ms cubic-bezier(0.6, 0, 0.85, 0.3) forwards;
}

@keyframes phrase-in {
  from {
    clip-path: inset(-0.25em 0 100% 0);
    transform: translateY(0.14em);
    opacity: 0;
  }
  to {
    clip-path: inset(-0.25em 0 -0.25em 0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes phrase-out {
  from {
    clip-path: inset(-0.25em 0 -0.25em 0);
    transform: translateY(0);
    opacity: 1;
  }
  to {
    clip-path: inset(100% 0 -0.25em 0);
    transform: translateY(-0.14em);
    opacity: 0;
  }
}

/* --- statue stage --- */
.stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  width: var(--stage-w);
  aspect-ratio: 1100 / 619;
  /* el centrado lo pone parallax.js con xPercent, que GSAP guarda aparte
     de la y del desplazamiento. Aqui queda como respaldo por si el JS
     no llega a correr. */
  transform: translateX(-50%);
  will-change: transform;
}

.stage__inner {
  position: absolute;
  inset: 0;
  will-change: transform;
  /* el giro pivota sobre el suelo: desde el centro levantaba una esquina
     inferior y el David se despegaba por un lado */
  transform-origin: bottom center;
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
  object-position: center bottom;
}

/* --- logo ---
   va encima del hoodie y NO se mueve con el David: es la marca, no debe
   temblar cada vez que la cabeza voltea. */
.logo {
  position: absolute;
  z-index: 4; /* por encima del contorno de la frase */
  right: clamp(1.2rem, 3.5vw, 3.5rem);
  bottom: clamp(1.5rem, 6vh, 5rem);
  width: clamp(170px, 23vw, 400px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ==================================================================
   Seccion 2 — fondo blanco
================================================================== */
.think {
  position: relative;
  z-index: 5;
  background: #fff;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(6rem, 14vh, 11rem) clamp(1.4rem, 6vw, 7rem);
}

.think__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* --- titular que se pinta al hacer scroll --- */
.think__lead {
  margin: 0;
  max-width: 20ch;
  font-family: "Romana", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  /* color base: gris. El JS enciende palabra por palabra */
  color: #d2d2d2;
}

.think__word {
  display: inline-block;
  color: #d2d2d2;
  transition: color 260ms ease;
}

.think__word.is-lit {
  color: #0a0a0a;
}

/* --- cuerpo --- */
.think__body {
  margin: clamp(1.8rem, 4vh, 3rem) 0 0;
  max-width: 46ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  line-height: 1.62;
  color: #55575c;
}

/* --- boton --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding: 0.95em 1.6em;
  border: 1px solid #0a0a0a;
  border-radius: 999px;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  letter-spacing: 0.01em;
  color: #0a0a0a;
  text-decoration: none;
  background: transparent;
  transition: background-color 260ms ease, color 260ms ease;
}

.btn__bracket {
  opacity: 0.45;
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.btn:hover {
  background: #0a0a0a;
  color: #fff;
}

/* los corchetes se abren al pasar por encima */
.btn:hover .btn__bracket:first-child {
  transform: translateX(-0.22em);
}

.btn:hover .btn__bracket:last-child {
  transform: translateX(0.22em);
}

/* --- enlace de abajo --- */
.think__more {
  display: block;
  margin-top: clamp(3.5rem, 9vh, 6rem);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #8b8d92;
  text-decoration: none;
  transition: color 260ms ease;
}

.think__more:hover {
  color: #0a0a0a;
}

/* ==================================================================
   Seccion 4 — campo cinetico

   Regla de rendimiento: nada anima top/left. La posicion base se pinta
   una vez con left/top en % y GSAP solo toca transform y opacity.
================================================================== */
.kt-section {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100svh;
  background: #000;
  overflow: hidden;
}

.kt {
  position: absolute;
  inset: 0;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  color: #f4f2ee;

  --kt-acid: var(--odd-acid);
}

/* --- composicion grande --- */
.kt-hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88vw;
  text-align: center;
  font-size: 12.5vw;
  line-height: 0.86;
  letter-spacing: -0.035em;
  /* para el giro sobre el eje X en una de las salidas */
  perspective: 900px;
}

.kt-line {
  display: block;
  white-space: nowrap;
}

/* exterior: viaja, gira y escala. El overflow recorta al interior
   (revelado enmascarado) y la holgura del padding evita que se coma
   las colas de las letras o el desborde del giro. */
.kt-w {
  display: inline-block;
  overflow: hidden;
  /* el padding da holgura a la mascara para que no recorte las colas ni
     el desborde del giro; el margen negativo lo cancela para que no se
     sume al espacio entre palabras, que viene del texto */
  padding: 0.14em 0.05em;
  margin: -0.14em -0.05em;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.kt-wi {
  display: inline-block;
  will-change: transform;
}

.kt-w.is-accent {
  color: var(--kt-acid);
}

@media (max-width: 720px) {
  .kt-hero {
    width: 92vw;
    font-size: 17vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kt-w,
  .kt-wi {
    will-change: auto;
  }
}

@media (max-width: 720px) {
  :root {
    /* el PNG es un encuadre 16:9: en vertical hay que recortar los hombros
       por los lados para que la figura no quede diminuta al fondo */
    --stage-w: min(200vw, calc(64svh * 1.777));
  }

  /* logo y caption comparten la línea de abajo: uno a cada extremo */
  .logo {
    width: 38vw;
    right: 1.1rem;
    bottom: 1.2rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ==================================================================
   Seccion 5 — servicios: el lienzo

   Las tarjetas se colocan con left/top/width en % una sola vez; a partir
   de ahi solo se escribe transform y opacity. El arrastre usa un
   quickSetter sobre x/y, que GSAP guarda aparte del resto del transform.
================================================================== */
.sv-section {
  position: relative;
  z-index: 5;
  background: #fbfaf7;
  color: #111;
  /* el lienzo mide 100svh y recorta, asi que el aire bajo el boton
     tiene que salir de la seccion: dentro no cabe */
  padding-bottom: clamp(4rem, 11vh, 9rem);
}

.cv {
  position: relative;
  font-family: "Poppins", system-ui, sans-serif;
  /* el lienzo se conduce con el raton: el crosshair global estorba */
  cursor: default;
}

/* --- 1. intro --- */
.cv-lead {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(6rem, 12vh, 9rem) clamp(1.4rem, 5vw, 5rem);
}

.cv-lead__in {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.cv-head {
  margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
}

.cv-head__line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0;
  margin: -0.08em 0;
}

.cv-head__in {
  display: inline-block;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.cv-lead__copy {
  margin-top: clamp(2rem, 5vh, 3.4rem);
  max-width: 58ch;
  display: grid;
  gap: 1.1rem;
}

.cv-lead__p {
  margin: 0;
  font-weight: 300;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  line-height: 1.62;
  color: #56544e;
}

/* las dos frases bisagra pesan mas que el resto */
.cv-lead__p.is-key {
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  color: #111;
}

/* --- 2. lienzo --- */
.cv-stage {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  margin: 0 clamp(1.2rem, 4vw, 4rem);
  padding: clamp(4.5rem, 9vh, 6.5rem) 0 clamp(3.5rem, 7vh, 5rem);
}

/* --- titular que se escribe --- */
.cv-type {
  display: block;
  pointer-events: none;
  white-space: nowrap;
}

.cv-type__box {
  position: relative;
  display: inline-block;
  padding: 0.32em 0.42em;
}

.cv-type__text {
  font-family: "DM Mono", ui-monospace, monospace;
  text-transform: uppercase;
  font-size: clamp(0.62rem, 0.95vw, 0.8rem);
  letter-spacing: 0.24em;
  line-height: 1;
}

/* el cursor de escritura */
.cv-type__caret {
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  margin-left: 0.06em;
  background: #111;
  vertical-align: -0.16em;
}

/* marco de seleccion del titular */
.cv-type__frame {
  position: absolute;
  inset: 0;
  border: 1px solid #111;
  opacity: 0;
}

/* --- manijas: el motivo que dice "esto es un editor" --- */
.cv-handles {
  position: absolute;
  inset: 0;
}

.cv-h {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 1px solid #111;
}

.cv-h--nw { left: -4px; top: -4px; }
.cv-h--n  { left: calc(50% - 3.5px); top: -4px; }
.cv-h--ne { right: -4px; top: -4px; }
.cv-h--w  { left: -4px; top: calc(50% - 3.5px); }
.cv-h--e  { right: -4px; top: calc(50% - 3.5px); }
.cv-h--sw { left: -4px; bottom: -4px; }
.cv-h--s  { left: calc(50% - 3.5px); bottom: -4px; }
.cv-h--se { right: -4px; bottom: -4px; }

/* --- tarjetas --- */
.cv-card {
  position: absolute;
  z-index: 2;
  opacity: 0;
  cursor: grab;
  touch-action: none; /* si no, el navegador se queda el gesto de arrastre */
  user-select: none;
  will-change: transform, opacity;
}

.cv-card.is-dragging {
  cursor: grabbing;
  z-index: 6;
}

.cv-card.is-sel {
  z-index: 5;
}

.cv-card__shot {
  position: relative;
  display: block;
  /* la proporcion vive AQUI, no en el <img>: asi las tarjetas que
     llevan un componente (feed, terminal, panel, Netflix) miden
     exactamente lo mismo que las que llevan imagen */
  aspect-ratio: 900 / 620;
  border-radius: 10px;
  overflow: hidden;
  background: #eceae4;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 12px 28px rgba(17, 17, 17, 0.07);
  transition: box-shadow 260ms ease;
}

.cv-card:hover .cv-card__shot {
  box-shadow: 0 2px 4px rgba(17, 17, 17, 0.08), 0 22px 48px rgba(17, 17, 17, 0.13);
}

/* el contenido se saca del flujo: si queda dentro, su alto intrinseco
   empuja la caja y vence al aspect-ratio, y cada tarjeta acaba con una
   proporcion ligeramente distinta */
.cv-card__shot > img,
.cv-card__shot > .ig,
.cv-card__shot > .tm,
.cv-card__shot > .ads,
.cv-card__shot > .nx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* el marco con manijas solo aparece en la tarjeta seleccionada */
.cv-card__frame {
  position: absolute;
  inset: 0;
  border: 1px solid #111;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.cv-card.is-sel .cv-card__frame {
  opacity: 1;
}

/* etiqueta de archivo, resaltada en amarillo */
.cv-card__label {
  display: block;
  margin-top: 0.6rem;
  text-align: center;
}

.cv-card__file {
  display: inline-block;
  padding: 0.16em 0.34em;
  background: var(--odd-acid);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(0.56rem, 0.82vw, 0.74rem);
  letter-spacing: 0.01em;
  color: #111;
  white-space: nowrap;
}

/* --- ficha del servicio --- */
.cv-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 7;
  max-width: 30ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.16, 0.9, 0.25, 1);
  pointer-events: none;
}

.cv-panel.is-on {
  opacity: 1;
  transform: none;
}

.cv-panel__k {
  display: block;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a3a099;
  margin-bottom: 0.5rem;
}

.cv-panel__name {
  margin: 0 0 0.4rem;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.cv-panel__desc {
  margin: 0;
  font-weight: 300;
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  line-height: 1.55;
  color: #56544e;
}

/* --- pie --- */
.cv-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 7;
  margin: 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: #b0ada5;
  pointer-events: none;
}

/* --- rotulo del tablero --- */
.cv-title {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  opacity: 0;
  pointer-events: none;
}

.cv-title__t {
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  letter-spacing: -0.025em;
}

.cv-title__n {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: #b0ada5;
}

/* --- compacto: el lienzo se apila y se pierde el arrastre --- */
.cv.is-compact .cv-stage {
  position: relative;
  inset: auto;
  padding: clamp(4.5rem, 9vh, 6.5rem) 1.2rem 5rem;
  /* En apilado el alto lo mandan las tarjetas, no la pantalla. Sin esto
     hereda height:100svh y overflow:hidden de .cv-stage, que recortaba
     la seccion a una pantalla: solo se veian dos servicios de siete. */
  height: auto;
  overflow: visible;
}

.cv.is-compact {
  height: auto;
  min-height: 100svh;
}

.cv.is-compact .cv-type {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  display: block;
  margin-bottom: 1.6rem;
  white-space: normal;
}

.cv.is-compact .cv-title {
  position: relative;
  margin-bottom: 2rem;
}

.cv.is-compact .cv-card {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  margin-bottom: 1.8rem;
  cursor: pointer;
  /* .cv-card trae touch-action:none para que el navegador no se quede el
     gesto de arrastre. Pero en compacto el arrastre esta desactivado
     (services.js, "if (compact || open) return"), asi que ese none no lo
     usaba nadie: el dedo sobre un archivo no arrastraba la tarjeta NI
     desplazaba la pagina. Aqui se devuelve el gesto al navegador. */
  touch-action: auto;
}

.cv.is-compact .cv-panel {
  position: relative;
  max-width: none;
  margin-top: 1rem;
}

.cv.is-compact .cv-hint {
  position: relative;
  text-align: right;
  margin-top: 1.5rem;
}

/* ==================================================================
   3. La ficha a pantalla completa

   El panel izquierdo se recorta con clip-path en porcentajes del
   viewport: estalla desde el rectangulo de la tarjeta, ocupa todo y
   se pliega a la mitad. clip-path se interpola en el compositor, asi
   que ni el estallido ni el pliegue tocan el layout.
================================================================== */
.cv-dt {
  position: fixed;
  inset: 0;
  /* montado en <body> por portal: aqui si compite contra el nav (20) */
  z-index: 200;
  background: #0b0b0d;
  opacity: 0;
}



/* ocupa TODO el viewport y es el clip quien decide que se ve */












/* --- FAQs --- */


.cv-q {
  border-bottom: 1px solid rgba(251, 250, 247, 0.22);
}

.cv-q__q {
  padding: 0.85rem 1.4rem 0.85rem 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #fbfaf7;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.cv-q__q::-webkit-details-marker { display: none; }

.cv-q__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0.8rem;
  font-family: "DM Mono", ui-monospace, monospace;
  color: var(--odd-acid);
}

.cv-q[open] .cv-q__q::after { content: "–"; }

.cv-q__a {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(251, 250, 247, 0.72);
}

/* --- derecha: portafolio + contacto --- */






/* vuelta al lienzo, con texto y sobre el panel del servicio */






























/* --- CTA del lienzo --- */
.cv-explore {
  position: absolute;
  left: 50%;
  bottom: clamp(0.5rem, 2vh, 1.6rem);
  transform: translateX(-50%);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 1.5em;
  border: 1px solid #111;
  border-radius: 999px;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease;
}

.cv-explore:hover { background: #111; color: #fbfaf7; }
.cv-explore__b { opacity: 0.45; }

/* la etiqueta "open" aparece al pasar por encima */
.cv-card__open {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 0.2em 0.5em;
  border-radius: 3px;
  background: rgba(17, 17, 17, 0.82);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: #fbfaf7;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.cv-card:hover .cv-card__open { opacity: 1; transform: none; }

/* --- vertical: la ficha se apila --- */
@media (max-width: 900px) {
  .cv-dt {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-y: auto;
  }

  

  
  
}

/* --- barra de ventana: la ficha es un archivo abierto --- */
.cv-win {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0.9rem;
  background: rgba(251, 250, 247, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.cv-win__lights {
  display: flex;
  gap: 8px;
}

/* los tres semaforos. El glifo aparece al pasar por encima, como en
   macOS: asi se descubren solos sin ensuciar la barra */
.cv-l {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
  line-height: 12px;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
}

.cv-l--close { background: #ff5f57; }
.cv-l--min   { background: #febc2e; }
.cv-l--max   { background: #28c840; }

.cv-l::after {
  opacity: 0;
  transition: opacity 140ms ease;
}

.cv-win__lights:hover .cv-l::after { opacity: 1; }

.cv-l--close::after { content: "\00d7"; }
.cv-l--min::after   { content: "\2013"; }
.cv-l--max::after   { content: "\2922"; font-size: 8px; }

.cv-win__name {
  flex: 1;
  text-align: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: #6f6c66;
}

.cv-win__esc {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  padding: 0.2em 0.45em;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 4px;
  color: #a3a099;
}

/* la barra ocupa alto real: el contenido baja para no quedar debajo */


.ig__bar {
  display: flex;
  align-items: center;
  gap: 6%;
  padding: 4% 5%;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.ig__avatar {
  flex: none;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* el anillo de historia */
  background:
    radial-gradient(circle at 50% 50%, #fbfaf7 54%, transparent 55%),
    conic-gradient(from 200deg, var(--odd-orange), var(--odd-coral), var(--odd-violet), var(--odd-blue), var(--odd-orange));
}

.ig__who {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  line-height: 1;
  min-width: 0;
}

.ig__who b {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(6px, 1.1cqw, 13px);
  color: #111;
}

.ig__who i {
  font-family: "Poppins", system-ui, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(5px, 0.9cqw, 11px);
  color: #8d8a83;
}

.ig__dots {
  margin-left: auto;
  font-size: clamp(5px, 0.9cqw, 11px);
  color: #8d8a83;
  letter-spacing: 0.1em;
}

.ig__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  padding: 2px;
  min-height: 0;
}

.ig__tile {
  position: relative;
  overflow: hidden;
}

.ig__tile--violet { background: var(--odd-violet); }
.ig__tile--blue   { background: var(--odd-blue); }
.ig__tile--teal   { background: var(--odd-teal); }
.ig__tile--acid   { background: var(--odd-acid); }
.ig__tile--coral  { background: var(--odd-coral); }
.ig__tile--orange { background: var(--odd-orange); }
.ig__tile--amber  { background: var(--odd-amber); }
.ig__tile--ink    { background: #121214; }
.ig__tile--bone   { background: #ece9e2; }

/* el triangulito de reel, arriba a la derecha */
.ig__reel {
  position: absolute;
  right: 8%;
  top: 8%;
  width: 0;
  height: 0;
  border-left: clamp(4px, 0.7cqw, 9px) solid rgba(255, 255, 255, 0.92);
  border-top: clamp(2.5px, 0.45cqw, 6px) solid transparent;
  border-bottom: clamp(2.5px, 0.45cqw, 6px) solid transparent;
}

.ig__tile--acid .ig__reel { border-left-color: rgba(17, 17, 17, 0.8); }

.ig__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(7px, 1.4cqw, 20px);
  letter-spacing: -0.04em;
  color: #121214;
}

/* la tarjeta es el contenedor de consulta: el feed escala con ella */
.cv-card__shot { container-type: inline-size; }

/* en la ficha abierta el feed llena el panel */




/* ==================================================================
   Tratamientos por tarjeta. Todos se dibujan con elementos, no con
   imagenes: escalan nitidos de la tarjeta a la ficha a pantalla
   completa, y el contenido se edita sin reexportar nada.
   Las medidas van en cqw — el contenedor de consulta es la propia
   tarjeta, asi que un solo bloque de CSS sirve a los dos tamanos.
================================================================== */

/* --- Web: terminal --- */
.tm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #0d0d10;
}

.tm__bar {
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 3.5% 4%;
  background: #1a1a1f;
}

.tm__dots { display: flex; gap: 0.35em; }

.tm__dots i {
  width: clamp(4px, 0.85cqw, 11px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3a3a42;
}

.tm__dots i:nth-child(1) { background: #ff5f57; }
.tm__dots i:nth-child(2) { background: #febc2e; }
.tm__dots i:nth-child(3) { background: #28c840; }

.tm__t {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(5px, 0.95cqw, 12px);
  color: #7e7e8a;
}

.tm__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 4%;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(5px, 1.05cqw, 13px);
  line-height: 1.35;
  color: #c9c9d4;
  overflow: hidden;
}

.tm__line { display: flex; align-items: center; gap: 0.5em; }
.tm__p { color: var(--odd-acid); }
.tm__ok { color: #28c840; }
.tm__run { color: var(--odd-amber); }
.tm__cmd { color: #fbfaf7; }

.tm__caret {
  width: 0.5em;
  height: 1em;
  background: var(--odd-acid);
  animation: tm-blink 1s steps(1) infinite;
}

@keyframes tm-blink { 50% { opacity: 0; } }

/* --- Paid & Performance: panel de anuncios --- */
.ads {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fbfaf7;
}

.ads__bar {
  display: flex;
  align-items: center;
  gap: 3.5%;
  padding: 3.5% 4%;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.ads__logo {
  width: clamp(8px, 1.7cqw, 22px);
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--odd-blue);
}

.ads__t {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(5px, 1.05cqw, 13px);
  color: #111;
}

.ads__live {
  margin-left: auto;
  padding: 0.2em 0.5em;
  border-radius: 3px;
  background: rgba(40, 200, 64, 0.16);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.8cqw, 10px);
  letter-spacing: 0.1em;
  color: #1a8a2e;
}

.ads__kpis { display: flex; gap: 2px; padding: 3% 4% 2%; }

.ads__kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: 3% 4%;
  border-radius: 5px;
  background: #f1efe9;
}

.ads__kpi i {
  font-family: "DM Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: clamp(4px, 0.8cqw, 10px);
  letter-spacing: 0.08em;
  color: #8d8a83;
}

.ads__kpi b {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(7px, 1.5cqw, 20px);
  color: #111;
}

.ads__kpi u {
  text-decoration: none;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.8cqw, 10px);
  color: #1a8a2e;
}

/* en coste por adquisicion, bajar es ganar */
.ads__kpi u.is-down { color: #1a8a2e; }

.ads__chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 1.6%;
  padding: 2% 4% 4%;
  min-height: 0;
}

.ads__b {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--odd-blue);
  opacity: 0.85;
}

.ads__b:last-child { background: var(--odd-acid); opacity: 1; }

/* --- Audiovisual: Netflix --- */
.nx {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #0b0b0d;
  color: #fbfaf7;
  overflow: hidden;
}

.nx__top {
  display: flex;
  align-items: center;
  gap: 5%;
  padding: 3.5% 4% 2%;
}

.nx__logo {
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(8px, 1.9cqw, 26px);
  letter-spacing: -0.05em;
  color: #e50914;
}

.nx__nav {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(4px, 0.85cqw, 11px);
  letter-spacing: 0.08em;
  color: rgba(251, 250, 247, 0.62);
}

.nx__hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5em;
  margin: 0 4%;
  padding: 4%;
  border-radius: 6px;
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(11, 11, 13, 0.92) 25%, rgba(11, 11, 13, 0.15) 75%),
    linear-gradient(120deg, var(--odd-violet), var(--odd-coral) 55%, var(--odd-orange));
}

.nx__badge {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.75cqw, 10px);
  letter-spacing: 0.18em;
  color: #e50914;
}

.nx__title {
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(8px, 2.1cqw, 30px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 60%;
}

.nx__btns { display: flex; gap: 0.5em; }

.nx__play,
.nx__info {
  padding: 0.35em 0.8em;
  border-radius: 3px;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(4px, 0.85cqw, 11px);
}

.nx__play { background: #fbfaf7; color: #0b0b0d; }
.nx__info { background: rgba(251, 250, 247, 0.28); color: #fbfaf7; }

.nx__rowlab {
  padding: 3% 4% 1%;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(4px, 0.9cqw, 12px);
  color: rgba(251, 250, 247, 0.86);
}

.nx__row {
  display: flex;
  gap: 1.4%;
  padding: 0 4% 4%;
  height: 22%;
}

.nx__tile {
  position: relative;   /* ancla la miniatura: sin esto se sale y tapa el panel */
  overflow: hidden;
  flex: 1;
  border-radius: 3px;
}

.nx__tile--violet { background: var(--odd-violet); }
.nx__tile--coral  { background: var(--odd-coral); }
.nx__tile--teal   { background: var(--odd-teal); }
.nx__tile--amber  { background: var(--odd-amber); }
.nx__tile--blue   { background: var(--odd-blue); }
.nx__tile--orange { background: var(--odd-orange); }
.nx__tile--ink    { background: #24242b; }

/* el panel de la ficha tambien es contenedor de consulta */


/* Cuando el panel es un componente vivo (feed, terminal, panel, Netflix)
   la copia NO puede ir encima: se taparian entre si. Se reparte el alto
   — el componente arriba, el texto abajo sobre fondo solido. */




/* el componente vive en la mitad de arriba */


@media (max-width: 900px) {
  
  
}

/* --- Netflix en la ficha: la plataforma entera, con scroll ---
   Su UI ya lleva el nombre, la sinopsis y las FAQs, asi que el panel de
   copia sobra: mostrarlo taparia justo lo que se quiere enseñar. */




.nx.is-full .nx__top {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 3.5% 4%;
  background: linear-gradient(#0b0b0d 62%, rgba(11, 11, 13, 0));
}

.nx__me {
  margin-left: auto;
  width: clamp(10px, 1.8cqw, 24px);
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--odd-teal);
}

.nx.is-full .nx__hero {
  flex: none;
  /* antes 46cqw (~870px en pantalla ancha): se comia el alto entero y
     dejaba la segunda fila fuera de cuadro */
  height: min(36vh, 20cqw);
  min-height: 210px;
  background-size: cover;
  background-position: center 30%;
}

/* el velo va sobre el fotograma, no debajo: sin esto el texto del hero
   se pierde contra la imagen */
.nx.is-full .nx__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(11, 11, 13, 0.94) 18%, rgba(11, 11, 13, 0.25) 62%, rgba(11, 11, 13, 0.55));
}

.nx.is-full .nx__hero > * { position: relative; z-index: 1; }

.nx__meta {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.8cqw, 11px);
  color: rgba(251, 250, 247, 0.6);
}

.nx__syn {
  max-width: 62%;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(5px, 1cqw, 14px);
  line-height: 1.5;
  color: rgba(251, 250, 247, 0.86);
}

.nx__block { display: block; }

.nx.is-full .nx__row { height: auto; }

.nx.is-full .nx__tile {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  padding: 4%;
}

.nx__tname {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(4px, 0.85cqw, 12px);
  line-height: 1.1;
  color: #fbfaf7;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.nx__tile--amber .nx__tname,
.nx__tile--teal .nx__tname { color: #0b0b0d; text-shadow: none; }

.nx__about {
  display: block;
  padding: 6% 4% 0;
  border-top: 1px solid rgba(251, 250, 247, 0.14);
  margin: 5% 4% 0;
}

.nx__abouth {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(6px, 1.3cqw, 17px);
  color: #fbfaf7;
  margin-bottom: 0.7em;
}

.nx__punch {
  display: block;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(8px, 1.9cqw, 26px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--odd-acid);
  margin-bottom: 1em;
}

.nx__faq { display: block; border-top: 1px solid rgba(251, 250, 247, 0.16); }

/* ==================================================================
   La ficha es UNA superficie: la interfaz de la plataforma, completa.
   Nada de panel partido — cada servicio se abre como si hubieras
   abierto esa app.
================================================================== */
.cv-dt__surface {
  position: absolute;
  inset: 38px 0 0;
  overflow: hidden;
  container-type: inline-size;
}

.cv-dt__surface > * { width: 100%; height: 100%; overflow-y: auto; }

/* --- contacto: primero la intencion, luego los campos --- */
.ct { display: block; }

.ct__k {
  display: block;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.9rem;
}

.ct__opts { display: grid; gap: 0.5rem; max-width: 34rem; }

.ct__opt {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 200ms ease, background-color 200ms ease;
}

.ct__opt:hover { opacity: 0.85; }

.ct__opt.is-on {
  opacity: 1;
  background: rgba(233, 250, 90, 0.14);
  border-color: var(--odd-acid);
}

.ct__opt b {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
}

.ct__opt i {
  font-style: normal;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  opacity: 0.7;
}

.ct__form {
  display: grid;
  gap: 0.8rem;
  max-width: 34rem;
  margin-top: 1.1rem;
  animation: ct-in 420ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

@keyframes ct-in {
  from { opacity: 0; transform: translateY(10px); }
}

.ct__f { display: grid; gap: 0.25rem; }

.ct__f > span {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.ct__f input {
  width: 100%;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.9rem;
  color: inherit;
}

.ct__f input:focus { outline: none; border-bottom-color: var(--odd-acid); }

.ct__go {
  justify-self: start;
  margin-top: 0.3rem;
  padding: 0.8em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--odd-acid);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: #111;
  cursor: pointer;
}

.ct__note {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

/* piel clara para las superficies claras */
.ct--ig, .ct--ads, .ct--doc { color: #111; }
.ct--ig .ct__opt, .ct--ads .ct__opt, .ct--doc .ct__opt { border-color: #d6d3cb; }
.ct--nx, .ct--term { color: #fbfaf7; }
.ct--nx .ct__opt, .ct--term .ct__opt { border-color: rgba(251,250,247,0.3); }
.ct--term .ct__f > span, .ct--term .ct__go {
  font-family: "DM Mono", ui-monospace, monospace;
}

/* ---------- Instagram completo ---------- */
.igf { background: #fbfaf7; color: #111; padding-bottom: 3rem; }

.igf__app {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem clamp(1rem, 4cqw, 3rem);
  background: rgba(251,250,247,0.94);
  border-bottom: 1px solid rgba(17,17,17,0.1);
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 0.95rem;
}

.igf__head {
  display: flex; gap: clamp(1rem, 4cqw, 3rem); align-items: flex-start;
  padding: clamp(1.4rem, 4cqw, 3rem) clamp(1rem, 4cqw, 3rem);
}

.igf__av {
  flex: none; width: clamp(70px, 14cqw, 150px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fbfaf7 56%, transparent 57%),
    conic-gradient(from 200deg, var(--odd-orange), var(--odd-coral), var(--odd-violet), var(--odd-blue), var(--odd-orange));
}

.igf__stats { display: flex; gap: 1.6rem; margin-bottom: 0.9rem; }
.igf__stats i { font-style: normal; font-size: 0.82rem; color: #56544e; }
.igf__stats b { color: #111; }

.igf__name { margin: 0 0 0.4rem; font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(1.1rem, 2.4cqw, 1.8rem); letter-spacing: -0.02em; }
.igf__bio { margin: 0 0 0.5rem; max-width: 44ch; font-family: "Poppins", sans-serif;
  font-weight: 300; font-size: 0.9rem; line-height: 1.55; color: #56544e; }
.igf__punch { margin: 0 0 0.7rem; font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(0.95rem, 1.7cqw, 1.3rem); letter-spacing: -0.02em; }
.igf__link { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 0.85rem;
  color: var(--odd-blue); text-decoration: none; }

.igf__tabs { display: flex; justify-content: center; gap: 2.5rem;
  border-top: 1px solid rgba(17,17,17,0.12); }
.igf__tabs i { font-style: normal; padding: 0.9rem 0; font-family: "DM Mono", monospace;
  font-size: 0.6rem; letter-spacing: 0.16em; color: #a3a099; }
.igf__tabs i.is-on { color: #111; box-shadow: inset 0 2px 0 #111; }

.igf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  padding: 3px clamp(0.4rem, 2cqw, 1.4rem); }
.igf__grid .ig__tile { aspect-ratio: 1; }

.igf__faq, .igf__dm { padding: clamp(1.6rem, 4cqw, 3rem) clamp(1rem, 4cqw, 3rem) 0; max-width: 46rem; }
.igf__faq h4 { margin: 0 0 0.6rem; font-family: "Poppins", sans-serif; font-size: 0.95rem; }
.igf .cv-q { border-color: rgba(17,17,17,0.12); }
.igf .cv-q__q { color: #111; }
.igf .cv-q__q::after { color: var(--odd-blue); }
.igf .cv-q__a { color: #56544e; }

/* ---------- CMD completo ---------- */
.tmf { background: #0d0d10; color: #c9c9d4;
  font-family: "DM Mono", ui-monospace, monospace; }
.tmf__body { padding: clamp(1.2rem, 4cqw, 3rem); max-width: 62rem; font-size: 0.86rem; line-height: 1.7; }
.tmf__body p { margin: 0; }
.tmf__body b { color: var(--odd-acid); }
.tmf__body u { text-decoration: none; color: #fbfaf7; }
.tmf__h { margin-top: 0.7rem !important; font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.3rem, 3cqw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; color: #fbfaf7; }
.tmf__d { margin-top: 0.6rem !important; max-width: 60ch; color: #9a9aa6; }
.tmf__punch { margin-top: 0.6rem !important; color: var(--odd-acid); }
.tmf__sp { margin-top: 2rem !important; }
.tmf__link { display: inline-block; margin-top: 0.5rem; color: var(--odd-acid); text-decoration: none; }
.tmf .cv-q { border-color: rgba(251,250,247,0.16); }
.tmf .cv-q__q { font-family: "DM Mono", monospace; font-size: 0.84rem; }
.tmf .ct { margin-top: 0.8rem; }

/* ---------- Meta Business Suite completo ---------- */
.adf { display: grid; grid-template-columns: clamp(120px, 16cqw, 210px) 1fr;
  background: #f3f2ef; color: #111; }
.adf__side { background: #fbfaf7; border-right: 1px solid rgba(17,17,17,0.1);
  padding: 1.2rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
.adf__logo { width: 26px; aspect-ratio: 1; border-radius: 6px; background: var(--odd-blue);
  margin-bottom: 1rem; }
.adf__side i { font-style: normal; padding: 0.5rem 0.7rem; border-radius: 6px;
  font-family: "Poppins", sans-serif; font-size: 0.8rem; color: #56544e; }
.adf__side i.is-on { background: rgba(27,38,238,0.1); color: var(--odd-blue); font-weight: 600; }
.adf__main { padding: clamp(1.2rem, 3cqw, 2.4rem); overflow-y: auto; }
.adf__top { display: flex; align-items: center; gap: 1rem; }
.adf__top h3 { margin: 0; font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(1.1rem, 2.4cqw, 1.9rem); letter-spacing: -0.025em; }
.adf__live { padding: 0.2em 0.6em; border-radius: 4px; background: rgba(40,200,64,0.16);
  font-family: "DM Mono", monospace; font-size: 0.55rem; letter-spacing: 0.1em; color: #1a8a2e; }
.adf__d { margin: 0.6rem 0 0; max-width: 62ch; font-family: "Poppins", sans-serif;
  font-weight: 300; font-size: 0.9rem; line-height: 1.55; color: #56544e; }
.adf__punch { margin: 0.5rem 0 1.4rem; font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(0.95rem, 1.8cqw, 1.35rem); letter-spacing: -0.02em; }
.adf__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.adf__kpi { padding: 0.9rem 1rem; border-radius: 10px; background: #fbfaf7;
  border: 1px solid rgba(17,17,17,0.08); display: grid; gap: 0.15rem; }
.adf__kpi i { font-style: normal; font-family: "DM Mono", monospace; font-size: 0.55rem;
  letter-spacing: 0.1em; color: #8d8a83; }
.adf__kpi b { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.5rem; }
.adf__kpi u { text-decoration: none; font-family: "DM Mono", monospace; font-size: 0.6rem; color: #1a8a2e; }
.adf__chart { display: flex; align-items: flex-end; gap: 4px; height: 120px;
  margin: 1.2rem 0; padding: 0.9rem; border-radius: 10px; background: #fbfaf7;
  border: 1px solid rgba(17,17,17,0.08); }
.adf__b { flex: 1; border-radius: 2px 2px 0 0; background: var(--odd-blue); opacity: 0.8; }
.adf__b:last-child { background: var(--odd-acid); opacity: 1; }
.adf__table { border-radius: 10px; background: #fbfaf7; border: 1px solid rgba(17,17,17,0.08);
  overflow: hidden; }
.adf__th { display: flex; justify-content: space-between; padding: 0.7rem 1rem;
  background: #ece9e2; font-family: "DM Mono", monospace; font-size: 0.55rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8d8a83; }
.adf__row { border-top: 1px solid rgba(17,17,17,0.08); }
.adf__row .cv-q__q { display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1rem; color: #111; }
.adf__row .cv-q__q::after { display: none; }
.adf__row .cv-q__q em { font-style: normal; font-family: "DM Mono", monospace;
  font-size: 0.55rem; color: #1a8a2e; }
.adf__row .cv-q__a { padding: 0 1rem 0.9rem; color: #56544e; }
.adf__cta { display: inline-block; margin: 1.4rem 0; padding: 0.8em 1.4em;
  border-radius: 999px; background: var(--odd-blue); font-family: "Poppins", sans-serif;
  font-weight: 500; font-size: 0.85rem; color: #fbfaf7; text-decoration: none; }

/* ---------- Netflix completo: contacto dentro ---------- */
.nx.is-full .ct { padding: 0 4% 2rem; display: block; }

/* ---------- documento, para los servicios sin plataforma ---------- */
.doc { background: #ece9e2; padding: clamp(1.5rem, 5cqw, 4rem); }
.doc__sheet { max-width: 52rem; margin: 0 auto; padding: clamp(1.8rem, 5cqw, 4rem);
  background: #fbfaf7; color: #111; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(17,17,17,0.08), 0 24px 60px rgba(17,17,17,0.1); }
.doc__file { display: inline-block; padding: 0.16em 0.34em; background: var(--odd-acid);
  font-family: "DM Mono", monospace; font-size: 0.62rem; }
.doc__name { margin: 1.2rem 0 0; font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(1.4rem, 3.4cqw, 2.8rem); line-height: 1.03; letter-spacing: -0.03em; }
.doc__d { margin: 1rem 0 0; max-width: 54ch; font-family: "Poppins", sans-serif;
  font-weight: 300; font-size: 1rem; line-height: 1.6; color: #56544e; }
.doc__punch { margin: 1.2rem 0 0; font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(1.05rem, 2cqw, 1.6rem); letter-spacing: -0.02em; }
.doc__cta { display: inline-block; margin: 1.4rem 0 0; padding: 0.8em 1.4em;
  border: 1px solid #111; border-radius: 999px; font-family: "Poppins", sans-serif;
  font-weight: 500; font-size: 0.85rem; color: #111; text-decoration: none; }
.doc__faq { margin-top: 2.2rem; border-top: 1px solid rgba(17,17,17,0.14); }
.doc__faq h4 { margin: 1rem 0 0.4rem; font-family: "Poppins", sans-serif; font-size: 0.95rem; }
.doc .cv-q { border-color: rgba(17,17,17,0.12); }
.doc .cv-q__q { color: #111; }
.doc .cv-q__q::after { color: var(--odd-blue); }
.doc .cv-q__a { color: #56544e; }
.doc .ct { margin-top: 2rem; }

@media (max-width: 900px) {
  .adf { grid-template-columns: 1fr; }
  .adf__side { flex-direction: row; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid rgba(17,17,17,0.1); }
  .adf__logo { display: none; }
  .igf__head { flex-direction: column; }
}

/* --- Netflix: ficha de titulo --- */
.nx__tile.is-clickable {
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nx.is-full .nx__tile.is-clickable {
  display: flex;
  align-items: flex-end;
  padding: 4%;
}

.nx__tile.is-clickable:hover { transform: scale(1.06); z-index: 2; }

.nxt {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(0, 0, 0, 0.7);
}

.nxt__box {
  position: relative;
  width: min(720px, 100%);
  max-height: 88%;
  overflow-y: auto;
  border-radius: 8px;
  background: #141418;
  color: #fbfaf7;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.nxt__x {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 6;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #141418;
  font-size: 1.1rem;
  line-height: 1;
  color: #fbfaf7;
  cursor: pointer;
}

.nxt__art {
  position: relative;
  /* recorta: sin esto el iframe sobredimensionado se sale de la caja y
     se come los botones que van debajo */
  overflow: hidden;
  aspect-ratio: 16 / 8;
  display: flex;
  align-items: flex-end;
  padding: 5%;
}

.nxt__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #141418, rgba(20, 20, 24, 0.1) 60%);
}

.nxt__arttitle {
  position: relative;
  z-index: 1;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.nxt__body { padding: 1.1rem 5% 5%; display: grid; gap: 0.9rem; }

.nxt__btns { display: flex; align-items: center; gap: 0.6rem; }

.nxt__round {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(251, 250, 247, 0.5);
  border-radius: 50%;
  font-size: 0.9rem;
}

.nxt__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  color: rgba(251, 250, 247, 0.66);
}

.nxt__meta b { color: #46d369; }

.nxt__hd {
  padding: 0.05em 0.3em;
  border: 1px solid rgba(251, 250, 247, 0.4);
  border-radius: 3px;
  font-size: 0.58rem;
}

.nxt__syn {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.55;
}

.nxt__tags {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.76rem;
  color: rgba(251, 250, 247, 0.7);
}

.nxt__tags i { font-style: normal; color: rgba(251, 250, 247, 0.45); }

/* --- Netflix: portadas con video real --- */
.nx__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* el nombre va por encima de la miniatura, con un velo abajo para que
   se lea sobre cualquier fotograma */
.nx.is-full .nx__tile:has(.nx__thumb)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent 55%);
}

.nx__tile .nx__tname { position: relative; z-index: 1; }

/* --- ficha de titulo con reproductor --- */
/* la caja toma la proporcion del video: si no, YouTube lo encaja dentro
   del iframe con sus propias bandas, y es ahi donde asoma su interfaz */
.nxt__art.has-video {
  background: #000;
  aspect-ratio: 16 / 9;
}

.nxt__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nxt__player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* La franja de titulo de YouTube ocupa ~12% del alto del reproductor
     y la de "ver en YouTube" otro ~10%. modestbranding esta obsoleto y
     ya no las quita, asi que la unica via fiable es recortarlas: al
     150% sobran ~17% arriba y abajo, suficiente para tragarse ambas. */
  width: 150%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  z-index: 2;
  pointer-events: none;
}

/* capa muerta sobre el reproductor: sin ella, el hover saca el titulo
   y los botones de compartir de YouTube */
.nxt__shield {
  position: absolute;
  inset: 0;
  z-index: 3;
}

button.nx__play {
  border: 0;
  cursor: pointer;
  font-family: "Poppins", system-ui, sans-serif;
}

/* --- Instagram: vertical y sin recortar ---
   Su embed no admite autoplay silencioso ni ocultar la interfaz, asi
   que no se le aplica el recorte de YouTube: se le da su formato
   vertical sobre fondo oscuro y se deja interactivo, porque hay que
   pulsar para que reproduzca. */
/* portada propia de Reels, en vez del embed de Instagram */
.nxt__art.is-vertical {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  padding: 0;
}

.nxt__reels {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
}

.nxt__reelsmark {
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.6rem, 6cqw, 3.4rem);
  letter-spacing: -0.04em;
  color: #fbfaf7;
}

.nxt__reelsn {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.66);
}

/* --- episodios --- */
.nxt__eps {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(251, 250, 247, 0.16);
}

.nxt__epsh {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.5);
}

.nxt__ep {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(251, 250, 247, 0.86);
  text-decoration: none;
}

.nxt__ep:hover { color: #fbfaf7; }

.nxt__epth {
  width: 92px;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  object-fit: cover;
  background: #24242b;
}

.nxt__epth--ig {
  display: grid;
  place-items: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: rgba(251, 250, 247, 0.6);
}

/* ==================================================================
   Branding & Creative Direction — editor vectorial
   Todo dibujado con elementos: escala nitido de la tarjeta a la
   pantalla completa. Las medidas van en cqw, y el contenedor de
   consulta es la propia tarjeta o la superficie de la ficha.
================================================================== */
.ai {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #1e1e1e;
  color: #d6d6d6;
  font-family: "Poppins", system-ui, sans-serif;
  overflow: hidden;
}

.ai-bar {
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 2.5% 3%;
  background: #2b2b2b;
  border-bottom: 1px solid #111;
}

.ai-file {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(5px, 0.95cqw, 12px);
  color: #f0f0f0;
}

.ai-menu {
  font-size: clamp(4px, 0.85cqw, 11px);
  font-weight: 300;
  color: #8f8f8f;
}

.ai-zoom {
  margin-left: auto;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.8cqw, 11px);
  color: #8f8f8f;
}

.ai-body { flex: 1; display: flex; min-height: 0; }

/* --- caja de herramientas --- */
.ai-tools {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 2px;
  padding: 3%;
  background: #262626;
  border-right: 1px solid #111;
}

.ai-tool {
  display: grid;
  place-items: center;
  width: clamp(11px, 1.9cqw, 26px);
  aspect-ratio: 1;
  border-radius: 3px;
  color: #b8b8b8;
}

.ai-tool.is-on { background: #4a4a4a; color: #fff; }
.ai-tool svg { width: 72%; height: 72%; display: block; }

/* --- mesa de trabajo --- */
.ai-board {
  flex: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 4%;
  /* la retícula del lienzo */
  background:
    linear-gradient(#242424 1px, transparent 1px) 0 0 / 100% 14px,
    linear-gradient(90deg, #242424 1px, transparent 1px) 0 0 / 14px 100%,
    #1e1e1e;
}

.ai-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 78%;
  aspect-ratio: 16 / 10;
  background: #fbfaf7;
}

.ai-artlabel {
  position: absolute;
  left: 0;
  top: -1.5em;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.75cqw, 10px);
  color: #7d7d7d;
}

.ai-mark {
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, 5.2cqw, 74px);
  letter-spacing: -0.05em;
  color: #121214;
}

/* caja de seleccion con sus nodos */
.ai-sel { position: absolute; inset: -1px; border: 1px solid var(--odd-blue); }

.ai-node {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #fff;
  border: 1px solid var(--odd-blue);
}

.ai-node--nw { left: -3px; top: -3px; }
.ai-node--n  { left: calc(50% - 2.5px); top: -3px; }
.ai-node--ne { right: -3px; top: -3px; }
.ai-node--w  { left: -3px; top: calc(50% - 2.5px); }
.ai-node--e  { right: -3px; top: calc(50% - 2.5px); }
.ai-node--sw { left: -3px; bottom: -3px; }
.ai-node--s  { left: calc(50% - 2.5px); bottom: -3px; }
.ai-node--se { right: -3px; bottom: -3px; }

/* --- paneles de la derecha --- */
.ai-rail {
  flex: none;
  width: clamp(60px, 26cqw, 340px);
  /* en la ficha el ancho lo anima el JS, de 22% a 50% */
  will-change: width;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3%;
  background: #262626;
  border-left: 1px solid #111;
  overflow-y: auto;
}

.ai .ai-rail > i.ai-sw { width: 100%; aspect-ratio: 1; }

.ai-panel { padding: 0.9rem 0.9rem 1rem; background: #2f2f2f; border-radius: 4px; }

.ai-ph {
  display: block;
  margin-bottom: 0.6rem;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8f8f8f;
}

.ai-name {
  margin: 0 0 0.7rem;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #fbfaf7;
}

.ai-desc {
  margin: 0 0 0.8rem;
  max-width: 46ch;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #b8b8b8;
}

.ai-punch {
  margin: 0 0 1rem;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--odd-acid);
}

.ai-cta {
  display: inline-block;
  padding: 0.55em 1em;
  border: 1px solid #5a5a5a;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #f0f0f0;
  text-decoration: none;
}

.ai-cta:hover { background: var(--odd-blue); border-color: var(--odd-blue); }

.ai-sws { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }

.ai-sw { display: block; aspect-ratio: 1; border-radius: 2px; }
.ai-sw--violet { background: var(--odd-violet); }
.ai-sw--blue   { background: var(--odd-blue); }
.ai-sw--teal   { background: var(--odd-teal); }
.ai-sw--acid   { background: var(--odd-acid); }
.ai-sw--coral  { background: var(--odd-coral); }
.ai-sw--orange { background: var(--odd-orange); }
.ai-sw--amber  { background: var(--odd-amber); }
.ai-sw--ink    { background: #121214; }

.ai-layers { display: grid; gap: 1px; }

.ai-layer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  color: #e2e2e2;
  background: #353535;
  transition: background-color 200ms ease;
}

.ai-layer:hover { background: #414141; }

.ai-eye { font-style: normal; font-size: 0.6rem; color: #8f8f8f; }
.ai-lock {
  margin-left: auto;
  font-style: normal;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  color: #7d7d7d;
}

.ai-q { border-color: #444; }
.ai .cv-q__q { color: #e6e6e6; font-size: 0.78rem; padding: 0.6rem 1.2rem 0.6rem 0; }
.ai .cv-q__q::after { color: var(--odd-acid); top: 0.55rem; }
.ai .cv-q__a { color: #a8a8a8; font-size: 0.76rem; }

.ai-status {
  display: flex;
  gap: 1.6rem;
  padding: 0.45rem 0.9rem;
  background: #2b2b2b;
  border-top: 1px solid #111;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  color: #8f8f8f;
}

/* el contacto hereda la piel oscura del editor */
.ct--ai { color: #e6e6e6; }
.ct--ai .ct__opt { border-color: #555; }
.ct--ai .ct__opt b { font-size: 0.8rem; }
.ct--ai .ct__opt i { font-size: 0.66rem; }
.ct--ai .ct__f input { border-bottom-color: #555; }

@media (max-width: 900px) {
  /* Apilado, el panel .ai-rail crece a su alto natural (~1500px) dentro de
     una ficha de una pantalla, y .ai.is-full lo recorta con overflow hidden:
     media interfaz quedaba inalcanzable. El scroll va aqui, como en las
     demas fichas (.adf__main, .crm-main, .igf). */
  .ai.is-full .ai-body { flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .ai.is-full .ai-tools { grid-template-columns: repeat(8, 1fr); border-right: 0; }
  .ai.is-full .ai-rail { width: auto; border-left: 0; }
}

/* ==================================================================
   Growth & Sales Enablement — CRM
   Dibujado con elementos. El embudo no es adorno: cada columna es una
   etapa y cada tarjeta un entregable real del servicio.
================================================================== */
.crm {
  display: flex;
  width: 100%;
  height: 100%;
  background: #f5f8fa;
  color: #33475b;
  font-family: "Poppins", system-ui, sans-serif;
  overflow: hidden;
}

.crm:not(.is-full) { flex-direction: column; }

.crm-logo {
  flex: none;
  width: clamp(10px, 1.8cqw, 24px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--odd-orange);
}

.crm-bar {
  display: flex;
  align-items: center;
  gap: 3%;
  padding: 2.5% 3%;
  background: #fff;
  border-bottom: 1px solid #dfe3eb;
}

.crm-t {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(5px, 0.95cqw, 12px);
  color: #33475b;
}

.crm-body { flex: 1; padding: 3%; min-height: 0; overflow: hidden; }

/* --- embudo --- */
.crm-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(3px, 0.8cqw, 12px);
  align-items: start;
}

.crm-col {
  display: grid;
  gap: clamp(3px, 0.6cqw, 8px);
  padding: clamp(4px, 0.8cqw, 12px);
  border-radius: 6px;
  background: #eaeff4;
}

.crm-colh {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.72cqw, 10px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c7080;
}

.crm-colh b { margin-left: auto; color: #33475b; }

.crm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.crm-dot--violet { background: var(--odd-violet); }
.crm-dot--blue   { background: var(--odd-blue); }
.crm-dot--teal   { background: var(--odd-teal); }
.crm-dot--orange { background: var(--odd-orange); }

.crm-deal {
  display: grid;
  gap: 0.15em;
  padding: clamp(4px, 0.8cqw, 11px);
  border-radius: 5px;
  background: #fff;
  border: 1px solid #dfe3eb;
  box-shadow: 0 1px 2px rgba(51, 71, 91, 0.06);
}

.crm-dn {
  font-weight: 500;
  font-size: clamp(4.5px, 0.85cqw, 12px);
  line-height: 1.25;
  color: #33475b;
}

.crm-dv {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.68cqw, 9.5px);
  color: #7c98b6;
}

/* --- pantalla completa --- */
.crm.is-full .crm-side {
  flex: none;
  width: clamp(120px, 15cqw, 190px);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 0.8rem;
  background: #2e3e4f;
  border-right: 1px solid #24313f;
}

.crm.is-full .crm-side .crm-logo { margin-bottom: 1rem; }

.crm-nav {
  font-style: normal;
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  font-size: 0.8rem;
  color: #b6c4d2;
}

.crm-nav.is-on { background: rgba(238, 80, 39, 0.18); color: #fff; font-weight: 600; }

.crm-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-bottom: 2rem;
}

.crm-main > *:not(.crm-bar) { margin-left: clamp(1rem, 3cqw, 2.4rem); margin-right: clamp(1rem, 3cqw, 2.4rem); }

.crm-search {
  flex: 1;
  padding: 0.4em 0.8em;
  border: 1px solid #dfe3eb;
  border-radius: 5px;
  font-size: 0.78rem;
  color: #9bb0c3;
}

.crm-new {
  padding: 0.45em 0.9em;
  border-radius: 5px;
  background: var(--odd-orange);
  font-weight: 600;
  font-size: 0.78rem;
  color: #fff;
}

.crm-h {
  margin: 1.4rem 0 0;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #1f2d3d;
}

.crm-d {
  margin: 0.6rem 0 0;
  max-width: 58ch;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #4f6478;
}

.crm-punch {
  margin: 0.7rem 0 0;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--odd-orange);
}

.crm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: 1.3rem;
}

@media (max-width: 1100px) {
  .crm-stats { grid-template-columns: repeat(2, 1fr); }
}

.crm-stat {
  display: grid;
  gap: 0.1rem;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dfe3eb;
}

.crm-stat i {
  font-style: normal;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7c98b6;
}

.crm-stat b { font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.8rem); color: #1f2d3d; }
.crm-stat u { text-decoration: none; font-family: "DM Mono", monospace; font-size: 0.6rem; color: #00a38d; }

.crm-sec {
  display: block;
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7c98b6;
}

.crm-kb { border-radius: 8px; background: #fff; border: 1px solid #dfe3eb; overflow: hidden; }
.crm-q { border-bottom: 1px solid #dfe3eb; }
.crm-q:last-child { border-bottom: 0; }
.crm .cv-q__q { color: #33475b; font-size: 0.84rem; padding: 0.85rem 2.2rem 0.85rem 1rem; }
.crm .cv-q__q::after { color: var(--odd-orange); right: 1rem; top: 0.8rem; }
.crm .cv-q__a { padding: 0 1rem 0.9rem; color: #4f6478; font-size: 0.82rem; }

.crm-cta {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.8em 1.4em;
  border: 1px solid var(--odd-orange);
  border-radius: 5px;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--odd-orange);
  text-decoration: none;
}

.crm-cta:hover { background: var(--odd-orange); color: #fff; }

.crm-form {
  margin-top: 1.6rem;
  padding: 1.2rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dfe3eb;
}

.ct--crm { color: #33475b; }
.ct--crm .ct__opt { border-color: #dfe3eb; }
.ct--crm .ct__opt.is-on { background: rgba(238, 80, 39, 0.1); border-color: var(--odd-orange); }
.ct--crm .ct__f input { border-bottom-color: #dfe3eb; }
.ct--crm .ct__go { background: var(--odd-orange); color: #fff; }

@media (max-width: 900px) {
  .crm.is-full { flex-direction: column; }
  .crm.is-full .crm-side { width: auto; flex-direction: row; overflow-x: auto; }
  .crm-board { grid-template-columns: 1fr 1fr; }
}

/* ==================================================================
   Brand Strategy — pizarron colaborativo
   El unico servicio cuyo software no produce: piensa. Fondo claro y
   suelto, para romper con las otras seis interfaces, que son densas.
================================================================== */
.bd {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fbfaf7;
  color: #1f1f22;
  font-family: "Poppins", system-ui, sans-serif;
  overflow: hidden;
  /* el puntero del pizarron: la misma flecha que llevan los cursores de
     los demas, en azul y con filo blanco para que se lea sobre claro y
     sobre las notas de color. El punto activo va en la punta. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5l8.4 19.2 2.3-7.2 7.2-2.3z' fill='%231b26ee' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 4, default;
}

.bd-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3%;
  padding: 2.5% 3%;
  background: #fff;
  border-bottom: 1px solid #e6e3dc;
}

.bd-t {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(5px, 0.95cqw, 12px);
}

.bd-frame {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: #9b9891;
}

.bd-avs { margin-left: auto; display: flex; }

.bd-av {
  width: clamp(9px, 1.5cqw, 22px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
}

.bd-av--violet { background: var(--odd-violet); }
.bd-av--teal   { background: var(--odd-teal); }
.bd-av--amber  { background: var(--odd-amber); }

.bd-share {
  padding: 0.45em 0.9em;
  border-radius: 5px;
  background: var(--odd-blue);
  font-weight: 600;
  font-size: 0.78rem;
  color: #fff;
}

/* --- lienzo --- */
.bd-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  /* la trama de puntos del pizarron. El paso de 18px lo repite el JS
     para que la trama viaje con el contenido al deslizar. */
  background-image: radial-gradient(#d8d4cb 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: hidden;
  /* la flecha se hereda de .bd: la herramienta activa es el cursor,
     igual que en Miro. Solo mientras se arrastra pasa a mano cerrada. */
}

/* El touch-action:none va SOLO en la ficha abierta, que es donde el JS
   engancha el paneo (useLayoutEffect con "if (!full) return"). En la
   miniatura de la tarjeta no hay manejador ninguno, asi que ahi ese none
   no lo usaba nadie: se comia el gesto y el dedo sobre el primer archivo
   no desplazaba la pagina. Un descendiente manda sobre el ancestro, por
   eso no bastaba con arreglar .cv-card. */
.bd.is-full .bd-canvas {
  touch-action: none;
}

.bd-canvas.is-panning,
.bd-canvas.is-panning * { cursor: grabbing; }

/* la capa que se mueve: lo que vive EN el pizarron */
.bd-pan {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.bd-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 2cqw, 18px);
  transform: translateX(-50%);
  z-index: 3;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: rgba(31, 31, 34, 0.72);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: #fbfaf7;
  pointer-events: none;
}

.bd-tools {
  position: absolute;
  cursor: default;
  left: clamp(6px, 1.5cqw, 20px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: clamp(3px, 0.5cqw, 6px);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(31, 31, 34, 0.14);
}

.bd-tool {
  display: grid;
  place-items: center;
  width: clamp(12px, 2cqw, 30px);
  aspect-ratio: 1;
  border-radius: 6px;
  color: #55524c;
}

.bd-tool.is-on { background: var(--odd-blue); color: #fff; }
.bd-tool svg { width: 66%; height: 66%; display: block; }

.bd-work {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  grid-template-columns: auto auto;
  gap: clamp(1rem, 4cqw, 3.5rem);
  align-items: center;
  padding: clamp(1rem, 4cqw, 3rem) clamp(3rem, 8cqw, 6rem);
}

/* --- mapa 2x2 --- */
.bd-map {
  position: relative;
  width: clamp(120px, 30cqw, 420px);
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid #e0dcd3;
  border-radius: 4px;
}

.bd-axis { position: absolute; background: #e0dcd3; }
.bd-axis--x { left: 6%; right: 6%; top: 50%; height: 1px; }
.bd-axis--y { top: 6%; bottom: 6%; left: 50%; width: 1px; }

.bd-lab {
  position: absolute;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.7cqw, 9px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5a199;
  white-space: nowrap;
}

.bd-lab--l { left: 3%; top: 52%; }
.bd-lab--r { right: 3%; top: 52%; }
.bd-lab--t { left: 52%; top: 3%; }
.bd-lab--b { left: 52%; bottom: 3%; }

.bd-dot {
  position: absolute;
  width: clamp(4px, 0.9cqw, 11px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #c9c5bc;
  transform: translate(-50%, -50%);
}

/* el hueco: el unico punto en el cuadrante vacio */
.bd-dot--you {
  background: var(--odd-acid);
  border: 1.5px solid #1f1f22;
  width: clamp(6px, 1.3cqw, 16px);
}

.bd-you {
  position: absolute;
  left: 76%;
  top: 20%;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: #1f1f22;
}

/* --- notas --- */
.bd-stickies { display: grid; gap: clamp(0.5rem, 1.6cqw, 1.1rem); }

.bd-group { display: grid; gap: clamp(3px, 0.6cqw, 7px); }

.bd-glab {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: clamp(4px, 0.7cqw, 10px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9b9891;
}

.bd-note {
  display: block;
  min-height: clamp(14px, 3cqw, 30px);
  padding: clamp(3px, 0.8cqw, 10px) clamp(4px, 1cqw, 12px);
  border-radius: 2px;
  font-size: clamp(5px, 0.9cqw, 13px);
  line-height: 1.3;
  color: #1f1f22;
  box-shadow: 1px 2px 5px rgba(31, 31, 34, 0.12);
  transform: rotate(-0.6deg);
}

.bd-group .bd-note:nth-child(3) { transform: rotate(0.7deg); }
.bd-group .bd-note:nth-child(4) { transform: rotate(-0.3deg); }

.bd-note--acid  { background: var(--odd-acid); }
.bd-note--amber { background: var(--odd-amber); }
.bd-note--coral { background: var(--odd-coral); color: #fbfaf7; }

.bd-big {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 22ch;
  margin-top: clamp(0.4rem, 1.5cqw, 1rem);
  padding: 1rem 1.2rem;
  border-radius: 2px;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.9rem, 1.8vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  transform: rotate(-1.2deg);
  box-shadow: 2px 4px 12px rgba(31, 31, 34, 0.16);
}

/* --- cursores de los demas --- */
.bd-peer {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  pointer-events: none;
}

.bd-peer svg { width: clamp(8px, 1.4cqw, 18px); height: auto; display: block; }

.bd-peer b {
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.bd-peer--violet { color: var(--odd-violet); }
.bd-peer--violet b { background: var(--odd-violet); }
.bd-peer--teal { color: var(--odd-teal); }
.bd-peer--teal b { background: var(--odd-teal); }

/* --- panel lateral --- */
.bd-panel {
  position: absolute;
  cursor: default;
  right: clamp(8px, 2cqw, 22px);
  top: clamp(8px, 2cqw, 22px);
  bottom: clamp(8px, 2cqw, 22px);
  z-index: 4;
  width: clamp(180px, 30cqw, 400px);
  overflow-y: auto;
  padding: 1.2rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(31, 31, 34, 0.16);
}

.bd-ph {
  display: block;
  margin: 1.2rem 0 0.5rem;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a5a199;
}

.bd-ph:first-child { margin-top: 0; }

.bd-name {
  margin: 0 0 0.5rem;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.bd-desc {
  margin: 0 0 0.8rem;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #55524c;
}

.bd-cta {
  display: inline-block;
  padding: 0.7em 1.2em;
  border: 1px solid #1f1f22;
  border-radius: 5px;
  font-weight: 500;
  font-size: 0.82rem;
  color: #1f1f22;
  text-decoration: none;
}

.bd-cta:hover { background: #1f1f22; color: #fbfaf7; }

/* lo pulsable recupera la mano: el pizarron no debe tragarse la senal */
.bd a,
.bd button,
.bd summary,
.bd .bd-tool,
.bd .bd-share { cursor: pointer; }

.bd input,
.bd textarea { cursor: text; }

.bd-q { border-color: #e6e3dc; }
.bd .cv-q__q { color: #1f1f22; font-size: 0.82rem; padding: 0.7rem 1.4rem 0.7rem 0; }
.bd .cv-q__q::after { color: var(--odd-blue); top: 0.65rem; }
.bd .cv-q__a { color: #55524c; font-size: 0.8rem; }

.ct--bd { color: #1f1f22; }
.ct--bd .ct__opt { border-color: #e0dcd3; }
.ct--bd .ct__opt.is-on { background: rgba(27, 38, 238, 0.08); border-color: var(--odd-blue); }
.ct--bd .ct__f input { border-bottom-color: #e0dcd3; }
.ct--bd .ct__go { background: var(--odd-blue); color: #fff; }

@media (max-width: 900px) {
  .bd-work { grid-template-columns: 1fr; padding-right: 1rem; }
  .bd-panel { position: relative; inset: auto; width: auto; margin: 1rem; }
  .bd.is-full .bd-canvas { overflow-y: auto; }
}

/* ==================================================================
   Seccion 6 — clientes

   Fondo oscuro a proposito: la seccion de servicios termina en claro y
   esta copia tiene demasiada actitud para un fondo suave. Los logos
   vienen en negro sobre transparente, asi que se invierten a blanco con
   un filtro en vez de pedir una segunda version de cada archivo.
================================================================== */
.cl {
  position: relative;
  z-index: 5;
  background: #0a0a0d;
  color: #fbfaf7;
  padding: clamp(6rem, 15vh, 11rem) clamp(1.4rem, 6vw, 7rem);
}

.cl__in {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* --- titular --- */
.cl__head {
  margin: 0;
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* el exterior recorta, el interior sube: revelado por linea */
.cl__l {
  display: block;
  overflow: hidden;
  padding: 0.08em 0;
  margin: -0.08em 0;
}

.cl__l > span {
  display: inline-block;
  transform: translateY(108%);
}

.cl.is-in .cl__l > span {
  transform: translateY(0);
  transition: transform 900ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.cl.is-in .cl__l:nth-child(2) > span { transition-delay: 90ms; }

/* la coletilla: en serif y en italica, para que se lea como un aparte
   dicho en voz baja y no como parte del titular */
.cl__aside {
  margin: clamp(1rem, 2.5vh, 1.6rem) 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  color: var(--odd-acid);
  opacity: 0;
  transform: translateY(12px);
}

.cl.is-in .cl__aside {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease 420ms, transform 700ms cubic-bezier(0.16, 0.9, 0.25, 1) 420ms;
}

.cl__copy {
  display: grid;
  gap: 0.7rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  max-width: 46ch;
}

.cl__copy p {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  line-height: 1.62;
  color: #9b9da3;
  opacity: 0;
  transform: translateY(12px);
}

.cl.is-in .cl__copy p {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.cl.is-in .cl__copy p:nth-child(1) { transition-delay: 560ms; }
.cl.is-in .cl__copy p:nth-child(2) { transition-delay: 660ms; }

/* --- muro de logos --- */
.cl__wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  margin: clamp(3.5rem, 9vh, 6rem) 0 0;
  padding: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  list-style: none;
  border-top: 1px solid rgba(251, 250, 247, 0.14);
}

/* el hueco recorta: el logo que sale y el que entra se cruzan dentro */
.cl-slot {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(46px, 6vw, 78px);
  overflow: hidden;
}

.cl-logo {
  position: absolute;
  /* el aire va aqui y no en el padding del hueco: un elemento absoluto
     resuelve su max-width contra la caja de relleno, asi que el padding
     no lo limita. Driver 1, el mas ancho, llegaba borde a borde. */
  max-width: 86%;
  max-height: 84%;
  /* --s ajusta el peso optico de cada marca */
  transform: scale(var(--s, 1));
  object-fit: contain;
  /* los archivos vienen en negro sobre transparente */
  filter: invert(1);
  opacity: 0.72;
  transition: opacity 300ms ease;
}

.cl-slot:hover .cl-logo { opacity: 1; }

@media (max-width: 700px) {
  .cl__wall { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cl__l > span,
  .cl__aside,
  .cl__copy p { transform: none; opacity: 1; }
}






/* ==================================================================
   Seccion 7 — admisiones

   Un cartel sobre menta con la figura a la derecha. Dos estados que
   comparten titular y figura: el cartel, y el formulario que lo
   sustituye al pulsar Apply Now. Solo cambia el bloque de en medio, asi
   que la composicion no se rompe al alternar.

   Todo el texto va en blanco sobre la menta -no en tinta oscura-: es lo
   que hace que se lea como cartel y no como pagina de formulario.
================================================================== */
.ik {
  /* Blanco sobre la menta da 1.3:1 -ilegible-. El blanco se reserva al
     titular, que es enorme y es la firma del cartel; todo lo demas pasa
     a tinta, que da 11:1 sobre el mismo fondo. */
  --ik-w:    #ffffff;
  --ik-ink:  #16281f;
  --ik-soft: rgba(22, 40, 31, 0.74);
  --ik-line: rgba(22, 40, 31, 0.34);

  position: relative;
  z-index: 5;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--odd-mint);
  color: var(--ik-ink);
  /* el aire de arriba despeja el nav fijo */
  padding: clamp(5rem, 12vh, 7.5rem) clamp(1.4rem, 6vw, 7rem) 0;
  overflow: hidden;
}

/* SIN position:relative a proposito: asi la figura se ancla a la SECCION
   y no a esta caja. Anclada aqui quedaba flotando a media altura, porque
   la caja es corta y va centrada. */
.ik__wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}

/* --- titular en dos capas ---
   Sin z-index propio: si lo llevara, crearia un contexto de apilamiento
   y el contorno no podria subir por encima de la figura. */
.ik__heads { position: relative; }

.ik__head {
  position: relative;
  /* flow-root, y no es decorativo: los .ik__l llevan margin -0.06em para
     la mascara del revelado. En el h2 en flujo ese margen negativo del
     primer hijo se COLAPSA hacia fuera y sube el bloque entero; la capa
     absoluta crea su propio contexto y no colapsa. Resultado: el
     contorno quedaba 7.9px por encima del relleno y cada letra se veia
     doble. Con flow-root las dos capas contienen sus margenes igual. */
  display: flow-root;
  /* max-content: los .ik__l heredan este ancho, y su overflow:hidden
     -la mascara del revelado- recorta TAMBIEN en horizontal. Con el
     ancho del envoltorio (1180px) las letras finales se cercenaban antes
     de llegar a la figura; medido al contenido, la mascara nunca corta
     por los lados. */
  width: max-content;
  margin: 0 0 clamp(1.2rem, 3vh, 2rem);
  font-family: "Romana", Georgia, serif;
  font-weight: 700;
  /* cuerpo elegido para que "RELATIONSHIPS." quepa entera y termine
     encima de la figura; mas grande la cercena el overflow */
  /* cuerpo calibrado para que 'RELATIONSHIPS.' llegue a cruzar por
     encima de la figura: mas pequeno terminaba antes de tocarla y el
     cruce de la referencia no se veia */
  /* El tope alto no es capricho: el cruce sobre la figura depende de que
     la tercera linea LLEGUE hasta ella. Con el tope en 8.2rem, en una
     ventana de ~2000px el titular se frenaba y quedaba un hueco de
     ~110px antes de la figura: el efecto desaparecia justo en pantallas
     grandes. */
  font-size: clamp(2rem, 9vw, 9.2rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: var(--ik-w);
  white-space: nowrap;   /* los cortes van escritos en el HTML */
}

/* el relleno va DETRAS de la figura (z-index 2) */
.ik__head--fill { z-index: 1; }

/* el contorno va DELANTE, clavado exactamente sobre el relleno.
   Sobre la menta cae encima del relleno y no se distingue; donde el
   titular cruza sobre ella, el relleno queda tapado por la figura y solo
   asoma este contorno. */
.ik__head--line {
  position: absolute;
  /* left/top y no inset: con inset:0 el ancho vuelve al del envoltorio y
     el recorte horizontal regresa por esta capa */
  left: 0;
  top: 0;
  z-index: 4;
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ik-w);
  pointer-events: none;
}

.ik__head--line .ik__ring { border-color: var(--ik-w); }

.ik__l { display: block; overflow: hidden; padding: 0.06em 0; margin: -0.06em 0; }
.ik__l > span { display: inline-block; transform: translateY(108%); }

.ik.is-in .ik__l > span {
  transform: translateY(0);
  transition: transform 900ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.ik.is-in .ik__l:nth-child(2) > span { transition-delay: 90ms; }
.ik.is-in .ik__l:nth-child(3) > span { transition-delay: 180ms; }

/* El punto final lleva un aro al lado, como en la referencia. Va en
   em para que siga al cuerpo del titular en cualquier ancho. */
.ik__ring {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  margin: 0 0.05em 0 0.02em;
  border: 0.035em solid currentColor;
  border-radius: 999px;
  vertical-align: baseline;
}

/* --- el campo ---
   Topado contra el borde de la figura: nada corre por debajo de ella.
   Los dos paneles se apilan en la MISMA celda de rejilla para que al
   alternar no salte el alto de la seccion. */
.ik__field {
  position: relative;
  z-index: 3;
  /* topado contra el borde de la figura: nada corre por debajo */
  width: min(52%, 620px);
  display: grid;
}

.ik__pane {
  grid-area: 1 / 1;
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

/* El que no toca se apaga y se saca del foco y del lector: dejarlo solo
   invisible lo mantiene tabulable y se puede escribir en un formulario
   que no se ve. */
.ik__pane[hidden] { display: none; }

.ik__pane.is-out { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* --- estado 1: el cartel --- */
.ik__lede { display: grid; gap: 0.15rem; margin: 0; max-width: 46ch; }

.ik__lede p {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.92rem, 1.25vw, 1.1rem);
  line-height: 1.55;
  color: var(--ik-ink);
}

/* la primera linea va justificada, como en la referencia */
.ik__lede p:first-child { text-align: justify; }

/* el remate cambia de voz, no de parrafo: contesta a la linea anterior */
.ik__snap {
  margin: clamp(1.2rem, 3vh, 2rem) 0 0;
  font-family: "Romana", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.7vw, 2.2rem);
  line-height: 1;
  color: var(--ik-ink);
}

/* --- el boton del cartel: pastilla en contorno --- */
.ik__apply {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(1.6rem, 4vh, 2.8rem);
  padding: 1em 2.4em;
  border: 1px solid var(--ik-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ik-ink);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.85rem, 1.05vw, 0.95rem);
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 300ms ease, color 300ms ease;
}

.ik__apply:hover { background: var(--ik-ink); color: var(--odd-mint); }
.ik__apply:focus-visible { outline: 2px solid var(--ik-ink); outline-offset: 4px; }
.ik__arrow { transition: transform 300ms cubic-bezier(0.16, 0.9, 0.25, 1); }
.ik__apply:hover .ik__arrow { transform: translateX(0.25em); }

/* --- estado 2: el formulario --- */
.ik__pane--form { display: grid; gap: clamp(0.9rem, 2.2vh, 1.4rem); }

.ik__tally {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  flex-wrap: wrap;
  margin: 0;
  font-family: "Romana", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;   /* que no bailen de ancho al contar */
}

.ik__tallysep { color: rgba(22, 40, 31, 0.4); }
.ik__tallytot { color: rgba(22, 40, 31, 0.48); }

.ik__tallynote {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  line-height: 1.5;
  color: var(--ik-soft);
  max-width: 26ch;
}

.ik__cut {
  margin: 0;
  font-family: "Romana", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  line-height: 1.06;
  text-transform: uppercase;
}

/* --- campos: solo una linea debajo, nada de cajas ---
   Una caja con borde y fondo blanco rompe el cartel; la linea deja que
   el campo pertenezca a la composicion. */
.ik__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.4rem; }

.ik__row { display: grid; gap: 0.25rem; }

.ik__lab {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ik-soft);
}

.ik__row input {
  width: 100%;
  padding: 0.4em 0 0.45em;
  border: 0;
  border-bottom: 1px solid var(--ik-line);
  background: transparent;
  color: var(--ik-ink);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.98rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 260ms ease;
}

.ik__row input:focus { outline: 0; border-bottom-color: var(--ik-ink); border-bottom-width: 2px; }

/* --- presupuesto ---
   Radios de verdad bajo fieldset: eleccion unica, recorrible con las
   flechas y anunciada como grupo. El input se oculta pero NO con
   display:none ni visibility:hidden, que lo sacarian del orden de
   tabulacion; se deja de 1px y el foco se pinta sobre la etiqueta. */
.ik__budget {
  margin: 0;
  padding: 0;
  border: 0;
}

.ik__budget .ik__lab { display: block; margin-bottom: 0.6rem; }

.ik__bands { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.ik__band { position: relative; }

.ik__band input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.ik__band span {
  display: inline-block;
  padding: 0.5em 1em;
  border: 1px solid var(--ik-line);
  border-radius: 999px;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  color: var(--ik-soft);
  cursor: pointer;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.ik__band:hover span { border-color: var(--ik-ink); color: var(--ik-ink); }

.ik__band input:checked + span {
  background: var(--ik-ink);
  border-color: var(--ik-ink);
  color: var(--odd-mint);
}

.ik__band input:focus-visible + span {
  outline: 2px solid var(--ik-ink);
  outline-offset: 3px;
}

/* --- los dos rotulos de servicio: lo unico en mono --- */
.ik__ask {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: clamp(0.4rem, 1.2vh, 0.9rem) 0 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ik-soft);
}

.ik.is-armed .ik__prog { color: var(--ik-ink); font-weight: 500; }

/* --- las condiciones --- */
.ik__gates { display: grid; gap: 0.1rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }

.ik__gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.45rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ik__box {
  position: relative;
  width: 17px;
  height: 17px;
  margin-top: 0.16em;
  border: 1px solid var(--ik-line);
  border-radius: 3px;
  transition: background-color 260ms ease, border-color 260ms ease;
}

.ik__box::after {
  content: "";
  position: absolute;
  left: 27%;
  top: 42%;
  width: 38%;
  height: 20%;
  border-left: 2px solid var(--odd-mint);
  border-bottom: 2px solid var(--odd-mint);
  transform: rotate(-45deg) scale(0);
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1) 90ms;
}

.ik__gate[aria-pressed="true"] .ik__box { background: var(--ik-ink); border-color: var(--ik-ink); }
.ik__gate[aria-pressed="true"] .ik__box::after { transform: rotate(-45deg) scale(1); }
.ik__gate:hover .ik__box { border-color: var(--ik-ink); }
.ik__gate:focus-visible { outline: 2px solid var(--ik-ink); outline-offset: 3px; }

.ik__gatetxt {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(0.8rem, 0.95vw, 0.88rem);
  line-height: 1.5;
  color: var(--ik-soft);
}

.ik__gatetxt b { font-weight: 600; color: var(--ik-ink); }

/* --- el envio: la misma pastilla del cartel, ya completa --- */
.ik__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  justify-self: start;
  margin-top: clamp(0.6rem, 1.8vh, 1.2rem);
  padding: 1em 2.2em;
  border: 1px solid var(--ik-ink);
  border-radius: 999px;
  background: var(--ik-ink);
  color: var(--odd-mint);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.05vw, 0.95rem);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

.ik__ctastate {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* cerrado: se vacia. El estado lo pone el JS, NUNCA el HTML: sin JS no
   hay compuertas y el envio tiene que servir. */
.ik__cta.is-locked {
  background: transparent;
  border-color: rgba(22, 40, 31, 0.4);
  color: rgba(22, 40, 31, 0.62);
  cursor: not-allowed;
}

.ik__cta:not(.is-locked):hover { background: transparent; color: var(--ik-ink); }

.ik__fine {
  margin: 0;
  max-width: 46ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--ik-soft);
}

.ik__back {
  justify-self: start;
  padding: 0.2em 0;
  border: 0;
  background: transparent;
  color: var(--ik-soft);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ik__back:hover { color: var(--ik-ink); }

/* --- estado 3: la membresia --- */
.ik__pane--member { display: grid; gap: clamp(0.9rem, 2.2vh, 1.4rem); }

.ik__memtag {
  margin: 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ik-soft);
}

.ik__memlede {
  margin: 0;
  max-width: 44ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.6;
  color: var(--ik-soft);
}

/* El aviso de "muy pronto" NO lleva tarjeta ni borde punteado. Ese
   borde existia para que se viera sin terminar mientras el contenido
   eran corchetes; ahora es contenido definitivo y tiene que leerse como
   tal. */
.ik__memsoon {
  margin: 0;
  max-width: 40ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 1.55;
  color: var(--ik-ink);
}

.ik__memtuned {
  margin: clamp(0.2rem, 1vh, 0.6rem) 0 0;
  font-family: "Romana", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ik-w);
}


/* --- la figura ---
   Medida por ALTO: anclada solo por abajo se quedaba en el ultimo tercio
   y solo asomaba la cabeza. */
.ik__figure {
  position: absolute;
  right: clamp(-5rem, -3vw, -2rem);
  bottom: 0;
  z-index: 2;
  /* topada tambien en px: al abrir el formulario la seccion crece y la
     figura crecia con ella hasta meterse debajo del texto */
  height: min(88%, 780px);
  aspect-ratio: 815 / 1086;   /* el webp mide 815x1086: la caja no salta al cargar */
  pointer-events: none;
}

.ik__figin {
  position: absolute;
  inset: 0;
  will-change: transform;
  /* el giro pivota sobre el suelo: desde el centro levantaba una esquina
     inferior y la figura se despegaba por un lado */
  transform-origin: bottom center;
}

.mf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
}

/* --- entrada --- */
.ik__pane--poster > * { opacity: 0; transform: translateY(14px); }

.ik.is-in .ik__pane--poster > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.ik.is-in .ik__pane--poster > *:nth-child(1) { transition-delay: 200ms; }
.ik.is-in .ik__pane--poster > *:nth-child(2) { transition-delay: 300ms; }
.ik.is-in .ik__pane--poster > *:nth-child(3) { transition-delay: 400ms; }

/* En pantallas anchas la figura crece. Con el tope de 780px quedaba
   pequena respecto al mockup -ella ocupa media composicion- y ademas el
   titular moria a ~50px de sus pixeles opacos: el webp trae margen
   transparente y el pelo empieza en el 20% del ancho de la caja, asi
   que rozaba la caja sin tocarla a ella. Mas grande, el cruce cae sobre
   el pelo de verdad. */
@media (min-width: 1600px) {
  .ik__figure { height: min(88%, 960px); }
}

/* En ultrapanoramico la figura se ancla al CENTRO, no al borde: el
   envoltorio va centrado a 1180px y el borde derecho se aleja sin
   limite, asi que perseguirlo abria un hueco que ningun tope de fuente
   alcanza -a 2560px el cruce quedaba en 0px-. 50vw-1085px la deja a
   distancia fija del envoltorio; en 2000px coincide con el valor de la
   clamp y no hay salto. */
@media (min-width: 2000px) {
  .ik__figure { right: calc(50vw - 1085px); }
}

/* Entre 900 y 1300 el lienzo se estrecha pero la figura conserva su
   alto, y el campo alcanzaba a meterse debajo de ella. Encogen las dos. */
@media (max-width: 1300px) {
  .ik__field { width: min(54%, 580px); }
  .ik__figure { height: min(76%, 640px); }
}

/* Entre 640 y 900 la figura sigue SOLIDA, solo mas pequena y mas fuera
   del encuadre. Antes se lavaba al 20% ya desde 900px -una ventana de
   portatil normal, no un telefono- y se veia como un fantasma
   descolorido. */
@media (max-width: 900px) {
  .ik__field { width: min(64%, 460px); }
  .ik__rows { grid-template-columns: minmax(0, 1fr); }
  .ik__figure { height: min(72%, 560px); right: -12%; }
}

/* En pantallas estrechas la figura BAJA AL FLUJO, entera y a todo
   color, en vez de quedarse detras del texto lavada. Un fantasma
   descolorido se lee como un error de carga, no como una decision.
   En el HTML ya va despues del campo, asi que solo hay que soltarla del
   posicionamiento absoluto y cae donde toca. */
@media (max-width: 640px) {
  .ik__field { width: 100%; }
  .ik__figure {
    position: relative;
    right: auto;
    bottom: auto;
    height: auto;
    width: min(88%, 380px);
    margin: clamp(1.6rem, 5vh, 2.6rem) auto 0;
    opacity: 1;
  }
  /* que toque el borde inferior de la seccion, como en escritorio */
  .ik__wrap { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ik__l > span,
  .ik__pane--poster > * { transform: none; opacity: 1; }
  .ik__pane { transition: none; }
}

/* --- Netflix: plan B cuando no hay origen valido ---
   YouTube rechaza sus embeds con origen null -al abrir el HTML con doble
   clic- y pinta su propio "Error 153". En ese caso services.js no monta
   el iframe y deja esto: la portada del video con su enlace. Sirviendo el
   sitio no aparece nunca. */
.nxt__nofile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background-color: #0b0b0d;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: #fff;
}

.nxt__nofile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.62);
}

.nxt__nofilep {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-size: 1.1rem;
  padding-left: 4px;   /* el triangulo pesa a la izquierda */
  transition: background-color 260ms ease, color 260ms ease;
}

.nxt__nofile:hover .nxt__nofilep { background: #fff; color: #0b0b0d; }

.nxt__nofilet {
  position: relative;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  padding: 0 1rem;
}

/* ==================================================================
   Pie

   Colofon, no directorio. Un pie de cuatro columnas con "enlaces
   rapidos" seria justo lo que el sitio lleva seis secciones evitando.

   Cierra en negro despues de la menta de admisiones -contraste duro, y
   la figura de arriba sangra contra este borde- y firma con el logotipo
   enorme recortado por abajo, el mismo gesto del David y la Mona.
================================================================== */
.ft {
  position: relative;
  z-index: 5;
  background: #08080a;
  color: #f4f2ed;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.4rem, 6vw, 7rem) 0;
  overflow: hidden;
}

.ft__in { width: 100%; max-width: 1180px; margin: 0 auto; }

.ft__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* las tres frases del hero, en serif y apiladas: es la voz del sitio
   cerrandose sobre si misma, no un eslogan nuevo */
.ft__say {
  margin: 0;
  display: grid;
  gap: 0.1em;
  font-family: "Romana", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.ft__say > .ft__l:nth-child(2) { color: rgba(244, 242, 237, 0.62); }
.ft__say > .ft__l:nth-child(3) { color: var(--odd-acid); }

/* el exterior recorta, el interior sube dentro: revelado enmascarado.
   El padding con margen negativo da holgura para que la mascara no se
   coma las serifas ni los descendentes de la Romana. */
.ft__l {
  display: block;
  overflow: hidden;
  padding: 0.1em 0;
  margin: -0.1em 0;
}

/* SIN transform ni opacity aqui, a proposito.

   Con translateY(110%) en el CSS, GSAP lo lee al arrancar y se lo queda
   en su canal "y"; animar yPercent a 0 no lo limpia, asi que la palabra
   se quedaba 52px abajo y la mascara la recortaba entera. Es la misma
   colision de transforms que ya mordio en el campo cinetico y en el
   David.

   El estado de partida lo pone GSAP con gsap.set, que es dueno unico del
   transform. Y de paso esto es el respaldo sin JS: sin script las
   palabras salen visibles y el pie se lee igual. */
.ft__w {
  display: inline-block;
  will-change: transform;
}

.ft__col { display: grid; gap: 0.55rem; align-content: start; }

/* Al acido: en gris estaban en 3.82:1 sobre el negro del pie, por debajo
   del minimo de 4.5 para texto pequeno. El acido da 17.43:1 y ademas los
   convierte en la senal de orientacion de la seccion. */
.ft__h {
  margin: 0 0 0.35rem;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--odd-acid);
}

.ft__col a {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  color: rgba(244, 242, 237, 0.8);
  text-decoration: none;
  justify-self: start;
  transition: color 240ms ease;
}

.ft__col a:hover { color: var(--odd-acid); }
.ft__col a:focus-visible { outline: 2px solid var(--odd-acid); outline-offset: 3px; }

.ft__mail { font-weight: 400 !important; }

.ft__social {
  display: flex;
  gap: 0.9rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.ft__social a { display: block; }

.ft__social svg {
  width: 18px;
  height: 18px;
  fill: rgba(244, 242, 237, 0.7);
  transition: fill 240ms ease;
}

.ft__social a:hover svg { fill: var(--odd-acid); }

/* --- barra inferior --- */
.ft__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(244, 242, 237, 0.14);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: #82807a;
}

.ft__legal { margin: 0; }

.ft__top {
  padding: 0;
  border: 0;
  background: transparent;
  color: #82807a;
  font: inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 240ms ease;
}

.ft__top:hover { color: var(--odd-acid); }
.ft__top:focus-visible { outline: 2px solid var(--odd-acid); outline-offset: 3px; }

/* --- la firma ---
   Recortada por el borde inferior a proposito: se lee como un sello, no
   como un logotipo centrado. El margen negativo es en em del propio
   ancho, asi que el recorte se mantiene proporcional en cualquier
   pantalla. */
.ft__mark {
  display: block;
  width: min(100%, 1180px);
  height: auto;   /* con width/height en el HTML, sin esto no escala */
  margin: clamp(2rem, 5vh, 3.5rem) auto calc(-1 * min(100%, 1180px) * 0.115);
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 860px) {
  .ft__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ft__bar { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ft__col a, .ft__social svg, .ft__top { transition: none; }
}

/* --- nav: menu recogido en pantallas estrechas ---
   Seis etiquetas largas mas los iconos no caben en un telefono: a 390px
   el nav pedia 544px y habia 352. Los enlaces son los mismos que en
   escritorio, no un duplicado; solo cambia como se presentan. */
.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav__burger {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: background-color 200ms ease;
}

.nav__burger::before,
.nav__burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__burger::before { top: -6px; }
.nav__burger::after  { top: 6px; }

/* abierto: las tres rayas se cruzan */
.nav.is-open .nav__burger { background: transparent; }
.nav.is-open .nav__burger::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }

  /* El panel es opaco, asi que el nav tiene que salir del modo
     difference: sobre un fondo propio, difference invertiria el texto. */
  .nav.is-open { mix-blend-mode: normal; }

  .nav__right {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1.4rem, 4vh, 2.2rem);
    padding: 6rem clamp(1.4rem, 8vw, 3rem) 3rem;
    background: #08080a;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease;
  }

  .nav.is-open .nav__right {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
  }

  .nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.7rem, 2.2vh, 1.2rem);
  }

  /* en el panel los enlaces son el contenido, no una barra: cuerpo
     grande y en la serif del sitio */
  .nav__links a {
    font-family: "Romana", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 7vw, 2.6rem);
    letter-spacing: 0.01em;
    text-transform: none;
    color: #f4f2ed;
  }

  .nav__links a:hover { color: var(--odd-acid); }

  .social { gap: 1.4rem; }
  .social svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__right,
  .nav__burger,
  .nav__burger::before,
  .nav__burger::after { transition: none; }
}

/* --- nav: submenu de servicios ---
   Se abre con un zoom corto desde arriba, no con un desplegable que
   empuja: el nav es fijo y cualquier cambio de alto moveria la barra
   entera. */
.nav__item--sub {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__subtoggle {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav__chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__item--sub.is-open .nav__chev { transform: translateY(1px) rotate(-135deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  z-index: 2;
  min-width: 17rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #08080a;
  border: 1px solid rgba(244, 242, 237, 0.16);
  /* el zoom: nace un poco encogido y desde arriba */
  transform: scale(0.96) translateY(-8px);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__item--sub.is-open .nav__sub {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.nav__sub button {
  display: block;
  width: 100%;
  padding: 0.5rem 1.1rem;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 237, 0.82);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.nav__sub button:hover { background: rgba(244, 242, 237, 0.07); color: var(--odd-acid); }
.nav__sub button:focus-visible { outline: 2px solid var(--odd-acid); outline-offset: -2px; }

/* El submenu es opaco: sobre el modo difference del nav saldria
   invertido. Mientras hay uno abierto, el nav pinta normal. */
.nav.is-sub-open { mix-blend-mode: normal; }

@media (max-width: 900px) {
  /* dentro del panel no hay donde flotar: el submenu se despliega en el
     propio flujo */
  .nav__item--sub { display: block; }

  .nav__item--sub > a { display: inline-block; }

  .nav__subtoggle {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-left: 0.4rem;
  }

  .nav__chev { width: 8px; height: 8px; }

  .nav__sub {
    position: static;
    min-width: 0;
    margin: 0.5rem 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(244, 242, 237, 0.2);
    display: none;
    transform: none;
    opacity: 1;
  }

  .nav__item--sub.is-open .nav__sub { display: block; }

  .nav__sub button {
    padding: 0.42rem 0 0.42rem 1rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__chev { transition: none; }
}

/* --- selector de idioma --- */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: clamp(0.8rem, 2vw, 1.6rem);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ink);
}

.nav__lang span { opacity: 0.4; }

.nav__lang button {
  padding: 0.2em 0.1em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  opacity: 0.45;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 200ms ease;
}

.nav__lang button:hover { opacity: 0.8; }
/* el activo se marca con el peso, no con color: el nav va en difference
   y un color aqui saldria invertido sobre segun que fondo */
.nav__lang button[aria-pressed="true"] { opacity: 1; font-weight: 500; }
.nav__lang button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 900px) {
  /* junto al boton de menu, que es lo unico que queda visible */
  .nav__lang { margin-right: auto; }
}

/* --- servicios: foco de teclado ---
   El control enfocable de cada tarjeta es un boton invisible (.cv-card__kb
   con sr-only). Sin esto, quien navega con Tab recibiria el foco y no
   veria nada: el anillo se dibuja sobre la tarjeta entera. */
.cv-card:focus-within {
  outline: 2px solid var(--odd-acid);
  outline-offset: 6px;
  border-radius: 2px;
}

/* el boton no debe interceptar el arrastre con raton: solo existe para
   el teclado, y el puntero sigue trabajando sobre la tarjeta */
.cv-card__kb { pointer-events: none; }
.cv-card__kb:focus { pointer-events: auto; }