@charset "utf-8";
/* CSS Document */

@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

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

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

/* ==================================================
   Navegación principal — hover elegante (escritorio)
   Subrayado degradado que crece + leve elevación
   ================================================== */
@media (min-width: 1024px) {
  .navegacion-principal__enlace {
    position: relative;
    padding-bottom: 2px;
    transition:
      color 0.3s ease,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .navegacion-principal__enlace::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #005da8, #0076d2);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .navegacion-principal__enlace:hover,
  .navegacion-principal__enlace:focus-visible {
    transform: translateY(-2px);
  }
  .navegacion-principal__enlace:hover::after,
  .navegacion-principal__enlace:focus-visible::after,
  .navegacion-principal__enlace--activo::after {
    transform: scaleX(1);
  }
  .navegacion-principal__enlace:focus-visible {
    outline: 2px solid #005da8;
    outline-offset: 4px;
    border-radius: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navegacion-principal__enlace,
  .navegacion-principal__enlace::after {
    transition: none;
  }
  .navegacion-principal__enlace:hover,
  .navegacion-principal__enlace:focus-visible {
    transform: none;
  }
}

/* ==================================================
   Menú móvil — sólo applies en < 1024px
   Botón más grande · apertura animada · hover/activo
   con presencia · ola en movimiento
   ================================================== */
@media (max-width: 1023px) {
  /* --- Botón sandwich más grande y con respuesta al pulsar --- */
  .abrir-menu,
  .cerrar-menu {
    width: 3rem;
    height: 3rem;
    margin-right: -0.6rem;
    border-radius: 999px;
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .abrir-menu .icono-menu,
  .cerrar-menu .icono-menu {
    width: 1.75rem;
    height: 1.75rem;
  }
  .abrir-menu:hover,
  .cerrar-menu:hover {
    background-color: #e5eeff;
    color: #005da8;
  }
  .abrir-menu:active,
  .cerrar-menu:active {
    transform: scale(0.92);
  }

  /* --- La ola se desplaza en bucle continuo --- */
  /* --- Sin barras de scroll: la ola es más ancha que el menú y el
         contenido debe caber. overflow hidden recorta la ola deslizante
         y evita scroll horizontal + vertical --- */
  .menu-movil {
    overflow: hidden;
  }

  /* En pantallas bajas reducimos el aire inferior para que quepa todo
     sin necesidad de scroll (en móviles normales queda igual) */
  @media (max-height: 700px) {
    .menu-movil__navegacion {
      padding-bottom: 7rem;
    }
  }

  .menu-movil__olas {
    width: 200%;
    right: auto;
    animation: olaCorre 16s linear infinite;
    will-change: transform;
  }
  @keyframes olaCorre {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  /* --- Entrada del menú: fondo + barra + enlaces escalonados --- */
  .menu-movil.menu-movil--abierto {
    animation: menuVelo 0.3s ease both;
  }
  @keyframes menuVelo {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .menu-movil.menu-movil--abierto .menu-movil__barra {
    animation: menuBarra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes menuBarra {
    from {
      opacity: 0;
      transform: translateY(-14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .menu-movil.menu-movil--abierto .menu-movil__enlace {
    animation: menuEnlace 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes menuEnlace {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .menu-movil.menu-movil--abierto .menu-movil__navegacion > *:nth-child(1) {
    animation-delay: 0.1s;
  }
  .menu-movil.menu-movil--abierto .menu-movil__navegacion > *:nth-child(2) {
    animation-delay: 0.17s;
  }
  .menu-movil.menu-movil--abierto .menu-movil__navegacion > *:nth-child(3) {
    animation-delay: 0.24s;
  }
  .menu-movil.menu-movil--abierto .menu-movil__navegacion > *:nth-child(4) {
    animation-delay: 0.31s;
  }
  .menu-movil.menu-movil--abierto .menu-movil__navegacion > *:nth-child(5) {
    animation-delay: 0.38s;
  }

  /* --- Enlaces: pastilla de color al hover y activo (sin subrayado) --- */
  .menu-movil__enlace {
    position: relative;
    padding: 0.4rem 1.4rem;
    border-radius: 999px;
    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .menu-movil__enlace:hover,
  .menu-movil__enlace:focus-visible {
    background-color: #e5eeff;
    color: #005da8;
  }
  .menu-movil__enlace.menu-movil__enlace--activo {
    background-color: #e5eeff;
    color: #005da8;
  }

  /* --- Botón HABLEMOS del menú: también con movimiento --- */
  .boton-hablemos-menu {
    position: relative;
    overflow: hidden;
    transition:
      background-color 0.3s ease,
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .boton-hablemos-menu .flecha-boton {
    transition: transform 0.3s ease;
  }
  .boton-hablemos-menu:hover,
  .boton-hablemos-menu:focus-visible {
    transform: translateY(-2px);
  }
  .boton-hablemos-menu:hover .flecha-boton {
    transform: translateX(4px);
  }
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .menu-movil__olas,
  .menu-movil.menu-movil--abierto,
  .menu-movil.menu-movil--abierto .menu-movil__barra,
  .menu-movil.menu-movil--abierto .menu-movil__enlace {
    animation: none !important;
  }
  .abrir-menu,
  .cerrar-menu,
  .menu-movil__enlace,
  .boton-hablemos-menu,
  .boton-hablemos-menu .flecha-boton {
    transition: none;
  }
}

/* ==================================================
   Anclas — la pleca del encabezado es fija (5rem),
   asi que el salto de scroll debe dejarla libre
   ================================================== */
html {
  scroll-padding-top: 5.5rem;
}

/* Botón HABLEMOS del menú móvil: tipografía un poco mayor */
@media (max-width: 1023px) {
  .boton-hablemos-menu {
    font-size: 13px;
    line-height: 18px;
  }
}

/* ==================================================
   Máquina de escribir: hero, cita del manifiesto y título de la CTA
   Las teclas se revelan con JS; opacity no altera
   el layout, así el texto no mueve la página
   ================================================== */
.hero__titulo .tecla,
.tesis-cita .tecla,
.cta-titulo .tecla {
  opacity: 0;
}
.hero__titulo .tecla.visible,
.tesis-cita .tecla.visible,
.cta-titulo .tecla.visible {
  opacity: 1;
}

/* Cada palabra va en su propia caja para que los textos largos nunca
   se parta a media palabra al cambiar de línea */
.maquina-palabra {
  display: inline-block;
  white-space: nowrap;
}

.hero__titulo .cursor,
.tesis-cita .cursor,
.cta-titulo .cursor {
  display: inline-block;
  width: 0.055em;
  height: 0.72em;
  margin-left: 0.03em;
  vertical-align: 0.02em;
  background-color: currentColor;
  animation: cursorParpadeo 1s steps(1) infinite;
}
@keyframes cursorParpadeo {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__titulo .tecla,
  .tesis-cita .tecla,
  .cta-titulo .tecla {
    opacity: 1;
  }
  .hero__titulo .cursor,
  .tesis-cita .cursor,
  .cta-titulo .cursor {
    display: none;
  }
}

/* Cursor al terminar la frase: se desvanece y desaparece */
.hero__titulo .cursor.cursor--fuera,
.tesis-cita .cursor.cursor--fuera,
/* El cursor del titulo de la CTA se recorta: a 28px en
   mayusculas, el tamano del resto queda desproporcionado */
.cta-titulo .cursor {
  width: 0.05em;
  height: 0.6em;
  margin-top: -0.04em;
}

.cta-titulo .cursor.cursor--fuera {
  animation: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* ==================================================
   Fondo del hero — el azul se nota más
   (se sube la intensidad del degradado radial)
   ================================================== */
.hero__velo-radial {
  background-image: radial-gradient(
    ellipse 75% 70% at 82% 12%,
    rgb(0 93 168 / 0.42) 0%,
    rgb(0 93 168 / 0.18) 38%,
    rgb(0 93 168 / 0.05) 62%,
    transparent 78%
  );
}

/* ==================================================
   Hero en móvil — texto centrado y título más compacto
   (56px no caben en pantallas de 360-430px)
   ================================================== */
@media (max-width: 1023px) {
  .hero__texto {
    align-items: center;
    text-align: center;
  }
  /* 8.8vw garantiza que "EVOLUCIONAMOS." (la palabra mas larga)
     quepa siempre: a 360px da ~31px y a 500px se topa en 40px */
  .hero__titulo {
    font-size: clamp(26px, 8.8vw, 40px);
    line-height: 1.12;
  }
  .hero__descripcion {
    max-width: 32rem;
    text-align: center;
  }
}

/* ==================================================
   Hero — velo sobre el video de fondo
   Objetivo: que el video se vea (no taparlo entero) pero
   que el texto tenga contraste suficiente. La curva mantiene
   la obscuridad donde vive el texto (0-70%) y se abre hacia
   la derecha para que respire el video.
   ================================================== */
.hero__velo {
  background-image: linear-gradient(
    100deg,
    rgba(7, 22, 40, 0.5) 0%,
    rgba(7, 22, 40, 0.4) 32%,
    rgba(7, 22, 40, 0.3) 56%,
    rgba(7, 22, 40, 0.2) 76%,
    rgba(7, 22, 40, 0.1) 92%,
    rgba(7, 22, 40, 0) 100%
  );
}

/* El halo azul se suaviza para no competir con el texto */
.hero__velo-radial {
  background-image: radial-gradient(
    ellipse 70% 65% at 85% 10%,
    rgb(0 93 168 / 0.22) 0%,
    rgb(0 93 168 / 0.09) 40%,
    transparent 72%
  );
}

/* Sombra suave: da legibilidad al texto sin oscurecer mas el video */
.hero__titulo {
  text-shadow: 0 2px 18px rgba(4, 14, 26, 0.55);
}
.hero__descripcion {
  color: #e2e8f0;
  text-shadow: 0 1px 10px rgba(4, 14, 26, 0.6);
}

/* En movil el texto va centrado y ocupa todo el ancho:
   conviene un velo vertical, parejo, en vez de diagonal */
@media (max-width: 1023px) {
  .hero__velo {
    background-image: linear-gradient(
      180deg,
      rgba(7, 22, 40, 0.74) 0%,
      rgba(7, 22, 40, 0.66) 50%,
      rgba(7, 22, 40, 0.76) 100%
    );
  }
  .hero__titulo {
    text-shadow: 0 2px 16px rgba(4, 14, 26, 0.6);
  }
}

/* ==================================================
   SOLUCIONES — icono en vez del texto gris
   Mismos iconos que la seccion "¿QUE QUIERES RESOLVER?"
   ================================================== */
.solucion-icono {
  font-size: 26px;
  line-height: 1;
  color: rgb(112 119 133);
  cursor: default;
  transition:
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.solucion-tarjeta-xl:hover .solucion-icono,
.solucion-tarjeta-lg:hover .solucion-icono,
.solucion-tarjeta-md:hover .solucion-icono {
  color: #005da8;
  transform: translateY(-2px);
}
@media (max-width: 1023px) {
  .solucion-icono {
    font-size: 23px;
  }
}

/* ==================================================
   SOLUCIONES — hover de tarjeta
   Las tarjetas NO son enlaces: sin cursor:pointer para
   que el raton no sugiera que se puede hacer clic.
   Solo reaccionan al pasar encima.
   ================================================== */
.solucion-tarjeta-xl,
.solucion-tarjeta-lg,
.solucion-tarjeta-md {
  cursor: default;
}

/* Zoom suave de la foto (ya existe .group:hover .miniatura) */
.miniatura {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==================================================
   SOLUCIONES — tamaño de titulo y rejilla 3 / 2 / 1
   ================================================== */

/* Titulo mas pequeno: en 3 columnas 28px se veía enorme */
.solucion-titulo {
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.22;
  transition: color 0.3s ease;
}

/* El titulo se pinta de azul al pasar el raton por la tarjeta */
.solucion-tarjeta-xl:hover .solucion-titulo,
.solucion-tarjeta-lg:hover .solucion-titulo,
.solucion-tarjeta-md:hover .solucion-titulo {
  color: #005da8;
}

/* Rejilla responsive: 1 movil / 2 tablet / 3 escritorio */
@media (min-width: 768px) and (max-width: 1023px) {
  .solucion-tarjeta-md {
    grid-column: span 6 / span 6;
  }
}
@media (min-width: 1024px) {
  .solucion-tarjeta-md {
    grid-column: span 4 / span 4;
  }
}

/* Zoom mas lento y natural (0.5s -> 0.9s con ease-in-out) */
.miniatura {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================================================
   SOLUCIONES Y MENÚ MÓVIL — fondo de partículas
   ==================================================
   El lienzo va detrás del contenido y nunca intercepta el ratón.
   En el menú queda por debajo de las ondas y de los botones.
*/

#soluciones {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.particulas-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
  /* Desvanecido arriba y abajo: entra y sale sin borde duro */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%
  );
}

/* El contenido siempre por encima del lienzo */
#soluciones > .contenedor {
  position: relative;
  z-index: 1;
}

/* El menú móvil lleva su propio lienzo. Va fijo para que no se mueva
   con el scroll interno del menú, y por debajo de todo lo demás:
   las ondas (z 1) y los botones (z 10). */
.menu-movil .particulas-menu {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.menu-movil__olas {
  z-index: 1;
}

@media (max-width: 768px) {
  .particulas-fondo {
    opacity: 0.68;
  }
}

/* Si el sistema pide menos movimiento, el script dibuja un solo
   fotograma: el fondo queda fijo y algo más discreto */
@media (prefers-reduced-motion: reduce) {
  .particulas-fondo {
    opacity: 0.45;
  }
}

/* Navegadores sin soporte de mask: el lienzo se ve igual, sin degradado */
@supports not (
  (-webkit-mask-image: linear-gradient(#000, #000)) or
    (mask-image: linear-gradient(#000, #000))
) {
  .particulas-fondo {
    opacity: 0.6;
  }
}

/* ==================================================
   ASÍ PENSAMOS — video de fondo a sangre completa
   ==================================================
   La caja del manifiesto se sale del contenedor y ocupa todo el
   ancho de la ventana. overflow-x: clip recorta el excedente de
   100vw (la barra de scroll) sin crear scroll ni tocar el header
   fijo, que es lo que pasaría con overflow: hidden.
*/

#asi-pensamos {
  overflow-x: clip;
}

#asi-pensamos .tesis-caja {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  min-height: 34rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* El video ocupa toda la pantalla, pero el TEXTO vuelve a la medida del
   resto de la página: se replican aquí los valores de .contenedor
   (1360px con 3rem de padding en escritorio) para que la cita quede
   alineada con las demás secciones en vez de pegada al borde. */
#asi-pensamos .tesis-contenido {
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Y la medida de lectura se mantiene corta para que las líneas no se
   hagan eternas: el ancho lo pone el contenedor de arriba. */
#asi-pensamos .tesis-contenido > * {
  max-width: 48rem;
}

@media (min-width: 1024px) {
  #asi-pensamos .tesis-contenido {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Velo de contraste: garantiza que el texto se lea siempre,
   independiente de lo que muestre el video en ese momento.
   z-index 5: por encima del video y los velos, por debajo del
   texto (.tesis-contenido va en 10).

   El degradado es fuerte solo donde vive el texto (la cita mide 48rem
   y arranca en el margen del contenedor, o sea hasta ~55% del ancho) y
   se abre rapido despues: asi el video se ve casi entero a la derecha. */
#asi-pensamos .tesis-caja::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(11, 28, 48, 0.92) 0%,
    rgba(11, 28, 48, 0.88) 30%,
    rgba(11, 28, 48, 0.7) 52%,
    rgba(11, 28, 48, 0.34) 68%,
    rgba(11, 28, 48, 0.1) 84%,
    rgba(11, 28, 48, 0.03) 100%
  );
}

/* El video sube a casi opaco para que se vea de verdad. El degradado de
   arriba es quien protege el texto, no el video. */
#asi-pensamos .media-fondo {
  opacity: 0.92;
}

/* Los velos que venían de la imagen anterior se bajan: el de gradiente
   oscurecia otra vez la zona del texto, justo donde ya hay velo. */
#asi-pensamos .velo-degradado {
  opacity: 0.12;
}
#asi-pensamos .velo-radial {
  opacity: 0.3;
}

@media (max-width: 767px) {
  #asi-pensamos .tesis-caja {
    min-height: 30rem;
    padding: 4rem 1.5rem;
  }
  /* En vertical el degradado de lado deja el texto justo a la derecha
     sin protección: se pasa a uno de arriba abajo, parejo, porque en
     movil el texto ocupa todo el ancho */
  #asi-pensamos .tesis-caja::after {
    background: linear-gradient(
      180deg,
      rgba(11, 28, 48, 0.86) 0%,
      rgba(11, 28, 48, 0.8) 50%,
      rgba(11, 28, 48, 0.62) 100%
    );
  }
  #asi-pensamos .media-fondo {
    opacity: 0.78;
  }

  /* Movil: la info va centrada. Se puede centrar sin que la cita
     "salte" mientras se escribe porque los spans .tecla ocupan su sitio
     desde el principio (opacidad 0, no display: none), o sea que la
     linea ya mide su ancho final antes de la primera letra. */
  #asi-pensamos .tesis-contenido {
    align-items: center;
    text-align: center;
  }
  /* La insignia venia pegada a la izquierda (align-self: flex-start) */
  #asi-pensamos .tesis-insignia {
    align-self: center;
  }
  #asi-pensamos .tesis-contenido > * {
    max-width: 100%;
  }

  /* La cita a 40px se come la pantalla en movil: se compacta.
     6vw da ~24px en un telefono de 360 y ~34px en tablet, sin tocar
     los 40px de escritorio. */
  #asi-pensamos .tesis-cita {
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.28;
  }
}

/* Respeta reduced-motion: el video se congela en el primer fotograma */
@media (prefers-reduced-motion: reduce) {
  #asi-pensamos .tesis-video {
    animation-play-state: paused;
  }
}

/* ==================================================
   CTA "// REPLANTEAR EL ENFOQUE" — video de fondo
   ==================================================
   Mismo criterio que el manifiesto: el video sube a casi opaco y es el
   degradado el que protege el texto. La banda ya es de ancho completo
   y .cta-contenedor ya lleva los margenes de 1360px, asi que aqui solo
   hace falta el velo y la altura para que el video se lea.
*/

/* Centrado vertical con flex COLUMN, no row: en fila el contenedor se
   encoge al contenido (996px) y el texto se desplaza a x=239 en vez de
   x=105, que es el margen del resto de secciones. En columna el item se
   estira a lo ancho, mantiene sus 1360px y queda centrado igual que
   antes. */
.cta-interruptor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 21rem;
}

.cta-interruptor .cta-contenedor {
  width: 100%;
}

.cta-interruptor .media-fondo {
  opacity: 0.9;
}

/* El degradado viene a la izquierda de la banda, que es donde vive la
   columna de texto (.texto-limite, 42rem). Se abre rapido hacia la
   derecha para que el video se vea, y el boton es solido, asi que
   aguanta bien sobre la zona mas clara. */
.cta-interruptor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(11, 28, 48, 0.93) 0%,
    rgba(11, 28, 48, 0.9) 34%,
    rgba(11, 28, 48, 0.72) 55%,
    rgba(11, 28, 48, 0.36) 72%,
    rgba(11, 28, 48, 0.1) 86%,
    rgba(11, 28, 48, 0.03) 100%
  );
}

/* El velo de gradiente original oscurecia otra vez la zona del texto */
.cta-interruptor .velo-degradado {
  opacity: 0.12;
}

@media (max-width: 767px) {
  /* Sin altura forzada: en movil manda el contenido */
  .cta-interruptor {
    min-height: 0;
  }

  /* En vertical el degradado lateral dejaria el texto del lado derecho
     sin proteccion: se pasa a uno de arriba abajo, parejo */
  .cta-interruptor::after {
    background: linear-gradient(
      180deg,
      rgba(11, 28, 48, 0.86) 0%,
      rgba(11, 28, 48, 0.8) 50%,
      rgba(11, 28, 48, 0.64) 100%
    );
  }
  .cta-interruptor .media-fondo {
    opacity: 0.76;
  }

  /* Todo centrado: el texto y tambien el boton */
  .cta-interruptor .cta-fila {
    align-items: center;
    text-align: center;
  }

  /* El titulo a 28px se come la pantalla en movil: se compacta */
  .cta-interruptor .cta-titulo {
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 1.3;
  }
  /* El parrafo iba en 13px, pequeno incluso en escritorio */
  .cta-interruptor .cta-texto {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* Respeta reduced-motion: el video se congela en el primer fotograma */
@media (prefers-reduced-motion: reduce) {
  .cta-interruptor .cta-video {
    animation-play-state: paused;
  }
}

/* ==================================================
   METODO — flecha, tarjetas y ola
   ================================================== */

/* ---------- La seccion aisla su lienzo ---------- */
/* Sin esto el canvas se posicionaria contra el body y la ola se
   dibujaria encima del pie de pagina. */
#metodo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#metodo > .contenedor {
  position: relative;
  z-index: 1;
}

/* ---------- Tarjetas: superficie, borde y relieve ---------- */
#metodo .metodo-paso {
  overflow: hidden;
  border: 1px solid rgba(0, 93, 168, 0.13);
  border-radius: 0.85rem;
  background-color: rgba(248, 249, 255, 0.72);
  box-shadow: 0 1px 2px rgba(11, 28, 48, 0.04);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s ease, border-color 0.35s ease;
}

/* Filete superior que crece al entrar: marca el paso activo */
#metodo .metodo-paso::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #005da8, #88c2ff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

#metodo .metodo-paso:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 93, 168, 0.3);
  background-color: rgba(248, 249, 255, 0.88);
  box-shadow: 0 14px 30px -14px rgba(11, 28, 48, 0.26);
}

#metodo .metodo-paso:hover::before {
  transform: scaleX(1);
}

