/* DeMark, transiciones entre paginas y microinteracciones (js/transiciones.js).
   La cortina y el filete de la cabecera no existen en el HTML: los crea el JS,
   asi que sin JS aqui no hay nada que tape. Las microinteracciones solo animan
   transform, opacity o background (posicion y tamano): ni un pixel de layout.
   No toca outline ni box-shadow, para no romper el :focus-visible de sitio.css,
   ni los estados de error de los campos (formularios.css). */

/* ---- cortina entre paginas ----
   Un filete dorado arriba (se ve mientras sube) y otro abajo (se ve mientras
   se retira hacia arriba, tambien en la foto de la View Transition). */
.transicion-cortina {
  position: fixed; inset: 0; z-index: 2147483600; pointer-events: none;
  background: var(--fondo); will-change: transform;
}
.transicion-cortina::before, .transicion-cortina::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--filete); box-shadow: 0 0 18px rgba(212, 178, 106, .4);
}
.transicion-cortina::before { top: 0; }
.transicion-cortina::after { bottom: 0; }

/* View Transitions entre documentos: la pagina vieja (tapada por la cortina)
   se va hacia arriba encima de la nueva, que queda quieta debajo. El JS la
   anula en pageswap si no la origino una salida con cortina. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: .5s; }
  ::view-transition-old(root) { z-index: 1; mix-blend-mode: normal; animation: transicion-retirada .5s cubic-bezier(.65, 0, .35, 1) both; }
  ::view-transition-new(root) { mix-blend-mode: normal; animation: none; }
}
@keyframes transicion-retirada { to { transform: translateY(-100%); } }

/* ---- lineas de la cabecera ---- */
.sitio .cabecera .transicion-filete {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: var(--filete); opacity: 0; transform: scaleX(0); transform-origin: 0 50%;
}
html.transicion-lineas .sitio .pagina-cabeza::after,
html.transicion-lineas .sitio .pagina-cabeza .ceja::before { transform: scaleX(0); transform-origin: 0 50%; }
html.transicion-lineas.transicion-lineas-trazadas .sitio .pagina-cabeza::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.22, .8, .2, 1) .3s; }
html.transicion-lineas.transicion-lineas-trazadas .sitio .pagina-cabeza .ceja::before { transform: scaleX(1); transition: transform .6s cubic-bezier(.22, .8, .2, 1) .55s; }

/* ---- botones primarios: brillo dorado que cruza ----
   Un degradado en ::after que se desplaza con background-position; el
   isolation deja el brillo encima del fondo y debajo del texto. */
.sitio .boton { position: relative; isolation: isolate; }
.sitio .boton::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(110deg, transparent 35%, rgba(255, 248, 230, .55) 50%, transparent 65%);
  background-repeat: no-repeat; background-size: 250% 100%; background-position: 150% 0;
}
.sitio .boton:hover::after { background-position: -50% 0; transition: background-position .6s cubic-bezier(.4, 0, .2, 1); }
.sitio .cta .boton::after, .sitio .cta-franja .boton::after {
  background-image: linear-gradient(110deg, transparent 35%, rgba(239, 219, 165, .3) 50%, transparent 65%);
}

/* ---- enlaces mono: subrayado que se traza ----
   El subrayado tenue de siempre se queda; encima, uno de oro que crece. */
.sitio a.enlace-mono {
  text-decoration: none;
  background-image: linear-gradient(var(--oro), var(--oro)), linear-gradient(var(--oro-oscuro), var(--oro-oscuro));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%; background-size: 0% 1px, 100% 1px;
  transition: color .2s, background-size .45s cubic-bezier(.22, .8, .2, 1);
}
.sitio a.enlace-mono:hover, .sitio a.enlace-mono:focus-visible { background-size: 100% 1px, 100% 1px; }

/* ---- campos: el filete inferior se ilumina en foco ----
   Solo el filete; borde, contorno y estados de error son de sitio.css y
   formularios.css. Se repite la transicion de sitio.css porque no se suma. */
.sitio .form-sitio .campo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.sitio .form-sitio .campo textarea {
  background-image: linear-gradient(var(--oro-claro), var(--oro-claro));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 0% 2px;
  transition: border-color .2s, outline-color .2s, background-size .45s cubic-bezier(.22, .8, .2, 1);
}
.sitio .form-sitio .campo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.sitio .form-sitio .campo textarea:focus { background-size: 100% 2px; }

/* ---- flechas del carrusel: se rellenan de oro desde abajo ----
   sitio.css pinta el hover con el atajo `background`, que borraria la capa:
   aqui se repite entera con la misma especificidad, y gana por ir despues. */
.sitio .carrusel-boton {
  background-color: var(--fondo);
  background-image: linear-gradient(var(--oro), var(--oro));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  transition: background-size .35s cubic-bezier(.22, .8, .2, 1), color .25s, opacity .2s;
}
.sitio .carrusel-boton:hover:not(:disabled) {
  background-color: var(--fondo);
  background-image: linear-gradient(var(--oro), var(--oro));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 100%;
}

/* ---- tarjetas del carrusel: borde dorado que se traza ----
   El zoom lento de la imagen ya lo hace sitio.css. Cuatro lados en un solo
   pseudo-elemento, cada uno anclado a su esquina, crecen a la vez. */
.sitio .obra-mini .obra-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(var(--oro), var(--oro)), linear-gradient(var(--oro), var(--oro)),
                    linear-gradient(var(--oro), var(--oro)), linear-gradient(var(--oro), var(--oro));
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-size: 0 1px, 1px 0, 0 1px, 1px 0;
  transition: background-size .7s cubic-bezier(.22, .8, .2, 1);
}
.sitio .obra-mini:hover .obra-visual::after, .sitio .obra-mini:focus-visible .obra-visual::after {
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
}

/* ---- quien pide menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  .transicion-cortina, .sitio .cabecera .transicion-filete, .sitio .boton::after { display: none; }
  /* Mismos selectores (y especificidad) que las reglas de arriba. */
  html.transicion-lineas .sitio .pagina-cabeza::after,
  html.transicion-lineas .sitio .pagina-cabeza .ceja::before,
  html.transicion-lineas.transicion-lineas-trazadas .sitio .pagina-cabeza::after,
  html.transicion-lineas.transicion-lineas-trazadas .sitio .pagina-cabeza .ceja::before { transform: none; transition: none; }
  .sitio a.enlace-mono,
  .sitio .form-sitio .campo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .sitio .form-sitio .campo textarea,
  .sitio .carrusel-boton,
  .sitio .obra-mini .obra-visual::after { transition: none; }
}