/* ============================================================================
   IDENTIDAD DE TECNOLOGIA
   ============================================================================

   POR QUE EXISTE

   El sitio estaba correcto y podia ser de cualquier rubro: una panaderia, una
   inmobiliaria, un taller de computo. Y para este negocio eso es un problema
   concreto, no estetico.

   El cliente llega a decidir si le deja una laptop de treinta mil lempiras a
   gente que no conoce. Lo unico que tiene para juzgar antes de entrar es la
   pagina. Si la pagina se ve como una plantilla generica, la pregunta que se
   hace es por que confiarles un equipo caro.

   Entonces lo que sigue no es decoracion: es la senal de que aca se sabe de
   tecnologia. Circuitos que laten, un escaner que recorre, un brillo que
   sigue el borde. El lenguaje visual del rubro.

   LA LINEA QUE NO SE CRUZA

   Un taller serio no es una discoteca. Nada parpadea, nada gira, nada obliga
   a mirarlo. La prueba practica: si el efecto te hace mirarlo en vez de leer
   el texto que tiene al lado, esta de mas.

   DONDE VA CADA COSA, Y POR QUE
   -----------------------------

   La pregunta no es cuanto animar sino DONDE. La guia de Nielsen Norman y la
   de Material coinciden en que el movimiento sirve cuando cumple una de
   cuatro funciones, y estorba cuando no cumple ninguna:

   1. RESPUESTA a algo que el visitante hizo.   100-200 ms
      Botones, tarjetas y flechas al pasar el mouse o al hacer clic. Confirma
      que el sistema registro la accion. Es la unica categoria que puede -y
      debe- estar en todos lados.
      -> btn-brand, btn-linea, card-hover, carousel-arrow, contacto-tarjeta

   2. CAMBIO DE ESTADO: algo aparecio, se fue o cambio.   200-400 ms
      Explica de donde salio lo nuevo, para que no haya que buscarlo.
      -> el cambio de aviso en el banner, los bloques que entran al scrollear

   3. ORIENTACION al cambiar de lugar.   300-500 ms
      Dice que se paso a otra pantalla sin cortar el hilo.
      -> las transiciones entre paginas del sitio

   4. SENAL de que algo esta vivo o disponible.   continuo, muy suave
      Es la unica que corre sola sin que nadie haga nada, y por eso la que hay
      que cuidar mas.
      -> el punto de catalogo latiendo, la barra de tiempo del banner, el
         fondo de la portada

   DONDE NO VA, NUNCA
   ------------------

   - Sobre texto que hay que leer. Un parrafo que se mueve mientras se lee
     obliga a volver a empezar.
   - Sobre precios y datos. Por eso el barrido de la tarjeta de catalogo pasa
     cada 9 s y no cada 4.
   - Encima de un aviso que el taller pago por disenar. Se saco el destello
     que cruzaba el banner por esto.
   - Retrasando algo que el visitante quiere ya. Ninguna entrada supera el
     medio segundo.
   - Repitiendose para llamar la atencion. Una flecha que rebota sola no da
     respuesta a nada: reclama. Se saco.

   RENDIMIENTO

   Se anima transform, opacity y filter, que son las tres que el navegador
   resuelve en el compositor sin volver a calcular el diseno de la pagina.
   Nada de width, height, top ni left: esas obligan a recalcular y en un
   celular de gama baja tiran los cuadros por segundo de 60 a 30, que se ve
   peor que no animar nada.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. LA PLACA DE CIRCUITO QUE RESPIRA

   La cuadricula del fondo ya existia pero estaba quieta. Ahora late muy
   despacio y deja correr un reflejo diagonal, como una placa alimentada.

   Es la pieza que mas cambia la lectura del sitio: el fondo deja de ser papel
   y pasa a ser un equipo encendido.

   CALIBRACION — este archivo paso por dos extremos antes de quedar bien:

     1. Primero lo escribi buscando sutileza y quedo INVISIBLE: opacidades del
        13% con ciclos de 11 segundos. El movimiento estaba, pero nadie lo veia.
     2. Despues lo subi demasiado: lineas de monitor barriendo, haces de luz
        cruzando cada 5 s, flechas rebotando. Eso ya no es un taller serio, es
        estetica de videojuego. Un cliente que va a dejar una laptop cara no
        busca espectaculo, busca solidez.

   El punto correcto es el de aca: se percibe sin buscarlo y no compite con lo
   que hay que leer. La regla practica que quedo: si el efecto te hace mirarlo
   en vez de leer el texto que tiene al lado, esta de mas. */
