/* =========================================================================
   DÍAZ TEALDE · movimiento.css
   Capa de movimiento y textura. Va SIEMPRE después de sections.css.

   Criterio: el estudio es un despacho de abogados, no una agencia. Nada
   parpadea, nada rebota y nada compite con la lectura. Todo lo de acá es
   lento, de amplitud corta y de una sola dirección.

   Se carga al final para poder apoyarse en lo ya definido sin reescribirlo.
   Si este archivo no carga, el sitio se ve exactamente como antes: acá no
   hay maquetación, solo movimiento y textura.

   Toda animación autónoma (la que corre sola, sin que el usuario la pida)
   está dentro de @media (prefers-reduced-motion: no-preference). Las
   transiciones de hover/foco se mantienen: responden a una acción y se
   neutralizan al final del archivo para quien pide menos movimiento.
   ========================================================================= */

/* =========================================================================
   1 · HERO — la primera pantalla es la que tiene que respirar
   ========================================================================= */

/* — 1.1 Ken Burns: deriva lentísima de la fotografía —
   El <picture> es el que se anima. El <img> que lleva dentro queda libre
   para el parallax, que lo mueve por JS con su propio transform: si los
   dos escribieran sobre el mismo elemento, el último en ejecutarse
   pisaría al otro. */
.hero__fondo picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__fondo picture {
    animation: deriva-hero 34s var(--e-salida) infinite alternate;
    will-change: transform;
  }
}
@keyframes deriva-hero {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.4%, -1%, 0); }
}

/* — 1.2 Aurora: dos halos de color que se desplazan detrás del texto —
   Aportan profundidad y evitan que el velo oscuro se vea plano.
   Van sobre el velo de .hero__fondo::after (z-index -3) y bajo la trama. */
.hero__aurora {
  position: absolute;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(34% 42% at 24% 72%, rgba(20, 65, 124, .55), transparent 68%),
    radial-gradient(26% 34% at 78% 22%, rgba(200, 169, 107, .17), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__aurora {
    animation: aurora 28s var(--e-salida) infinite alternate;
    will-change: transform;
  }
}
@keyframes aurora {
  from { transform: translate3d(-2%,  1%, 0) scale(1); }
  to   { transform: translate3d( 3%, -2%, 0) scale(1.14); }
}

/* — 1.3 Grano: textura de papel impreso —
   Rompe el degradado digital del velo. Es lo que separa visualmente una
   foto "pegada en una web" de una portada impresa. Muy sutil a propósito:
   si se nota, está mal calibrado. */
.hero__grano,
.grano {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* — 1.4 Entrada del titular —
   Se anima al cargar, no al hacer scroll: el hero ya está a la vista.
   Depende de la clase .js, así que sin JavaScript el texto aparece
   directamente visible en lugar de quedarse en opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__texto > * {
    opacity: 0;
    animation: entrada-hero .95s var(--e-suave) both;
  }
  .js .hero__texto > :nth-child(1) { animation-delay: .10s; }
  .js .hero__texto > :nth-child(2) { animation-delay: .22s; }
  .js .hero__texto > :nth-child(3) { animation-delay: .38s; }
  .js .hero__texto > :nth-child(4) { animation-delay: .52s; }
}
@keyframes entrada-hero {
  from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(7px); }
  to   { opacity: 1; transform: none;                    filter: blur(0); }
}

/* — 1.5 Subrayado que se dibuja bajo la frase destacada del H1 —
   Se resuelve con background-size y no con un ::after posicionado para
   que siga funcionando cuando la frase parte en dos líneas. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 em {
    background-image: linear-gradient(90deg, var(--champagne) 0%, rgba(200, 169, 107, 0) 100%);
    background-repeat: no-repeat;
    background-position: 0 calc(100% - .04em);
    background-size: 0% 2px;
    animation: subrayar 1.5s var(--e-suave) 1.05s forwards;
  }
}
@keyframes subrayar {
  to { background-size: 100% 2px; }
}

/* — 1.6 El indicador de scroll se retira cuando ya se hizo scroll —
   Que siga latiendo cuando el usuario ya bajó es ruido. */