/* Respeta reduced-motion: sin levantamiento ni filete */
@media (prefers-reduced-motion: reduce) {
  #metodo .metodo-paso:hover {
    transform: none;
  }
  #metodo .metodo-paso::before {
    transform: scaleX(1);
    transition: none;
  }
}

/* ---------- El numero del paso, como chapa ---------- */
#metodo .metodo-numero {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(0, 93, 168, 0.2);
  border-radius: 999px;
  background-color: rgba(0, 93, 168, 0.1);
  letter-spacing: 0.08em;
}

/* ---------- La flecha entre pasos ---------- */
.metodo-flecha {
  position: relative;
  display: inline-block;
  width: 3.25rem;
  height: 1.25rem;
  flex: none;
}

/* Guia punteada: marca el camino hacia el paso siguiente */
.metodo-flecha::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0.35rem;
  height: 0px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 93, 168, 0.35) 0 5px,
    rgba(0, 93, 168, 0) 5px 10px
  );
}

/* La punta recorre la guia de izquierda a derecha. El keyframe arranca y
   termina con opacidad 0 para que el bucle no se note. */
.metodo-flecha::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.3rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-top: 2px solid #005da8;
  border-right: 2px solid #005da8;
  animation: metodoFlechaAvanza 2.6s linear infinite;
}