.grid-deco {
  animation: respirar-grid 7s ease-in-out infinite;
}
@keyframes respirar-grid {
  0%, 100% { opacity: .48; }
  50%      { opacity: .8; }
}

/* Un reflejo ancho y suave que recorre la cuadricula. Ancho y suave, no un
   haz nitido: el haz se lee como destello y esto se lee como luz. */
.circuito-pulso {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg,
              transparent 30%,
              color-mix(in srgb, var(--brand) 14%, transparent) 50%,
              transparent 70%);
  background-size: 300% 300%;
  animation: correr-pulso 9s linear infinite;
}
@keyframes correr-pulso {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}


/* ---------------------------------------------------------------------------
   1a. RESPUESTA BASE DE TODO LO QUE SE PUEDE APRETAR

   Una auditoria de los 33 botones del sitio encontro 16 sin ningun
   movimiento: los del encabezado, los puntos del carrusel, el de pausa y casi
   todos los de la tienda. Cambiaban de color y nada mas.

   Un cambio de tono es la respuesta que un navegador da desde hace treinta
   anos. Hoy un boton que solo cambia de color se lee como apagado, y en una
   pagina cuyo objetivo es que la gente haga clic, eso cuesta clientes.

   POR QUE UNA REGLA GENERAL Y NO 16 ARREGLOS

   Arreglarlos uno por uno deja el problema para la proxima vez: el siguiente
   boton que alguien agregue vuelve a nacer plano. Esto los cubre a todos, y a
   los que todavia no existen.

   Los enlaces se enganchan por la forma que ya tienen en su class -si lleva
   rounded-lg o rounded-xl es un boton, no un enlace de texto-. Es lo unico
   que CSS puede mirar para distinguirlos, y funciona sin tocar el HTML.

   El hundimiento al apretar es lo que mas se nota en CELULAR, que es de donde
   viene la mayoria de las visitas: ahi no hay mouse, asi que el hover no
   existe y el toque es la unica confirmacion posible de que el clic entro.
   --------------------------------------------------------------------------- */
button,
[type="submit"],
[type="button"],
a[class*="rounded-lg"],
a[class*="rounded-xl"] {
  transition: transform var(--t-rapida) ease-out, box-shadow var(--t-base), border-color var(--t-base), background-color var(--t-base);
}

/* Al apretar: se hunde. Vale para mouse y para dedo. */
button:active,
[type="submit"]:active,
[type="button"]:active,
a[class*="rounded-lg"]:active,
a[class*="rounded-xl"]:active {
  transform: scale(.96);
}

/* Los enlaces con forma de boton se levantan al pasar el mouse. Se pide
   ademas [class*="border"] para no atrapar cajas grandes que casualmente
   tengan rounded-xl: lo que lleva borde y esquinas redondeadas es un boton. */
a[class*="rounded-lg"][class*="border"]:hover,
a[class*="rounded-xl"][class*="border"]:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--sombra-marca-2);
}

/* Los que ya tienen su propio tratamiento no se tocan: si no, se suman dos
   transformaciones y el movimiento sale al doble. */
