/* =========================================================================
   NVY Studios — portafolio
   Sistema: fondo casi negro, texto blanco y un solo acento azul (el de la marca).
   Tipografias: Inter Tight (titulos) e Inter (texto, numeros, etiquetas).
   ========================================================================= */

@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --bg-2: #151517;
  --tinta: #f3f3ef;
  --gris: #a6a7ab;          /* texto secundario, 7.9:1 sobre el fondo */
  --gris-2: #8b8c91;        /* etiquetas, 5.6:1 */
  --linea: rgba(243, 243, 239, .14);
  /* Acento: el azul de la marca, un poco mas claro para que se lea sobre negro (4.6:1).
     El azul marino puro (#0a1f5c) queda en botones, menu y degradados. */
  --azul: #4a74e8;
  --azul-2: #6d8ff0;
  --celeste: #a9c3f8;
  /* Degradados del texto: de arriba hacia abajo, sin animacion.
     El de los titulos es el mismo azul de la version blanca. */
  /* Brillo diagonal tenue encima: da el efecto de vidrio sin animar nada. */
  --brillo: linear-gradient(112deg, rgba(255,255,255,0) 32%, rgba(236,243,255,.7) 46%, rgba(255,255,255,0) 60%);
  --grad-azul: var(--brillo), linear-gradient(176deg, #123182 12%, #2f5ad0 46%, #9dbaf7 74%, #e6eeff 100%);
  --grad-claro: linear-gradient(112deg, rgba(143,176,246,0) 30%, rgba(143,176,246,.45) 46%, rgba(143,176,246,0) 60%), linear-gradient(176deg, #ffffff 30%, #d6e3ff 62%, #8fb0f6 100%);

  --pad: clamp(16px, 2.2vw, 32px);
  --gap: clamp(12px, 1.5vw, 24px);
  --ancho: calc(100vw - 2 * var(--pad));

  --sale: cubic-bezier(.16, 1, .3, 1);      /* entradas suaves */
  --cambia: cubic-bezier(.76, 0, .24, 1);   /* cortinas y menu */

  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cab-fondo: rgba(11, 11, 12, .72);      /* header al bajar */
  --cortina: #0a1f5c;                      /* transicion entre paginas (cada proyecto pone la suya) */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* Sin el recuadro gris que iOS y Android dibujan al tocar un link o boton. */
a, button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
::selection { background: var(--azul); color: #fff; }

.ico { width: 1em; height: 1em; flex: none; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: fixed; left: var(--pad); top: -64px; z-index: 100;
  background: var(--tinta); color: var(--bg); padding: 10px 14px; font-size: 14px;
}
.saltar:focus { top: 12px; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Link con subrayado que crece desde la izquierda */
.subraya { position: relative; }
.subraya::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--sale);
}
.subraya:hover::after { transform: scaleX(1); transform-origin: left; }

/* Boton de contacto: el unico solido de la web */
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  color: #0b0b0c;
  background-color: #fff;
  /* Vidrio blanco: brillo arriba y un borde celeste suave abajo */
  background-image: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(214,227,255,.55) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(143,176,246,.45);
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background-color .35s var(--sale), filter .35s var(--sale), transform .6s var(--sale);
}
.boton .ico { transition: transform .45s var(--sale); }
.boton:hover { filter: brightness(.93); }
.boton:hover .ico--diagonal { transform: translate(2px, -2px); }
.boton:hover .ico--derecha { transform: translateX(3px); }

/* Fila de seccion: nombre a la izquierda, indice a la derecha */
.rotulo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--linea); padding-top: 14px;
  font-size: 14px; color: var(--gris-2);
  margin-bottom: clamp(40px, 6vw, 96px);
}
.rotulo h2 { font: inherit; color: var(--tinta); }

/* ---------- header: siempre visible ----------
   Solo la marca y el boton de menu. En la portada de la home la marca chica se
   esconde (ya esta gigante abajo) y aparece al bajar. */
.cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px; padding: 0 var(--pad);
  font-size: 14px; color: var(--tinta);
  transition: background-color .35s, box-shadow .35s, color .35s;
}
.cab.is-solida {
  background: var(--cab-fondo); box-shadow: 0 1px 0 var(--linea);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
.cab__logo {
  display: flex; align-items: center;
  transition: opacity .5s var(--sale), visibility 0s;
}
.cab__logo img { display: block; height: 34px; width: auto; transition: filter .35s; }
/* Sobre una seccion clara: logo y menu en negro, barra clara */
.cab.es-claro { color: #0b0b0c; --cab-fondo: rgba(243, 243, 239, .75); }
.cab.es-claro.is-solida { box-shadow: 0 1px 0 rgba(11, 11, 12, .1); }
.cab.es-claro .cab__logo img { filter: invert(1); }
html.menu-abierto .cab.es-claro .cab__logo img { filter: none; }
html.menu-abierto .cab.es-claro { color: #fff; }
.cab.en-portada .cab__logo { opacity: 0; visibility: hidden; transition: opacity .5s var(--sale), visibility 0s linear .5s; }
.cab__menu { position: relative; padding: 6px 0; font-weight: 500; transition: color .3s; }
.cab__menu::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--sale);
}
.cab__menu:hover::after { transform: scaleX(1); transform-origin: left; }
/* Con el menu abierto: sin barra; el boton queda blanco sobre el panel azul */
html.menu-abierto .cab { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.menu-abierto .cab__menu { color: #fff; }

/* ---------- menu: panel lateral derecho en azul ---------- */
.menu { position: fixed; inset: 0; z-index: 55; visibility: hidden; transition: visibility 0s linear .7s; }
.menu.is-abierto { visibility: visible; transition: visibility 0s; }
.menu__velo {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer;
  background: rgba(11, 11, 12, .42);
  opacity: 0; transition: opacity .6s var(--sale);
}
.menu.is-abierto .menu__velo { opacity: 1; }
.menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(520px, 88vw);
  display: grid; grid-template-rows: 1fr auto;
  padding: 96px clamp(28px, 3vw, 48px) calc(clamp(28px, 3vw, 40px) + env(safe-area-inset-bottom));
  color: #fff;
  background-color: var(--azul);
  /* Panel con brillo de vidrio: luz celeste arriba a la derecha que se apaga hacia abajo */
  background-image: radial-gradient(90% 55% at 100% 0%, rgba(169,195,248,.32), rgba(169,195,248,0) 70%), linear-gradient(195deg, #1d44ad 0%, #0a1f5c 48%, #081849 100%);
  transform: translateX(100%);
  transition: transform .7s cubic-bezier(.32, .72, 0, 1);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu.is-abierto .menu__panel { transform: none; }
.menu__nav { align-self: center; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__link {
  display: flex; align-items: flex-start; gap: 16px;
  font-family: var(--display); font-weight: 500; letter-spacing: -.045em;
  font-size: clamp(44px, 3.9vw, 58px); line-height: 1.04; white-space: nowrap;
  transition: opacity .4s, transform .6s var(--sale);
}
.menu__num {
  font-family: var(--texto); font-size: 12px; font-weight: 500; letter-spacing: 0;
  color: rgba(255, 255, 255, .6); padding-top: .9em; font-variant-numeric: tabular-nums;
}
.menu__txt > span {
  display: inline-block; opacity: 0; transform: translateX(32px);
  transition: opacity .5s, transform .8s var(--sale);
  transition-delay: calc(.18s + var(--i) * .06s);
}
.menu.is-abierto .menu__txt > span { opacity: 1; transform: none; }
.menu:not(.is-abierto) .menu__txt > span { transition-delay: 0s; transition-duration: .25s; }
.menu__pie {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  font-size: 14px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s, transform .8s var(--sale);
}
.menu.is-abierto .menu__pie { opacity: 1; transform: none; transition-delay: .4s; }
.menu__col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.menu__lbl { color: rgba(255, 255, 255, .6); }
.menu__col a { display: inline-flex; align-items: center; gap: 6px; }
.menu__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) {
  .menu__lista:hover .menu__link { opacity: .45; }
  .menu__lista .menu__link:hover { opacity: 1; transform: translateX(-10px); }
}

/* ---------- texto en degradado (solo letras, sin animacion) ----------
   Azul marino arriba que se aclara a celeste abajo, como un reflejo de vidrio.
   Version oscura para fondo blanco y version clara para el panel azul.
   El relleno extra evita que se corten la cola de la "y", la "j" o la "¿",
   que con interlineado bajo quedan fuera de la caja del texto. */
.degradado, .menu__txt > span {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding: .06em .1em .22em 0; margin: -.06em -.1em -.22em 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.degradado { background-image: var(--grad-azul); }
.menu__txt > span { background-image: var(--grad-claro); }

/* ---------- animaciones de entrada ----------
   Solo en escritorio. En celular (.estatico) todo aparece quieto desde el inicio. */

/* Titulos: cada palabra es una mascara y sus letras suben una por una. */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .12em .26em .04em; margin: -.06em -.12em -.26em -.04em; }
.letra { display: inline-block; transform-origin: 0 100%; }
/* Degradado por letra: cada una pinta su tramo del degradado de la palabra
   (--w = ancho de la palabra, --x = posicion de la letra, ambos en em). */
.palabra--degradado .letra {
  background-image: var(--grad-azul); background-repeat: no-repeat;
  background-size: calc(var(--w) * 1em + .3em) 100%;
  background-position: calc(.04em - var(--x) * 1em) 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding: .06em .1em .26em .04em; margin: -.06em -.1em -.26em -.04em;
}
/* Nombres de proyecto con los colores de su marca (--m*, --n* salen de proyectos.json).
   Efecto de vidrio con un brillo: sobre negro va el tono claro arriba y el principal
   abajo (el tono mas oscuro de cada marca no se veria). */
.marca {
  --brillo-marca: linear-gradient(112deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 60%);
  --grad-marca: var(--brillo-marca), linear-gradient(176deg, var(--m4) 8%, var(--m3) 42%, var(--m2) 82%);
  --grad-marca-b: var(--brillo-marca), linear-gradient(176deg, var(--n4, var(--m4)) 8%, var(--n3, var(--m3)) 42%, var(--n2, var(--m2)) 82%);
}
.marca .palabra--degradado .letra { background-image: var(--grad-marca); }
.marca .palabra--degradado .letra--b { background-image: var(--grad-marca-b); }
.js:not(.estatico) [data-reveal="letras"] .letra,
.js:not(.estatico) .portada__marca .letra {
  transform: translateY(112%) rotate(7deg);
  transition: transform 1.15s var(--sale) calc(var(--n) * 34ms);
}
.js:not(.estatico) [data-reveal="letras"].is-visible .letra,
.js.is-listo:not(.estatico) .portada__marca .letra { transform: none; }
/* Parrafos: el bloque entero sube y aparece. Es una sola pieza que mueve la tarjeta de
   video (opacidad y posicion), asi que no compite con el scroll: letra por letra eran
   cientos de animaciones a la vez y la pagina se trababa. */
.js:not(.estatico) [data-reveal="texto"] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--sale), transform 1.15s var(--sale); }
.js:not(.estatico) [data-reveal="texto"].is-visible { opacity: 1; transform: none; }

/* Lineas finas que se dibujan de izquierda a derecha. */
[data-reveal="linea"] { position: relative; }
.js:not(.estatico) [data-reveal="linea"] { border-top-color: transparent; }
.js:not(.estatico) [data-reveal="linea"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--linea);
  transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--sale);
}
.js:not(.estatico) [data-reveal="linea"].is-visible::before { transform: none; }

