@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; }

html h1 {
  line-height: 1.1; }

html ul {
  list-style: none; }
  html ul li {
    list-style: none; }

html i {
  color: currentColor;
  line-height: 1; }

html button {
  font-family: "Lato", sans-serif;
  padding: 20px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: 600; }

html a {
  text-decoration: none;
  color: currentColor; }

body {
  font-family: "Lato", sans-serif;
  position: relative;
  overflow-x: hidden;
  background-color: #0c0c0c;
  color: #fff;
  background-color: #1b1d1d; }

h1 {
  font-size: 50px; }

img {
  font-style: italic;
  max-width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
  shape-margin: 1rem;
  transform-style: preserve-3d;
  perspective: 1000px; }

input {
  height: 45px;
  border-radius: 5px;
  box-shadow: none;
  border: none;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  padding-inline: 10px; }

.opacity {
  transition: all 0.8s; }
  .opacity.hidden {
    opacity: 0; }
  .opacity.show {
    opacity: 1; }

@keyframes estoNoEsCoca {
  0% {
    transform: scale(0) rotateX(90deg) translateZ(-200px);
    transform-origin: bottom 10%; }
  70% {
    transform: scale(1) rotateX(0deg) translateZ(0);
    transform-origin: bottom 10%; }
  80% {
    transform: scale(1.1) rotateX(0deg) translateZ(0);
    transform-origin: bottom 10%; }
  100% {
    transform: scale(1) rotateX(0deg) translateZ(0);
    transform-origin: bottom 10%; } }

@keyframes empanadaUno {
  0% {
    transform: rotate(180deg) scale(0) translateX(-50px);
    transform-origin: top 50%; }
  100% {
    transform: rotate(105deg) scale(0.95) translateX(0px);
    transform-origin: top 50%; } }

@keyframes empanadaDos {
  0% {
    transform: rotate(180deg) scale(0) translateX(-50px);
    transform-origin: top 50%; }
  100% {
    transform: rotate(165deg) scale(1) translateX(0px);
    transform-origin: top 50%; } }

@keyframes empanadaTres {
  0% {
    transform: rotate(0deg) scale(0) translateX(50px);
    transform-origin: top -50%; }
  100% {
    transform: rotate(70deg) scale(0.95) translateX(0px);
    transform-origin: top -50%; } }

@keyframes empanadaCuatro {
  0% {
    transform: rotate(0deg) scale(0) translateX(50px);
    transform-origin: top -50%; }
  100% {
    transform: rotate(20deg) scale(1) translateX(0px);
    transform-origin: top -50%; } }

@keyframes titulo {
  0% {
    transform: scale(0) rotateX(90deg) translateZ(-200px);
    transform-origin: bottom 10%; }
  50% {
    transform: scale(1) rotateX(0deg) translateZ(0);
    transform-origin: bottom 10%; }
  70% {
    transform: scale(1.12) rotateX(0deg) translateZ(0);
    transform-origin: bottom 10%; }
  100% {
    transform: scale(1) rotateX(0deg) translateZ(0);
    transform-origin: bottom 10%; } }

@keyframes float {
  0% {
    transform: translatey(0px); }
  50% {
    transform: translatey(-10px); }
  100% {
    transform: translatey(0px); } }

@keyframes bouncingShadow {
  from {
    transform: translateY(0px); }
  to {
    transform: translateY(6px); } }

@keyframes bouncingCard {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-18px); } }