.carousel-arrow:active,
.wa-flotante:active,
.btn-brand:active,
.btn-linea:active { transform: none; }
.btn-brand:active  { transform: translateY(0) scale(.985); }
.btn-linea:active  { transform: translateY(0) scale(.985); }
.carousel-arrow:active { transform: scale(.95); }

/* Los puntos del carrusel son blancos diminutos: crecen un poco al pasar por
   encima para que se pueda apuntar sin errarle. */
.promo-band button[aria-label^="Ver promocion"]:hover { transform: scale(1.4); }

/* --- QUE SE PUEDAN TOCAR CON EL DEDO -------------------------------------

   Apple pide 44px minimo y Material 48; por debajo de eso el dedo le erra.
   En el carrusel habia controles de 20px -el de pausa- y puntos de 8px.
   Verlos no alcanza: hay que poder darles.

   Se agranda el AREA QUE RECIBE EL TOQUE, no el dibujo. Un punto de 8px que
   se ve de 8px pero recibe el toque en 44px es lo correcto: el diseno no
   cambia y el dedo acierta. Se hace con un pseudo-elemento invisible
   centrado, que es la unica forma de crecer sin mover nada de lugar.

   OJO CON EL ALCANCE: esto aplica SOLO a los controles chicos —los puntos y
   el boton de pausa—, nunca a `.promo-band button` a secas.

   La version anterior si lo hacia, y el `position: relative` alcanzaba
   tambien a las flechas Anterior/Siguiente. Esas flechas se ubican con
   `absolute left-0/right-0 inset-y-0`, y `.promo-band button` (0,1,1) le gana
   en especificidad a la clase `.absolute` de Tailwind (0,1,0): las dos
   quedaban una debajo de la otra en la esquina superior izquierda, de 32px de
   alto, en vez de centradas a cada lado de la banda.

   Las flechas ya miden 48-64px de ancho por todo el alto de la banda, asi que
   no necesitaban agrandarse: solo se rompian.                              */
.promo-band button[aria-label^="Ver promocion"],
.promo-band button[aria-label$="las promociones"] { position: relative; }
/* El area tactil de los puntos vive en tokens.css, en una sola regla.
   Aca habia otra de 44x44 centrada: al convivir con la nueva, una ponia
   top\/left y la otra right\/bottom, y el area quedaba corrida 4px. Medido:
   12x12 en vez de 24x24. */

/* Las flechas del carrusel pasan de 36 a 44px. Se ven casi igual y dejan de
   fallarse. El tamano y la respuesta al mouse se declaran juntos mas abajo,
   en el bloque de los carruseles: tenerlo en dos reglas separadas solo
   invitaba a cambiar una y olvidar la otra. */

/* El boton de menu en celular: gira apenas al tocarlo. Es el unico gesto que
   confirma el toque en una pantalla donde no hay puntero. */
button.lg\:hidden:active { transform: scale(.88) rotate(-6deg); }


/* ---------------------------------------------------------------------------
   1b. EL BOTON SECUNDARIO

   "Ver catalogo" quedaba plano al lado del principal: era una caja blanca con
   borde gris y nada mas. En una portada de dos botones, que uno reaccione y el
   otro no hace que el segundo parezca desactivado.

   No puede competir con el principal —la accion que el taller quiere es
   agendar, no mirar—, asi que en vez de brillar se RELLENA: el color entra
   desde abajo al pasar el mouse. Se siente solido sin gritar mas fuerte que el
   boton de al lado.
   --------------------------------------------------------------------------- */
.btn-linea {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.btn-linea::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  transform: translateY(101%);
  transition: transform var(--t-suave) cubic-bezier(.16,1,.3,1);
}
.btn-linea:hover {
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--sombra-marca-2);
}
.btn-linea:hover::before { transform: translateY(0); }
/* El hundimiento al apretar se declara una sola vez, en el bloque de
   respuesta base de mas arriba. */

