.lo {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    overflow: hidden;
  }

  .image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que la imagen cubra sin distorsión */
  }

  .paco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
  }

  .wamayor {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  .wawa {
    font-size: 1.5em;
    margin-bottom: 1.5em;
  }
  .enlaceprincipal {
    text-decoration: none;
  }

  .buttoms-inicio,
  .buttoms-inicio *,
  .buttoms-inicio:after,
  .buttoms-inicio:before,
  .buttoms-inicio:after,
  .buttoms-inicio:before {
    border: 0 solid;
    box-sizing: border-box;
  }

  .buttoms-inicio {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: button;
    background-color: #000;
    background-image: none;
    color: #fff;
    cursor: pointer;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
      Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 100%;
    font-weight: 900;
    line-height: 1.5;
    margin: 0;
    padding: 1rem 2rem;
    position: relative;
    text-transform: uppercase;
  }

  .buttoms-inicio:before {
    --progress: 100%;
    background: #fff;
    -webkit-clip-path: polygon(
      100% 0,
      var(--progress) var(--progress),
      0 100%,
      100% 100%
    );
    clip-path: polygon(
      100% 0,
      var(--progress) var(--progress),
      0 100%,
      100% 100%
    );
    content: "";
    inset: 0;
    position: absolute;
    transition: -webkit-clip-path 0.2s ease;
    transition: clip-path 0.2s ease;
    transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
  }

  .buttoms-inicio:hover:before {
    --progress: 0%;
  }

  .buttoms-inicio .text-space {
    display: block;
    overflow: hidden;
    position: relative;
  }

  .buttoms-inicio .text-buttoms {
    display: block;
    font-weight: 900;
    mix-blend-mode: difference;
    position: relative;
  }

  .buttoms-inicio:hover .text-buttoms {
    -webkit-animation: move-up-alternate 0.3s ease forwards;
    animation: move-up-alternate 0.3s ease forwards;
  }

  @-webkit-keyframes move-up-alternate {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(80%);
    }
    51% {
      transform: translateY(-80%);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes move-up-alternate {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(80%);
    }
    51% {
      transform: translateY(-80%);
    }
    to {
      transform: translateY(0);
    }
  }

  .btn-bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Estilos para pantallas móviles */
  @media (max-width: 768px) {
    .image {
      object-position: right; 
    }

    .wamayor {
      font-size: 2em;
    }

    .wawa {
      font-size: 1.2em;
    }
  }
.kakm {
    display: flex;
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
  }

  .baksa {
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: white; 
    max-width: 1200px; 
    width: 100%; 
    margin: 20px; 
  }

  .vao-sp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .namaless-pocor {
    display: flex; 
    align-items: center; 
    flex: 1 1 23%;
    padding: 15px;
    margin: 10px;
    box-sizing: border-box;
    border-radius: 5px; 
    transition: background-color 0.3s; 
  }

  .icon {
    width: 40px;
    height: 40px; 
    margin-right: 15px;
  }

  .boff {
    font-size: 18px; 
    margin-bottom: 5px; 
    font-weight: normal; 
  }

  .boffta {
    font-weight: bold;
    font-size: 22px;
    padding: 8px 10px 10px 10px;
    border-radius: 25px;
    display: inline-block; 
  }

  .boffta-1 {
    background-color: #ff7f7f; /* Rosado */
  }
  .boffta-2 {
    background-color: #7fff7f; /* Verde */
  }
  .boffta-3 {
    background-color: #ffff7f; /* Amarillo */
  }
  .boffta-4 {
    background-color: #7f7fff; /* Morado */
  }

  @media (max-width: 768px) {
    .namaless-pocor {
      flex: 1 1 45%; 
    }
  }

  @media (max-width: 480px) {
    .vao-sp  {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto; 
      padding-bottom: 20px; 
    }

    .namaless-pocor {
      flex: 0 0 80%; 
      margin: 0 10px; 
    }

    .icon {
      width: 30px; 
      height: 30px;
    }

    .boff {
      font-size: 16px; /* Reduzco el tamaño del texto */
    }

    .boffta {
      font-size: 14px; /* Subtexto más pequeño en móvil */
    }

    /* Quitar scroll bar en algunos navegadores */
    .vao-sp ::-webkit-scrollbar {
      display: none;
    }

    .vao-sp  {
      -ms-overflow-style: none;  /* Internet Explorer 10+ */
      scrollbar-width: auto;  /* Firefox */
    }
  }