/* =============================================================================
   Bando Consultoría Digital — estilos
   Negro sobre blanco. Tipografía grande, poco texto, mucho aire.
   Unidad de marca: --u = altura del logotipo / 163,51 (viewBox del logo).
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --negro: #000;
  --blanco: #fff;
  --gris: #d8d8d8;            /* bandas, cinta del cursor (medido en la mesa 4) */
  --gris-texto: #505050;      /* 8,0:1 sobre blanco · 5,7:1 sobre la cinta #d8d8d8 */
  --gris-fino: #e9e9e9;       /* filetes */

  --fuente: "Archivo", system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);

  --margen: clamp(1rem, 3.4vw, 3.5rem);        /* gutter lateral */
  --sp-xs: .5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 3rem;
  --sp-xl: 6rem;
  --bloque-v: clamp(3rem, 8vh, 6rem);          /* respiración vertical de cada pantalla */

  /* Geometría del logotipo en el hero (ver MARCA.md §1.5).
     14vw garantiza que el menú de la derecha deje al menos un gutter de 4 % del ancho. */
  --logo-h: clamp(88px, min(21.3vh, 14vw), 420px);
  --logo-h: clamp(88px, min(21.3svh, 14vw), 420px);
  --u: calc(var(--logo-h) / 163.51);
  --logo-w: calc(var(--u) * 295.71);
  --logo-x: 43.98vw;
  --logo-cy: 48.5vh;
  --logo-cy: 48.5svh;

  /* Escala tipográfica fluida (5 pasos, ratio > 1,25) */
  --t-gigante: clamp(3.5rem, 13.5vw, 17rem);     /* SERVICIOS / PROYECTOS / CONTACTO */
  --t-display: clamp(2.75rem, 7.6vw, 9.5rem);    /* títulos de bloque */
  --t-claim: clamp(1.375rem, 2.3vw, 2.25rem);    /* claims */
  --t-lista: clamp(1.25rem, 1.6vw, 1.75rem);     /* nombres de servicio */
  --t-cuerpo: 1.0625rem;
  --t-nota: .8125rem;
}

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

html {
  color-scheme: light;
  background: var(--blanco);
  scroll-padding-top: 4.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--negro);
  background: var(--blanco);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, address { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--negro); outline-offset: 4px; }