/* Se sacaron los corchetes de esquina que tenia antes.
   Son el gesto de una interfaz de videojuego, no de un taller que factura con
   RTN y da garantia por escrito. El relleno que sube ya da la respuesta al
   mouse; agregarle marcas de mira solo le quitaba seriedad. */


/* ---------------------------------------------------------------------------
   2. NODOS DE DATOS

   Puntitos que suben despacio, como paquetes viajando. Son seis; con mas
   parece nieve y distrae.
   --------------------------------------------------------------------------- */
.nodos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Cada nodo lleva una estela corta: es lo que lo convierte de "puntito" en
   "dato viajando". Sin ella hay que buscarlos para verlos.

   Van al 45% de opacidad y en 9-12 s. Probe con 90% en 6 s y quedaba como
   lluvia sobre el titulo: el ojo los perseguia en vez de leer. A esta
   intensidad se registran de reojo, que es todo lo que tienen que hacer.
   Son fondo, no contenido. */
.nodo {
  position: absolute;
  width: 2px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(180deg,
              transparent 0%,
              color-mix(in srgb, var(--brand) 55%, transparent) 70%,
              color-mix(in srgb, var(--brand2) 80%, transparent) 100%);
  opacity: 0;
  box-shadow: 0 0 9px 1px color-mix(in srgb, var(--brand) 35%, transparent);
  animation: subir-nodo 10s linear infinite;
}
.nodo:nth-child(1) { left:  9%; animation-delay: 0s;   animation-duration:  9s; }
.nodo:nth-child(2) { left: 23%; animation-delay: 2.2s; animation-duration: 11s; }
.nodo:nth-child(3) { left: 41%; animation-delay: 4.5s; animation-duration: 10s; }
.nodo:nth-child(4) { left: 58%; animation-delay: 1.3s; animation-duration: 12s; }
.nodo:nth-child(5) { left: 74%; animation-delay: 6.1s; animation-duration:  9.5s; }
.nodo:nth-child(6) { left: 89%; animation-delay: 3.4s; animation-duration: 11.5s; }

@keyframes subir-nodo {
  0%   { transform: translateY(115%); opacity: 0; }
  18%  { opacity: .45; }
  82%  { opacity: .45; }
  100% { transform: translateY(-60px); opacity: 0; }
}


/* ---------------------------------------------------------------------------
   3. LA PALABRA DESTACADA DEL TITULO

   El taller elige que palabra resaltar desde el sistema. Antes tomaba el
   color de la marca y quedaba ahi. Ahora lleva un degradado que se desplaza:
   es lo primero que se mueve al abrir la pagina y lo que dirige la vista al
   argumento de venta.

   background-clip: text con color transparente. Si un navegador viejo no lo
   soporta, el color de respaldo lo deja legible igual: nunca queda invisible.
   --------------------------------------------------------------------------- */
.texto-brillo {
  color: var(--brand);                    /* respaldo, siempre legible */
  background: linear-gradient(100deg,
              var(--brand) 0%,
              var(--brand2) 28%,
              color-mix(in srgb, var(--brand) 55%, #ffffff) 46%,
              var(--brand2) 64%,
              var(--brand) 100%);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: correr-brillo 7s linear infinite;
}
@keyframes correr-brillo {
  to { background-position: 260% center; }
}

/* Si el navegador no sabe recortar el fondo al texto, se anula todo y queda
   el color plano. Sin esto, -webkit-text-fill-color podria dejar el titulo
   transparente sobre blanco: invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .texto-brillo {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}


/* ---------------------------------------------------------------------------
   4. EL ESCANER DE DIAGNOSTICO

   Una linea que recorre la tarjeta del catalogo de arriba abajo, como el
   barrido de un equipo analizando. Es la referencia mas directa a lo que hace
   el taller: diagnosticar.
   --------------------------------------------------------------------------- */
.escaner { position: relative; overflow: hidden; }
.escaner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg,
              transparent 0%,
              color-mix(in srgb, var(--brand) 6%, transparent) 60%,
              color-mix(in srgb, var(--brand) 13%, transparent) 90%,
              color-mix(in srgb, var(--brand) 26%, transparent) 98%,
              transparent 100%);
  transform: translateY(-120%);
  animation: barrer 9s cubic-bezier(.5,0,.5,1) 2s infinite;
}
/* Pasa cada 9 s, no cada 4.5, y a la mitad de intensidad.
   Adentro de esa tarjeta hay PRECIOS. Una linea cruzandolos cada cuatro
   segundos obliga a esperar a que pase para terminar de leer un numero, y
   ningun efecto vale eso. Con el ciclo largo, el barrido se ve una vez y
   despues deja trabajar. */
