@charset "UTF-8";
/* ==== WP Parallax — custom-styles.scss (versión consolidada) ====
   - Stack sticky sin JS
   - Fondos “por debajo” (gradiente inline en .wpa-stack)
   - Animación scroll-driven para .wpa-inner (parallax + rotación con overshoot)
   - Animación scroll-driven para .wpa-float (sigue scroll y se desvanece) relativa a cada .wpa-card
   - Fallbacks para navegadores sin scroll-driven animations
=============================================================== */
/* Contenedor del stack: altura = nº de tarjetas * 100vh */
.wpa-stack {
  position: relative;
  --vh: 100vh; /* fallback */
  height: calc(var(--wpa-count, 1) * var(--vh));
  background: transparent; /* el gradiente lo inyecta el shortcode inline */
}

@supports (height: 100dvh) {
  .wpa-stack {
    --vh: 100dvh;
  }
}
@supports (height: 100svh) {
  .wpa-stack {
    --vh: 100svh;
  }
}
/* Cada tarjeta sticky crea su propia timeline y contenedor de tamaño */
.wpa-card {
  position: sticky;
  top: 0;
  height: var(--vh);
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  isolation: isolate;
  /* timeline de la propia tarjeta */
  view-timeline-name: --card;
  view-timeline-axis: block;
}

/* Evita micro-costuras entre tarjetas al hacer sticky swap */
.wpa-card + .wpa-card {
  margin-top: -1px;
}

/* Caja de contenido */
.wpa-inner {
  width: 30vw;
  max-width: 525px;
  aspect-ratio: 3/4;
  max-height: 80vh;
  position: relative;
  overflow: hidden;
  display: grid;
  -ms-flex-line-pack: end;
      align-content: end;
  padding: clamp(16px, 3vw, 24px);
  border-radius: 24px;
  border: 2px solid #1D1D1B;
  background-color: #1D1D1B; /* opaco: no mezcla con fondos */
  color: #1D1D1B;
  -webkit-box-shadow: 0 10px 30px rgba(3, 7, 18, 0.1);
          box-shadow: 0 10px 30px rgba(3, 7, 18, 0.1);
  z-index: 2;
  /* Animación scroll-driven (parallax + rotación con overshoot) */
  -webkit-animation-name: wpa-enter-arc;
          animation-name: wpa-enter-arc;
  animation-timeline: --card;
  animation-range: entry 0% cover 65%;
  -webkit-animation-timing-function: cubic-bezier(0.3, 0, 1, 1);
          animation-timing-function: cubic-bezier(0.3, 0, 1, 1); /* acelera hacia el final */
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  will-change: transform;
  /* Miniatura como <img> responsive (usa srcset/sizes) */
}
.wpa-inner .wpa-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.wpa-inner .wpa-title {
  margin: 0;
  font-size: 3vw;
  z-index: 3;
  border: 2px solid #1D1D1B;
  padding: 10px;
  background-color: #E3D3CE;
  text-align: center;
  text-transform: uppercase;
  border-radius: 10px;
  font-family: "din-condensed-variable", Sans-serif;
}
@media (max-width: 768px) {
  .wpa-inner {
    width: 65vw;
  }
  .wpa-inner .wpa-title {
    font-size: 6vw;
  }
}

/* === Scroll-driven Animations === */
/* .wpa-inner: entrada con parallax + overshoot de rotación */
@-webkit-keyframes wpa-enter-arc {
  0% {
    -webkit-transform: translateX(var(--final-x, 0)) rotate(var(--start-rot, 0deg));
            transform: translateX(var(--final-x, 0)) rotate(var(--start-rot, 0deg));
  }
  70% {
    -webkit-transform: translateX(var(--final-x, 0)) rotate(var(--overshoot-rot, var(--final-rot, 0deg)));
            transform: translateX(var(--final-x, 0)) rotate(var(--overshoot-rot, var(--final-rot, 0deg)));
  }
  100% {
    -webkit-transform: translateX(var(--final-x, 0)) rotate(var(--final-rot, 0deg));
            transform: translateX(var(--final-x, 0)) rotate(var(--final-rot, 0deg));
  }
}
@keyframes wpa-enter-arc {
  0% {
    -webkit-transform: translateX(var(--final-x, 0)) rotate(var(--start-rot, 0deg));
            transform: translateX(var(--final-x, 0)) rotate(var(--start-rot, 0deg));
  }
  70% {
    -webkit-transform: translateX(var(--final-x, 0)) rotate(var(--overshoot-rot, var(--final-rot, 0deg)));
            transform: translateX(var(--final-x, 0)) rotate(var(--overshoot-rot, var(--final-rot, 0deg)));
  }
  100% {
    -webkit-transform: translateX(var(--final-x, 0)) rotate(var(--final-rot, 0deg));
            transform: translateX(var(--final-x, 0)) rotate(var(--final-rot, 0deg));
  }
}
/* La tarjeta define su propia view timeline */
.wpa-card {
  view-timeline-name: --card;
  view-timeline-axis: block;
  isolation: isolate;
}

/* 1) Variables por tarjeta: alturas base de los flotantes */
.wpa-card {
  /* valores por defecto (tarjetas impares) */
  --float1-top: 22vh; /* .wpa-float */
  --float2-top: 68vh; /* .wpa-float-2 */
}

/* Tarjetas pares: alterna las alturas */
.wpa-card:nth-of-type(even) {
  --float1-top: 66vh;
  --float2-top: 28vh;
}

