/* ==========================================================================
   Componentes compartidos: barras de carga (tarifas), marquesina, cursor,
   imágenes con parallax y foto B/N → color
   ========================================================================== */

/* --- Barras de «carga» (tarifas: home y página de tarifas) --- */
.load { border-top: 2px solid var(--ink); }
.load li { display: grid; grid-template-columns: 6.6rem 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: var(--rule-light); }
.load__label { font: 600 var(--fs-micro)/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.load__bar { position: relative; height: 14px; }
.load__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line-light); }
.load__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill); background: var(--bronze);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%); transform-origin: left; transition: transform 1.1s var(--ease) .1s; }
.js [data-reveal]:not(.is-in) .load__bar::after { transform: scaleX(0); }
.load__price { font: 700 clamp(1.4rem, 4vw, 2.2rem)/1 var(--display); font-stretch: 115%; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .load li { grid-template-columns: 8rem 1fr 7rem; padding: 20px 0; }
  .load__price { text-align: right; }
}

/* --- Marquesina fina de bronce (CSS puro; quieta si se pide menos movimiento) --- */
.marquee { position: relative; overflow: hidden; background: var(--bronze); color: var(--ink); border-block: 1px solid rgba(17, 21, 24, .18); }
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item { display: inline-flex; align-items: center; gap: var(--s3); padding: 13px var(--s3) 13px 0; white-space: nowrap;
  font: 650 .8125rem/1 var(--display); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; }
.marquee__item::after { content: ""; width: 28px; height: 2px; background: currentColor; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Imagen con parallax: el contenedor recorta, la imagen se desplaza --- */
.plx { position: relative; overflow: hidden; }
.plx > img, .plx__img { width: 100%; height: 100%; object-fit: cover; }
.js .plx[data-plx] > img { height: 118%; margin-top: -9%; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* --- Foto en B/N que recupera el color al pasar (solo con puntero fino) --- */
.tone { filter: grayscale(1) contrast(1.06); transition: filter .9s var(--ease-out), transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tone-host:hover .tone, .tone-host:focus-visible .tone, .tone-host.is-active .tone { filter: none; }
}
@media (hover: none) { .tone-host.is-active .tone { filter: none; } }

/* --- Cursor propio (solo escritorio, lo crea main.js) --- */
.cursor { position: fixed; z-index: 450; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  pointer-events: none; background: var(--bone); mix-blend-mode: difference; opacity: 0;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), opacity .3s, background-color .3s; }
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cursor.is-label { width: 88px; height: 88px; margin: -44px 0 0 -44px; mix-blend-mode: normal; background: var(--bronze); }
.cursor__txt { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); opacity: 0; transition: opacity .25s;
  font: 650 .6875rem/1 var(--display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.cursor.is-label .cursor__txt { opacity: 1; }