@keyframes barrer {
  0%        { transform: translateY(-120%); }
  30%, 100% { transform: translateY(400%); }
}


/* ---------------------------------------------------------------------------
   5. BORDE QUE SE ENCIENDE

   Al pasar el mouse, un hilo de luz recorre el contorno de la tarjeta. Se usa
   en las tarjetas de servicio: dice "esto se puede tocar" mejor que un cambio
   de sombra.

   El truco es un pseudo-elemento con degradado conico rotando, tapado por el
   fondo de la tarjeta salvo por 1px de borde. Rota transform, que es de las
   baratas; no se redibuja nada.
   --------------------------------------------------------------------------- */
/* inset: 0 y NO -1px.
   Las tarjetas que usan esto llevan `overflow-hidden` de Tailwind. Con
   inset:-1px el anillo se dibuja en la franja que va de -1px a 0, o sea
   ENTERAMENTE fuera de la caja, y overflow-hidden lo recorta: el efecto
   existia en el CSS y no se veia nunca. Con inset:0 el hilo de luz cae sobre
   el borde mismo, dentro de la caja, y se ve. */
.marco-luz { position: relative; isolation: isolate; }
.marco-luz::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--giro, 0deg),
              transparent 0deg,
              transparent 250deg,
              color-mix(in srgb, var(--brand) 85%, transparent) 300deg,
              color-mix(in srgb, var(--brand2) 95%, transparent) 330deg,
              transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-suave);
  z-index: -1;
}
.marco-luz:hover::before {
  opacity: 1;
  animation: girar-marco 2.4s linear infinite;
}

/* @property permite animar un angulo. Sin esto el navegador interpola el
   conic-gradient como texto y no se mueve nada. Donde no exista, el borde
   simplemente aparece fijo al pasar el mouse, que tambien se ve bien. */
@property --giro {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes girar-marco {
  to { --giro: 360deg; }
}


/* ---------------------------------------------------------------------------
   6. LA TARJETA QUE SIGUE AL MOUSE

   Inclinacion en tres dimensiones sobre la tarjeta del catalogo. Los angulos
   los calcula el JS segun donde este el cursor; aca solo va la perspectiva y
   el suavizado.

   Maximo 7 grados. Mas que eso se ve como un truco; siete se siente como que
   la tarjeta tiene volumen.
   --------------------------------------------------------------------------- */
.tilt-marco { perspective: 1100px; }
.tilt {
  transition: transform var(--t-suave) cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
}
.tilt-marco:hover .tilt { transition: transform .12s linear; }

/* El reflejo que se corre con la inclinacion: es lo que vende la profundidad.
   Sin el, la tarjeta parece una imagen torcida en vez de un objeto. */
.tilt-brillo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-suave);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.6) 0%,
              rgba(255,255,255,0) 55%);
}
.tilt-marco:hover .tilt-brillo { opacity: .55; }


/* ---------------------------------------------------------------------------
   7. LA BARRA DE PROGRESO DE LECTURA

   Una linea fina arriba que se llena a medida que se baja. En una portada
   larga contesta "cuanto falta", que es la pregunta que hace que la gente se
   vaya a mitad de camino.

   Usa scroll() nativo: la mueve el compositor, sin un solo listener. Donde no
   exista, no se muestra —una barra vacia seria peor que ninguna—.
   --------------------------------------------------------------------------- */
