/* ======================================================
   BEAUTY EXPO NICARAGUA — ANIMACIONES 2027
   Compatible con beautyexpo-campana-2027.css
   ====================================================== */

/* ENTRADA DEL HERO */

.bex27.bex27-motion-enabled .bex27-launch-pill {
  animation: bex27-entrada 0.85s 0.08s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bex27.bex27-motion-enabled .bex27-hero-headline {
  animation: bex27-entrada 0.9s 0.23s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bex27.bex27-motion-enabled .bex27-hero-subtitle {
  animation: bex27-entrada 0.85s 0.38s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bex27.bex27-motion-enabled .bex27-launch-caption {
  animation: bex27-entrada 0.8s 0.49s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bex27.bex27-motion-enabled .bex27-hero-actions {
  animation: bex27-entrada 0.8s 0.61s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bex27.bex27-motion-enabled .bex27-hero-discover {
  animation: bex27-entrada 0.8s 0.75s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* TARJETA OCTUBRE 2027 */

.bex27.bex27-motion-enabled .bex27-launch-poster {
  animation: bex27-entrada-tarjeta 1s 0.38s both cubic-bezier(0.2, 0.8, 0.2, 1);
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bex27 .bex27-launch-poster:hover {
    transform: rotate(0deg) scale(1.015);
    box-shadow: 0 35px 85px rgba(37, 7, 34, 0.42);
  }
}

/* MOVIMIENTO AMBIENTAL */

.bex27.bex27-motion-enabled .bex27-launch-orb-a {
  animation: bex27-flotar-a 13s ease-in-out infinite alternate;
}

.bex27.bex27-motion-enabled .bex27-launch-orb-b {
  animation: bex27-flotar-b 16s ease-in-out infinite alternate;
}

.bex27.bex27-motion-enabled .bex27-hero-headline em {
  background-size: 170% 100%;
  animation: bex27-brillo 10s ease-in-out infinite alternate;
}

.bex27.bex27-motion-enabled .bex27-hero-discover span {
  display: inline-block;
  animation: bex27-flecha 2.2s ease-in-out infinite;
}

/* APARICION AL HACER SCROLL */

.bex27.bex27-motion-enabled [data-bex-reveal] {
  opacity: 0;
  translate: 0 27px;
  transition:
    opacity 0.7s ease var(--bex-delay, 0ms),
    translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--bex-delay, 0ms),
    transform 0.32s ease,
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

.bex27.bex27-motion-enabled [data-bex-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* TARJETAS INTERACTIVAS */

.bex27 .bex27-value-grid article,
.bex27 .bex27-join-card,
.bex27 .bex27-testimonial-card,
.bex27 .bex27-space-card,
.bex27 .bex27-thanks-grid article,
.bex27 .bex27-inner-card,
.bex27 .bex27-inner-people article {
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bex27 .bex27-value-grid article:hover,
  .bex27 .bex27-join-card:hover,
  .bex27 .bex27-testimonial-card:hover,
  .bex27 .bex27-space-card:hover,
  .bex27 .bex27-thanks-grid article:hover,
  .bex27 .bex27-inner-card:hover,
  .bex27 .bex27-inner-people article:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(58, 13, 42, 0.12);
    border-color: rgba(239, 65, 130, 0.27);
  }

  .bex27 .bex27-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(226, 31, 106, 0.22);
  }

  /* Línea animada del menú principal */

  .bex27 .bex27-nav > a:not(.bex27-nav-cta) {
    position: relative;
  }

  .bex27 .bex27-nav > a:not(.bex27-nav-cta)::after {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -8px;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #ffae6e, #ff3a97);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }

  .bex27 .bex27-nav > a:not(.bex27-nav-cta):hover::after {
    transform: scaleX(1);
  }
}

/* PAGINAS HISTORIA, EDICIONES Y AGRADECIMIENTOS */

.bex27.bex27-motion-enabled .bex27-inner-hero .bex27-inner-kicker {
  display: inline-block;
  animation: bex27-entrada 0.75s 0.06s both ease-out;
}

.bex27.bex27-motion-enabled .bex27-inner-hero h1 {
  animation: bex27-entrada 0.9s 0.18s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bex27.bex27-motion-enabled .bex27-inner-hero p {
  animation: bex27-entrada 0.9s 0.33s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* BARRA DE PROGRESO SUPERIOR */

.bex27-scroll-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff8b47, #f20063, #b40076);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* KEYFRAMES */

@keyframes bex27-entrada {
  from {
    opacity: 0;
    translate: 0 25px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes bex27-entrada-tarjeta {
  from {
    opacity: 0;
    translate: 0 34px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes bex27-flotar-a {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-27px, 28px, 0);
  }
}

@keyframes bex27-flotar-b {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(26px, -23px, 0);
  }
}

@keyframes bex27-brillo {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

@keyframes bex27-flecha {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
  .bex27 .bex27-launch-pill,
  .bex27 .bex27-hero-headline,
  .bex27 .bex27-hero-subtitle,
  .bex27 .bex27-launch-caption,
  .bex27 .bex27-hero-actions,
  .bex27 .bex27-hero-discover,
  .bex27 .bex27-launch-poster,
  .bex27 .bex27-launch-orb,
  .bex27 .bex27-inner-hero * {
    animation: none !important;
  }

  .bex27 [data-bex-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }

  .bex27 .bex27-join-card,
  .bex27 .bex27-space-card,
  .bex27 .bex27-value-grid article,
  .bex27 .bex27-thanks-grid article,
  .bex27 .bex27-inner-card {
    transition: none !important;
  }
}
/* ======================================================
   SECCIÓN PATROCINIOS / ALIANZAS 2027
   Más movimiento, más presencia, más campaña
   ====================================================== */

.bex27-sponsors {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Fondo con vida */
.bex27-sponsors::before,
.bex27-sponsors::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
  opacity: 0.55;
}

.bex27-sponsors::before {
  width: 520px;
  height: 520px;
  top: -180px;
  right: -120px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.16),
    transparent 68%
  );
}

.bex27-sponsors::after {
  width: 460px;
  height: 460px;
  bottom: -170px;
  left: -130px;
  background: radial-gradient(
    circle,
    rgba(255, 196, 143, 0.16),
    transparent 68%
  );
}

.bex27.bex27-motion-enabled .bex27-sponsors::before {
  animation: bex27SponsorGlowA 14s ease-in-out infinite alternate;
}

.bex27.bex27-motion-enabled .bex27-sponsors::after {
  animation: bex27SponsorGlowB 16s ease-in-out infinite alternate;
}

/* Asegurar que el contenido quede sobre el fondo */
.bex27-sponsor-grid {
  position: relative;
  z-index: 1;
}

/* Bloque de texto */
.bex27-sponsor-grid > div:first-child {
  position: relative;
}

.bex27.bex27-motion-enabled
  .bex27-sponsor-grid
  > div:first-child
  .bex27-kicker {
  animation: bex27-entrada 0.7s 0.08s both ease-out;
}

.bex27.bex27-motion-enabled .bex27-sponsor-grid > div:first-child h2 {
  animation: bex27-entrada 0.9s 0.18s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bex27.bex27-motion-enabled .bex27-sponsor-grid > div:first-child p {
  animation: bex27-entrada 0.9s 0.33s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bex27.bex27-motion-enabled .bex27-sponsor-grid > div:first-child .bex27-btn {
  animation: bex27-entrada 0.85s 0.48s both cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Botón con más presencia */
.bex27 .bex27-sponsors .bex27-btn-white {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
  box-shadow: 0 10px 30px rgba(34, 8, 28, 0.14);
}

.bex27 .bex27-sponsors .bex27-btn-white::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0.16) 65%,
    transparent 100%
  );
  transform: translateX(-140%);
  transition: transform 0.75s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bex27 .bex27-sponsors .bex27-btn-white:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 18px 38px rgba(32, 7, 27, 0.2);
  }

  .bex27 .bex27-sponsors .bex27-btn-white:hover::before {
    transform: translateX(140%);
  }
}

/* Tarjeta PARTNERS */
.bex27-sponsor-art {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;
  box-shadow: 0 24px 60px rgba(36, 9, 31, 0.12);
}

/* Brillo interior */
.bex27-sponsor-art::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 22% 20%,
      rgba(255, 255, 255, 0.11),
      transparent 32%
    ),
    radial-gradient(
      circle at 83% 76%,
      rgba(255, 255, 255, 0.1),
      transparent 28%
    );
  pointer-events: none;
  opacity: 0.95;
}

/* Línea de luz sutil */
.bex27-sponsor-art::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -35%;
  width: 40%;
  height: 120%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.bex27.bex27-motion-enabled .bex27-sponsor-art {
  animation:
    bex27SponsorCardIn 1s 0.22s both cubic-bezier(0.2, 0.8, 0.2, 1),
    bex27SponsorFloat 6s ease-in-out 1.2s infinite;
}

.bex27.bex27-motion-enabled .bex27-sponsor-art::after {
  animation: bex27SponsorSweep 5.5s ease-in-out 1.8s infinite;
}

/* Símbolo giratorio */
.bex27-sponsor-art i {
  display: inline-block;
  transform-origin: center;
  opacity: 0.78;
}

.bex27.bex27-motion-enabled .bex27-sponsor-art i {
  animation: bex27SponsorSpin 16s linear infinite;
}

/* Texto principal con más fuerza */
.bex27-sponsor-art strong {
  display: block;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Pequeño efecto de respiración */
.bex27.bex27-motion-enabled .bex27-sponsor-art strong,
.bex27.bex27-motion-enabled .bex27-sponsor-art small,
.bex27.bex27-motion-enabled .bex27-sponsor-art span {
  animation: bex27SponsorBreath 4.8s ease-in-out infinite;
}

/* Hover premium */
@media (hover: hover) and (pointer: fine) {
  .bex27 .bex27-sponsor-art:hover {
    transform: translateY(-8px) rotate(-1deg) scale(1.015);
    box-shadow: 0 34px 80px rgba(35, 9, 28, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
  }
}

/* Responsive: que no se vea pesado */
@media (max-width: 700px) {
  .bex27-sponsors::before {
    width: 300px;
    height: 300px;
    top: -90px;
    right: -80px;
  }

  .bex27-sponsors::after {
    width: 260px;
    height: 260px;
    left: -80px;
    bottom: -100px;
  }

  .bex27.bex27-motion-enabled .bex27-sponsor-art {
    animation:
      bex27SponsorCardIn 0.9s 0.18s both cubic-bezier(0.2, 0.8, 0.2, 1),
      bex27SponsorFloatMobile 5.5s ease-in-out 1s infinite;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .bex27-sponsors::before,
  .bex27-sponsors::after,
  .bex27-sponsor-art,
  .bex27-sponsor-art::after,
  .bex27-sponsor-art i,
  .bex27-sponsor-art strong,
  .bex27-sponsor-art small,
  .bex27-sponsor-art span {
    animation: none !important;
  }
}

/* Keyframes */
@keyframes bex27SponsorGlowA {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.42;
  }

  to {
    transform: translate3d(-22px, 22px, 0) scale(1.08);
    opacity: 0.62;
  }
}

@keyframes bex27SponsorGlowB {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.36;
  }

  to {
    transform: translate3d(28px, -20px, 0) scale(1.09);
    opacity: 0.55;
  }
}

@keyframes bex27SponsorCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bex27SponsorFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(-0.8deg);
  }
}

@keyframes bex27SponsorFloatMobile {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes bex27SponsorSweep {
  0% {
    transform: translateX(-180%) skewX(-18deg);
    opacity: 0;
  }

  18% {
    opacity: 0.65;
  }

  35% {
    transform: translateX(380%) skewX(-18deg);
    opacity: 0;
  }

  100% {
    transform: translateX(380%) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes bex27SponsorSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes bex27SponsorBreath {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.86;
  }
}

/* ==========================================
   BEAUTY EXPO 2027
   TARJETA PARTNERS - EFECTO 3D
   ========================================== */

.bex27.bex27-motion-enabled .bex27-sponsor-art[data-bex-sponsor-tilt] {
  /* Evita conflictos con la animación anterior */
  animation: none;
  --bex-tilt-x: 0deg;
  --bex-tilt-y: 0deg;
  --bex-card-lift: 0px;
  transform: perspective(1100px) rotateX(var(--bex-tilt-x))
    rotateY(var(--bex-tilt-y)) translateY(var(--bex-card-lift));
  transition:
    transform 0.22s ease-out,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Efecto al pasar el mouse */

@media (hover: hover) and (pointer: fine) {
  .bex27.bex27-motion-enabled .bex27-sponsor-art[data-bex-sponsor-tilt]:hover {
    --bex-card-lift: -5px;
    box-shadow: 0 35px 85px rgba(65, 8, 52, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
  }
}

/* Detalles con profundidad */

.bex27-sponsor-art strong {
  position: relative;
  z-index: 2;
}

.bex27-sponsor-art i {
  pointer-events: none;
}

/* En dispositivos táctiles: tarjeta estática */

@media (hover: none), (pointer: coarse) {
  .bex27.bex27-motion-enabled .bex27-sponsor-art[data-bex-sponsor-tilt] {
    transform: none;
    will-change: auto;
  }
}

/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {
  .bex27 .bex27-sponsor-art[data-bex-sponsor-tilt] {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}