/* XKLA · Sistema del sitio — v5
   Lo comparten todas las páginas. Lo específico de cada página va en su propio CSS (p. ej. home.css).
   Concepto: XKLA se lee «escala». Lo que se mueve crece o cambia de proporción.
   Guía de uso: /GUIA.md

   Índice
   0 · Fuente y tokens (color, curvas, tipografía fluida 390 → 2560, retícula, espacios)
   1 · Base
   2 · Tipografía (clases de tamaño)
   3 · Retícula y contenedor
   4 · Enlaces y botones
   5 · Cabecera
   6 · Menú
   7 · Pie
   8 · Cabecera de página interior y patrones de sección
   9 · Marcos de imagen (9:16, 4:5, 1:1, 16:10, 16:9)
   10 · Formularios
   11 · Revelados
   12 · Utilidades y aviso de vista previa
   13 · Movimiento reducido */

/* 0 · Fuente y tokens ----------------------------------------------------- */
@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color: base grafito propia de XKLA. El color de cada cliente vive solo dentro de su pieza. */
  --grafito: #121211;
  --grafito-2: #1B1B19;
  --hueso: #ECEAE4;
  --hueso-2: #A3A199;          /* texto secundario sobre grafito (≥ 7:1) */
  --tinta-suave: #5C5A54;      /* texto secundario sobre hueso (5,9:1) */
  --linea: rgba(236, 234, 228, .14);
  --senal: #FF4F2B;            /* rojo señal: foco y estados. Máximo un 3 % de la superficie */

  /* Curvas */
  --escala: cubic-bezier(.7, 0, .2, 1);     /* firma: cambios de proporción, recortes */
  --salida: cubic-bezier(.16, 1, .3, 1);    /* entradas de texto y bloques */

  /* Tipografía fluida: el valor de 1440 se mantiene y crece hasta 2560 (Apple Studio Display) */
  --t13: clamp(13px, .179vw + 10.43px, 15px);    /* legales, créditos */
  --t15: clamp(15px, .268vw + 11.14px, 18px);    /* pies, etiquetas, navegación del pie */
  --t17: clamp(16px, .268vw + 13.14px, 20px);    /* cuerpo */
  --t21: clamp(19px, .446vw + 14.57px, 26px);    /* entradilla, títulos de tarjeta */
  --t28: clamp(24px, .714vw + 17.71px, 36px);    /* subtítulos, correo destacado */
  --t40: clamp(28px, 1.07vw + 24.6px, 52px);     /* menú, H3 grande */
  --t56: clamp(40px, 2.14vw + 25.1px, 80px);     /* lema de diccionario */
  --h1: clamp(32px, 3.2vw, 64px);
  --h2: clamp(32px, 3.4vw, 88px);

  /* Retícula */
  --m: clamp(16px, 3.3vw, 96px);    /* margen lateral */
  --g: clamp(24px, .714vw + 13.7px, 32px);  /* medianil */
  --col: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12);
  --seccion: clamp(72px, 8.4vw, 176px);     /* ritmo vertical entre secciones */

  /* Cabecera */
  --cab: clamp(96px, 1.43vw + 75.4px, 112px);
  --logo-cab: clamp(112px, 2.14vw + 81.1px, 136px);
}
@media (max-width: 899px) {
  :root { --g: 16px; --cab: 64px; --logo-cab: 88px; }
}

/* 1 · Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--grafito); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--grafito); color: var(--hueso);
  font-family: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t17); line-height: 1.5; font-weight: 400; font-optical-sizing: auto;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Ojo: nada de transform, filter, isolation ni will-change en body: rompería la mezcla de la cabecera */
}
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, address, blockquote { margin: 0; }
p { text-wrap: pretty; }
address { font-style: normal; }
em { font-style: normal; font-weight: 600; }
::selection { background: var(--senal); color: var(--grafito); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--senal); outline-offset: 3px; border-radius: 2px; }
a, button, input, select, textarea { scroll-margin-top: calc(var(--cab) + 24px); scroll-margin-bottom: 24px; }
main:focus-visible { outline: none; }

