/* Movimiento v4 (spec §3.8): toda declaración transition, animation y @keyframes del sitio vive aquí.
   - Los estados iniciales ocultos existen solo bajo html.mov (JS activo y sin movimiento reducido); el guardia
     de la cabecera quita .mov a los 4 s si movimiento.js no puso window.gmrListo.
   - movimiento.js agrega .visto al revelar, parte los títulos en .m > .w y reserva su ancho final.
   - Curvas del prototipo aprobado (referencia/prototipo-fuente.html). Desde la Task 14 los revelados son más cortos y
     sutiles (sube 14 px; fila, línea, caja y barras un 35 % más breves) y el desplazamiento es el nativo. */

/* ---------- Componentes compartidos (componentes.css): transiciones de sus estados ---------- */
.flecha { transition: transform .5s var(--curva); }
.boton { transition: color .45s var(--curva), transform .6s var(--curva), box-shadow .45s var(--curva); }
.boton::before { transition: transform .6s var(--curva); }
.enlace-linea { transition: background-size .6s var(--curva), color .3s; }
.chip { transition: background-color .4s var(--curva), color .4s var(--curva); }
.tarjeta {
  transition:
    border-color .6s var(--curva),
    transform .8s var(--curva),
    box-shadow .8s var(--curva),
    background-color .6s var(--curva);
}
.migas a { transition: color .3s; }
.pie__columnas a { transition: opacity .3s; }
.arriba { transition: box-shadow .4s; }

.encabezado {
  transition:
    background-color .6s var(--curva),
    box-shadow .6s var(--curva),
    height .6s var(--curva),
    transform .7s var(--curva),
    opacity .9s var(--curva);
}
.encabezado__logo img { transition: height .6s var(--curva); }
.nav__enlace { transition: background-size .6s var(--curva), color .4s; }
.menu-boton__barras i { transition: transform .5s var(--curva), opacity .3s; }
/* Menú móvil: se despliega con un recorte; al cerrar, visibility espera a que termine */
@media (max-width: 1023px) {
  .js .nav { transition: clip-path .7s var(--curva), visibility 0s .7s; }
  .js .nav.es-abierto { transition: clip-path .7s var(--curva); }
}

/* ---------- Servicios ---------- */
/* El índice sube con el encabezado (mismo tiempo que su transform) y las pastillas cambian de relleno */
.indice { transition: top .7s var(--curva); }
.indice a { transition: background-color .4s var(--curva), color .4s, box-shadow .4s; }
/* Preguntas: la cruz gira al abrir y la respuesta baja con un fundido */
.pregunta summary::after { transition: transform .6s var(--curva); }
.pregunta[open] p { animation: abrir .7s var(--curva); }
@keyframes abrir { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Estudio ---------- */
/* Enlaces del contacto y de los antecedentes pasan a violeta; la tarjeta del criterio se eleva al pasar el mouse */
.contacto-lista a { transition: color .3s; }
.datos a { transition: color .3s; }
.criterio {
  transition:
    border-color .6s var(--curva),
    transform .8s var(--curva),
    background-color .6s var(--curva);
}

/* ---------- Contacto ---------- */
/* Los campos cambian de borde, halo y fondo al pasar el mouse y con el foco; los enlaces del recuadro pasan a violeta */
.campo input,
.campo select,
.campo textarea { transition: border-color .4s var(--curva), box-shadow .4s var(--curva), background-color .4s var(--curva); }
.directo a { transition: color .3s; }

/* ---------- Inicio ---------- */
/* Tarjetas de servicios: la cruz gira y el nombre pasa a blanco; la octava cambia de relleno */
.servicio-tarjeta::after { transition: transform .5s var(--curva); }
.servicio-tarjeta__nombre { transition: color .4s; }
.servicio-tarjeta--todos { transition: background-color .4s var(--curva), color .4s var(--curva); }
.modal__cerrar { transition: box-shadow .4s; }
/* Indicador de desplazamiento: un trazo cae por la línea */
.indicador i::after { animation: caer 2.4s var(--curva-io) infinite; }
@keyframes caer {
  from { transform: translateY(-100%); }
  to { transform: translateY(240%); }
}
/* La entrada termina con el encabezado (spec §3.8): movimiento.js quita encabezado--entrada después del indicador.
   Oculto solo con .mov (sin JS, con movimiento reducido o tras el guardia de 4 s se ve) y nunca con el foco adentro. */
.mov .encabezado--entrada:not(:focus-within) { opacity: 0; transform: translate3d(0, -16px, 0); }

/* Resplandor que deriva lento (portada, retrato y pie) */
.brillo { animation: deriva 26s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: translate3d(-6%, 4%, 0) scale(1.1); } }