/* ---------- portada ----------
   Minima: solo la marca gigante, de borde a borde, abajo de la pantalla, y una linea
   con que hacemos y donde. Las letras suben una por una al entrar (solo escritorio). */
.portada {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 96px var(--pad) clamp(20px, 3vw, 40px);
}
.portada__marca {
  display: block;
  font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .8;
  white-space: nowrap;
  /* --em: ancho del texto en em (calculado en el build) => llena el ancho exacto */
  font-size: calc(var(--ancho) / var(--em) * .995);
  margin-left: -.035em;
  margin-bottom: .22em; /* aire para que la cola de la "y" no cruce la linea de abajo */
}
.portada__bajada {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  margin-top: clamp(16px, 2.4vw, 32px); 
  font-family: var(--texto); font-size: clamp(14px, 1.1vw, 16px); font-weight: 400;
  letter-spacing: 0; line-height: 1.4; color: var(--gris);
}
.js:not(.estatico) .portada__bajada { opacity: 0; transform: translateY(14px); transition: opacity .9s, transform 1.1s var(--sale); transition-delay: .55s; }
.js.is-listo:not(.estatico) .portada__bajada { opacity: 1; transform: none; }

/* ---------- trabajos ---------- */
.trabajos { position: relative; padding: clamp(96px, 14vw, 200px) var(--pad) clamp(24px, 3vw, 48px); }
.trabajos__cab {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 32px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.titulo-seccion {
  font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .86;
  font-size: clamp(64px, 11vw, 176px);
  margin-bottom: clamp(40px, 6vw, 88px);
}
.trabajos__cab .titulo-seccion { margin-bottom: 0; }
.trabajos__ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 14px; padding-bottom: .3em; }
.filtros, .vistas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.vistas { gap: 8px; color: var(--gris-2); }
.ctrl { color: var(--gris-2); padding: 4px 0; transition: color .25s; }
.ctrl[aria-pressed="true"] { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ctrl:hover { color: var(--azul); }

/* Encabezados de columna y filas: misma grilla de 12 columnas */
.obras__cols, .obra__link {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
}
.obras__cols { font-size: 13px; color: var(--gris-2); padding-bottom: 10px; }
.obras__cols span:nth-child(1), .obra__nombre { grid-column: 1 / 7; }
.obras__cols span:nth-child(2), .obra__rubro { grid-column: 7 / 10; }
.obras__cols span:nth-child(3), .obra__anio { grid-column: 10; }
.obras__cols span:nth-child(4), .obra__estado { grid-column: 11; }
.obra__flecha { grid-column: 12; justify-self: end; }

.obras { list-style: none; margin: 0; padding: 0; }
/* Al filtrar, las filas de la lista vuelven a entrar rapido; la grilla cambia al tiro. */
.obras[data-vista="lista"] .obra.is-entra { animation: obra-entra .5s var(--sale) both; animation-delay: calc(var(--k, 0) * 30ms); }
@keyframes obra-entra { from { opacity: 0; transform: translateY(18px); } }

/* Vista lista */
.obras[data-vista="lista"] { border-bottom: 1px solid var(--linea); }
.obra { position: relative; }
.obras[data-vista="lista"] .obra::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea);
  transform-origin: left; transition: transform 1.2s var(--sale);
}
.obra__link { align-items: baseline; padding: clamp(14px, 1.6vw, 22px) 0; transition: opacity .45s var(--sale), transform .9s var(--sale); }
.js:not(.estatico) .obras[data-vista="lista"] .obra:not(.is-visible)::before { transform: scaleX(0); }
.js:not(.estatico) .obras[data-vista="lista"] .obra:not(.is-visible) .obra__link { opacity: 0; transform: translateY(26px); }
.obra__rubro, .obra__anio, .obra__estado { font-size: 14px; color: var(--gris-2); font-variant-numeric: tabular-nums; }
.obra__rubro, .obra__estado { color: var(--gris); }
.obra__nombre {
  font-family: var(--display); font-weight: 500; letter-spacing: -.035em; line-height: 1.1;
  font-size: clamp(22px, 2.4vw, 36px);
}
.obra__nombre > span { display: inline-block; transition: transform .6s var(--sale), color .35s; }
/* Al pasar el mouse el nombre toma los colores de su marca (el degradado ya esta debajo del texto). */
.obra__nombre .tramo { -webkit-background-clip: text; background-clip: text; transition: color .35s; }
.obra__nombre.marca .tramo { background-image: linear-gradient(176deg, var(--m4) 0%, var(--m3) 45%, var(--m2) 100%); }
.obra__nombre.marca .tramo--b { background-image: linear-gradient(176deg, var(--n4) 0%, var(--n3) 45%, var(--n2) 100%); }
/* En celular (sin mouse) la fila abierta muestra el nombre con sus colores. */
.obras[data-vista="lista"] .obra.is-abierta .obra__nombre.marca .tramo { color: transparent; }
.obra__flecha { display: flex; align-self: center; font-size: 20px; transition: transform .5s var(--sale), color .35s; }
/* La flecha indica si la fila esta abierta: abajo cerrada, arriba abierta. */
.obras[data-vista="lista"] .obra__flecha { transform: rotate(90deg); }
.obras[data-vista="lista"] .obra.is-abierta .obra__flecha { transform: rotate(-90deg); color: var(--azul); }
@media (hover: hover) {
  .obras[data-vista="lista"]:hover .obra__link { opacity: .32; }
  .obras[data-vista="lista"] .obra__link:hover,
  .obras[data-vista="lista"] .obra__link:focus-visible { opacity: 1; }
  .obras[data-vista="lista"] .obra__link:hover .obra__nombre > span { transform: translateX(14px); color: var(--azul); }
  .obras[data-vista="lista"] .obra__link:hover .obra__nombre.marca .tramo { color: transparent; }
  .obras[data-vista="lista"] .obra__link:hover .obra__flecha { color: var(--azul); }
  .obras[data-vista="lista"] .obra.is-abierta .obra__link { opacity: 1; }
}
/* Vista lista: cada fila se despliega hacia abajo con una vista corta del proyecto
   (captura, una frase y "ver proyecto"). Clic o toque abre, otro clic cierra (nvy.js). */