.saltar {
  position: fixed; left: var(--m); top: 12px; z-index: 200;
  background: var(--hueso); color: var(--grafito);
  padding: 10px 14px; border-radius: 2px; font-size: var(--t15);
  transform: translateY(-160%);
}
.saltar:focus-visible { transform: none; }

/* 2 · Tipografía -------------------------------------------------------------
   Una familia (Bricolage Grotesque). Sentence case siempre, tracking normal.
   .h1 título de página (uno por página) · .h2 título de sección · .t-* tamaños sueltos. */
.h1, .h2, .h3 { font-variation-settings: "opsz" 96; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.h1 { font-size: var(--h1); line-height: 1.05; }
.h2 { font-size: var(--h2); line-height: 1.04; }
.h3 { font-size: var(--t28); line-height: 1.15; }
.t-13 { font-size: var(--t13); }
.t-15 { font-size: var(--t15); }
.t-17 { font-size: var(--t17); }
.t-21 { font-size: var(--t21); line-height: 1.4; }
.t-28 { font-size: var(--t28); line-height: 1.2; }
.secundario { color: var(--hueso-2); }
.claro .secundario { color: var(--tinta-suave); }
.medida { max-width: 64ch; }          /* medida de lectura de cuerpo */
.medida-corta { max-width: 40ch; }

/* 3 · Retícula y contenedor ------------------------------------------------ */
.contenedor { padding-inline: var(--m); }
.reticula { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.seccion { padding-block: var(--seccion); }
.claro { background: var(--hueso); color: var(--grafito); }   /* bloque claro (la cabecera se invierte sola) */
@media (max-width: 899px) {
  .reticula > * { grid-column: 1 / -1; }
}

/* 4 · Enlaces y botones ----------------------------------------------------- */
/* Subrayado simple: una línea de 1 px que crece desde la izquierda en 280 ms */
.enlace { position: relative; display: inline-block; }
.enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s var(--escala);
}
.enlace:hover::after, .enlace:focus-visible::after { transform: scaleX(1); }
.enlace--grande { font-size: var(--t21); font-weight: 500; }
/* Enlace dentro de un párrafo: subrayado siempre visible */
.enlace-texto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.enlace-texto:hover { text-decoration-thickness: 2px; }

/* Botón relleno: la acción principal de cada página (una sola) */
.boton-lleno {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px; border-radius: 2px;
  background: var(--hueso); color: var(--grafito); font-size: var(--t17); font-weight: 600;
  overflow: hidden; isolation: isolate;
}
.boton-lleno::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #FFFFFF;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--escala);
}
.boton-lleno:hover::before, .boton-lleno:focus-visible::before { transform: scaleX(1); }
.claro .boton-lleno, .boton-lleno--oscuro { background: var(--grafito); color: var(--hueso); }
.claro .boton-lleno::before, .boton-lleno--oscuro::before { background: #000; }

/* Botón con borde: acción secundaria */
.boton-borde {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1px solid currentColor; border-radius: 2px; font-size: var(--t15); line-height: 1;
  transition: background-color .3s linear, color .3s linear;
}
.boton-borde:hover, .boton-borde:focus-visible { background: var(--hueso); color: var(--grafito); }
.claro .boton-borde:hover, .claro .boton-borde:focus-visible { background: var(--grafito); color: var(--hueso); }

/* 5 · Cabecera --------------------------------------------------------------
   Transparente y siempre visible. Tinta #fff con mix-blend-mode: difference:
   clara sobre grafito, oscura sobre hueso e invertida sobre las imágenes.
   «Hablemos» a la izquierda, logo centrado, menú a la derecha. */
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--cab);
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.cab__barra {
  position: relative; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--m);
}
.cab__hablemos, .cab__logo, .cab__menu { pointer-events: auto; }
.cab__hablemos {
  justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid currentColor; border-radius: 2px; font-size: var(--t15); line-height: 1;
}
.cab__logo { display: block; padding: 6px 0; }
.cab__logo svg { width: var(--logo-cab); height: auto; }
.cab__menu { justify-self: end; position: relative; width: 48px; height: 48px; margin-right: -12px; display: grid; place-items: center; }
.cab__icono { position: relative; display: block; width: 24px; height: 13.5px; }
.cab__icono i {
  position: absolute; left: 0; top: 6px; width: 24px; height: 1.5px; background: currentColor;
  transition: transform .52s var(--escala), opacity .2s linear;
}
.cab__icono i:nth-child(1) { transform: translateY(-6px); }
.cab__icono i:nth-child(3) { transform: translateY(6px); }
.menu-abierto .cab__icono i:nth-child(1) { transform: rotate(45deg); }
.menu-abierto .cab__icono i:nth-child(2) { opacity: 0; }
.menu-abierto .cab__icono i:nth-child(3) { transform: rotate(-45deg); }
.cab :focus-visible { outline-color: #fff; } /* con la diferencia, el contorno contrasta en cualquier fondo */
@media (max-width: 899px) {
  .cab__hablemos { border: 0; padding: 0 4px; min-height: 44px; margin-left: -4px; }
}

/* 6 · Menú: panel redondeado que crece desde el icono (sin mezcla) ---------- */
.menu-velo { position: fixed; inset: 0; z-index: 94; background: rgba(18, 18, 17, .4); opacity: 0; transition: opacity .4s linear; }
.menu-velo[hidden] { display: none; }
.menu-abierto .menu-velo { opacity: 1; }
.menu {
  position: fixed; z-index: 95; top: 12px; right: 12px; width: clamp(480px, 12vw + 307px, 600px);
  max-height: calc(100svh - 24px); overflow-y: auto;
  background: var(--grafito-2); color: var(--hueso); border-radius: 24px;
  padding: calc(var(--cab) + 8px) 40px 36px; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.js .menu {
  transform-origin: calc(100% - 36px) 36px; transform: scale(.12); opacity: 0;
  transition: transform .4s var(--escala) .12s, opacity .25s linear .2s;
}
.js.menu-abierto .menu { transform: none; opacity: 1; transition: transform .52s var(--escala), opacity .18s linear; }
.menu__lista li { overflow: hidden; padding: 4px 6px 8px; margin: 0 -6px; }
.menu__enlace {
  position: relative; display: inline-block; font-size: clamp(36px, 1.07vw + 20.6px, 48px); line-height: 1.15; font-weight: 600;
  font-variation-settings: "opsz" 96; letter-spacing: -.01em;
}
.menu__enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s var(--escala);
}
.menu__enlace:hover::after, .menu__enlace:focus-visible::after, .menu__enlace[aria-current="page"]::after { transform: scaleX(1); }
.js .menu__enlace { transform: translateY(110%); transition: transform .3s cubic-bezier(.7, 0, .84, 0) calc((3 - var(--i, 0)) * 30ms); }
.menu-abierto .menu__enlace { transform: none; transition: transform .7s var(--salida) calc(.14s + var(--i, 0) * 60ms); }
.menu__contacto { margin-top: 32px; display: grid; gap: 6px; font-size: var(--t15); color: var(--hueso-2); }
.menu__contacto a { color: var(--hueso-2); }
.menu__contacto a:hover, .menu__contacto a:focus-visible, .menu__idioma a[aria-current] { color: var(--hueso); }
.menu__idioma { margin-top: 8px; }
.js .menu__contacto { opacity: 0; transition: opacity .15s linear; }
.menu-abierto .menu__contacto { opacity: 1; transition: opacity .4s linear .4s; }
@media (max-width: 899px) {
  .menu { top: 8px; right: 8px; left: 8px; width: auto; padding: calc(var(--cab) + 4px) 24px 28px; }
  .menu__enlace { font-size: 28px; }
  .menu__contacto { gap: 0; }
  .menu__contacto a { display: inline-flex; min-height: 44px; align-items: center; }
}

/* 7 · Pie: sobre grafito, como el resto del sitio -------------------------
   Contacto arriba (el correo es el gesto), navegación en la retícula, el logo como ventana
   (la misma idea del hero: la página empieza y termina igual) y la barra legal.
   Sin líneas divisorias: separa el espacio. */
.pie {
  --pie-nav: clamp(15px, .357vw + 10.86px, 20px);   /* 16 px a 1440 → 20 px a 2560 */
  position: relative; background: var(--grafito); color: var(--hueso);
  padding: var(--seccion) var(--m) calc(clamp(20px, 1.4vw, 36px) + env(safe-area-inset-bottom, 0px));
  font-size: var(--pie-nav);
}
/* WordPress: el botón fijo del chat de Studio (abajo a la derecha) no tapa «Volver arriba» */
body:has(.sa-chat) .pie { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.pie__contacto, .pie__nav { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.pie__contacto { align-items: end; row-gap: 32px; }
.pie__correo {
  grid-column: 1 / span 8; justify-self: start;
  font-size: clamp(28px, 3.9vw, 100px); line-height: 1.05; font-weight: 500; letter-spacing: -.02em;
  font-variation-settings: "opsz" 96; white-space: nowrap;
}
.pie__correo::after { height: 2px; bottom: -.06em; }
.pie__acciones { grid-column: 9 / -1; display: grid; justify-items: start; gap: 20px; }
.pie__direccion { color: var(--hueso-2); font-size: var(--t17); line-height: 1.5; max-width: 30ch; }

.pie__nav { margin-top: clamp(72px, 6.4vw, 160px); row-gap: 48px; align-items: start; }
/* Si el cierre de la página ya ofrece contacto (portada, Hablemos, servicios, estudio, trabaja con nosotros,
   legales), el pie no lo repite: empieza en la navegación y con menos aire arriba. Sin JS ni marcado por página. */
main:has(.cierre, .sv-cierre, .est-cierre, .leg-cierre, .brief-sec, #tn-form) ~ .pie { padding-top: calc(var(--seccion) * .6); }
main:has(.cierre, .sv-cierre, .est-cierre, .leg-cierre, .brief-sec, #tn-form) ~ .pie .pie__contacto { display: none; }
main:has(.cierre, .sv-cierre, .est-cierre, .leg-cierre, .brief-sec, #tn-form) ~ .pie .pie__nav { margin-top: 0; }
.pie__col--estudio { grid-column: 1 / span 3; }
.pie__col--servicios { grid-column: 4 / span 5; }
.pie__col--siguenos { grid-column: 9 / -1; }
.pie__titulo { font-size: inherit; font-weight: 400; color: var(--hueso-2); margin-bottom: .9em; }
.pie__nav ul { display: grid; gap: .5em; }
.pie__col--servicios ul { grid-template-columns: repeat(2, minmax(0, max-content)); grid-auto-flow: column; grid-template-rows: repeat(var(--filas, 4), auto); column-gap: calc(var(--g) * 2); }
.pie__nav a { line-height: 1.35; }

/* El logo como ventana: capa grafito con el hueco de las letras sobre los planos del hero.
   Proporción fija del SVG (176 × 76): sin medidas por JS. Cortes secos y empuje lento con animaciones
   CSS (opacity y transform, en el compositor), en pausa hasta que la ventana entra en pantalla. */
.pie__ventana {
  --corte: 1.8s;
  position: relative; margin-top: clamp(80px, 8vw, 200px); width: 100%; aspect-ratio: 176 / 76;
  overflow: hidden; contain: paint; background: var(--grafito);
}
.pie__plano { position: absolute; inset: 2% 1%; overflow: hidden; opacity: 0; }
.pie__plano:first-child { opacity: 1; }
.pie__plano--liso { background: var(--hueso); }   /* sin imágenes: el logo en hueso */
.pie__plano img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pie__mascara { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--grafito); }
.pie__registro { color: var(--hueso); }
.movimiento .pie__plano, .movimiento .pie__plano img {
  animation-duration: calc(var(--corte) * var(--n, 3)); animation-timing-function: linear;
  animation-iteration-count: infinite; animation-play-state: paused;
  animation-delay: calc((var(--i, 0) - var(--n, 3)) * var(--corte));
}
.movimiento .pie__plano { animation-name: pie-corte; }
.movimiento .pie__plano img { animation-name: pie-empuje; }
.movimiento .pie__ventana.en-pantalla .pie__plano,
.movimiento .pie__ventana.en-pantalla .pie__plano img { animation-play-state: running; }
/* Cada plano se ve un tercio del ciclo (con un solape mínimo para que no asome el grafito entre cortes) */
@keyframes pie-corte { 0%, 34% { opacity: 1; } 34.01%, 100% { opacity: 0; } }
@keyframes pie-empuje { 0% { transform: scale(1.07); } 34%, 100% { transform: scale(1); } }

.pie__barra {
  margin-top: clamp(20px, 1.8vw, 44px);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px;
  font-size: var(--t15); color: var(--hueso-2);
}
.pie__legales { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pie__fin { display: flex; gap: 24px; }
.pie__barra a, .pie__barra button { color: var(--hueso-2); transition: color .2s linear; }
.pie__barra a:hover, .pie__barra a:focus-visible, .pie__barra button:hover, .pie__barra button:focus-visible,
.pie__idioma a[aria-current] { color: var(--hueso); }

@media (min-width: 900px) and (max-width: 1279px) {
  .pie__correo { grid-column: 1 / -1; font-size: clamp(36px, 5vw, 64px); }
  .pie__acciones { grid-column: 1 / span 8; grid-template-columns: auto 1fr; align-items: center; column-gap: 32px; }
  .pie__col--estudio { grid-column: 1 / span 4; }
  .pie__col--servicios { grid-column: 5 / span 4; }
  .pie__col--siguenos { grid-column: 9 / -1; }
  .pie__col--servicios ul { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
@media (max-width: 899px) {
  .pie__contacto, .pie__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__correo { grid-column: 1 / -1; font-size: 8.4vw; }
  .pie__acciones { grid-column: 1 / -1; gap: 16px; }
  .pie__acciones .boton-lleno { width: 100%; }
  .pie__direccion { font-size: 16px; }
  .pie__nav { row-gap: 32px; }
  .pie__col--estudio { grid-column: 1; grid-row: 1; }
  .pie__col--siguenos { grid-column: 2; grid-row: 1; }
  .pie__col--servicios { grid-column: 1 / -1; grid-row: 2; }
  .pie__col--servicios ul { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .pie__titulo { margin-bottom: 4px; }
  .pie__nav ul { gap: 0; }
  .pie__nav a, .pie__legales a, .pie__legales button, .pie__fin a { display: inline-flex; align-items: center; min-height: 44px; }
  .pie__barra { flex-direction: column; align-items: flex-start; gap: 0; }
  .pie__legal { padding: 10px 0; }
  .pie__legales { column-gap: 20px; row-gap: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .pie__acciones .boton-lleno { width: auto; }
  .pie__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__col--estudio, .pie__col--servicios, .pie__col--siguenos { grid-row: 1; grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .movimiento .pie__plano, .movimiento .pie__plano img { animation: none; }
}

/* 8 · Cabecera de página interior y patrones de sección -------------------
   Las páginas que no son la home empiezan con un título contenido, una entradilla y, si hay, una imagen. */
.pagina-cab { padding: calc(var(--cab) + clamp(48px, 6vw, 128px)) var(--m) clamp(48px, 5vw, 112px); }
.pagina-cab__titulo { grid-column: 1 / span 8; }
.pagina-cab__entradilla { grid-column: 1 / span 6; margin-top: 24px; font-size: var(--t21); line-height: 1.4; color: var(--hueso-2); max-width: 46ch; }
.pagina-cab__imagen { grid-column: 1 / -1; margin-top: clamp(40px, 4vw, 80px); }
/* Texto a dos columnas: título corto a la izquierda, cuerpo a la derecha */
.dos-col__titulo { grid-column: 1 / span 4; }
.dos-col__cuerpo { grid-column: 6 / span 6; max-width: 64ch; }
.dos-col__cuerpo > * + * { margin-top: 1em; }
/* Lista de filas: título · descripción · dato (sin filetes: separa el espacio) */
.filas { display: grid; gap: clamp(28px, 2.4vw, 48px); }
.fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; }
.fila__titulo { grid-column: 1 / span 4; font-size: var(--t21); font-weight: 600; }
.fila__texto { grid-column: 6 / span 5; }
.fila__dato { grid-column: 12; justify-self: end; color: var(--hueso-2); font-size: var(--t15); }
@media (max-width: 899px) {
  .pagina-cab__titulo, .pagina-cab__entradilla, .dos-col__titulo, .dos-col__cuerpo { grid-column: 1 / -1; }
  .dos-col__cuerpo { margin-top: 20px; }
  .fila { grid-template-columns: 1fr; row-gap: 6px; }
  .fila__titulo, .fila__texto, .fila__dato { grid-column: 1; justify-self: start; }
}

/* 9 · Marcos de imagen: las proporciones son las escalas del concepto ------- */
.marco { position: relative; display: block; overflow: hidden; border-radius: 4px; background: var(--grafito-2); }
.marco > img, .marco > video, .marco > picture, .marco > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.marco--9x16 { aspect-ratio: 9 / 16; }
.marco--4x5 { aspect-ratio: 4 / 5; }
.marco--1x1 { aspect-ratio: 1 / 1; }
.marco--4x3 { aspect-ratio: 4 / 3; }
.marco--16x10 { aspect-ratio: 16 / 10; }
.marco--16x9 { aspect-ratio: 16 / 9; }
.pie-imagen { margin-top: 12px; font-size: var(--t15); color: var(--hueso-2); }

/* Tarjeta de proyecto (.obra): imagen en su marco, resplandor del color del cliente
   (--brillo) y video bajo demanda en hover o foco. La proporción la pone cada retícula. */
.obra__enlace { display: block; }
.obra__marco { position: relative; display: block; }
.obra__brillo {
  position: absolute; inset: 20%; z-index: 0; border-radius: 4px; background: var(--brillo);
  filter: blur(56px); opacity: 0; transform: scale(.9);
  transition: opacity .7s var(--escala), transform .9s var(--escala);
}
.obra__media { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: 4px; background: var(--grafito-2); }
.obra__media img, .obra__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obra__media img { transition: transform 1.1s var(--escala); }
.obra__video { opacity: 0; transition: opacity .4s linear; }
.obra.reproduce .obra__video { opacity: 1; }
.obra__nombre { display: block; margin-top: 16px; font-size: var(--t21); font-weight: 600; line-height: 1.25; font-variation-settings: "opsz" 28; }
.obra__meta { display: block; margin-top: 4px; font-size: var(--t15); color: var(--hueso-2); }
@media (hover: hover) {
  .obra__enlace:hover .obra__brillo, .obra__enlace:focus-visible .obra__brillo { opacity: .35; transform: scale(1.04); }
  .obra__enlace:hover .obra__media img, .obra__enlace:focus-visible .obra__media img { transform: scale(1.035); }
}
.obra__enlace:focus-visible { outline-offset: 3px; }


/* 10 · Formularios ------------------------------------------------------- */
.campo { display: grid; gap: 8px; }
.campo + .campo { margin-top: 28px; }
.campo__etiqueta { font-size: var(--t15); }
.campo__ayuda { font-size: var(--t13); color: var(--hueso-2); }
.campo__control {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 2px;
  background: var(--grafito-2); color: var(--hueso); border: 1px solid rgba(236, 234, 228, .28);
  font: inherit; font-size: var(--t17);
  transition: border-color .2s linear;
}
textarea.campo__control { min-height: 160px; resize: vertical; }
.campo__control::placeholder { color: var(--hueso-2); }
.campo__control:hover { border-color: rgba(236, 234, 228, .5); }
.campo__control:focus-visible { outline: 2px solid var(--senal); outline-offset: 0; border-color: transparent; }
.campo[data-error] .campo__control { border-color: var(--senal); }
.campo__error { font-size: var(--t15); color: #FF8A70; }   /* 6,4:1 sobre grafito */
.campo__error:empty { display: none; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(236, 234, 228, .28); border-radius: 2px; font-size: var(--t15); }
.opcion input:checked + span { background: var(--hueso); color: var(--grafito); border-color: var(--hueso); }
.opcion input:focus-visible + span { outline: 2px solid var(--senal); outline-offset: 3px; }
.casilla { display: flex; gap: 12px; align-items: start; font-size: var(--t15); }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--hueso); }
[aria-busy="true"] { cursor: progress; opacity: .7; }

/* 11 · Revelados (solo con movimiento) --------------------------------------
   data-r="lineas": H2 que suben desde su máscara, línea a línea.
   data-r="media":  imágenes que entran por recorte de su formato (marco que crece con overflow hidden
                    y contraescala en la imagen: solo transform) y escala de 1,08 a 1.
   data-r="texto":  textos pequeños que aparecen sin desplazamiento. */
.movimiento [data-r="lineas"] .l { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.movimiento [data-r="lineas"] .li { display: block; transform: translateY(108%); transition: transform 1.05s var(--salida); transition-delay: calc(var(--i, 0) * 90ms); }
.movimiento [data-r="lineas"].visto .li { transform: none; }
.movimiento [data-r="media"] { scale: .84; transition: scale 1.2s var(--escala); }
.movimiento [data-r="media"] img { scale: 1.29; transition: scale 1.2s var(--escala), transform 1.1s var(--escala); }  /* 1,08 / 0,84: contraescala */
.movimiento [data-r="media"].visto { scale: 1; }
.movimiento [data-r="media"].visto img { scale: 1; }
.movimiento [data-r="texto"] { opacity: 0; transition: opacity .9s linear; }
.movimiento [data-r="texto"].visto { opacity: 1; }

/* Gesto de anchura (.gesto-ancho): la misma palabra en wdth 75 y en wdth 100, apiladas.
   El scroll solo mueve transform y opacity (fundido cruzado + scaleX que casa los anchos). */
.gesto-ancho { position: relative; display: inline-block; white-space: nowrap; }
.gesto-ancho__b { display: inline-block; font-variation-settings: "wdth" 100, "opsz" 96; letter-spacing: .03em; transform-origin: 0 50%; }
.gesto-ancho__a { position: absolute; left: 0; top: 0; font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: -.01em; transform-origin: 0 50%; }
.movimiento .gesto-ancho__b { opacity: 0; }
.reducido .gesto-ancho__a, .no-js .gesto-ancho__a { display: none; }

/* 12 · Utilidades y aviso de vista previa -------------------------------- */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 150; max-width: calc(100% - 32px);
  background: var(--grafito-2); color: var(--hueso); border: 1px solid var(--linea); border-radius: 2px;
  padding: 12px 16px; font-size: var(--t15);
  transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .3s linear, visibility 0s .3s;
}
.aviso.visible { opacity: 1; visibility: visible; transition: opacity .3s linear, visibility 0s; }
.aviso:empty { display: none; }

/* 13 · Movimiento reducido ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}