.hero__scroll {
  transition: opacity var(--t-2) var(--e-suave), transform var(--t-2) var(--e-suave);
}
html[data-desplazado="true"] .hero__scroll {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* =========================================================================
   2 · CABECERA — barra de progreso de lectura
   -------------------------------------------------------------------------
   Una línea champagne que avanza con el scroll. Da sensación de recorrido
   en una home larga. Solo aparece cuando la cabecera ya es sólida, para no
   dibujar una línea suelta sobre la fotografía del hero.
   ========================================================================= */
.cabecera::after {
  content: '';
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--champagne), var(--champagne-claro));
  transform: scaleX(var(--progreso, 0));
  transform-origin: left center;
  opacity: 0;
  transition: opacity var(--t-2) var(--e-suave);
  pointer-events: none;
}
.cabecera.solida::after { opacity: 1; }

/* =========================================================================
   3 · TARJETAS — foco que sigue al cursor
   -------------------------------------------------------------------------
   El JS escribe --mx / --my con la posición del puntero dentro de la
   tarjeta. El halo se pinta en z-index -1: eso lo deja por encima del
   fondo de la tarjeta pero por debajo del texto, así nunca baja el
   contraste de lectura. Requiere isolation para no escaparse del bloque.
   Sin JS, --mx/--my caen en su valor por defecto (50% / 0%) y el halo
   sigue funcionando como un degradado fijo en hover.
   ========================================================================= */
.foco-cursor {
  position: relative;
  isolation: isolate;
  --foco-color: rgba(160, 124, 58, .14);
}
.foco-cursor::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
              var(--foco-color), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-2) var(--e-suave);
}
.foco-cursor:hover::after,
.foco-cursor:focus-within::after { opacity: 1; }

/* Sobre fondo oscuro el halo es champagne y puede ser algo más intenso */
.hero .foco-cursor,
.programa .foco-cursor,
.diagnostico .foco-cursor,
.filosofia .foco-cursor,
.cierre .foco-cursor { --foco-color: rgba(200, 169, 107, .17); }

/* .servicio ya usa ::before para su subrayado; el halo va en ::after igual
   que en el resto, así que no hay conflicto. */

/* =========================================================================
   4 · PILARES — número de fondo
   -------------------------------------------------------------------------
   El número grande translúcido detrás de cada pilar da jerarquía editorial
   y hace que las ocho tarjetas dejen de leerse como una lista uniforme.
   Toma el valor de data-num, así que el HTML sigue siendo la única fuente
   de la numeración: no hay un contador CSS que se pueda desincronizar.
   ========================================================================= */
.pilar {
  overflow: hidden;      /* recorta el número cuando sobresale del borde */
  isolation: isolate;
}
.pilar::before {
  content: attr(data-num);
  position: absolute;
  z-index: -1;
  inset-block-end: -.22em;
  inset-inline-end: .5rem;
  font-family: var(--f-serif);
  font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  line-height: .8;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .045);
  pointer-events: none;
  transition: color var(--t-3) var(--e-suave), transform var(--t-3) var(--e-suave);
}
.pilar:hover::before {
  color: rgba(200, 169, 107, .13);
  transform: translateY(-10px);
}

/* =========================================================================
   5 · ICONOS — micro-reacción al pasar por la tarjeta
   ========================================================================= */
.pilar .ic,
.situacion .ic,
.sector .ic,
.servicio .ic,
.entregable .ic,
.hero__concepto .ic,
.franja__item .ic {
  transition: transform var(--t-2) var(--e-suave), color var(--t-2) var(--e-suave);
}
.pilar:hover .ic,
.situacion:hover .ic,
.sector:hover .ic,
.servicio:hover .ic,
.entregable:hover .ic,
.hero__concepto:hover .ic,
.franja__item:hover .ic {
  transform: translateY(-3px) scale(1.08);
}

/* Elevación en las tarjetas que todavía no la tenían.
   Quedan fuera a propósito:
     · .sector     → vive en una grilla de 1px de separación; moverla
                     abriría una costura visible entre celdas.
     · .entregable → las pares ya llevan un translateY de composición;
                     un transform de hover lo pisaría. */