.obra__foto { display: block; }
.obras[data-vista="lista"] .obra__media {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--sale);
}
.obras[data-vista="lista"] .obra.is-abierta .obra__media { grid-template-rows: 1fr; }
.obras[data-vista="lista"] .obra__media-in {
  min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
}
/* la captura va en un MacBook (.mac, mas abajo) */
.obras[data-vista="lista"] .obra__foto { grid-column: 1 / 5; margin: 12px 0 clamp(22px, 2.4vw, 32px); }
.obras[data-vista="lista"] .obra__foto img { transition: transform .9s var(--sale); }
.obras[data-vista="lista"] .obra__foto:hover img { transform: scale(1.03); }
/* Con la fila cerrada la captura no se dibuja (igual queda descargada de antes). */
.obras[data-vista="lista"] .obra:not(.is-abierta) .obra__foto .mac { display: none; }
.obras[data-vista="lista"] .obra__info { grid-column: 7 / 13; padding: 4px 0 clamp(22px, 2.4vw, 32px); }
.obra__resumen { max-width: 44ch; font-size: 15px; line-height: 1.55; color: var(--gris); }
.obra__ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--azul); }
.obra__ver .ico { transition: transform .45s var(--sale); }
.obra__ver:hover .ico { transform: translateX(4px); }
/* Al abrir, lo de adentro aparece suave detras del despliegue. */
.obras[data-vista="lista"] .obra__media-in > * { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .5s var(--sale); }
.obras[data-vista="lista"] .obra.is-abierta .obra__media-in > * { opacity: 1; transform: none; transition-delay: .08s; }

/* Escritorio con mouse: la lista ocupa la izquierda y una vista previa fija, a la derecha,
   cambia al pasar el mouse por cada fila. Un clic entra al proyecto. */
.obras__pv { display: none; }
@media (hover: hover) and (min-width: 901px) {
  .trabajos[data-vista="lista"] .obras__cols { display: none; }
  .trabajos[data-vista="lista"] .obras__wrap {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
  }
  .trabajos[data-vista="lista"] .obras { grid-column: 1 / 8; }
  .trabajos[data-vista="lista"] .obra__link { grid-template-columns: minmax(0, 1fr) auto; }
  .trabajos[data-vista="lista"] .obra__nombre { grid-column: 1; }
  .trabajos[data-vista="lista"] .obra__rubro,
  .trabajos[data-vista="lista"] .obra__anio,
  .trabajos[data-vista="lista"] .obra__estado,
  .trabajos[data-vista="lista"] .obra__media { display: none; }
  .trabajos[data-vista="lista"] .obra__flecha { grid-column: 2; transform: none; }
  .trabajos[data-vista="lista"] .obras__pv {
    display: grid; grid-column: 8 / 13; position: sticky; top: 14vh;
  }
  .pv { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity .5s var(--sale); }
  .pv.is-activo { opacity: 1; }
  .pv figcaption { margin-top: 18px; font-size: 14px; color: var(--gris-2); }
}

/* Vista grilla */
.trabajos[data-vista="grilla"] .obras__cols { display: none; }
.obras[data-vista="grilla"] {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px) var(--gap);
}
.obras[data-vista="grilla"] .obra { position: relative; display: flex; flex-direction: column; }
.obras[data-vista="grilla"] .obra__media { order: -1; }
.obras[data-vista="grilla"] .obra__foto img { transition: transform 1.1s var(--sale); }
.obras[data-vista="grilla"] .obra__info { display: none; }
.obras[data-vista="grilla"] .obra__link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; align-items: baseline; padding: 16px 0 0; }
.obras[data-vista="grilla"] .obra__link::after { content: ""; position: absolute; inset: 0; }
.obras[data-vista="grilla"] .obra__nombre { grid-column: 1; grid-row: 1; font-size: clamp(20px, 1.8vw, 28px); }
.obras[data-vista="grilla"] .obra__anio { grid-column: 2; grid-row: 1; text-align: right; }
.obras[data-vista="grilla"] .obra__rubro { grid-column: 1; grid-row: 2; }
.obras[data-vista="grilla"] .obra__estado { grid-column: 2; grid-row: 2; text-align: right; }
.obras[data-vista="grilla"] .obra__flecha { display: none; }
@media (hover: hover) {
  .obras[data-vista="grilla"] .obra:hover .obra__foto img { transform: scale(1.035); }
  .obras[data-vista="grilla"] .obra:hover .obra__nombre > span { color: var(--azul); }
  .obras[data-vista="grilla"] .obra:hover .obra__nombre.marca .tramo { color: transparent; }
}

/* ---------- demos ----------
   Nombres grandes a la izquierda; a la derecha una vista previa fija que cambia al pasar
   el mouse. Las capturas son maquetas hasta que haya las reales. */
.demos { padding: clamp(64px, 8vw, 120px) var(--pad) clamp(96px, 12vw, 180px); }
.demos .titulo-seccion { margin-bottom: 16px; }
.demos__sub { color: var(--gris-2); font-size: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.demos__wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.demos__lista { grid-column: 1 / 8; list-style: none; margin: 0; padding: 0; }
.demo > a, .demo > div { display: flex; align-items: baseline; gap: 14px; padding: clamp(10px, 1.4vw, 20px) 0; cursor: default; }
.demo > a { cursor: pointer; }
.demo__nombre {
  font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: 1;
  font-size: clamp(40px, 6vw, 96px); color: #55565a; transition: color .35s, transform .6s var(--sale);
}
.demo__rubro { font-size: 14px; color: var(--gris-2); }
.demo__rubro { transition: transform .6s var(--sale); }
.demo.is-activo .demo__nombre { color: var(--tinta); transform: translateX(14px); }
.demo.is-activo .demo__rubro { transform: translateX(14px); }
.demos__pv { grid-column: 8 / 13; position: sticky; top: 14vh; display: grid; }
.dshot {
  grid-area: 1 / 1; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; padding: 5%;
  display: flex; flex-direction: column; gap: 6%; opacity: 0; transition: opacity .5s var(--sale);
}
.dshot.is-activo { opacity: 1; }
.dshot__nv { display: flex; gap: 6px; align-items: center; }
.dshot__nv i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; }
.dshot__nv b { margin-left: auto; width: 22%; height: 8px; border-radius: 4px; background: currentColor; opacity: .25; }
.dshot h3 { margin-top: auto; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3.4vw, 52px); line-height: .95; letter-spacing: -.04em; }
.dshot em { display: block; height: 9px; width: 46%; border-radius: 5px; background: currentColor; opacity: .3; }
.dshot u { display: block; width: 26%; height: 24px; border-radius: 99px; background: currentColor; opacity: .9; }
.dshot--0 { background: #d9e3dc; color: #14301f; }
.dshot--1 { background: #2a1d17; color: #f0d9bf; }
.dshot--2 { background: #e9e9e4; color: #111; }
.dshot--3 { background: #dfe9f2; color: #10283f; }

/* ---------- sobre mi ---------- */
.sobre {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(96px, 12vw, 180px) var(--pad);
}
.sobre .titulo-seccion { grid-column: 1 / -1; }
/* Sin foto: el texto es la pieza de la seccion, desde la columna 4. */
.sobre__texto { grid-column: 4 / 13; }
.sobre__lead {
  font-family: var(--display); font-weight: 400; letter-spacing: -.04em; line-height: 1.08;
  font-size: clamp(30px, 4.2vw, 68px);
}
/* El texto parte en sombra y se enciende palabra por palabra mientras se baja: nvy.js
   mueve --avance (de 0 a la cantidad de palabras) segun el scroll. Sin JS, todo blanco. */
.sobre__lead.is-activo > span { opacity: calc(.18 + .82 * clamp(0, var(--avance, 0) - var(--i), 1)); }
.sobre__redes { display: flex; gap: 28px; margin-top: clamp(24px, 3vw, 40px); font-size: 15px; }
.sobre__redes a { display: inline-flex; align-items: center; gap: 6px; }
.sobre__redes a:hover { color: var(--azul); }

.sobre__extra { margin-top: clamp(24px, 3vw, 40px); max-width: 34em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--gris); }

/* ---------- proceso ---------- */
.proceso { padding: 0 var(--pad) clamp(96px, 12vw, 180px); }
/* Cuatro paneles en fila: el activo se ensancha y muestra su texto. Con el mouse
   encima (o con un clic) se activa otro. En celular quedan en columna y se abren al tocar.
   Cada panel lleva un azul casi negro, apenas distinto del fondo. */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap); height: min(44vh, 400px); min-height: 320px; }
.paso {
  --fondo: #0d1322; --fondo-on: #111a30;
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(18px, 2vw, 28px); border-radius: 22px;
  background: var(--fondo); box-shadow: inset 0 0 0 1px rgba(160, 190, 255, .06);
  transition: flex .9s var(--sale), background-color .5s;
}
.paso:nth-child(2) { --fondo: #0e1530; --fondo-on: #131d3d; }
.paso:nth-child(3) { --fondo: #0c1428; --fondo-on: #111b36; }
.paso:nth-child(4) { --fondo: #0f1736; --fondo-on: #152045; }
.paso.is-activo { flex: 3.2; background: var(--fondo-on); }
.paso__abre { position: absolute; inset: 0; width: 100%; border-radius: inherit; cursor: pointer; }
.paso__abre:focus-visible { outline-offset: -4px; }
.paso__quien { font-size: 13px; color: var(--gris-2); }
.paso__cu { min-width: min(24em, 60vw); }
.paso__t {
  font-family: var(--display); font-weight: 500; letter-spacing: -.04em; line-height: 1; white-space: nowrap;
  font-size: clamp(22px, 2.2vw, 34px); transition: font-size .9s var(--sale);
}
.paso.is-activo .paso__t { font-size: clamp(36px, 4.6vw, 72px); }
.paso__d {
  max-width: 24em; max-height: 0; overflow: hidden; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; color: var(--gris);
  opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .8s var(--sale), max-height .8s var(--sale), margin-top .8s var(--sale);
}
.paso.is-activo .paso__d { max-height: 9em; margin-top: 12px; opacity: 1; transform: none; transition-delay: .2s; }

/* ---------- testimonios ---------- */
.testimonios { padding: 0 var(--pad) clamp(96px, 12vw, 180px); }
.citas { list-style: none; margin: 0; padding: 0; }
.cita {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(28px, 3.4vw, 48px) 0; border-top: 1px solid var(--linea);
}
/* Reseña de un cliente con marca: la linea de arriba va mitad y mitad con sus dos
   colores (--l1 a la izquierda, --l2 a la derecha), planos. */
.cita--marca { position: relative; border-top-color: transparent; }
.cita--marca::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--l1) 50%, var(--l2) 50%);
}
.cita__txt {
  grid-column: 1 / 10;
  font-family: var(--display); font-weight: 400; letter-spacing: -.025em; line-height: 1.22;
  font-size: clamp(20px, 1.75vw, 27px);
}
.cita__autor { grid-column: 10 / 13; align-self: end; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.cita__autor strong { font-weight: 500; }
.cita__autor span { color: var(--gris-2); }

/* ---------- contacto ---------- */
.contacto { padding: clamp(96px, 12vw, 180px) var(--pad) clamp(48px, 6vw, 80px); }
.contacto .rotulo { margin-bottom: clamp(24px, 3vw, 48px); }
.contacto__titulo {
  font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .9;
  white-space: nowrap;
  font-size: calc(var(--ancho) / var(--em) * .99);
  margin-left: -.03em;
}
.contacto__fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(24px, 4vw, 56px);
  margin-top: clamp(32px, 4vw, 56px);
}
.contacto__dato { font-size: 15px; }
a.contacto__dato:hover { color: var(--azul); }

/* ---------- pie ---------- */
.pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  padding: 22px var(--pad) calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  font-size: 14px; color: var(--gris);
}
.pie__legal { display: flex; gap: 24px; }
.pie a:hover { color: var(--azul); }
.pie__arriba { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); }