@keyframes metodoFlechaAvanza {
  0% {
    transform: translateX(0) rotate(45deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(2.6rem) rotate(45deg);
    opacity: 0;
  }
}

/* Sin ninguna regla de :hover aqui a proposito: cambiar la duracion de la
   animacion reinicia el keyframe y la punta daba un salto raro al pasar el
   raton. Ahora la flecha se comporta siempre igual. */

/* El ultimo paso no tiene paso siguiente: su flecha sobra */
.metodo-paso:last-child .metodo-flecha {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Una sola columna: no hay paso siguiente a la derecha */
  .metodo-flecha {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metodo-flecha::after {
    animation: none;
    transform: rotate(45deg);
    left: 2.6rem;
    opacity: 1;
  }
  .metodo-paso:last-child .metodo-flecha {
    display: none;
  }
}

/* ---------- La ola, con su propio desvanecido ---------- */
/* Arriba se abre para no ensuciar el titulo ni la intro; abajo la ola
   llega hasta el final de la seccion. */
#metodo .particulas-metodo {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 32%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 32%,
    #000 92%,
    transparent 100%
  );
  opacity: 1;
}

/* ==================================================
   MÉTODO, PROYECTOS Y SOLUCIONES — el fondo de red
   ==================================================
   Las tres secciones de contenido llevan la misma red de puntos unidos
   por líneas finas. Cada una apila su lienzo para que la red no se escape
   de la sección, y el contenido va por encima.
*/