.barra-lectura {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  display: none;
}
@supports (animation-timeline: scroll()) {
  .barra-lectura {
    display: block;
    animation: llenar-barra linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes llenar-barra {
  to { transform: scaleX(1); }
}


/* ---------------------------------------------------------------------------
   8. EL LATIDO DE "EN LINEA"

   El puntito verde de la tarjeta del catalogo estaba pintado. Un indicador de
   estado que no late no dice nada; latiendo dice "esto esta actualizado
   ahora", que es justo lo que se quiere transmitir de un catalogo.
   --------------------------------------------------------------------------- */
.latido { position: relative; }
.latido::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: .55;
  animation: latir 2.4s ease-out infinite;
}
@keyframes latir {
  0%   { transform: scale(.9); opacity: .55; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}


/* ---------------------------------------------------------------------------
   8b. LOS CARRUSELES

   Eran los mas planos del sitio: una fila que se desliza y nada mas. Cada
   tarjeta aparecia y desaparecia por el borde con el mismo tamano, como una
   cinta transportadora.

   Ahora cada una crece al entrar y se achica al salir, atada a SU posicion
   dentro del carrusel. view(inline) es la version horizontal de lo mismo que
   mueve el resto de la pagina: el eje que mira es el del propio carrusel, no
   el de la ventana.

   El efecto es que la tarjeta del centro manda y las de los costados ceden.
   Es lo que hace que se lea como un visor y no como una lista que se corre.
   --------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .carousel-track .carousel-item {
    animation: enfocar-item linear both;
    animation-timeline: view(inline);
    /* entry-crossing / exit-crossing: el tramo en que la tarjeta cruza el
       borde del carrusel. Sin esto tomaria la ventana entera y las tarjetas
       del medio no se moverian nunca. */
    animation-range: entry-crossing 0% exit-crossing 100%;
  }
}
/* Sin desenfoque y sin desaturar: eso hacia que las tarjetas de los costados
   se vieran ROTAS, no secundarias. La opacidad y una escala corta alcanzan
   para jerarquizar, y el contenido de los bordes sigue siendo legible —que es
   lo que importa: son productos que el taller quiere vender, no relleno—. */
@keyframes enfocar-item {
  0%   { opacity: .55; transform: scale(.94); }
  20%  { opacity: 1;   transform: scale(1);   }
  80%  { opacity: 1;   transform: scale(1);   }
  100% { opacity: .55; transform: scale(.94); }
}

/* La tarjeta bajo el cursor se adelanta sobre las vecinas. z-index aparte,
   porque si no el crecimiento queda tapado por la siguiente. */
.carousel-track .carousel-item { transition: transform var(--t-base) cubic-bezier(.16,1,.3,1); }
.carousel-track .carousel-item:hover { z-index: 2; }

/* --- EL BORDE DERECHO NO SE CORTA A CUCHILLO ------------------------------

   Las tarjetas miden 280px y el contenedor 1120: entran tres y media. La
   cuarta quedaba cortada al ras del borde, justo por la mitad del boton
   "Cotizar". Un boton verde partido a la mitad no se lee como "hay mas a la
   derecha": se lee como que la pagina se rompio.

   El desvanecido dice lo que el corte no decia. Es la misma senal que usan
   las tiendas grandes para las filas que se deslizan.

   Va con mask y no con un degradado encima porque el fondo de esta seccion es
   blanco en la portada y gris en otras: una capa de color fija se veria como
   un parche en una de las dos.                                             */
.carousel-track {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
}
/* Al llegar al final no hay nada mas que anunciar, asi que el velo se va.
   Lo marca el JS del carrusel con la clase .fin. */