/* ---------- Revelados al entrar en pantalla: data-r (estados iniciales solo con .mov) ---------- */
/* --d: retardo propio (style="--d:Nms") o del grupo (data-grupo="N", lo asigna movimiento.js) */

/* sube: 14 px con fundido */
[data-r="sube"] { transition: opacity .6s var(--curva) var(--d, 0ms), transform .7s var(--curva) var(--d, 0ms); }
.mov [data-r="sube"]:not(.visto) { opacity: 0; transform: translate3d(0, 14px, 0); }

/* El mini isotipo de la volanta crece al revelarse */
.volanta::before { transition: transform .7s var(--curva) calc(var(--d, 0ms) + 100ms); }
.mov [data-r]:not(.visto) .volanta::before,
.mov .volanta[data-r]:not(.visto)::before { transform: scaleY(0); }

/* titulo: cada palabra (.w) sube desde su máscara (.m), por línea (--l), y se ensancha de 70 % al ancho final.
   El ancho de cada .m se reserva antes (fijarAnchos: .midiendo y .sin-trans), así el ensanche no mueve nada. */
.m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .16em .02em; margin: 0 -.06em -.16em -.02em; }
/* La línea en serif itálica (titular del Inicio) cuelga más a la derecha y abajo: su máscara deja más margen */
.linea-b .m { padding: .02em .16em .24em .04em; margin: -.02em -.16em -.24em -.04em; }
.w {
  display: inline-block;
  transition: transform .8s var(--curva), font-stretch 1.2s var(--curva);
  transition-delay: calc(var(--d, 0ms) + var(--l, 0) * 80ms);
}
.mov [data-r="titulo"]:not([data-partido]) { opacity: 0; }
/* La palabra espera por debajo de su máscara y también de su margen inferior (.16em, .24em en la serif): así no asoman
   tildes ni puntos de la "i" antes de la entrada (corrección del 2026-11-11) */
.mov [data-r="titulo"]:not(.visto) .w { transform: translate3d(0, calc(112% + .3em), 0); }
.mov [data-r="titulo"][data-anchos]:not(.visto) .w { font-stretch: 70%; }
.midiendo [data-r="titulo"] .w { font-stretch: inherit !important; transform: none !important; }
.sin-trans [data-r="titulo"] .w { transition: none !important; }

/* fila y linea: la línea ::after se dibuja de izquierda a derecha; fila además sube a sus hijos */
[data-r="fila"],
[data-r="linea"] { position: relative; }
[data-r="fila"]::after,
[data-r="linea"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--linea);
  transform-origin: left;
  transition: transform 1s var(--curva) var(--d, 0ms);
  pointer-events: none;
}
[data-linea="abajo"]::after { top: auto; bottom: 0; }
[data-linea="violeta"]::after { height: 2px; background: linear-gradient(90deg, var(--violeta), var(--violeta-claro)); }
.mov [data-r="fila"]:not(.visto)::after,
.mov [data-r="linea"]:not(.visto)::after { transform: scaleX(0); }
[data-r="fila"] > * {
  transition:
    opacity .65s var(--curva) calc(var(--d, 0ms) + 120ms),
    transform .7s var(--curva) calc(var(--d, 0ms) + 120ms);
}
.mov [data-r="fila"]:not(.visto) > * { opacity: 0; transform: translate3d(0, 14px, 0); }

/* caja: se abre con un recorte desde el centro y sube a sus hijos */
[data-r="caja"] { transition: clip-path .95s var(--curva) var(--d, 0ms); }
.mov [data-r="caja"]:not(.visto) { clip-path: inset(8% 6% 8% 6% round var(--radio)); }
[data-r="caja"].visto { clip-path: inset(0 0 0 0 round var(--radio)); }
[data-r="caja"] > * {
  transition:
    opacity .65s var(--curva) calc(var(--d, 0ms) + 200ms),
    transform .7s var(--curva) calc(var(--d, 0ms) + 200ms);
}
.mov [data-r="caja"]:not(.visto) > * { opacity: 0; transform: translate3d(0, 12px, 0); }