#metodo,
#proyectos {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#metodo > .contenedor,
#proyectos > .contenedor {
  position: relative;
  z-index: 1;
}

/* La red se abre por arriba para no ensuciar el titulo ni la intro, y se
   cierra en el borde inferior. */
#metodo .particulas-fondo,
#proyectos .particulas-fondo {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 26%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 26%,
    #000 88%,
    transparent 100%
  );
  opacity: 1;
}
/* ==================================================
   Imagen de las tarjetas de proyecto
   ==================================================
   La caja traia una altura fija de 14rem (224px) sobre una columna de unos
   405px, o sea un ratio de 1.81. Las tres capturas que subiste son de
   1142x739 (ratio 1.55), de modo que con object-fit: cover se perdia cerca
   del 20% de la foto por arriba y por abajo, justo la franja donde esta el
   texto del sitio. En vez de recortar, la caja adopta el ratio real de la
   imagen: se ve completa y, como el ratio es relativo, a dos columnas la
   tarjeta se ensancha y la foto crece sola. */
.proyecto-imagen {
  aspect-ratio: 1.545 / 1;
  height: auto;
  min-height: 11rem;
}
/* ==================================================
   DE LA IDEA AL RESULTADO: las tarjetas no se encogen
   ==================================================
   La rejilla saltaba de 1 columna a 5 fijas a partir de 768px. En una tablet
   de 768 la caja mide 728px, y al repartirla en 5 salen tarjetas de 133px: el
   titulo se parte en tres lineas, la chapa del numero ya no cabe junto al
   icono y la flecha se desborda. Ese era el apachurramiento.

   Con auto-fill y un minimo de 15rem (240px) la tarjeta nunca baja de ese
   ancho: lo que no cabe se resuelve bajando etapas a la fila siguiente. Asi
   el numero de columnas lo decide el espacio real y no un breakpoint fijo:

     768px  -> 2 columnas de 356px   (antes 5 de 133px)
     1024px -> 3 columnas de 306px
     1200px -> 4 columnas de 265px
     1360px -> 5 columnas de 237px   (el diseno de escritorio, igual que antes)

   El min(100%, 15rem) es lo que evita que en un telefono de 360px la pista
   minima de 240px desborde el contenedor. */