/* ---------- pagina de proyecto ---------- */
.volver { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); }
.volver:hover { color: var(--azul); }
.proyecto__cab { padding: clamp(96px, 11vw, 150px) var(--pad) 0; }
.proyecto__titulo { margin-top: clamp(40px, 7vw, 96px); }
.proyecto__titulo, .siguiente__nombre {
  display: block;
  font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .88;
  white-space: nowrap;
  font-size: min(calc(var(--ancho) / var(--em) * .99), 15vw);
  margin-left: -.035em;
}
.ficha {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px var(--gap);
  margin-top: clamp(28px, 4vw, 56px);
}
.ficha__item { border-bottom: 1px solid var(--linea); padding-bottom: 12px; }
.ficha dt { font-size: 13px; color: var(--gris-2); }
.ficha dd { font-size: 15px; margin-top: 4px; }

.proyecto__intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(48px, 7vw, 112px) var(--pad);
}
.proyecto__resumen {
  grid-column: 1 / 9;
  font-family: var(--display); font-weight: 400; letter-spacing: -.03em; line-height: 1.18;
  font-size: clamp(22px, 2.4vw, 36px);
}
.proyecto__acciones { grid-column: 10 / 13; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.proyecto__dominio { font-size: 13px; color: var(--gris-2); }
.avance { width: 100%; margin-bottom: 14px; }
.avance__txt { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.avance__barra { position: relative; height: 1px; background: var(--linea); }
.avance__barra span {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pct) * 1%);
  background: linear-gradient(90deg, var(--azul), #2a55cc 70%, var(--celeste)); transform-origin: left; transform: scaleX(0);
  transition: transform 1.6s var(--sale) .4s;
}
.is-listo .avance__barra span, html:not(.js) .avance__barra span, .estatico .avance__barra span { transform: none; }

.galeria { display: flex; flex-direction: column; gap: var(--gap); padding: 0 var(--pad); }
.gal { background: var(--bg-2); padding: clamp(16px, 5vw, 80px); }
.gal img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* La primera captura (escritorio) no llena la pantalla: queda centrada y mas chica. */
.gal--ancha .mac, .gal--ancha figcaption { max-width: 1040px; margin-inline: auto; }

/* Capturas de escritorio en un MacBook Pro: la captura va debajo de la imagen del equipo
   (assets/brand/macbook.webp, con la pantalla transparente), calzada en el hueco de la
   pantalla. Los porcentajes salen de medir la imagen: 554 x 361 px, pantalla de 65,43 a 488,317. */
.mac { position: relative; aspect-ratio: 554 / 361; }
.mac picture { position: absolute; left: 11.733%; top: 11.911%; width: 76.534%; height: 76.177%; overflow: hidden; background: #0b0b0c; }
.mac img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mac::after, .prob__foto:not(.prob__foto--movil)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/assets/brand/macbook.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .28));
}

/* Capturas de celular en un iPhone 15: borde negro fino, marco de titanio e isla dinamica. */
.iphone {
  position: relative; padding: 2.4%; border-radius: 14% / 6.5%; background: #0b0b0c;
  box-shadow: 0 0 0 2px #46474c, 0 0 0 3px #1c1d20, 0 30px 60px -30px rgba(0, 0, 0, .8);
}
/* la captura entera, del mismo alto que la pantalla del iPhone 15, y la isla encima */
.iphone picture { display: block; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 12% / 5.6%; background: #fff; }
.iphone::after { content: ""; position: absolute; z-index: 1; top: 2.3%; left: 50%; width: 28%; height: 2.4%; translate: -50% 0; border-radius: 99px; background: #000; }
.gal figcaption { margin-top: clamp(12px, 1.6vw, 20px); font-size: 13px; color: var(--gris-2); }
.gal__moviles {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: clamp(12px, 3vw, 48px); max-width: 1080px; margin: 0 auto;
}
.gal--moviles figcaption { text-align: center; }
.gal--dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); background: none; padding: 0; }
.gal--dos figure { background: var(--bg-2); padding: clamp(12px, 3vw, 48px); }

.siguiente { padding: clamp(96px, 12vw, 180px) var(--pad) clamp(48px, 6vw, 80px); }
.siguiente__link { display: block; border-top: 1px solid var(--linea); padding-top: 14px; overflow: clip; }
.siguiente__lbl { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gris-2); }
.siguiente__nombre { margin-top: clamp(28px, 5vw, 72px); transition: color .4s, transform .8s var(--sale); }
.siguiente__rubro { display: block; margin-top: 14px; font-size: 14px; color: var(--gris-2); }
.siguiente__link:hover .siguiente__nombre { transform: translateX(1.2vw); }

.sin-captura {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--gris-2);
  font-family: var(--display); font-size: clamp(20px, 3vw, 40px); letter-spacing: -.04em;
}

/* ---------- legales ---------- */
.legal__cab { padding: clamp(96px, 11vw, 150px) var(--pad) clamp(40px, 5vw, 72px); }
.legal__lbl { margin: clamp(40px, 7vw, 96px) 0 10px; font-size: 14px; color: var(--gris-2); }
.legal__titulo { font-family: var(--display); font-weight: 500; letter-spacing: -.045em; line-height: .95; font-size: clamp(44px, 7vw, 112px); }
.legal__fecha { margin-top: 20px; font-size: 14px; color: var(--gris-2); }
.legal__cuerpo { padding: 0 var(--pad) clamp(80px, 10vw, 140px); color: var(--gris); line-height: 1.7; }
.legal__cuerpo > * { max-width: 68ch; }
.legal__cuerpo h2 {
  margin: 48px 0 12px; padding-top: 20px; border-top: 1px solid var(--linea);
  font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -.02em; line-height: 1.25; color: var(--tinta);
}
.legal__cuerpo h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 600; color: var(--tinta); }
.legal__cuerpo p { margin: 0 0 16px; }
.legal__cuerpo ul { margin: 0 0 18px; padding-left: 20px; }
.legal__cuerpo li { margin-bottom: 8px; }
.legal__cuerpo strong { font-weight: 600; color: var(--tinta); }
.legal__cuerpo a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.legal__cuerpo .callout { background: var(--bg-2); padding: 16px 20px; margin-bottom: 8px; }
.legal__cuerpo .callout p { margin: 0; }