/* barras: las barras del isotipo crecen desde abajo, escalonadas cada 100 ms */
.barra i { transition: transform 1.2s var(--curva) calc(var(--d, 0ms) + var(--b, 0) * 100ms); }
.barra:nth-child(2) i { --b: 1; }
.barra:nth-child(3) i { --b: 2; }
.mov [data-r="barras"]:not(.visto) .barra i { transform: scaleY(0); }

/* data-iluminar: las palabras (.p) se encienden con el avance del desplazamiento */
.p { transition: opacity .45s linear, color .45s linear; }
.mov [data-iluminar] .p { opacity: .14; }
.mov [data-iluminar] .p.on { opacity: 1; }

/* data-magnetico: el botón sigue al puntero fino (la traslación la escribe movimiento.js) */
[data-magnetico] { transition: transform .7s var(--curva), color .45s var(--curva), box-shadow .45s var(--curva); }

/* ---------- Telón entre páginas (View Transitions entre documentos) ----------
   La página saliente se recorta de abajo hacia arriba (640 ms) y deja ver el panel noche con grano; el isotipo
   crece en el centro; la página entrante aparece desde abajo (760 ms, con 520 ms de retardo). Las pseudo-capas
   heredan del :root, así que los tokens funcionan. Sin soporte, la navegación es inmediata. */
@property --iso-1 { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --iso-2 { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --iso-3 { syntax: "<length>"; inherits: false; initial-value: 0px; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-image-pair(root) {
    background: var(--noche);
    /* Isotipo (tres barras de 13 px que crecen desde abajo, como scaleY) y grano al 6 % */
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 46' preserveAspectRatio='none'%3E%3Crect width='13' height='46' rx='3' fill='rgba(97,68,161,1)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 38' preserveAspectRatio='none'%3E%3Crect width='13' height='38' rx='3' fill='rgba(131,110,179,1)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 30' preserveAspectRatio='none'%3E%3Crect width='13' height='30' rx='3' fill='rgba(165,152,198,1)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .036 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size: 13px var(--iso-1), 13px var(--iso-2), 13px var(--iso-3), 220px 220px;
    /* Barras separadas 7 px y apoyadas en una base común a 23 px bajo el centro */
    background-position:
      calc(50% - 20px) calc(50% + 23px - var(--iso-1) / 2),
      50% calc(50% + 23px - var(--iso-2) / 2),
      calc(50% + 20px) calc(50% + 23px - var(--iso-3) / 2),
      0 0;
    animation:
      telon-iso-1 650ms var(--curva) 260ms both,
      telon-iso-2 650ms var(--curva) 330ms both,
      telon-iso-3 650ms var(--curva) 400ms both;
  }
  ::view-transition-old(root) {
    animation: telon-cubre 640ms var(--curva-io) both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    animation: telon-descubre 760ms var(--curva-io) 520ms both;
    mix-blend-mode: normal;
  }

  @keyframes telon-cubre {
    from { clip-path: inset(0 0 0 0); }
    to { clip-path: inset(0 0 100% 0); }
  }
  @keyframes telon-descubre {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  @keyframes telon-iso-1 { to { --iso-1: 46px; } }
  @keyframes telon-iso-2 { to { --iso-2: 38px; } }
  @keyframes telon-iso-3 { to { --iso-3: 30px; } }
}

/* ---------- Desplazamiento nativo: las anclas internas se deslizan solo sin movimiento reducido ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Diálogo de servicio (Inicio): entra con un fundido corto; con movimiento reducido, sin animación ---------- */
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-entra .45s var(--curva); }
  .modal[open]::backdrop { animation: modal-fondo .35s var(--curva); }
  @keyframes modal-entra { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.98); } }
  @keyframes modal-fondo { from { opacity: 0; } }
}

/* ---------- Impresión: todo en su estado final (movimiento.js revela todo en beforeprint) ---------- */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .mov [data-iluminar] .p { opacity: 1; }
  .progreso { display: none; }
}

/* ---------- Movimiento reducido: ninguna animación ni transición (tampoco hay .mov, telón ni desplazamiento suave) ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}