.rejilla-metodo {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* Y si dentro de la tarjeta tampoco cabe todo, los elementos bajan de
   renglon en vez de comprimirse. */
.metodo-cabecera,
.fila-icono-texto {
  flex-wrap: wrap;
}

/* La flecha punteada solo significa algo cuando las cinco etapas estan en la
   misma fila: si bajan a la segunda, apuntaria al vacio. A 1360px es justo
   cuando auto-fill ya arma las cinco columnas. */
.metodo-flecha {
  display: none;
}

@media (min-width: 1360px) {
  .metodo-flecha {
    display: inline-block;
  }
}

/* ==================================================
   DEL LABORATORIO A LA REALIDAD: 3 -> 2 -> 1
   ==================================================
   La rejilla saltaba de 1 a 3 columnas a los 768px, sin paso intermedio. En
   tablet quedaban tarjetas de 227px y la descripcion se partia en seis lineas
   de 29 caracteres: ese era el amontonamiento de texto que se veia.

   Se mete el escalon de 2 columnas y se retrasa el de 3, para que al estrechar
   el navegador las tarjetas cedan ancho en orden y nunca se apelmazen:

     menos de 700px  -> 1 columna
     700px           -> 2 columnas de 318px
     1100px          -> 3 columnas de 318px
     1366px          -> 3 columnas de 405px (el diseno de escritorio) */
.rejilla-proyectos {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 700px) {
  .rejilla-proyectos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .rejilla-proyectos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* El pie de la tarjeta lleva la etiqueta a la izquierda y "VER PROYECTO" a la
   derecha. A dos columnas se aprietan, asi que si no caben en un renglon el
   segundo baja de linea en vez de montarse encima. */
.proyecto-pie {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.proyecto-enlace-fila {
  flex-wrap: wrap;
}
/* ==================================================
   Aviso del formulario de diagnóstico
   ==================================================
   Aparece bajo los campos cuando se envía (todo bien) o cuando falta elegir
   el tipo de reto. Se oculta con el atributo hidden, no con display, para no
   pelearse con las reglas de las demas clases del formulario. */
.formulario-aviso {
  margin: 0;
  border-radius: 0.6rem;
  border: 1px solid rgba(0, 93, 168, 0.28);
  background-color: rgba(0, 93, 168, 0.07);
  padding: 0.75rem 1rem;
  font-family: Plus Jakarta Sans;
  font-size: 13px;
  line-height: 20px;
  color: #0b1c30;
}

.formulario-aviso--error {
  border-color: rgba(190, 42, 42, 0.35);
  background-color: rgba(190, 42, 42, 0.06);
  color: #8f2020;
}

.formulario-aviso[hidden] {
  display: none;
}
/* ==================================================
   Trampa para robots del formulario
   ==================================================
   Campo de texto invisible para la persona pero relleno en pantalla, que es
   justo lo que buscan los bots. Va al final del form y con margen 0 para no
   alterar el espacio que aplica la regla .formulario > :not([hidden]) ~ ... */
.formulario .trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
/* ==================================================
   "¿Qué retos te gustaría resolver con nosotros?"
   ==================================================
   Eran nueve botones ("chips") en linea y ocupaban tres filas, que se leian
   apretados. Ahora es un desplegable: una sola linea que al pulsarse abre la
   lista con palomitas. Se sigue pudiendo elegir mas de uno y el campo
  Selector muestra lo que llevas ("2 retos seleccionados").

   El boton tiene el mismo alto y fondo que los campos de texto de arriba, para
   que se lean como parte del mismo formulario y no como un elemento
   diferente. */
.selector-retos {
  position: relative;
  margin-top: 0.25rem;
}

.selector-retos__campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 2.75rem;
  border: 1px solid rgba(192, 199, 214, 0.45);
  border-radius: 0.6rem;
  background-color: #ffffff;
  padding: 0 1rem;
  font-family: Plus Jakarta Sans;
  font-size: 13px;
  color: #0b1c30;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.selector-retos__campo:hover {
  border-color: rgba(0, 93, 168, 0.45);
}

.selector-retos--abierto .selector-retos__campo,
.selector-retos__campo:focus-visible {
  border-color: #005da8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 93, 168, 0.14);
}

.selector-retos__valor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selector-retos__valor--vacio {
  color: #707785;
}

.selector-retos__flecha {
  flex: none;
  font-size: 11px;
  line-height: 1;
  color: #707785;
  transition: transform 0.18s ease;
}

.selector-retos--abierto .selector-retos__flecha {
  transform: rotate(180deg);
}

/* --- El panel con las opciones --- */
/* Con 15rem solo se veian seis de las nueve opciones y no habia ninguna pista
   de que faltaran tres, que es justo la duda que surge al usarlo. Ahora el
   alto tope deja ver las nueve; si la pantalla es baja, el 55vh recorta y el
   panel scrollea. Como ningun ancestro tiene overflow oculto, el panel puede
   salirse de la tarjeta y flotar encima, que es lo que se espera. */
.selector-retos__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(192, 199, 214, 0.6);
  border-radius: 0.6rem;
  background-color: #ffffff;
  padding: 0.3rem;
  box-shadow: 0 18px 40px -18px rgba(11, 28, 48, 0.42);
}

.selector-retos__panel[hidden] {
  display: none;
}

.selector-retos__opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 0.45rem;
  padding: 0.5rem 0.65rem;
  font-family: JetBrains Mono;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #0b1c30;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.selector-retos__opcion:hover {
  background-color: rgba(0, 93, 168, 0.07);
}