/* ---------- 404 ---------- */
.no-existe {
  min-height: 80vh; min-height: 80svh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 24px;
  padding: 120px var(--pad) clamp(48px, 8vw, 120px);
}
.no-existe__lbl { font-size: 14px; color: var(--gris-2); }
.no-existe__titulo { font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .92; font-size: clamp(48px, 9vw, 144px); max-width: 11ch; }
.no-existe__txt { color: var(--gris); max-width: 42ch; }

/* ---------- responsive ---------- */
@media (min-width: 1000px) {
  .legal__cuerpo { padding-left: calc(50% + var(--gap) / 2); }
}

@media (max-width: 900px) {
  .cita__txt { grid-column: 1 / 13; }
  .cita__autor { grid-column: 1 / 13; margin-top: 16px; }
  .proyecto__resumen { grid-column: 1 / -1; }
  .proyecto__acciones { grid-column: 1 / -1; margin-top: 32px; max-width: 420px; }
}

@media (max-width: 720px) {
  .menu__panel { width: 100%; }
  html.menu-abierto .cab__logo { color: #fff; }
  .menu__pie { grid-template-columns: 1fr; }
  .portada { min-height: 72vh; min-height: 72svh; }
  /* Celular: menos aire entre secciones y botones a todo el ancho para el pulgar */
  .trabajos { padding-top: 72px; }
  .sobre { padding-block: 88px; }
  .testimonios { padding-bottom: 88px; }
  .contacto { padding-top: 72px; }
  .siguiente { padding-top: 88px; }
  .rotulo { margin-bottom: 36px; }
  .titulo-seccion { margin-bottom: 40px; }
  .contacto .boton, .proyecto__acciones .boton, .no-existe .boton { width: 100%; justify-content: center; }
  .proyecto__acciones { max-width: none; }
  .portada__marca, .portafolio__marca { white-space: normal; font-size: calc(var(--ancho) / var(--em-max) * .99); line-height: .9; }
  .portada__marca .palabra, .portafolio__marca .palabra { display: block; width: fit-content; }

  .demos__lista { grid-column: 1 / -1; }
  .demos__pv { display: none; }
  .demo__nombre { font-size: clamp(34px, 11vw, 56px); color: var(--tinta); }
  .demo.is-activo .demo__nombre { transform: none; }
  .pasos { flex-direction: column; height: auto; min-height: 0; }
  .paso { flex: none; height: 76px; transition: height .8s var(--sale), background-color .5s; }
  .paso.is-activo { height: 250px; }
  .paso__cu { min-width: 0; }
  .trabajos__cab { grid-template-columns: 1fr; }
  .trabajos__ctrl { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 0; }
  .obras__cols { display: none; }
  .obras[data-vista="lista"] .obra__link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 16px 0; }
  .obras[data-vista="lista"] .obra__nombre { grid-column: 1; grid-row: 1; font-size: 22px; }
  .obras[data-vista="lista"] .obra__rubro { grid-column: 1; grid-row: 2; }
  .obras[data-vista="lista"] .obra__anio { display: none; }
  .obras[data-vista="lista"] .obra__estado { grid-column: 2; grid-row: 1; text-align: right; }
  .obras[data-vista="lista"] .obra__flecha { grid-column: 2; grid-row: 2; font-size: 18px; color: var(--gris-2); }
  .obras[data-vista="lista"] .obra.is-abierta .obra__flecha { color: var(--azul); }
  .obras[data-vista="lista"] .obra__foto, .obras[data-vista="lista"] .obra__info { grid-column: 1 / -1; }
  .obras[data-vista="lista"] .obra__foto { margin-bottom: 16px; }
  .obras[data-vista="grilla"] { grid-template-columns: 1fr; }

  .sobre__texto { grid-column: 1 / -1; }
  .cita__txt, .cita__autor { grid-column: 1 / -1; }
  .contacto__fila { flex-direction: column; align-items: flex-start; }

  .proyecto__titulo, .siguiente__nombre { white-space: normal; line-height: .94; font-size: min(calc(var(--ancho) / var(--em-max) * .99), 24vw); }
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal__moviles { --n: 2 !important; }
  .gal__moviles > :nth-child(n + 3) { display: none; }
  .gal--dos { grid-template-columns: 1fr; }
}

/* =========================================================================
   Inicio: fondo blanco con el azul marino como unico acento (los tonos de la
   version blanca, 3f846fc). El resto de la web sigue en negro.
   ========================================================================= */