@keyframes aparece {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fullAparece {
  from {
    scale: 0;
    transform-origin: bottom; }
  to {
    scale: 1;
    transform-origin: bottom; } }

@keyframes seDibuja {
  from {
    mask-position: 100% 100%; }
  to {
    mask-position: 0% 0%; } }

header {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 15px;
  justify-content: center;
  max-width: 1500px;
  margin: 0 auto;
  z-index: 2;
  position: relative; }
  header img {
    max-width: 180px; }
    @media screen and (max-width: 576px) {
      header img {
        max-width: 120px; } }

.pattern {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: url("/assets/pattern24.png");
  background-repeat: repeat;
  overflow: hidden;
  pointer-events: none;
  opacity: .30; }

.hero {
  position: relative;
  z-index: 3;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: center;
  transition: all 0.5s;
  max-height: 150vh;
  margin-top: 120px;
  padding-block: 40px;
  border-radius: 10px;
  animation: bouncingCard 0.8s ease-out infinite alternate;
  background-image: linear-gradient(45deg, #f8ae00, #539348); }
  @media screen and (max-width: 576px) {
    .hero {
      padding-inline: 15px; } }
  @media screen and (max-width: 576px) {
    .hero {
      margin-inline: 10px;
      max-width: 480px;
      margin: 0 auto; } }
  @media screen and (max-width: 576px) and (max-width: 576px) {
    .hero {
      padding-inline: 15px; } }
  @media screen and (max-width: 380px) {
    .hero {
      margin-inline: 10px;
      max-width: 350px;
      margin: 0 auto; } }
  @media screen and (max-width: 380px) and (max-width: 576px) {
    .hero {
      padding-inline: 15px; } }
  .hero.show {
    scale: 1; }
  .hero.hidden {
    scale: 0; }
  .hero__cont {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center; }
    .hero__cont--etiqueta {
      position: absolute;
      top: -25px;
      font-size: 18px;
      background-color: red;
      padding: 8px 15px;
      border-radius: 5px; }
    .hero__cont--titulo {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      background-color: #fff;
      padding: 5px 15px;
      width: fit-content;
      border-radius: 5px;
      border: 4px dashed #539348; }
      .hero__cont--titulo h1 {
        font-size: 70px;
        font-weight: 800;
        text-transform: uppercase;
        margin-block: 0;
        color: #539348; }
        @media screen and (max-width: 576px) {
          .hero__cont--titulo h1 {
            font-size: 40px; } }
      .hero__cont--titulo i {
        font-size: 35px;
        color: #539348; }
        @media screen and (max-width: 576px) {
          .hero__cont--titulo i {
            font-size: 20px; } }
    .hero__cont h2 {
      font-size: 60px;
      margin-block: 0;
      margin-bottom: 25px; }
      @media screen and (max-width: 576px) {
        .hero__cont h2 {
          font-size: 30px; } }
    .hero__cont h3 {
      font-size: 30px;
      margin-top: 25px;
      font-weight: 400; }
      @media screen and (max-width: 576px) {
        .hero__cont h3 {
          font-size: 20px; } }
    .hero__cont a {
      font-size: 40px;
      font-weight: 600;
      transition: all 0.2s; }
      .hero__cont a:hover {
        color: #539348; }
      @media screen and (max-width: 576px) {
        .hero__cont a {
          font-size: 20px; } }
  .hero .rippedLine {
    border-top: 2px solid #ffffff;
    border-top-style: dashed;
    width: 100%; }
  .hero .circleLeft {
    width: 40px;
    height: 80px;
    background-color: #1b1d1d;
    border-radius: 0 50px 50px 0;
    position: absolute;
    top: 50%;
    transform: translateY(0%);
    left: 0; }
  .hero .circleRight {
    width: 40px;
    height: 80px;
    background-color: #1b1d1d;
    border-radius: 50px 0 0 50px;
    position: absolute;
    top: 50%;
    transform: translateY(0%);
    right: 0; }

.ticketShadow {
  animation: bouncingShadow 0.8s ease-out infinite alternate;
  margin-top: 4px;
  max-width: 640px;
  margin: 0 auto;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  filter: blur(12px); }
  @media screen and (max-width: 576px) {
    .ticketShadow {
      padding-inline: 15px; } }
  @media screen and (max-width: 576px) {
    .ticketShadow {
      margin-inline: 10px;
      max-width: 480px;
      margin: 0 auto; } }
  @media screen and (max-width: 576px) and (max-width: 576px) {
    .ticketShadow {
      padding-inline: 15px; } }
  @media screen and (max-width: 380px) {
    .ticketShadow {
      margin-inline: 10px;
      max-width: 300px;
      margin: 0 auto; } }
  @media screen and (max-width: 380px) and (max-width: 576px) {
    .ticketShadow {
      padding-inline: 15px; } }

.link-principal {
  position: relative;
  max-width: 1400px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-inline: auto;
  margin-block: 50px; }
  @media screen and (max-width: 576px) {
    .link-principal {
      margin-inline: 15px; } }
  .link-principal a {
    background-color: #fff;
    color: #0c0c0c;
    font-size: 24px;
    font-weight: 800;
    border-radius: 10px;
    width: 100%;
    padding: 15px;
    text-align: center;
    transition: all 0.2s; }
    .link-principal a:hover {
      background-color: #f8ae00; }

footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding-bottom: 60px; }
  footer a {
    opacity: .3;
    transition: all 0.2s; }
    footer a:hover {
      opacity: .75; }
    footer a img {
      width: 30px; }

.combos-bloques {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  transition: all .8s;
  margin-top: 250px; }
  @media screen and (max-width: 576px) {
    .combos-bloques {
      padding-inline: 15px; } }
  .combos-bloques h1 {
    font-size: 50px;
    font-weight: 800; }
    @media screen and (max-width: 576px) {
      .combos-bloques h1 {
        font-size: 30px; } }
  .combos-bloques h2 {
    text-align: center; }

.combos {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  transition: all .8s;
  overflow: hidden;
  padding-bottom: 35px; }
  @media screen and (max-width: 576px) {
    .combos {
      padding-inline: 15px; } }
  .combos.hidden {
    opacity: 0; }
  .combos.show {
    opacity: 1; }
  .combos__items--item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center; }
    .combos__items--item--imagenes {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      position: relative;
      height: 280px; }
      @media screen and (max-width: 576px) {
        .combos__items--item--imagenes {
          height: 220px; } }
      .combos__items--item--imagenes--cont {
        position: relative; }
        .combos__items--item--imagenes--cont img {
          position: absolute;
          top: 40px; }
          @media screen and (max-width: 576px) {
            .combos__items--item--imagenes--cont img {
              top: 20px; } }
          .combos__items--item--imagenes--cont img.empanadaCombo {
            transform: translate(30%, -45%);
            max-width: 230px;
            right: 50%;
            z-index: 1; }
            @media screen and (max-width: 576px) {
              .combos__items--item--imagenes--cont img.empanadaCombo {
                max-width: 170px;
                transform: translate(45%, -45%); } }
          .combos__items--item--imagenes--cont img.estoNoEsCoca {
            max-width: 80px;
            left: 50%;
            transform: translate(-20%, -70%);
            z-index: 0; }
            @media screen and (max-width: 576px) {
              .combos__items--item--imagenes--cont img.estoNoEsCoca {
                max-width: 70px; } }
          .combos__items--item--imagenes--cont img.cajaEmpanadas {
            max-width: 175px;
            left: 50%;
            transform: translate(-15%, -63%);
            z-index: 0; }
            @media screen and (max-width: 576px) {
              .combos__items--item--imagenes--cont img.cajaEmpanadas {
                max-width: 120px; } }
          .combos__items--item--imagenes--cont img.cajaEmpanadasDoce {
            max-width: 250px;
            left: 50%;
            transform: translate(-15%, -63%);
            z-index: 0; }
            @media screen and (max-width: 576px) {
              .combos__items--item--imagenes--cont img.cajaEmpanadasDoce {
                max-width: 120px; } }
          .combos__items--item--imagenes--cont img.estoEsCoca {
            max-width: 115px;
            left: 50%;
            transform: translate(-20%, -70%);
            z-index: 0; }
            @media screen and (max-width: 576px) {
              .combos__items--item--imagenes--cont img.estoEsCoca {
                max-width: 90px; } }
          .combos__items--item--imagenes--cont img.estoEsCocaDos {
            max-width: 115px;
            left: 50%;
            transform: translate(70%, -70%);
            z-index: 0; }
            @media screen and (max-width: 576px) {
              .combos__items--item--imagenes--cont img.estoEsCocaDos {
                max-width: 90px;
                transform: translate(-100%, -70%); } }
          .combos__items--item--imagenes--cont img.estoEsCocaLitro {
            max-width: 75px;
            left: 50%;
            transform: translate(-70%, -80%);
            z-index: 0; }
            @media screen and (max-width: 576px) {
              .combos__items--item--imagenes--cont img.estoEsCocaLitro {
                max-width: 50px;
                transform: translate(-100%, -70%); } }
      .combos__items--item--imagenes--numero {
        position: absolute;
        bottom: 50px;
        transform: translate(-200%, -100%);
        right: 0;
        color: #0c0c0c;
        z-index: 50;
        font-size: 30px;
        font-weight: 800;
        background-color: #f8ae00;
        color: #0c0c0c;
        border-radius: 50%;
        padding: 8px 10px;
        box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        gap: 10px; }
        .combos__items--item--imagenes--numero.dosCifras {
          font-size: 26px;
          padding-block: 16px;
          bottom: 35px;
          right: -5px; }
        @media screen and (max-width: 576px) {
          .combos__items--item--imagenes--numero {
            font-size: 18px;
            padding: 6px 8px; }
            .combos__items--item--imagenes--numero.dosCifras {
              font-size: 16px;
              padding-block: 10px;
              bottom: 50px;
              right: -30px; } }
    .combos__items--item--info {
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: linear-gradient(45deg, #1b1d1d 0%, #404242 100%);
      padding: 30px;
      color: #fff;
      border-radius: 15px;
      margin-top: -120px;
      padding-top: 110px;
      width: 100%; }
      @media screen and (max-width: 576px) {
        .combos__items--item--info {
          padding: 15px;
          padding-top: 100px; } }
      .combos__items--item--info--titulo {
        display: flex;
        align-items: center;
        gap: 15px; }
        @media screen and (max-width: 576px) {
          .combos__items--item--info--titulo {
            flex-direction: column; } }
        .combos__items--item--info--titulo--etiqueta {
          background-color: #539348;
          padding: 6px 12px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          gap: 5px; }
          .combos__items--item--info--titulo--etiqueta.noche {
            background-color: #f8ae00;
            color: #0c0c0c; }
          .combos__items--item--info--titulo--etiqueta span {
            font-size: 12px;
            font-weight: 900; }
          .combos__items--item--info--titulo--etiqueta i {
            font-size: 15px; }
      .combos__items--item--info h2 {
        font-size: 28px;
        font-weight: 800; }
        @media screen and (max-width: 576px) {
          .combos__items--item--info h2 {
            font-size: 24px; } }
      .combos__items--item--info h3 {
        font-size: 20px;
        font-weight: 500; }
        @media screen and (max-width: 576px) {
          .combos__items--item--info h3 {
            font-size: 15px;
            font-weight: 400; } }
      .combos__items--item--info h4 {
        color: #f8ae00;
        font-size: 26px; }

.swiper-pagination {
  bottom: -25px; }

.swiper-pagination-bullet {
  background-color: #fff; }

.swiper-button-next,
.swiper-button-prev {
  transition: all 0.2s; }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 18px;
    background-color: #fff;
    border-radius: 50%;
    padding: 10px 15px;
    opacity: .5; }
  .swiper-button-next:hover::after,
  .swiper-button-prev:hover::after {
    opacity: 1; }

.app {
  position: relative;
  max-width: 1400px;
  margin: 80px 25px 15px 25px;
  margin-inline: auto; }
  .app h1 {
    font-size: 40px;
    font-weight: 800;
    text-align: center;
    background-image: linear-gradient(45deg, #f8ae00, #539348);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent; }
  .app__cont {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: 1s ease-in;
    padding-block: 30px; }
    .app__cont img {
      max-width: 600px;
      margin-left: 50%;
      margin-top: 10px; }
      @media screen and (max-width: 576px) {
        .app__cont img {
          margin-left: 0;
          max-width: 380px; } }
      @media screen and (max-width: 380px) {
        .app__cont img {
          max-width: 340px; } }
    @media screen and (max-width: 576px) {
      .app__cont.pasos {
        margin-bottom: 300px; } }
    .app__cont h2 {
      font-size: 35px;
      font-weight: 900;
      margin-left: 50%; }
      @media screen and (max-width: 576px) {
        .app__cont h2 {
          margin-left: 0;
          padding-inline: 10px;
          font-size: 30px; } }
    .app__cont p {
      font-size: 20px;
      line-height: 1.5;
      font-weight: 400;
      margin-left: 50%; }
      .app__cont p span {
        background-color: #539348;
        padding: 6px 10px;
        border-radius: 3px;
        font-weight: 800;
        font-size: 16px; }
      @media screen and (max-width: 576px) {
        .app__cont p {
          margin-left: 0;
          padding-inline: 10px;
          font-size: 16px; } }
    .app__cont--paso {
      display: flex;
      align-items: center;
      gap: 25px;
      align-items: flex-start;
      margin-left: 50%;
      padding-block: -20px;
      margin-bottom: 30px;
      opacity: 0; }
      @media screen and (max-width: 576px) {
        .app__cont--paso {
          margin-left: 0;
          padding-inline: 10px;
          gap: 10px;
          flex-direction: column; } }
      .app__cont--paso.hidden {
        opacity: 0;
        translate: 0 20%; }
      .app__cont--paso.show {
        opacity: 1;
        translate: 0 0; }
      .app__cont--paso--text {
        display: flex;
        flex-direction: column;
        gap: 5px; }
        .app__cont--paso--text h2 {
          margin-left: 0;
          font-size: 28px; }
          @media screen and (max-width: 576px) {
            .app__cont--paso--text h2 {
              font-size: 20px; } }
        .app__cont--paso--text img {
          margin-left: 0;
          max-width: 600px; }
          @media screen and (max-width: 576px) {
            .app__cont--paso--text img {
              max-width: 380px; } }
          @media screen and (max-width: 380px) {
            .app__cont--paso--text img {
              max-width: 340px; } }
        .app__cont--paso--text--diagrama {
          display: flex;
          align-items: center;
          gap: 5px;
          justify-content: space-between;
          padding-block: 10px;
          border: 2px dashed #ffffff6d;
          border-radius: 10px;
          padding-inline: 20px; }
          @media screen and (max-width: 576px) {
            .app__cont--paso--text--diagrama {
              flex-wrap: wrap;
              gap: 0;
              padding-inline: 0; } }
          .app__cont--paso--text--diagrama--empanadas {
            position: relative; }
            .app__cont--paso--text--diagrama--empanadas--counter {
              position: absolute;
              top: 0;
              right: -20px;
              font-size: 32px;
              font-weight: 700;
              display: flex;
              align-items: center;
              gap: 3px; }
              @media screen and (max-width: 576px) {
                .app__cont--paso--text--diagrama--empanadas--counter {
                  top: -10px; } }
              .app__cont--paso--text--diagrama--empanadas--counter span {
                color: #fff;
                font-size: 35px;
                font-weight: 800; }
            .app__cont--paso--text--diagrama--empanadas img {
              max-width: 90px;
              transform: rotate(-40deg); }
              @media screen and (max-width: 576px) {
                .app__cont--paso--text--diagrama--empanadas img {
                  max-width: 55px; } }
              .app__cont--paso--text--diagrama--empanadas img.empanadaCounter {
                opacity: 0; }
                .app__cont--paso--text--diagrama--empanadas img.empanadaCounter.show {
                  animation: aparece .2s forwards ease-in-out; }
                .app__cont--paso--text--diagrama--empanadas img.empanadaCounter.hidden {
                  opacity: 0; }
          .app__cont--paso--text--diagrama h3 {
            font-size: 60px;
            opacity: 0; }
            @media screen and (max-width: 576px) {
              .app__cont--paso--text--diagrama h3 {
                font-size: 40px; } }
            .app__cont--paso--text--diagrama h3.show {
              animation: aparece .15s forwards 1.8s ease-in-out; }
            .app__cont--paso--text--diagrama h3.hidden {
              opacity: 0; }
          .app__cont--paso--text--diagrama--coque {
            scale: 0; }
            .app__cont--paso--text--diagrama--coque.show {
              animation: fullAparece .15s forwards 2s ease-in-out; }
            .app__cont--paso--text--diagrama--coque.hidden {
              scale: 0; }
            .app__cont--paso--text--diagrama--coque img {
              max-width: 50px; }
              @media screen and (max-width: 576px) {
                .app__cont--paso--text--diagrama--coque img {
                  max-width: 30px; } }
          .app__cont--paso--text--diagrama--boton {
            position: relative; }
            .app__cont--paso--text--diagrama--boton img {
              max-width: 160px; }
              @media screen and (max-width: 576px) {
                .app__cont--paso--text--diagrama--boton img {
                  max-width: 100px; } }
              .app__cont--paso--text--diagrama--boton img.botonPedir {
                scale: 0; }
                .app__cont--paso--text--diagrama--boton img.botonPedir.show {
                  animation: fullAparece .15s forwards 2.5s ease-in-out; }
                .app__cont--paso--text--diagrama--boton img.botonPedir.hidden {
                  scale: 0; }
            .app__cont--paso--text--diagrama--boton--flecha {
              position: absolute;
              right: 0;
              top: 40px; }
              @media screen and (max-width: 576px) {
                .app__cont--paso--text--diagrama--boton--flecha {
                  top: 20px; } }
              .app__cont--paso--text--diagrama--boton--flecha img {
                max-width: 90px;
                mask: linear-gradient(#000 0 0), linear-gradient(-90deg, #000 50%, #0000 0) content-box 0% 0%/200% 200% no-repeat;
                mask-composite: exclude;
                mask-position: 100% 100%; }
                @media screen and (max-width: 576px) {
                  .app__cont--paso--text--diagrama--boton--flecha img {
                    max-width: 50px; } }
              .app__cont--paso--text--diagrama--boton--flecha.show img {
                animation: seDibuja .3s forwards 3s ease-in-out; }
              .app__cont--paso--text--diagrama--boton--flecha.hidden img {
                mask-position: 100% 100%; }
          .app__cont--paso--text--diagrama--combo {
            scale: 0;
            position: relative; }
            .app__cont--paso--text--diagrama--combo.show {
              animation: fullAparece .12s forwards 3.2s ease-in-out; }
            .app__cont--paso--text--diagrama--combo.hidden {
              scale: 0; }
            .app__cont--paso--text--diagrama--combo img {
              max-width: 180px; }
              @media screen and (max-width: 576px) {
                .app__cont--paso--text--diagrama--combo img {
                  max-width: 100px; } }
            .app__cont--paso--text--diagrama--combo--precio {
              position: absolute;
              top: 5px;
              font-size: 30px;
              font-weight: 700;
              color: #f8ae00;
              text-align: center; }
              @media screen and (max-width: 576px) {
                .app__cont--paso--text--diagrama--combo--precio {
                  font-size: 24px;
                  top: -5px; } }
      .app__cont--paso p {
        font-size: 20px;
        font-weight: 500;
        margin-left: 0; }
        .app__cont--paso p strong {
          font-weight: 700; }
        @media screen and (max-width: 576px) {
          .app__cont--paso p {
            font-size: 16px; } }
      .app__cont--paso span {
        font-size: 30px;
        font-weight: 800;
        border-radius: 50%;
        padding: 10px 20px;
        background-color: #f8ae00;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        color: #0c0c0c;
        position: relative;
        z-index: 2; }
        @media screen and (max-width: 576px) {
          .app__cont--paso span {
            font-size: 22px;
            padding: 6px 12px; } }
    .app__cont a {
      margin-left: 50%;
      text-decoration: none;
      font-size: 20px;
      font-weight: 800;
      background-color: #fff;
      color: #0c0c0c;
      padding: 15px 15px;
      border-radius: 10px;
      width: fit-content;
      cursor: pointer;
      transition: all .2s; }
      @media screen and (max-width: 576px) {
        .app__cont a {
          margin-inline: 10px;
          font-size: 16px; } }
      .app__cont a:hover {
        background-color: #f8ae00;
        color: #0c0c0c; }
  .app__cont-phone {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #f8ae00;
    background: linear-gradient(45deg, #f8ae00 0%, #539348 80%);
    z-index: 0;
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    color: #fff;
    transition: .5s;
    transition-delay: .3s; }
    @media screen and (max-width: 576px) {
      .app__cont-phone {
        margin-inline: 10px; } }
    .app__cont-phone h2,
    .app__cont-phone ul,
    .app__cont-phone a,
    .app__cont-phone p {
      margin-left: 50%; }
      @media screen and (max-width: 576px) {
        .app__cont-phone h2,
        .app__cont-phone ul,
        .app__cont-phone a,
        .app__cont-phone p {
          margin-left: 0; } }
    @media screen and (max-width: 576px) {
      .app__cont-phone p {
        font-size: 14px;
        line-height: 1.5; } }
    .app__cont-phone h2 {
      font-size: 30px; }
      @media screen and (max-width: 576px) {
        .app__cont-phone h2 {
          font-size: 22px; } }
    .app__cont-phone a {
      margin-left: 50%;
      text-decoration: none;
      font-size: 16px;
      font-weight: 600;
      background-color: #0c0c0c;
      padding: 10px 12px;
      border-radius: 5px;
      width: fit-content;
      cursor: pointer;
      transition: all .2s;
      display: flex;
      align-items: center;
      gap: 10px; }
      .app__cont-phone a:hover {
        background-color: #539348;
        color: #fff; }
      .app__cont-phone a.link-secu {
        background-color: transparent;
        color: #0c0c0c;
        padding: 0;
        font-weight: 600; }
        .app__cont-phone a.link-secu:hover {
          transform: translateX(5px); }
        .app__cont-phone a.link-secu span {
          font-size: 16px; }
        .app__cont-phone a.link-secu i {
          font-size: 18px; }
    .app__cont-phone.hidden {
      opacity: 0; }
    .app__cont-phone.show {
      opacity: 1; }

.sticky {
  width: 50%;
  aspect-ratio: 1;
  position: sticky;
  bottom: 0;
  margin: 0 auto;
  z-index: 3;
  pointer-events: none;
  transition: all .3s; }
  .sticky img {
    width: 120%;
    position: absolute;
    bottom: 0;
    translate: -50% 0; }
  .sticky.hidden {
    opacity: 0;
    translate: 0 20%; }
  .sticky.show {
    opacity: 1;
    translate: 0 0; }

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false; }

.counter {
  counter-reset: num var(--num);
  font: 800 40px "Lato", sans-serif; }
  @media screen and (max-width: 576px) {
    .counter {
      font: 800 30px "Lato", sans-serif; } }
  .counter.show {
    animation: counter 2.5s forwards alternate ease-in-out; }
  .counter::after {
    content: counter(num); }

@keyframes counter {
  from {
    --num: 0; }
  to {
    --num: 12; } }