.selector-retos__opcion input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #005da8;
  cursor: pointer;
}

.selector-retos__opcion--elegida {
  background-color: rgba(0, 93, 168, 0.11);
  color: #005da8;
  font-weight: 700;
}

/* --- El error: se marca el desplegable, no solo el aviso de abajo --- */
.selector-retos--error .selector-retos__campo {
  border-color: rgba(190, 42, 42, 0.6);
  background-color: rgba(190, 42, 42, 0.03);
}

.selector-retos--error .selector-retos__campo:focus-visible {
  box-shadow: 0 0 0 3px rgba(190, 42, 42, 0.16);
}

.selector-retos__aviso {
  margin: 0.5rem 0 0;
  font-family: JetBrains Mono;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a12828;
}

.selector-retos__aviso[hidden] {
  display: none;
}
/* ==================================================
   Separación antes de la caja de llenado
   ==================================================
   Medido en el navegador: entre la banda de video y el formulario había 0 px
   (se tocaban), mientras que entre el formulario y el pie había 40 px, que es
   el margin-top: 2.5rem del propio .pie. Se le da al formulario el mismo
   margen para que las dos separaciones se lean iguales. */
#hablemos {
  margin-top: 2.5rem;
}

/* ==============================================================
   aviso.html — Aviso de privacidad
   --------------------------------------------------------------
   Página de texto largo, así que lo importante es que se lea bien: columna
   angosta, interlineado amplio y contraste alto. Reutiliza las variables y
   las tipografías del sitio para que no parezca otra página.
   ============================================================== */
.aviso-seccion {
  /* El encabezado del sitio es fijo; sin este margen el texto se esconde
     detrás de él al abrir la página. */
  padding-top: 7rem;
  padding-bottom: 4rem;
}

.aviso-caja {
  max-width: 1200px;
}

.aviso-ruta {
  margin: 0 0 2rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.aviso-ruta a {
  color: var(--gris-secundario);
  text-decoration: none;
  border-bottom: 1px solid var(--outline-variant);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.aviso-ruta a:hover,
.aviso-ruta a:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
}

.aviso-titulo {
  margin: 0 0 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.aviso-intro {
  margin: 0 0 0.75rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--gris-secundario);
}

.aviso-fecha {
  margin: 0 0 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--outline-variant);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-secundario);
}

.aviso-subtitulo {
  margin: 2.5rem 0 0.75rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--on-surface);
}

.aviso-caja p {
  margin: 0 0 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--on-surface);
}

.aviso-caja strong {
  font-weight: 700;
  color: var(--on-surface);
}

.aviso-lista {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--on-surface);
}

.aviso-lista li {
  margin-bottom: 0.35rem;
}

.aviso-lista li::marker {
  color: var(--primary);
}

/* Solo los enlaces que están DENTRO de un párrafo o de la lista. Si se
   pusiera ".aviso-caja a" a secas, también alcanzaría al botón de abajo:
   tiene especificidad (0,1,1) contra (0,1,0) de .boton-hablemos, así que le
   ganaría y el botón salía con el texto azul y subrayado en vez de blanco. */
.aviso-caja p a,
.aviso-caja li a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.aviso-caja p a:hover,
.aviso-caja p a:focus-visible,
.aviso-caja li a:hover,
.aviso-caja li a:focus-visible {
  color: var(--primary-container);
}

.aviso-pie {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--outline-variant);
}

/* En pantallas muy angostas la caja de la barra superior se apila y el
   botón se queda pegado al borde. */
@media (max-width: 480px) {
  .pagina-aviso .barra-superior {
    gap: 1rem;
  }
  .aviso-seccion {
    padding-top: 6rem;
  }
}
/* ==============================================================
   Pie centrado en móvil
   --------------------------------------------------------------
   Abajo de 768px el pie cae a una sola columna y todo queda pegado a la
   izquierda, que en una pantalla angosta se lee descuadrado. Desde 768px
   vuelve la rejilla de 12 columnas y se recupera el alineado a la
   izquierda, que es como se ve en escritorio. Por eso el tope es 767px y no
   un max-width genérico: hay que empatar con el breakpoint de la rejilla.

   El centrado se hace con align-items en los contenedores flex (que alinean
   en el eje horizontal cuando flex-direction es column) y con text-align
   para el texto corrido. El button del CTA se deja con su ancho natural
   centrado por el propio flex, sin hacerlo stretch: estirado se ve raro. */