.carousel-track.fin {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Las flechas: color al pasar el mouse y hundimiento al apretar.
   Nada de rebote infinito. Una flecha que salta sola le esta pidiendo al
   visitante que la mire, y eso no es dar respuesta a una accion suya: es
   reclamar atencion. La respuesta va cuando el hace algo, no antes. */
.carousel-arrow {
  width: 44px; height: 44px;
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base),
              transform .18s ease-out, box-shadow .2s;
}
.carousel-arrow:hover {
  transform: scale(1.08);
  box-shadow: var(--sombra-marca-2);
}
.carousel-arrow:hover i { transform: translateX(1.5px); }
.carousel-arrow i { transition: transform var(--t-base) ease-out; }
/* El hundimiento ya esta declarado en el bloque de respuesta base. */


/* ---------------------------------------------------------------------------
   8c. EL BANNER DE PROMOCIONES

   La transicion entre avisos era un desplazamiento de 4px con un fundido: se
   notaba tan poco que parecia un cambio de golpe.

   Ahora el aviso que sale se va con desenfoque y el que entra llega desde el
   costado con escala. Y encima pasa un haz de luz, que es lo que le da el
   caracter del rubro: no cambia de lamina, se REEMPLAZA.
   --------------------------------------------------------------------------- */
.promo-band { position: relative; overflow: hidden; }

/* Se saco el haz de luz que cruzaba la banda cada 5 s.
   Ahi adentro va el AVISO del taller: la pieza que diseno para vender algo.
   Pasarle un destello por encima le compite al mensaje, que es exactamente lo
   contrario de lo que el aviso esta haciendo ahi. El movimiento en esta banda
   tiene que venir del cambio de aviso, no de una capa decorativa encima.

   Lo que queda es la barra de tiempo, que si es funcional: contesta "esto se
   mueve solo, cuanto falta para el siguiente" y por eso la gente espera en vez
   de irse. Es informacion, no adorno. */