.pag-inicio {
  --bg: #ffffff;
  --bg-2: #f4f5f8;
  --tinta: #0b0b0c;
  --gris: #55565a;          /* 7.4:1 sobre blanco */
  --gris-2: #6e6f73;        /* 5:1 sobre blanco */
  --linea: rgba(11, 11, 12, .12);
  --azul: #0a1f5c;
  --azul-2: #071640;
  --grad-azul: var(--brillo), linear-gradient(176deg, #0a1f5c 12%, #2a55cc 46%, #9dbaf7 74%, #e6eeff 100%);
  --cab-fondo: rgba(255, 255, 255, .78);
  --tarjeta: #f3f5fa;
  --tarjeta-on: #e9edf7;
  --azul-medio: #2a55cc;
  /* el azul del panel del menu: lo usan las tarjetas azules, Proceso y la respuesta de Preguntas */
  --grad-panel: radial-gradient(90% 60% at 100% 0%, rgba(169, 195, 248, .34), rgba(169, 195, 248, 0) 70%), linear-gradient(195deg, #1d44ad 0%, #0a1f5c 48%, #081849 100%);
  --sombra-1: 0 1px 2px rgba(10, 31, 92, .06), 0 10px 24px -10px rgba(10, 31, 92, .16), 0 28px 56px -28px rgba(10, 31, 92, .22);
  --sombra-2: 0 2px 4px rgba(10, 31, 92, .06), 0 18px 36px -12px rgba(10, 31, 92, .22), 0 48px 80px -32px rgba(29, 68, 173, .32);
  interpolate-size: allow-keywords; /* el acordeon de preguntas anima hasta "auto" */
}
html:has(> body.pag-inicio) { color-scheme: light; }
.pag-inicio .cab__logo img { filter: invert(1); }
.pag-inicio .cab.is-solida { box-shadow: 0 1px 0 rgba(11, 11, 12, .1); }
html.menu-abierto .pag-inicio .cab__logo img { filter: none; }
/* Boton solido en azul marino (el blanco de vidrio no se ve sobre blanco) */
.pag-inicio .boton {
  color: #fff; background-color: var(--azul);
  background-image: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 52%), linear-gradient(160deg, #0a1f5c 30%, #1d44ad 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.pag-inicio .boton:hover { filter: brightness(1.15); }

/* Link de texto con flecha (la accion secundaria junto a un boton) */
.enlace { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; transition: color .3s; }
.enlace .ico { transition: transform .45s var(--sale); }
.enlace:hover { color: var(--azul); }
.enlace:hover .ico { transform: translateX(3px); }

/* ---------- la parte negra del inicio (portafolio) ----------
   Al llegar a ella toda la pantalla pasa de blanco a negro (nvy.js pone .es-noche en el
   body): cambia el fondo de la pagina, el header y el pie. Adentro vuelven los colores de
   la version negra, los mismos de /trabajos. Sin JS la zona lleva su propio fondo negro. */
.zona-negra {
  --bg: #0b0b0c;
  --bg-2: #151517;
  --tinta: #f3f3ef;
  --gris: #a6a7ab;
  --gris-2: #8b8c91;
  --linea: rgba(243, 243, 239, .14);
  --azul: #4a74e8;
  --azul-2: #6d8ff0;
  --grad-azul: var(--brillo), linear-gradient(176deg, #123182 12%, #2f5ad0 46%, #9dbaf7 74%, #e6eeff 100%);
  --cab-fondo: rgba(11, 11, 12, .72);
}
/* El paso a negro es una capa fija detras de todo. nvy.js la crea y ata su opacidad al scroll:
   sube mientras se acerca la marca gigante y baja despues de Trabajos. No usa animation-timeline
   porque Safari dice soportarlo, pero con la linea de tiempo compartida la capa se queda en 0. */
.noche { position: fixed; inset: 0; z-index: -1; background: #0b0b0c; opacity: 0; pointer-events: none; will-change: opacity; }
.zona-negra { color: var(--tinta); background: var(--bg); }
.js .zona-negra { background: none; }
/* Solo el header cambia de color; el resto de la pagina no se vuelve a calcular. */
.pag-inicio.es-noche .cab { color: #f3f3ef; --cab-fondo: rgba(11, 11, 12, .72); }
.pag-inicio.es-noche .cab__logo img { filter: none; }
.pag-inicio.es-noche .cab.is-solida { box-shadow: 0 1px 0 rgba(243, 243, 239, .14); }
.pag-inicio .zona-negra .boton {
  color: #0b0b0c; background-color: #fff;
  background-image: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(214,227,255,.55) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(143,176,246,.45);
}
.pag-inicio .zona-negra .boton:hover { filter: brightness(.93); }
/* Marca gigante de borde a borde, como en /trabajos, y "portafolio" en chico debajo. */
/* Al ir a "trabajos", la marca queda completa bajo el header (72 px) y no tapada por el. */
.portafolio { padding: 0 var(--pad); scroll-margin-top: calc(72px + 1.4vw); }
.portafolio + .trabajos { padding-top: clamp(48px, 6vw, 96px); }
.portafolio__marca {
  display: block; margin: 0 0 .12em -.035em; white-space: nowrap;
  font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .8;
  font-size: calc(var(--ancho) / var(--em) * .995);
}
.portafolio__sub { font-size: clamp(20px, 2vw, 30px); letter-spacing: -.02em; color: var(--tinta); }
.zn-cola { height: clamp(40px, 4vw, 64px); }

/* ---------- filas de servicios (inicio y motion graphics) ---------- */
.filas { padding: clamp(64px, 8vw, 120px) var(--pad); }
.filas--inicio { padding-top: clamp(20px, 2.4vw, 36px); padding-bottom: clamp(24px, 3vw, 48px); }
.filas--inicio .filas__lbl { font-size: clamp(20px, 2vw, 30px); letter-spacing: -.02em; color: var(--tinta); }
.filas--inicio .fila__nombre { font-size: clamp(30px, 3.8vw, 58px); letter-spacing: -.04em; }
.filas--inicio .fila__txt { font-size: clamp(15px, 1.3vw, 19px); }
/* Al pasar o presionar, el nombre toma el color de su servicio (verde cartas, naranjo motion). */
.fila__nombre .tramo { padding-bottom: .12em; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(176deg, var(--m4) 0%, var(--m3) 45%, var(--m2) 100%); transition: color .35s; }
.fila__link:is(:hover, :active, :focus-visible) .fila__nombre .tramo { color: transparent; }
.filas__lbl { margin-bottom: clamp(16px, 2vw, 24px); font-size: 14px; color: var(--gris); }
.filas .titulo-seccion { margin-bottom: clamp(32px, 4vw, 56px); }
.filas__lista { list-style: none; margin: 0; padding: 0; }
.fila { border-top: 1px solid var(--linea); }
.fila, .fila__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding: clamp(14px, 1.6vw, 22px) 0; }
.fila:has(> .fila__link) { display: block; padding: 0; }
.fila__link { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.fila__link .ico { transition: transform .45s var(--sale); }
.fila__link:hover .ico { transform: translateX(3px); }
.fila__nombre { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; font-size: clamp(22px, 2.4vw, 36px); }
.fila__txt { font-size: 15px; color: var(--gris); }
@media (max-width: 720px) {
  .fila { grid-template-columns: minmax(0, 1fr); }
  .fila__link { grid-template-columns: minmax(0, 1fr) auto; }
  .fila__link .fila__txt { grid-row: 2; grid-column: 1; }
  .fila__link .ico { grid-row: 1; grid-column: 2; }
}

/* ---------- motion graphics ---------- */
.pag-motion .portada { min-height: 56vh; min-height: 56svh; }
/* El mismo degradado de "Nvy Studios", en el naranjo de motion graphics. */
.pag-motion .portada__marca { --grad-azul: var(--brillo), linear-gradient(176deg, #8f3606 12%, #f0691a 46%, #ffac70 74%, #fff0e3 100%); }
.mg {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 7vw, 112px); align-items: center;
  padding: clamp(40px, 6vw, 96px) var(--pad);
}
.mg__marco { position: relative; width: min(400px, calc(84vh * 9 / 16)); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: var(--bg-2); }
.mg__marco video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Tarjeta de video en Problemas: cuatro cuadros seguidos, como una tira, con su boton de play. */
.prob__tira {
  position: absolute; z-index: -1; top: 50%; right: clamp(64px, 6.5vw, 104px); translate: 0 -50%;
  display: flex; gap: clamp(6px, .7vw, 10px); width: 44%; pointer-events: none;
  transition: translate .7s var(--sale);
}
.prob:hover .prob__tira, .prob.is-abierta .prob__tira { translate: 0 calc(-50% - 6px); }
.prob__tira img { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 28px -14px rgba(4, 12, 40, .75); }
.prob__play {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: clamp(48px, 4.6vw, 68px); aspect-ratio: 1; border-radius: 50%;
  color: var(--azul); background: #fff; box-shadow: 0 14px 30px -8px rgba(4, 12, 40, .7);
}
.prob__play svg { width: 44%; height: 44%; fill: currentColor; translate: 6% 0; }
.prob__dura {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 99px;
  font-size: 12px; font-weight: 500; line-height: 1.5; font-variant-numeric: tabular-nums; color: #fff; background: rgba(6, 12, 30, .78);
}
@media (max-width: 720px) {
  .prob__tira { position: relative; top: auto; right: auto; translate: none; width: 100%; }
  .prob:hover .prob__tira, .prob.is-abierta .prob__tira { translate: none; }
  .prob__tira img { border-radius: 9px; }
  article.prob[data-tipo="motion"] .prob__t { max-width: 100%; }
}
.ba--video { width: 100%; max-width: 300px; justify-self: center; }
.ba--video .ba__img { position: relative; aspect-ratio: 9 / 16; }
.ba--video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg__sonido { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; white-space: nowrap; }
.mg__lbl { font-size: 14px; color: var(--gris); }
.mg__titulo { margin-top: 12px; max-width: 16ch; font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: 1.02; font-size: clamp(34px, 4.4vw, 68px); }
.mg__txt { margin-top: clamp(16px, 2vw, 24px); max-width: 52ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--gris); }
.mg__ficha { margin-top: clamp(28px, 3vw, 44px); max-width: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .mg { grid-template-columns: minmax(0, 1fr); }
  .mg__marco { width: min(100%, 380px, calc(84vh * 9 / 16)); margin-inline: auto; }
}
@media (max-width: 700px) {
  .menu__link { font-size: min(11.2vw, 44px); }
}
.zona-negra + .sobre { padding-top: clamp(32px, 4vw, 64px); }

/* ---------- portada: la pregunta ---------- */
.pregunta {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px var(--pad) clamp(28px, 4vw, 56px);
}
.pregunta__h1 {
  max-width: 14ch;
  font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .94;
  font-size: clamp(46px, 8.4vw, 150px);
}
/* Fondo: un muro de capturas de los trabajos en diagonal. Sube y baja sin parar (cada
   columna en su sentido). Una luz blanca detras del titulo y abajo lo
   deja leer, y se apaga antes del borde para no dejar una linea contra Problemas. */
.pregunta { position: relative; isolation: isolate; overflow: hidden; }
.pregunta__h1, .pregunta__pie { position: relative; }
/* Sombra muy suave pegada a las letras: les da cuerpo sobre las fotos sin que se note.
   Va con drop-shadow y no con text-shadow, porque cada palabra recorta su sombra. */
.pregunta__h1 { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)) drop-shadow(0 6px 16px rgba(10, 31, 92, .22)); }
.muro {
  position: absolute; z-index: -2; top: -55%; left: -25%; width: 150%; display: grid; gap: 22px;
  grid-template-columns: repeat(7, minmax(0, 1fr)); transform: rotateX(40deg) rotateZ(-24deg);
}
/* el padding de abajo iguala el hueco entre las dos copias: asi -50% calza justo */
.muro__col {
  display: flex; flex-direction: column; gap: 22px; padding-bottom: 22px;
  will-change: transform; animation: cinta 46s linear infinite;
}
.muro__col:nth-child(even) { margin-top: 14%; animation-duration: 58s; animation-direction: reverse; }
.muro__col:nth-child(3n) { animation-duration: 52s; }
@keyframes cinta { to { transform: translateY(-50%); } }
.muro__foto { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 30px 50px -20px rgba(10, 31, 92, .35); }
.muro__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.js:not(.estatico) .muro { opacity: 0; transition: opacity 1.4s .3s; }
.js.is-listo:not(.estatico) .muro { opacity: 1; }
.pregunta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 8%),
    linear-gradient(0deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .8) 9%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(62% 58% at 22% 70%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .85) 48%, rgba(255, 255, 255, 0) 100%);
}
.pregunta__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: clamp(32px, 4vw, 56px);
}
.pregunta__bajada { font-size: clamp(14px, 1.1vw, 16px); color: var(--gris); }
.pregunta__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.js:not(.estatico) .pregunta__pie { opacity: 0; transform: translateY(14px); transition: opacity .9s, transform 1.1s var(--sale); transition-delay: .5s; }
.js.is-listo:not(.estatico) .pregunta__pie { opacity: 1; transform: none; }