.situacion,
.servicio {
  transition:
    transform var(--t-2) var(--e-suave),
    box-shadow var(--t-2) var(--e-suave),
    border-color var(--t-2) var(--e-suave);
}
.situacion:hover,
.servicio:hover { transform: translateY(-4px); }

/* =========================================================================
   6 · LÍNEAS QUE SE DIBUJAN AL ENTRAR EN PANTALLA
   -------------------------------------------------------------------------
   Reutilizan el .revelar que ya existe: cuando el observador agrega
   .visible, la línea se dibuja. No hace falta JavaScript nuevo.
   ========================================================================= */

/* Guion de las etiquetas de sección */
.js .revelar .etiqueta::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .75s var(--e-suave) .2s;
}
.js .revelar.visible .etiqueta::before { transform: scaleX(1); }

/* Línea que une los cuatro pasos del proceso */
.js .pasos::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s var(--e-suave) .25s;
}
.js .pasos.visible::before,
.js .visible .pasos::before { transform: scaleX(1); }

/* La marca numerada de cada paso llega girando un poco */
.paso__marca {
  transition: transform var(--t-2) var(--e-suave), border-color var(--t-2) var(--e-suave),
              background-color var(--t-2) var(--e-suave), color var(--t-2) var(--e-suave);
}
.paso:hover .paso__marca {
  transform: scale(1.07);
  border-color: var(--acento);
}

/* =========================================================================
   7 · REVELADO CON MÁS CARÁCTER
   -------------------------------------------------------------------------
   Se le suma un desenfoque de entrada al .revelar de base.css. El texto
   "enfoca" en lugar de simplemente aparecer; es el gesto que más eleva la
   percepción de acabado sin alargar la espera.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar {
    filter: blur(6px);
    transition:
      opacity var(--t-3) var(--e-suave),
      transform var(--t-3) var(--e-suave),
      filter var(--t-3) var(--e-suave);
  }
  .js .revelar.visible { filter: blur(0); }

  /* El escalonado también alcanza al desenfoque */
  .js .escalonar > * { transition-delay: calc(var(--i, 0) * 85ms); }
}

/* =========================================================================
   8 · IMÁGENES DE SECCIÓN — parallax suave
   -------------------------------------------------------------------------
   El JS mueve estas imágenes según su posición en pantalla. El contenedor
   recorta el sobrante, por eso la imagen se escala un punto: sin ese
   margen el movimiento dejaría ver el borde del bloque.
   ========================================================================= */
.problema__media,
.contacto__media,
.filosofia__fondo { overflow: hidden; }

.problema__media img,
.contacto__media img { will-change: transform; }

/* =========================================================================
   9 · MENOS MOVIMIENTO
   -------------------------------------------------------------------------
   Con prefers-reduced-motion todo lo autónomo ya quedó excluido por los
   media queries de arriba. Acá se cancela lo que queda: animaciones que
   pudieran estar corriendo, el desenfoque de entrada y los desplazamientos
   de hover. Se conservan los cambios de color y de borde, que comunican
   estado sin producir movimiento.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__fondo picture,
  .hero__aurora,
  .hero__scroll i,
  .wa-flotante::before,
  .js .hero__texto > *,
  .js .hero h1 em {
    animation: none !important;
  }
  .js .hero__texto > * { opacity: 1 !important; }
  .js .hero h1 em { background-size: 100% 2px !important; }

  .js .revelar { filter: none !important; }

  .pilar:hover::before,
  .situacion:hover,
  .servicio:hover,
  .paso:hover .paso__marca,
  .pilar:hover .ic,
  .situacion:hover .ic,
  .sector:hover .ic,
  .servicio:hover .ic,
  .entregable:hover .ic,
  .hero__concepto:hover .ic,
  .franja__item:hover .ic {
    transform: none !important;
  }

  .js .revelar .etiqueta::before,
  .js .pasos::before { transform: scaleX(1) !important; }
}