.promo-progreso {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  z-index: 4;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  opacity: .75;
  transform-origin: 0 50%;
  animation: avanzar-promo 5s linear infinite;
}
@keyframes avanzar-promo {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* La pausa la aplica el propio elemento con un style en linea (ver index.php):
   si la barra siguiera corriendo con el carrusel detenido estaria mintiendo
   sobre lo que va a pasar.

   Aca habia un selector `.promo-band[data-pausado="1"]` que NUNCA llegaba a
   aplicarse: ese atributo no lo escribe nadie en el HTML. Se quita para que no
   parezca que la pausa depende de algo que no existe. */


/* ---------------------------------------------------------------------------
   8d. ZOOM AL DESPLAZARSE

   Las fotos crecen muy despacio mientras se recorren, como una camara que se
   acerca. Es de los recursos que mas "produccion" aportan por lo poco que
   cuesta: la imagen deja de ser un rectangulo pegado y pasa a tener camara.

   Va sobre la imagen y no sobre su marco, para que el marco no se mueva y el
   diseno quede quieto. Solo se anima transform: no hay recalculo de nada.
   --------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .zoom-scroll img,
  .zoom-scroll > .zoom-capa {
    animation: acercar-camara linear both;
    animation-timeline: view();
    animation-range: cover;
  }
}
/* 1.06 y no 1.16: con 16% de acercamiento la foto pierde nitidez visible y en
   un catalogo la foto ES el producto. El recorrido corto da la sensacion de
   camara sin degradar lo que se esta vendiendo. */
@keyframes acercar-camara {
  from { transform: scale(1.06) translateY(-1.2%); }
  to   { transform: scale(1)    translateY(1.2%);  }
}

/* Se escribio un revelado por barrido -la foto dibujandose de izquierda a
   derecha, como si la renderizaran- y se saco antes de usarlo.

   Dos razones. La primera: sobre la foto de un producto, ese efecto retrasa
   ver lo que se esta vendiendo, y la foto es el argumento de venta. La
   segunda: sumado al zoom de camara y a la escala del carrusel, eran tres
   efectos sobre la misma tarjeta. Tres efectos no son tres veces mejor; se
   estorban entre si y ninguno se aprecia.

   No se deja el CSS "por si acaso": codigo que no se usa es codigo que
   despues nadie sabe si se puede tocar. */


/* ---------------------------------------------------------------------------
   9. TRANSICION ENTRE PAGINAS

   El sitio son varias paginas PHP: portada, catalogo, agendar, seguimiento.
   Sin esto, cada clic es un parpadeo en blanco y se siente como cuatro sitios
   distintos.

   @view-transition lo resuelve el navegador solo, sin JavaScript y sin
   convertir el sitio en una aplicacion de una sola pagina. Donde no este
   soportado se ignora la regla y la navegacion es la de siempre: no se rompe
   nada, simplemente no hay transicion.
   --------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: salir-pagina .22s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: entrar-pagina .3s cubic-bezier(0,0,.2,1) both;
}
@keyframes salir-pagina  { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes entrar-pagina { from { opacity: 0; transform: translateY(10px); } }

/* La cabecera no participa: es la misma en todas las paginas y verla
   desaparecer y volver rompe la sensacion de continuidad. Con un nombre
   propio, el navegador la trata como el mismo elemento y la deja quieta. */
header.sticky { view-transition-name: cabecera; }


/* ---------------------------------------------------------------------------
   10. APAGADO

   Mismo criterio que en animaciones.css: no se atenua, se elimina. Va al
   final para ganarle a todo lo anterior.

   Lo que SI se conserva son los degradados y los colores. Quien pidio menos
   movimiento no pidio un sitio feo: pidio que no se mueva.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .grid-deco, .circuito-pulso, .nodo, .texto-brillo,
  .escaner::after, .marco-luz:hover::before, .latido::before,
  .zoom-scroll img, .promo-progreso, .carousel-track .carousel-item,
  .barra-lectura {
    animation: none !important;
  }
  .grid-deco     { opacity: .6; }
  .circuito-pulso{ display: none; }
  .nodos         { display: none; }
  .escaner::after{ display: none; }
  .tilt          { transition: none !important; transform: none !important; }

  /* La respuesta base al apretar SE MANTIENE: no es decoracion, es la unica
     confirmacion de que el clic entro. Quien pidio menos movimiento no pidio
     botones que no contesten. Lo que se saca es el levantarse al pasar el
     mouse, que si es adorno. */
  a[class*="rounded-lg"][class*="border"]:hover,
  a[class*="rounded-xl"][class*="border"]:hover,
  .promo-band button[aria-label^="Ver promocion"]:hover { transform: none; }
  .tilt-brillo   { display: none; }
  .barra-lectura { display: none; }

  /* El degradado del titulo se queda quieto, pero se queda. */
  .texto-brillo  { background-position: 0 center; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}


/* ---------------------------------------------------------------------------
   SALTAR AL CONTENIDO

   Invisible hasta que se lo enfoca con el tabulador. No se usa display:none
   ni visibility:hidden porque eso lo saca del recorrido del teclado y el
   enlace dejaria de existir para quien lo necesita: se lo saca de la pantalla
   con posicion, que es lo que lo mantiene alcanzable.
   --------------------------------------------------------------------------- */
.saltar-al-contenido {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  background: var(--brand-fondo);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: top var(--t-base) ease-out;
}
.saltar-al-contenido:focus { top: 0; }

/* Los campos de texto nunca por debajo de 16px.

   En iPhone, tocar un campo con letra mas chica hace que el navegador acerque
   la pagina SOLO, y despues queda descuadrada y hay que alejarla a mano. Es
   uno de los defectos mas molestos y menos conocidos del diseno para movil. */
@media (max-width: 640px) {
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="search"], input[type="number"], input[type="date"],
  select, textarea { font-size: 16px; }
}