/* ---------- problemas: tarjetas que se abren dentro de la grilla ---------- */
.problemas { padding: clamp(96px, 12vw, 180px) var(--pad); }
.problemas__cab { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px 32px; }
.problemas__cab .titulo-seccion { margin-bottom: 0; }
.problemas__cab .filtros { font-size: 15px; padding-bottom: .3em; }
.problemas__sub { margin: 16px 0 clamp(32px, 4vw, 56px); font-size: 16px; color: var(--gris-2); }
/* Mosaico de 3 columnas: algunas tarjetas ocupan dos (o tres), y van en tres tonos
   (celeste, azul del menu y blanco). Sin espacio entre filas: lo da cada tarjeta abajo,
   asi el panel cerrado no suma alto. */
.probs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.prob {
  order: var(--o); position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: clamp(270px, 21vw, 330px); margin-bottom: var(--gap);
  padding: clamp(20px, 2vw, 28px);
  border-radius: 22px; color: var(--azul); background: linear-gradient(155deg, #f2f6ff, #d5e1fc);
  box-shadow: inset 0 0 0 1px rgba(42, 85, 204, .14), inset 0 1px 0 rgba(255, 255, 255, .9), 0 20px 40px -24px rgba(29, 68, 173, .5);
  transition: background-color .45s, color .45s, transform .6s var(--sale), box-shadow .6s var(--sale);
}
@media (hover: hover) { .prob:not(.is-abierta):hover { transform: translateY(-4px); } }
article.prob:is(:nth-of-type(1), :nth-of-type(4), :nth-of-type(8)) { grid-column: span 2; }
article.prob:is(:nth-of-type(10), :nth-of-type(11)) { grid-column: span 3; }
article.prob:is(:nth-of-type(1), :nth-of-type(6), :nth-of-type(9), :nth-of-type(11)) { color: #fff; background: var(--grad-panel); box-shadow: 0 24px 44px -24px rgba(10, 31, 92, .7); }
article.prob:is(:nth-of-type(3), :nth-of-type(5), :nth-of-type(8)) { background: #fff; box-shadow: 0 0 0 1px rgba(10, 31, 92, .06), var(--sombra-1); }
article.prob.is-abierta { color: #fff; background: linear-gradient(155deg, #3a63d6, #1d44ad 55%, #0a1f5c); box-shadow: 0 30px 60px -22px rgba(42, 85, 204, .75); }
.prob__tipo {
  display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: 99px; font-size: 13px;
  background: rgba(255, 255, 255, .75); color: var(--azul-medio); box-shadow: 0 0 0 1px rgba(42, 85, 204, .12);
  transition: color .45s, background-color .45s;
}
:is(article.prob:is(:nth-of-type(1), :nth-of-type(6), :nth-of-type(9), :nth-of-type(11)), article.prob.is-abierta) .prob__tipo { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.prob__t {
  max-width: 58%;
  font-family: var(--display); font-weight: 500; letter-spacing: -.035em; line-height: 1.08;
  font-size: clamp(24px, 2.2vw, 34px);
}
article.prob:is(:nth-of-type(1), :nth-of-type(4), :nth-of-type(8), :nth-of-type(10), :nth-of-type(11)) .prob__t { font-size: clamp(28px, 2.8vw, 44px); max-width: 22ch; }
.prob__abre { text-align: left; letter-spacing: inherit; line-height: inherit; }
.prob__abre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.prob__abre:focus-visible { outline: none; }
.prob:has(.prob__abre:focus-visible) { outline: 2px solid var(--azul); outline-offset: 3px; }
.prob__mas {
  position: absolute; right: clamp(16px, 1.6vw, 24px); top: clamp(16px, 1.6vw, 24px);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--azul); color: #fff; font-size: 18px;
  transition: transform .6s var(--sale);
  pointer-events: none; /* el clic pasa al boton que cubre la tarjeta */
}
:is(article.prob:is(:nth-of-type(1), :nth-of-type(6), :nth-of-type(9), :nth-of-type(11)), article.prob.is-abierta) .prob__mas { background: #fff; color: var(--azul); }
.prob.is-abierta .prob__mas { transform: rotate(45deg); }

/* La captura del caso asoma inclinada: la de escritorio en un MacBook (como en Trabajos)
   y la de celular en un telefono entero. Se endereza al pasar el mouse. */
.prob__foto {
  position: absolute; z-index: -1; right: -9%; top: 30%; width: 46%; pointer-events: none;
  display: flex; flex-direction: column; rotate: -5deg;
  filter: drop-shadow(0 18px 22px rgba(10, 31, 92, .35)); transition: rotate .7s var(--sale), translate .7s var(--sale);
}
.prob__foto picture, .prob__foto img { display: block; width: 100%; }
.prob__foto img { height: auto; object-fit: cover; object-position: top; }
/* el MacBook de las tarjetas: mismo marco y mismo hueco que .mac */
.prob__foto:not(.prob__foto--movil) { display: block; aspect-ratio: 554 / 361; }
.prob__foto:not(.prob__foto--movil) picture { position: absolute; left: 11.733%; top: 11.911%; width: 76.534%; height: 76.177%; overflow: hidden; background: #0b0b0c; }
.prob__foto:not(.prob__foto--movil) img { height: 100%; }
.prob__foto--movil {
  top: auto; bottom: 18px; right: 10%; width: 20%; overflow: hidden; rotate: -4deg;
  border: 4px solid #0b0b0c; border-radius: 20px; background: #0b0b0c; filter: none; box-shadow: 0 24px 40px -16px rgba(10, 31, 92, .5);
}
.prob__foto--movil img { aspect-ratio: 390 / 844; border: 0; border-radius: 15px; }
.prob:hover .prob__foto, .prob.is-abierta .prob__foto { rotate: -2deg; translate: 0 -10px; }
.prob__demo {
  position: absolute; top: 26px; left: 8px; padding: 3px 9px; border-radius: 99px;
  background: rgba(255, 255, 255, .94); color: #0b0b0c; font-size: 11px; font-weight: 500;
}
.prob__foto--movil .prob__demo { top: 8px; }
@media (min-width: 1101px) {
  article.prob:is(:nth-of-type(1), :nth-of-type(4), :nth-of-type(8)) .prob__foto:not(.prob__foto--movil) { width: 36%; right: 4%; top: auto; bottom: -14%; }
  article.prob:is(:nth-of-type(4), :nth-of-type(8)) .prob__foto:not(.prob__foto--movil) { bottom: -4%; }
  article.prob:nth-of-type(10) .prob__foto:not(.prob__foto--movil) { width: 27%; right: 6%; top: auto; bottom: -16%; }
  article.prob:is(:nth-of-type(1), :nth-of-type(4), :nth-of-type(8)) .prob__foto--movil { width: 11%; right: 12%; }
  article.prob:is(:nth-of-type(10), :nth-of-type(11)) .prob__foto--movil { width: 8%; right: 14%; }
}

.prob__panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--sale); }
.js .prob__panel { order: 999; }
.prob__panel.is-abierto { grid-template-rows: 1fr; }
/* el margen negativo deja espacio a la sombra de la hoja, que si no se cortaria */
.prob__in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .55s; margin-inline: -48px; padding-inline: 48px; }
.prob__panel.is-abierto .prob__in { visibility: visible; transition: none; }
.prob__panel.sin-anim, .prob__panel.sin-anim * { transition: none !important; }
/* Sin JS: cada panel va abierto bajo su tarjeta. */
.no-js .prob__panel { order: var(--o); grid-template-rows: 1fr; }
.no-js .prob__in { visibility: visible; }
.no-js .prob__mas { display: none; }
/* lo que se abre va en una hoja celeste con sombra */
.prob__cuerpo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
  margin: 2px 0 44px; padding: clamp(24px, 3vw, 48px); border-radius: 26px;
  background: linear-gradient(180deg, #f7f9ff, #edf2fe); box-shadow: inset 0 0 0 1px rgba(42, 85, 204, .12), 0 30px 60px -30px rgba(29, 68, 173, .4);
}
.prob__cuerpo > * { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .5s var(--sale); }
.prob__panel.is-abierto .prob__cuerpo > * { opacity: 1; transform: none; transition-delay: .1s; }
.no-js .prob__cuerpo > * { opacity: 1; transform: none; }
.prob__texto { grid-column: 1 / 5; }
.prob__lbl { font-size: 13px; color: var(--gris-2); margin-bottom: 6px; }
.prob__p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }
.prob__p + .prob__lbl { margin-top: 24px; }
.prob__caso { margin-top: 24px; font-size: 15px; line-height: 1.55; color: var(--gris); }
.prob__texto .boton { margin-top: 28px; }
.prob__figs { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); align-items: start; }
/* tamaños pensados para que todo lo abierto quepa en una pantalla de notebook al 100% */
.prob__figs:has(> .ba--movil:only-child) { grid-template-columns: minmax(0, 190px); justify-content: center; }
.prob__figs:has(> .ba:only-child:not(.ba--movil)) { grid-template-columns: minmax(0, 600px); }
.prob__figs--moviles { grid-template-columns: repeat(var(--n), minmax(0, 168px)); justify-content: center; }
.prob__figs--moviles .ba figcaption { flex-direction: column; align-items: flex-start; }

/* Antes y despues */
.ba { position: relative; margin: 0; }
.ba__lbl {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, .94); color: #0b0b0c; box-shadow: 0 0 0 1px rgba(11, 11, 12, .06);
  font-size: 12px; font-weight: 500;
}
.ba__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--linea); }
.ba__img img, .ba__img picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba--movil .ba__img { aspect-ratio: 390 / 844; border-radius: 18px; }
.ba__vacio {
  aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 24px; text-align: center;
  border-radius: 14px; background: var(--bg-2);
  font-family: var(--display); font-weight: 500; letter-spacing: -.03em; line-height: 1.15;
  font-size: clamp(20px, 1.8vw, 28px); color: var(--gris-2);
}
.ba figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 10px; font-size: 14px; color: var(--gris-2); }
.ba figcaption a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--azul); }
.ba figcaption a .ico { transition: transform .45s var(--sale); }
.ba figcaption a:hover .ico { transform: translateX(3px); }