@media (max-width: 767px) {
  .rejilla-pie {
    text-align: center;
  }

  .pie-marca,
  .pie-columna-3,
  .pie-columna-4,
  .pie-lista {
    align-items: center;
  }

.pie-inferior {
    /* Imprescindible: style.css pone esta fila en "row" a partir de 640px con
       space-between, o sea copyright a la izquierda y enlace a la derecha.
       Por eso entre 640 y 767 el texto salía descuadrado aunque se le
       pusiera text-align: center. Se deshace el row y se vuelve a columna,
       que es como se ve bien. */
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pie-legal,
  .pie-meta {
    justify-content: center;
  }
}

/* ==============================================================
   aviso.html en móvil
   --------------------------------------------------------------
   En el sitio principal el botón de "HABLEMOS" se esconde por debajo de
   640px porque en ese ancho hay un menú desplegable que hace esa función. En
   aviso.html no hay menú: si se aplicara la misma regla, quien llegara desde
   un teléfono se quedaría sin ninguna forma de volver al formulario. Aquí se
   lo fuerza a verse siempre. */
@media (max-width: 639px) {
  .aviso-pie .boton-hablemos {
    display: inline-flex;
  }
}
/* ==============================================================
   404.html — Página no encontrada
   --------------------------------------------------------------
   Un 404 útil no es un "lo sentimos". Como el sitio entero vive en una sola
   página, lo más importante es darle al visitante las secciones a las que
   sí puede llegar. Por eso las rutas están en la tarjeta, no solo el botón
   de volver.

   Se omiten por completo los scripts del sitio: esta página no tiene
   formulario ni animaciones, así que no hay nada que inicializar y carga
   más rápido.
   ============================================================== */
.error404-seccion {
  /* El encabezado es fijo; sin este margen el texto se esconde detrás. */
  padding-top: 7rem;
  padding-bottom: 4rem;
}

.error404-caja {
  max-width: 44rem;
}

/* La etiqueta "// ERROR 404" replica el "// NAVEGACIÓN" del pie, para que
   la página se sienta del mismo sitio y no un archivo perdido. */
.error404-etiqueta {
  margin: 0 0 1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-secundario);
}

/* La cifra se usa con clamp() porque a 4 dígitos en un tamaño fijo se
   desborda en móvil y a 7 rem en escritorio se ve enorme. */
.error404-cifra {
  margin: 0 0 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(4.5rem, 18vw, 8rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--primary);
}

.error404-titulo {
  margin: 0 0 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.error404-texto {
  margin: 0 0 2.25rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--gris-secundario);
}

.error404-rutas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
}

@media (min-width: 560px) {
  .error404-rutas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cada ruta es una fila con la flecha que se separa al pasar el mouse,
   el mismo gesto que usan los botones del sitio. */
.error404-ruta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--outline-variant);
  background-color: var(--surface-container-lowest);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.error404-ruta-flecha {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  color: var(--primary);
  transition: transform 0.25s ease;
}

.error404-ruta:hover,
.error404-ruta:focus-visible {
  border-color: var(--primary);
  background-color: var(--surface-container);
  transform: translateX(4px);
}

.error404-ruta:hover .error404-ruta-flecha,
.error404-ruta:focus-visible .error404-ruta-flecha {
  transform: translateX(3px);
}

/* Hablemos es la sección a la que de verdad quieres que la gente llegue,
   así que va destacada con el azul del sitio en vez de la caja neutra. */
.error404-ruta--destacada {
  border-color: var(--primary);
  color: #ffffff;
  background-color: var(--inverse-surface);
}

.error404-ruta--destacada .error404-ruta-flecha {
  color: var(--primary-container);
}

.error404-ruta--destacada:hover,
.error404-ruta--destacada:focus-visible {
  background-color: var(--primary);
}

.error404-ruta--destacada:hover .error404-ruta-flecha,
.error404-ruta--destacada:focus-visible .error404-ruta-flecha {
  color: #ffffff;
}

.error404-pie {
  padding-top: 1.75rem;
  border-top: 1px solid var(--outline-variant);
}

/* El botón del encabezado se oculta bajo 640px como en el resto del sitio,
   así que en móvil se le da el suyo propio aquí para que nunca se quede
   el visitante sin ninguna salida. */
@media (max-width: 639px) {
  .error404-pie .boton-hablemos {
    display: inline-flex;
  }
  .error404-seccion {
    padding-top: 6rem;
  }
}
/* ==============================================================
   Centrado de textos cortos en móvil
   --------------------------------------------------------------
   En escritorio todo va a la izquierda, que es como se lee bien un texto
   largo. En móvil cambia: una pantalla angosta con texto pegado al borde
   izquierdo se ve descuadrado, sobre todo los títulos.

   Solo se centran TÍTULOS, ETIQUETAS y TEXTOS CORTOS. Los párrafos largos se
   dejan a la izquierda a propósito: una línea de texto largo centrada es
   mucho más difícil de leer, porque el ojo vuelve al principio de cada
   renglon para encontrar donde sigue. Ese es el motivo por el que este
   bloque no dice "text-align: center" sobre todo el documento.

   Todo va dentro de max-width: 639px, que es el mismo corte que usa el sitio
   para el menú móvil. Arriba de 640px no se toca nada.
   ============================================================== */