.wpa-card > .wpa-float,
.wpa-card > .wpa-float-2 {
  position: absolute;
  width: 15vw;
  max-width: 150px;
  height: auto;
  z-index: 9;
  pointer-events: none;
  -webkit-transform: translateY(var(--ty, 0));
          transform: translateY(var(--ty, 0)); /* <- el JS escribe --ty */
  opacity: 1;
  -webkit-animation: none;
          animation: none; /* el balanceo va en keyframes aparte */
}

/* 2) Flotante 1 (anclado por la derecha) */
/* 3) Flotante 2 (anclado por la izquierda, a otra altura) */
.wpa-card > .wpa-float {
  left: calc(50% - 20vw);
  top: var(--float1-top); /* usa su variable */
}

.wpa-card > .wpa-float-2 {
  right: calc(50% - 20vw);
  top: var(--float2-top);
}

@media (max-width: 768px) {
  .wpa-card > .wpa-float,
  .wpa-card > .wpa-float-2 {
    width: 20vw;
    max-width: 150px;
  }
  /* 2) Flotante 1 (anclado por la derecha) */
  /* 3) Flotante 2 (anclado por la izquierda, a otra altura) */
  .wpa-card > .wpa-float {
    left: calc(50% - 40vw);
    top: var(--float1-top); /* usa su variable */
  }
  .wpa-card > .wpa-float-2 {
    right: calc(50% - 40vw);
    top: var(--float2-top);
  }
}
/* Nota: 'rotate' y 'translate' (propiedades individuales) componen con 'transform'.
   Así el JS controla el translateY con 'transform' y el CSS añade balanceo. */
.wpa-card > .wpa-float {
  -webkit-animation: wpa-balance-a 2.8s ease-in-out infinite alternate;
          animation: wpa-balance-a 2.8s ease-in-out infinite alternate;
  -webkit-transform-origin: 50% 75%;
          transform-origin: 50% 75%;
}

.wpa-card > .wpa-float-2 {
  -webkit-animation: wpa-balance-b 1.6s ease-in-out infinite alternate;
          animation: wpa-balance-b 1.6s ease-in-out infinite alternate;
  -webkit-transform-origin: 50% 60%;
          transform-origin: 50% 60%;
}

@-webkit-keyframes wpa-balance-a {
  from {
    rotate: -6deg;
  }
  to {
    rotate: 6deg;
  }
}

@keyframes wpa-balance-a {
  from {
    rotate: -6deg;
  }
  to {
    rotate: 6deg;
  }
}
@-webkit-keyframes wpa-balance-b {
  from {
    rotate: 7deg;
  }
  to {
    rotate: -7deg;
  }
}
@keyframes wpa-balance-b {
  from {
    rotate: 7deg;
  }
  to {
    rotate: -7deg;
  }
}
/* Fallback si no hay scroll-driven animations */
@supports not (animation-timeline: auto) {
  .wpa-card > .wpa-float {
    -webkit-animation: wpa-drift 6s ease-in-out infinite;
            animation: wpa-drift 6s ease-in-out infinite;
  }
}
@-webkit-keyframes wpa-drift {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(20px, -12px);
            transform: translate(20px, -12px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes wpa-drift {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(20px, -12px);
            transform: translate(20px, -12px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
/* Asegura que el contenido queda por encima de la curva */
.wpa-inner {
  z-index: 2;
}

.wpa-title {
  z-index: 3;
}

.wpa-card.wpa-intro .wpa-inner {
  border: none;
  background-color: transparent;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.wpa-card.wpa-intro .wpa-inner .wpa-title {
  border: none;
  background-color: transparent;
  color: #E3D3CE;
  text-shadow: -2px -2px 0 #1D1D1B, 2px -2px 0 #1D1D1B, -2px 2px 0 #1D1D1B, 2px 2px 0 #1D1D1B, -2px 0 0 #1D1D1B, 2px 0 0 #1D1D1B, 0 -2px 0 #1D1D1B, 0 2px 0 #1D1D1B, 0 8px 0 #1D1D1B, 0 9px 0 #1D1D1B, 0 10px 0 #1D1D1B, 0 11px 0 #1D1D1B;
  font-size: 10vw;
  font-family: "mikrobe-variable", Sans-serif;
  line-height: 1.1em;
}
@media (max-width: 768px) {
  .wpa-card.wpa-intro .wpa-inner .wpa-title {
    font-size: 25vw;
  }
}

.scrolling_banner {
  overflow: hidden;
}

.sb {
  overflow: hidden;
}
.sb--right .sb__track {
  animation-direction: reverse;
}

.sb__mask {
  overflow: hidden;
}

.sb__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  -webkit-animation: sb-marquee 80s linear infinite;
          animation: sb-marquee 80s linear infinite;
  font-size: 3vw;
  font-family: "mikrobe-variable", Sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  padding-bottom: 0.3em;
}

.sb__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.2vw;
  white-space: nowrap;
  margin: 0;
}

.sb__item {
  display: inline-block;
}

@media (max-width: 910px) {
  .sb__track {
    font-size: 36px;
  }
}
@media (max-width: 768px) {
  .sb__track {
    font-size: 24px;
  }
}
@-webkit-keyframes sb-marquee {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes sb-marquee {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb__track {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transform: none !important;
            transform: none !important;
  }
}
.blue_txt {
  color: #0D6AA1;
}

.yellow_txt {
  color: #F5B432;
}

.yellow_bg {
  background-color: #F5B432;
}

.blue_bg {
  background-color: #0D6AA1;
}/*# sourceMappingURL=custom-styles.css.map */