/* ---------- proceso: los 4 pasos dentro de un panel azul, como el del menu ---------- */
.pag-inicio .pasos {
  padding: 12px; height: calc(min(44vh, 400px) + 24px); border-radius: 32px;
  background-color: var(--azul); background-image: var(--grad-panel); box-shadow: 0 50px 100px -50px rgba(10, 31, 92, .7);
}
/* :nth-child(n) para ganarle a los tonos por paso de la version negra */
.pag-inicio .paso:nth-child(n) {
  --fondo: rgba(255, 255, 255, .06); --fondo-on: rgba(255, 255, 255, .12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* el activo lleva una luz celeste arriba a la derecha */
.pag-inicio .paso::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .6s; pointer-events: none;
  background: radial-gradient(80% 70% at 100% 0%, rgba(157, 186, 247, .4), rgba(157, 186, 247, 0) 70%);
}
.pag-inicio .paso.is-activo::before { opacity: 1; }
.pag-inicio .paso > :not(.paso__abre) { position: relative; pointer-events: none; }
.pag-inicio .paso__abre { z-index: 2; }
@media (max-width: 720px) { .pag-inicio .pasos { height: auto; } .pag-inicio .paso.is-activo { height: 300px; } }
.pag-inicio .paso :is(.paso__quien, .paso__d) { color: rgba(255, 255, 255, .72); }

/* ---------- preguntas frecuentes ---------- */
.faq {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 0 var(--pad);
}
.faq .titulo-seccion { grid-column: 1 / -1; }
.faq__lista { grid-column: 4 / 13; display: flex; flex-direction: column; gap: 14px; }
.faq__item { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 31, 92, .06), var(--sombra-1); transition: box-shadow .5s var(--sale); }
.faq__item:hover { box-shadow: 0 0 0 1px rgba(10, 31, 92, .08), var(--sombra-2); }
.faq__item[open] { box-shadow: 0 0 0 1px rgba(42, 85, 204, .22), var(--sombra-2); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px); cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 500; letter-spacing: -.025em; line-height: 1.2;
  font-size: clamp(18px, 1.6vw, 24px);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: -2px; border-radius: 18px; }
.faq__mas {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font-size: 18px;
  background: #eef2fc; color: var(--azul); transition: transform .5s var(--sale), background-color .3s, color .3s;
}
.faq__item[open] .faq__mas { transform: rotate(45deg); background: var(--azul); color: #fff; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--sale), content-visibility .5s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__r { padding: 0 clamp(20px, 2vw, 28px) clamp(20px, 2vw, 26px); max-width: 60ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: var(--gris); }
/* En escritorio: las preguntas en una lista a la izquierda y la respuesta en grande en
   una tarjeta azul a la derecha (la llena nvy.js). En pantallas mas chicas no se usa:
   cada pregunta se abre en su tarjeta. */
.faq__visor { display: none; }
@media (min-width: 1101px) {
  .js .faq__lista { grid-column: 1 / 7; grid-row: 2; gap: 0; border-top: 1px solid var(--linea); }
  .js .faq__item, .js .faq__item:hover, .js .faq__item[open] { border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--linea); }
  .js .faq__item summary { padding-inline: 4px; transition: color .3s, padding .5s var(--sale); }
  .js .faq__item:hover summary, .js .faq__item.is-sel summary { color: var(--azul-medio); }
  .js .faq__item.is-sel summary { padding-left: 14px; }
  .js .faq__item.is-sel .faq__mas { background: var(--azul); color: #fff; rotate: -45deg; }
  .js .faq__mas { transition: rotate .5s var(--sale), background-color .3s, color .3s; }
  .js .faq__visor {
    display: flex; flex-direction: column; gap: 28px; grid-column: 7 / 13; grid-row: 2; align-self: start; position: sticky; top: 96px;
    min-height: 420px; padding: clamp(28px, 3vw, 48px); border-radius: 28px; color: #fff;
    background-color: var(--azul); background-image: var(--grad-panel); box-shadow: 0 50px 90px -40px rgba(10, 31, 92, .75);
  }
  .faq__visor-q { font-size: 15px; color: rgba(255, 255, 255, .7); }
  .faq__visor-r { flex: 1; font-family: var(--display); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; font-size: clamp(28px, 2.8vw, 46px); }
  .pag-inicio .faq__visor .boton { align-self: flex-start; color: var(--azul); background: #fff; }
  .faq__visor.is-entra :is(.faq__visor-q, .faq__visor-r) { animation: entra-respuesta .6s var(--sale); }
  @keyframes entra-respuesta { from { opacity: 0; translate: 0 10px; } }
}

@media (max-width: 900px) {
  /* en celular el muro se ve limpio arriba y la luz blanca empieza recien sobre el titulo */
  .muro { width: 320%; left: -110%; top: -25%; }
  .pregunta::after { background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .6) 7%, rgba(255, 255, 255, 0) 14%), linear-gradient(0deg, #fff 0%, #fff 27%, rgba(255, 255, 255, .75) 37%, rgba(255, 255, 255, 0) 52%); }
}
@media (prefers-reduced-motion: reduce) { .muro__col { animation: none !important; } }
@media (max-width: 1100px) {
  .probs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  article.prob:nth-of-type(n) { grid-column: auto; }
  article.prob:is(:nth-of-type(1), :nth-of-type(10), :nth-of-type(11)) { grid-column: span 2; }
  .prob__texto, .prob__figs { grid-column: 1 / -1; }
  .prob__figs { margin-top: 32px; }
  .prob__texto { max-width: 40em; }
  .faq__lista { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pregunta { min-height: 86vh; min-height: 86svh; }
  .pregunta__pie { flex-direction: column; align-items: flex-start; }
  .pregunta__acciones { width: 100%; }
  .pregunta__acciones .boton { width: 100%; justify-content: center; }
  .problemas { padding-block: 72px 88px; }
  .problemas__cab { grid-template-columns: 1fr; }
  .probs { grid-template-columns: 1fr; }
  article.prob:nth-of-type(n) { grid-column: auto; }
  .prob { min-height: 250px; gap: 28px; }
  article.prob:nth-of-type(n) .prob__t { max-width: 60%; font-size: 23px; }
  .prob__in { margin-inline: -16px; padding-inline: 16px; }
  .prob__cuerpo { padding: 20px; }
  .prob__texto .boton { width: 100%; justify-content: center; }
  .prob__figs { grid-template-columns: 1fr; }
  .prob__figs--moviles, .prob__figs:has(> .ba--movil:only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .prob__figs:has(> .ba--movil:only-child) { grid-template-columns: minmax(0, 220px); justify-content: center; }
}

/* ---------- transicion entre paginas (View Transitions entre documentos) ----------
   La pagina vieja se recorta hacia arriba y la nueva aparece desde abajo,
   con el telon de fondo (azul, o los colores del proyecto al entrar a uno). Tambien en celular. */
@view-transition { navigation: auto; }
::view-transition { background: var(--cortina); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-sale .6s var(--cambia) both; }
::view-transition-new(root) { animation: vt-entra .7s var(--cambia) .32s both; }
@keyframes vt-sale { to { clip-path: inset(0 0 100% 0); } }
@keyframes vt-entra { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
/* Navegadores sin transicion entre paginas: fundido de entrada simple. */
.sin-vt:not(.estatico) body { animation: fundido .6s ease both; }
@keyframes fundido { from { opacity: 0; } }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .letra, .obra__link, .obra, [data-reveal="texto"] { transform: none !important; opacity: 1 !important; }
  .obra::before, [data-reveal="linea"]::before { transform: none !important; }
  .js .portada__bajada { opacity: 1; transform: none; }
}