@media (max-width: 639px) {
  /* --- Encabezados de sección ---
     Solo el título va centrado. La etiqueta "que empieza con //" se
     se trata más abajo, porque esas se quedan a la izquierda. */
  .titulo-seccion,
  .titulo-seccion-xl {
    text-align: center;
  }

  /* --- Tarjetas de soluciones ---
     .solucion-cabecera es una fila con el icono y la etiqueta. Con
     align-items:center la etiqueta se centra verticalmente contra el icono
     y el texto queda centrado dentro de la tarjeta.

     OJO: .solucion-etiqueta NO va aquí. Lleva el "// 01 · EXP_DIGITAL" y
     ese tipo de textos se quedan a la izquierda, ver más abajo. */
  .solucion-tarjeta-md,
  .solucion-cabecera,
  .solucion-titulo {
    text-align: center;
  }

  .solucion-cabecera {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  /* --- Todo lo demás, centrado ---
     Esto incluye los párrafos largos y las descripciones de tarjeta, que antes
     se dejaban a la izquierda porque un bloque largo centrado deja los bordes
     irregulares. Se cambió por decisión del cliente: en móvil, centrado.
     Si algún día molesta otra vez, se quitan estas tres líneas. */
  .seccion-intro,
  .hablemos-intro,
  .hablemos-subtexto,
  .solucion-texto,
  .solucion-descripcion,
  .texto-secundario {
    text-align: center;
  }

  /* --- Método --- */
  .metodo-paso,
  .metodo-cabecera,
  .metodo-numero,
  .metodo-titulo {
    text-align: center;
  }

  .metodo-cabecera {
    flex-direction: column;
    align-items: center;
  }

  /* --- Proyectos ---
     .proyecto-etiqueta dice "DESARROLLO WEB", no lleva "//", así que sí va
     centrada. Se había quitado de esta lista por error. */
  .proyecto-tarjeta,
  .proyecto-cuerpo,
  .proyecto-destacado,
  .proyecto-etiqueta,
  .proyecto-titulo,
  .etiqueta-num,
  .etiqueta-suave {
    text-align: center;
  }

  /* El "→" de cada proyecto y el </> se quedan centrados con la tarjeta. */
  .proyecto-enlace-fila,
  .proyecto-pie {
    justify-content: center;
  }

  /* --- Métricas del formulario --- */
  .metrica-etiqueta {
    text-align: center;
  }

  /* --- Formulario ---
     Las etiquetas de los campos sí se centran: son cortas ("Nombre
     Completo *") y en una pantalla angosta alineadas a la izquierda se
     ven desbalanceadas. Los campos de texto NO se tocan: el texto que
     alguien escribe se lee siempre a la izquierda. */
  .campo-etiqueta,
  .grupo-etiqueta,
  .etiqueta-nota,
  .chip-formulario {
    text-align: center;
  }

  /* ==============================================================
     LO QUE SE QUEDA A LA IZQUIERDA: los textos que empiezan con //
     --------------------------------------------------------------
     Estas cinco clases son las únicas que llevan un texto "//" delante:
       .etiqueta-seccion    // DIAGNÓSTICO ESTRATÉGICO...
       .solucion-etiqueta   // 01 · EXP_DIGITAL
       .tesis-etiqueta      // NUESTRO MANIFIESTO
       .metrica-etiqueta    // CONTACTO  (dentro del formulario)
       .pie-columna-titulo  // NAVEGACIÓN, // CONTACTO

     Se listan una por una y no se aplica a "todo lo que tenga razón social"
     porque CSS no puede preguntar por el texto que tiene un elemento. Por eso
     conviene revisar si se agrega alguna etiqueta nueva con //.

     Se anulan aquí las reglas de centrado de arriba, más abajo en el mismo
     bloque: gana la última que menciona al elemento. */
  .etiqueta-seccion,
  .solucion-etiqueta,
  .tesis-etiqueta,
  .metrica-etiqueta,
  .pie-columna-titulo {
    text-align: left;
    align-self: flex-start;
  }

  /* El icono y el texto van a lados distintos, y en una columna
     flex el align-items manda para los dos hijos a la vez: si se pone a la
     izquierda, el mundito también se va a la izquierda.

     La solución es dejar el contenedor centrado (así el ícono queda al
     medio) y estirar la etiqueta a todo lo ancho con align-self: stretch,
     de modo que su texto pueda ir a la izquierda sin mover el ícono. Antes
     se usaba flex-start en el contenedor y por eso el ícono quedaba pegado al
     borde. */
  .solucion-cabecera {
    align-items: center;
  }

  .solucion-etiqueta {
    align-self: stretch;
  }

  /* .proyecto-cuerpo no lleva ningún "//" dentro, así que se queda centrado
     como el resto de la tarjeta de proyecto. */

  .formulario-chips {
    justify-content: center;
  }

  /* --- Selector de retos ---
     El botón del desplegable centra su contenido, pero la flecha NO: es un
     indicador de posición, no texto, y si se centra se va al medio de la
     caja en vez de quedarse a la derecha. */
  .selector-retos__campo {
    text-align: center;
    justify-content: center;
  }

  .selector-retos__flecha {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .selector-retos__panel {
    text-align: center;
  }
}

/* ==============================================================
   Video al hacer hover en las tarjetas de soluciones
   --------------------------------------------------------------
   La imagen (.miniatura) NUNCA se quita. El video va encima, tapado con
   opacity 0, y solo aparece cuando ya está reproduciéndose. Esa es la
   razón de que no se vea "el video cargando": mientras descarga, lo que
   se sigue viendo es la imagen de siempre.

   El contenedor .solucion-imagen ya traía position:relative y
   overflow:hidden, así que aquí no hay que tocarlo.

   El zoom replica el que ya hacía la imagen (escala 1.05) para que no se
   note el cambio de una capa a otra: si solo se moviera el video, la
   imagen de atrás se quedaría quieta y se notaría.
   ============================================================== */
.solucion-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Por debajo del contenido de la tarjeta, que queda arriba. */
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* SIN escala, y aqui estaba media parte del brinco que se notaba.
     La imagen de la tarjeta hacia zoom a 1.05 al pasar el mouse mientras el
     video se quedaba en 1.0: en el instante del cambio las dos capas se
     veian a escalas distintas y el ojo lo leia como un salto. Las dos capas
     ahora estan siempre en 1 y lo unico que cambia es la opacidad, que es
     un fundido limpio sin movimiento. */
  transform: scale(1);
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

.solucion-video--visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0s;
}

/* La imagen de las tarjetas de soluciones NO hace zoom. Solo se le quita el
   zoom a estas: las tarjetas de proyecto (que no tienen video) lo conservan,
   porque ahi el efecto se ve bien y no hay con que chocarse. */
.solucion-tarjeta-md:hover .miniatura,
.solucion-tarjeta-md .miniatura {
  transform: scale(1) !important;
}

/* En movil no hay mouse, asi que este bloque ya no hace falta: las dos
   capas estan en escala 1 y el fundido es lo unico que cambia. */
@media (hover: none), (pointer: coarse) {
  .solucion-video,
  .solucion-video--visible {
    transform: scale(1);
  }
}

/* Si la persona pidió menos movimiento, el video no aparece: se queda
   siempre la imagen fija. Es una preferencia del sistema y hay que
   respetarla. */
@media (prefers-reduced-motion: reduce) {
  .solucion-video {
    display: none;
  }
}