.salto {
  position: absolute; top: .75rem; left: .75rem; z-index: 50;
  padding: .5rem .75rem; background: var(--negro); color: var(--blanco);
  text-decoration: none; font-size: .875rem;
  transform: translateY(-200%);
}
.salto:focus-visible { transform: none; outline-color: var(--blanco); outline-offset: -4px; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* La cinta del cursor va detrás de todo; el contenido, encima y con fondo transparente
   (también el hero: la cinta tiene que verse nada más terminar la intro). */
#cinta {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero, main, .pie, .barra { position: relative; z-index: 1; }

/* ---------- Tipos reutilizables ----------------------------------------- */
.titulo-seccion {
  font-size: var(--t-gigante);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.titulo-bloque {
  font-size: var(--t-display);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: manual;            /* los ­ del HTML deciden dónde partir en móvil */
}
.claim {
  font-size: var(--t-claim);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  max-width: 24ch;
  text-wrap: pretty;
}
.etiqueta {
  font-size: var(--t-nota);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nota { font-size: var(--t-nota); color: var(--gris-texto); }

.enlace {
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .18em;
  transition: text-decoration-color 200ms ease;
}
.enlace:hover { text-decoration-color: var(--gris); }

/* Aparición suave al hacer scroll (solo con JS; sin JS todo visible).
   Un elemento enfocado por teclado se muestra siempre, aunque el observador aún no lo haya revelado. */
.js .aparece {
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity 800ms var(--ease-out), translate 1000ms var(--ease-out);
}
.js .aparece.visible, .js .aparece:focus-within { opacity: 1; translate: 0 0; }

/* =============================================================================
   HERO — la escena de la secuencia de inicio
   ========================================================================== */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: transparent;
}

.hero__svg {
  position: absolute;
  left: var(--logo-x);
  top: calc(var(--logo-cy) - var(--logo-h) / 2);
  width: var(--logo-w);
  height: var(--logo-h);
  overflow: visible;
  transition: opacity 180ms ease;
}
/* Mientras la intro está pendiente de arrancar (clase puesta en <head>) no se
   pinta el estado final: evita un parpadeo antes del primer fotograma. */
.intro-pendiente .banda { width: 0; }

/* Menú del hero: segunda columna del logotipo, entre las bandas */
.hero__menu {
  position: absolute;
  left: calc(var(--logo-x) + 404.9 * var(--u));
  top: calc(var(--logo-cy) - var(--logo-h) / 2);
  width: calc(300 * var(--u));
  height: var(--logo-h);
  transition: opacity 180ms ease;
}
.hero__menu a {
  position: absolute;
  left: 0;
  margin: 0;
  font-size: calc(32.45 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: .07em;
  text-underline-offset: .12em;
  /* el borde inferior de la caja es la baseline: top = baseline del logo */
  text-box: trim-both cap alphabetic;
  transform: translateY(-100%);
  visibility: visible;
  transition: opacity 320ms var(--ease-out), translate 320ms var(--ease-out), text-decoration-color 200ms ease, visibility 0s;
}
@supports not (text-box: trim-both cap alphabetic) {
  .hero__menu a { transform: translateY(calc(-100% + .17em)); }
}
.hero__menu a:nth-child(1) { top: calc(50.76 * var(--u)); }
.hero__menu a:nth-child(2) { top: calc(92.76 * var(--u)); transition-delay: 100ms; }
.hero__menu a:nth-child(3) { top: calc(134.76 * var(--u)); transition-delay: 200ms; }
.hero__menu a:hover, .hero__menu a:focus-visible { text-decoration-color: var(--negro); }

/* Estado del menú durante la intro: oculto (y fuera del orden de tabulación) hasta la fase 3c */
.intro-pendiente .hero__menu a,
.hero--animando:not(.hero--menu) .hero__menu a {
  opacity: 0;
  translate: 0 calc(8 * var(--u));
  visibility: hidden;
  transition-delay: 0s;
}
.hero--fundido .hero__svg, .hero--fundido .hero__menu { opacity: 0; }

/* Botón «Saltar intro»: solo mientras anima */
.hero__saltar {
  position: absolute;
  top: var(--margen);
  right: var(--margen);
  z-index: 2;
  padding: .5rem 0;
  font-size: var(--t-nota);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s 200ms, transform 160ms ease-out;
}
.hero--animando .hero__saltar { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero__saltar:active { transform: scale(.97); }

/* Pista de scroll: enlace al contenido */
.hero__flecha {
  position: absolute;
  left: var(--margen);
  bottom: var(--margen);
  padding: .25rem .5rem;
  margin: 0 -.5rem;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease 400ms, visibility 0s 1s, translate 300ms var(--ease-out);
}
.hero--final .hero__flecha, html:not(.js) .hero__flecha { opacity: 1; visibility: visible; transition-delay: 400ms, 0s, 0s; }
.hero__flecha:hover { translate: 0 .25rem; }

/* Pantallas estrechas: logo centrado, bandas de lado a lado, menú debajo */
@media (max-width: 899px) {
  :root {
    --logo-h: clamp(88px, min(24svh, 28vw), 240px);
    --logo-x: calc(50vw - var(--logo-w) / 2);
    --logo-cy: 40svh;
  }
  .hero__menu {
    left: var(--logo-x);
    top: calc(var(--logo-cy) + var(--logo-h) / 2 + 44 * var(--u));
    width: auto;
    height: auto;
    display: grid;
    gap: .3em;
  }
  .hero__menu a {
    position: static;
    transform: none;
    text-box: normal;
    font-size: max(calc(32.45 * var(--u)), 1.75rem);
    line-height: 1.1;
  }
}

/* =============================================================================
   BARRA FIJA — aparece al dejar atrás el hero
   ========================================================================== */
.barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  padding: 0 var(--margen);
  background: var(--blanco);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 320ms var(--ease-out), visibility 0s 320ms;
}
.barra--visible { transform: none; visibility: visible; transition-delay: 0s; }
.barra__marca {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .25rem 0;
  text-decoration: none;
  font-size: var(--t-nota);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.barra__marca img { height: 2rem; width: auto; }
@media (max-width: 599px) { .barra__marca span { display: none; } }
.barra ul { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
.barra a {
  font-size: var(--t-nota);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .5rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.barra a:hover, .barra a:focus-visible { border-bottom-color: var(--negro); }

/* =============================================================================
   CLAIM — segunda pantalla
   ========================================================================== */
.portada-claim {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-lg);
  padding: var(--bloque-v) var(--margen);
}
.portada-claim h1 {
  align-self: center;
  font-size: clamp(2.75rem, 7.4vw, 9rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 15ch;
  text-wrap: balance;
}
.portada-claim__sub {
  justify-self: end;
  max-width: 40ch;
  font-size: var(--t-claim);
  line-height: 1.25;
  text-wrap: pretty;
}
@media (max-width: 899px) {
  .portada-claim__sub { justify-self: start; }
}

/* =============================================================================
   PORTADAS DE SECCIÓN (Servicios / Proyectos)
   ========================================================================== */
.portada {
  min-height: 56svh;
  display: grid;
  align-content: end;
  gap: var(--sp-md);
  padding: var(--bloque-v) var(--margen) var(--sp-lg);
}
.portada .claim { max-width: 30ch; }
.portada .nota { max-width: 48ch; }
.portada__pie {
  display: grid;
  gap: var(--sp-sm);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--negro);
}
@media (min-width: 900px) {
  .portada__pie { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* =============================================================================
   BLOQUES DE SERVICIO — una pantalla cada uno
   ========================================================================== */
.bloque {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: var(--bloque-v) var(--margen);
  border-top: 1px solid var(--gris-fino);
}
.bloque__cabecera {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
}
.bloque__num {
  font-size: var(--t-claim);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--gris-texto);
}
.bloque__cuerpo {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  min-height: 0;
}
@media (min-width: 900px) {
  .bloque__cuerpo { grid-template-columns: 7fr 5fr; }
  .bloque:nth-of-type(even) .bloque__cuerpo { grid-template-columns: 5fr 7fr; }
  .bloque:nth-of-type(even) .lienzo { order: 2; }
}
.bloque__texto { display: grid; gap: var(--sp-md); align-content: start; }

/* Lista de servicios: solo los nombres, grandes; la descripción se despliega */
.lista { display: grid; border-top: 1px solid var(--negro); }
.lista li { border-bottom: 1px solid var(--gris-fino); }
.lista summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .6rem 0;
  font-size: var(--t-lista);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
  transition: color 200ms ease;
}
.lista summary::-webkit-details-marker { display: none; }
.lista summary::after {
  content: "";
  width: .85em; height: .85em;
  background:
    linear-gradient(var(--negro), var(--negro)) center / 100% 1px no-repeat,
    linear-gradient(var(--negro), var(--negro)) center / 1px 100% no-repeat;
  transition: rotate 320ms var(--ease-out);
}
.lista details[open] summary::after { rotate: 45deg; }
.lista summary:hover { color: var(--gris-texto); }
.lista summary:focus-visible { outline-offset: 2px; }
.lista details p {
  padding: 0 2.5rem .9rem 0;
  color: var(--gris-texto);
  max-width: 52ch;
  text-wrap: pretty;
}
@media (prefers-reduced-motion: no-preference) {
  .lista details[open] p { animation: despliega 320ms var(--ease-out); }
}
@keyframes despliega {
  from { opacity: 0; translate: 0 -.25rem; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- Lienzo: imagen en blanco y negro que se amplía y colorea ----- */
.lienzo {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;                      /* llena la fila: así cada bloque cabe en una pantalla */
  min-height: 16rem;
  max-height: 52rem;
  background: transparent;
}
.lienzo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  filter: grayscale(1);
  transform: scale(1);
  transition: transform 1200ms var(--ease-out), filter 800ms ease;
}
.lienzo--marco { outline: 1px solid var(--gris-fino); outline-offset: -1px; }

@media (hover: hover) and (pointer: fine) {
  .lienzo:hover img { filter: grayscale(0); transform: scale(1.07); }
}
.bloque:focus-within .lienzo img,
.proyecto:focus-within .lienzo img {
  filter: grayscale(0); transform: scale(1.07);
}
.proyecto:focus-within .proyecto__logo img { filter: grayscale(0); }
/* Sin ratón (táctil): la imagen se colorea cuando está en pantalla */
@media (hover: none) {
  .lienzo.en-vista img { filter: grayscale(0); }
  .proyecto.en-vista .proyecto__logo img { filter: grayscale(0); }
}
/* En pantallas estrechas el lienzo toma la proporción de la captura (4:3) para que se vea
   casi entera, y cada imagen puede fijar su encuadre móvil con --pos-movil */
@media (max-width: 899px) {
  .lienzo { height: auto; aspect-ratio: 4 / 3; min-height: 0; max-height: 52svh; }
  .lienzo img { object-position: var(--pos-movil, var(--pos, 50% 50%)); }
}

/* =============================================================================
   MÉTODO — cuatro pasos
   ========================================================================== */
.metodo {
  padding: var(--bloque-v) var(--margen);
  border-top: 1px solid var(--gris-fino);
  display: grid;
  gap: var(--sp-lg);
}
.metodo ol {
  display: grid;
  gap: var(--sp-lg) var(--sp-md);
}
@media (min-width: 700px) { .metodo ol { grid-template-columns: repeat(4, 1fr); } }
.metodo li { display: grid; gap: var(--sp-sm); align-content: start; padding-top: var(--sp-sm); border-top: 1px solid var(--negro); }
.metodo strong { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
.metodo p { color: var(--gris-texto); max-width: 30ch; text-wrap: pretty; }

/* =============================================================================
   PROYECTOS — una pantalla por producto
   ========================================================================== */
.proyecto {
  min-height: 100svh;
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: var(--bloque-v) var(--margen);
  border-top: 1px solid var(--gris-fino);
}
@media (min-width: 900px) {
  .proyecto { grid-template-columns: 5fr 7fr; }
  .proyecto:nth-of-type(even) { grid-template-columns: 7fr 5fr; }
  .proyecto:nth-of-type(even) .lienzo { order: -1; }
}
.proyecto__texto { display: grid; gap: var(--sp-md); align-content: center; }
.proyecto__logo { margin-bottom: var(--sp-md); }
.proyecto__logo img {
  height: clamp(2.5rem, 5vw, 4.5rem);
  width: auto;
  filter: grayscale(1);
  transition: filter 800ms ease;
}
/* En Proyectos, el bloque entero «enciende» logo e imagen; la ampliación sigue siendo solo sobre la imagen */
@media (hover: hover) and (pointer: fine) {
  .proyecto:hover .proyecto__logo img,
  .proyecto:hover .lienzo img { filter: grayscale(0); }
}
.proyecto__claim {
  font-size: clamp(2.5rem, 5.6vw, 7rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
.proyecto__linea { max-width: 42ch; color: var(--gris-texto); font-size: 1.125rem; text-wrap: pretty; }
.enlace-grande {
  justify-self: start;
  font-size: var(--t-claim);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .18em;
  transition: text-decoration-color 200ms ease;
}
.enlace-grande:hover { text-decoration-color: var(--gris); }
@media (max-width: 899px) {
  .proyecto .lienzo { aspect-ratio: 3 / 4; max-height: 64svh; }
  .proyecto:nth-of-type(even) .lienzo { aspect-ratio: 4 / 3; }
}

/* =============================================================================
   CONTACTO
   ========================================================================== */
.contacto {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: var(--sp-lg);
  padding: var(--bloque-v) var(--margen);
  border-top: 1px solid var(--gris-fino);
}
.contacto__email {
  justify-self: start;
  font-size: clamp(1.375rem, 4.6vw, 5.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-decoration: underline;
  text-decoration-thickness: .05em;
  text-underline-offset: .15em;
  overflow-wrap: anywhere;
  transition: text-decoration-color 200ms ease;
}
.contacto__email:hover { text-decoration-color: var(--gris); }
.contacto__datos {
  display: grid;
  gap: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--negro);
  max-width: 72rem;
}
.contacto__direccion { display: grid; gap: var(--sp-md); }
@media (min-width: 700px) {
  .contacto__datos { grid-template-columns: repeat(2, 1fr); }
  .contacto__direccion { grid-template-columns: subgrid; grid-column: span 2; }
}
@media (min-width: 1100px) { .contacto__datos { grid-template-columns: repeat(4, 1fr); max-width: none; } }
.contacto__datos div { display: grid; gap: .25rem; align-content: start; }
.contacto__datos .etiqueta { color: var(--gris-texto); margin-bottom: .25rem; }
.contacto__datos a { text-decoration: none; }
.contacto__datos a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* =============================================================================
   PIE
   ========================================================================== */
.pie {
  display: grid;
  gap: var(--sp-md);
  align-items: end;
  padding: var(--sp-lg) var(--margen) var(--sp-md);
  font-size: var(--t-nota);
  color: var(--gris-texto);
}
.pie__marca img { height: 2.25rem; width: auto; }
.pie nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pie a { text-decoration: none; color: var(--negro); }
.pie a:hover { text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 700px) {
  .pie { grid-template-columns: auto 1fr auto; }
}

/* =============================================================================
   PÁGINAS LEGALES Y 404
   ========================================================================== */
.cabecera-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--margen);
}
.cabecera-simple img { height: clamp(3rem, 6vw, 4.5rem); width: auto; }
.cabecera-simple a { text-decoration: none; }
.pagina-legal main {
  display: grid;
  gap: var(--sp-lg);
  padding: var(--sp-xl) var(--margen);
  max-width: 64rem;
}
.pagina-legal h1 {
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.pagina-legal section { display: grid; gap: var(--sp-sm); max-width: 68ch; }
.pagina-legal h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -.01em; padding-top: var(--sp-md); border-top: 1px solid var(--negro); }
.pagina-legal p, .pagina-legal li { color: var(--gris-texto); text-wrap: pretty; }
.pagina-legal ul { display: grid; gap: .35rem; padding-left: 1.1em; list-style: disc; }
.pagina-legal strong { color: var(--negro); font-weight: 500; }
.pagina-legal dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 0; }
.pagina-legal dt { color: var(--gris-texto); }
.pagina-legal dd { margin: 0; }
.pagina-404 main { min-height: 60svh; align-content: center; }
.pagina-404 h1 { font-size: clamp(4rem, 18vw, 20rem); line-height: .85; }

/* =============================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .aparece { opacity: 1; translate: none; transition: none; }
  .hero__menu a, .lienzo img, .barra, .hero__flecha, .proyecto__logo img, .lista summary::after { transition-duration: 1ms; }
  .lienzo:hover img, .bloque:focus-within .lienzo img, .proyecto:focus-within .lienzo img { transform: none; }
}

@media print {
  #cinta, .barra, .hero__saltar, .hero__flecha { display: none; }
  .lista details { display: block; }
  .lista details p { display: block; }
}