* {
  box-sizing: border-box;
  outline: none;
  margin: 0;
  padding: 0;
}
body {
  /* background-color: #e4e4e4; */
  background-color: #84817a85;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  section {
    .wrap {
      background-color: #232323;
      display: flex;
      display: block;
      width: 100%;
      color: white;
      font-size: 20px;
      .titulo {
        text-align: center;
        padding: 20px 0px;
        font-size: 30px;
      }
      p {
        text-align: center;
        padding: 20px 0px;
        margin: 20px 0px;
        font-size: 25px;
      }
      .nav-bar {
        display: flex;
        justify-content: center;
        text-decoration: none;
        /* background-color: #6a1b9a; */
        background-color: #d63031;
        width: 100%;
        max-height: 60px;
        .logo {
          width: 45px;
          max-height: 50px;
          vertical-align: top;
          margin-right: 20px;
          img {
            height: 100%;
          }
        }
        ul {
          display: flex;
          justify-content: space-around;
          list-style: none;
          /* width: 35%; */
          li {
            font-size: 16px;
            padding: 15px 20px;
            &:hover {
              /* background-color: #42006a; */
              background-color: rgb(28, 28, 28);
            }
            a {
              text-decoration: none;
              color: white;
            }
          }
        }
        .dropdown {
          display: none;
        }
      }
    }
  }

  main {
    padding-bottom: 35px;
    .div-content {
      width: 1000px;
      margin: 0px auto;
      .titulo-contenido {
        padding: 20px 20px;
        font-size: 35px;
      }
      .titulo-servicios {
        padding: 20px;
        font-size: 30px;
      }

      .titulo-testimonio {
        padding: 20px;
        font-size: 30px;
      }

      .titulo-contenido-1 {
        padding: 20px 20px;
      }
      .opciones {
        display: flex;
        justify-content: space-around;
        width: 100%;
        .primera-opcion,
        .segunda-opcion,
        .tercera-opcion {
          box-sizing: border-box;
          box-shadow:
            rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
            rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
          border: 1px solid rgb(180, 180, 180);
          border-radius: 7px;
          width: 30%;
          padding: 20px;
          img {
            max-width: 120px;
          }
        }
      }
      .container {
        display: none;
      }

      ul {
        padding: 20px 25px;
        list-style: none;
        li {
          a {
            text-decoration: none;
            color: black;
            &:hover {
              color: red;
            }
          }
        }
      }
      .servicios {
        li {
          .servicio:hover {
            color: red;
            cursor: pointer;
          }
        }
      }
      .descripcion {
        font-style: italic;
        font-family: "Times New Roman", Times, serif;
        font-size: 25px;
        text-align: center;
      }
      .titulo-contacto {
        padding: 20px 20px;
        font-size: 30px;
      }

      .servicios-personales {
        .servicio-carta,
        .servicio-ayuda {
          padding: 20px 20px;
          .ejemplos {
            display: flex;
            .img {
              width: 45%;
              img {
                text-decoration: none;
                width: 100%;
              }
            }
          }
        }
        .servicio-solar,
        .servicio-sinastria {
          padding: 20px 20px;
          .ejemplos {
            display: flex;

            .img {
              width: 50%;
              height: auto;
              &.img-2 {
                margin: auto 0px;
              }
              img {
                width: 100%;
              }
            }
          }
        }
        .servicio-carta,
        .servicio-solar,
        .servicio-sinastria,
        .servicio-ayuda {
          .requisitos {
            margin-bottom: 30px;
          }
          .descripcion-servicio {
            margin-bottom: 20px;
            .requisitos-carta-natal {
              span {
                margin-bottom: 40px;
                color: red;
                text-decoration: underline;
              }
            }
            p {
              margin-top: 20px;
            }
          }
          .btn-youtube {
            display: inline-block;
            margin-top: 30px;
          }
        }

        .servicio-carta {
          .detalles-compra {
            margin-top: 30px;
            .detalle-1,
            .detalle-2 {
              .descripcion-detalle-1 {
                ul {
                  list-style-type: circle;
                }
              }
            }
          }
          .cta-venta {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .btn,
            .btn-dudas {
              margin: 10px 10px 10px 0px;
              padding: 15px 30px;
              width: auto;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
              a {
                font-size: 18px;
                text-decoration: none;
                color: white;
              }
              &:hover {
                background-position: right center;
                /* change the direction of the change here */
                color: #fff;
                text-decoration: none;
              }
              &:active {
                transform: scale(0.95);
              }
            }
            & .btn-dudas {
              font-size: 12px;
              opacity: 0.5;
              &:hover {
                opacity: 1;
              }
            }
            p {
              margin: 20px 0px;
            }

            .confianza {
              margin-top: 50px;
              p {
                margin: 20px 0px;
              }
            }
          }
          .descripcion-servicio {
            .requisitos-carta-natal {
              ul {
                list-style-type: circle;
              }
            }
          }
        }
        .servicio-solar {
          .detalles-compra {
            margin-top: 30px;
            .detalle-1,
            .detalle-2 {
              .descripcion-detalle-2 {
                ul {
                  list-style-type: circle;
                }
              }
            }
          }
          .cta-venta {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .btn,
            .btn-dudas {
              margin: 10px 10px 10px 0px;
              padding: 15px 30px;
              width: auto;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
              a {
                font-size: 18px;
                text-decoration: none;
                color: white;
              }
              &:hover {
                background-position: right center;
                /* change the direction of the change here */
                color: #fff;
                text-decoration: none;
              }
              &:active {
                transform: scale(0.95);
              }
            }
            p {
              margin: 20px 0px;
            }
            & .btn-dudas {
              font-size: 12px;
              opacity: 0.5;
              &:hover {
                opacity: 1;
              }
            }
            .confianza {
              margin-top: 50px;
              p {
                margin: 20px 0px;
              }
            }
          }
        }
        .servicio-sinastria {
          .detalles-compra {
            margin-top: 30px;
            .detalle-1,
            .detalle-2 {
              .descripcion-detalle-3 {
                ul {
                  list-style-type: circle;
                }
              }
            }
          }
          .cta-venta {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .btn,
            .btn-dudas {
              margin: 10px 10px 10px 0px;
              padding: 15px 30px;
              width: auto;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
              a {
                font-size: 18px;
                text-decoration: none;
                color: white;
              }
              &:hover {
                background-position: right center;
                /* change the direction of the change here */
                color: #fff;
                text-decoration: none;
              }
              &:active {
                transform: scale(0.95);
              }
            }
            p {
              margin: 20px 0px;
            }
            & .btn-dudas {
              font-size: 12px;
              opacity: 0.5;
              &:hover {
                opacity: 1;
              }
            }
            .confianza {
              margin-top: 50px;
              p {
                margin: 20px 0px;
              }
            }
          }
        }
        .servicio-ayuda {
          .detalles-compra {
            margin-top: 30px;
            .detalle-1,
            .detalle-2 {
              .descripcion-detalle-4 {
                ul {
                  list-style-type: circle;
                }
              }
            }
          }
          .cta-venta {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .btn,
            .btn-dudas {
              margin: 10px 10px 10px 0px;
              padding: 15px 30px;
              width: auto;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
              a {
                font-size: 18px;
                text-decoration: none;
                color: white;
              }
              &:hover {
                background-position: right center;
                /* change the direction of the change here */
                color: #fff;
                text-decoration: none;
              }
              &:active {
                transform: scale(0.95);
              }
            }
            p {
              margin: 20px 0px;
            }
            & .btn-dudas {
              font-size: 12px;
              opacity: 0.5;
              &:hover {
                opacity: 1;
              }
            }
            .confianza {
              margin-top: 50px;
              p {
                margin: 20px 0px;
              }
            }
          }
        }
      }
      .formacion-privada {
        margin-top: 20px;
        padding: 20px;
        .formacion-principiante {
          .titulo-formacion {
            font-size: 26px;
            margin-bottom: 20px;
          }
          .programa {
            margin-top: 30px;
            ul {
              list-style-type: circle;
            }
          }
          .detalles-compra {
            margin-top: 30px;
            .detalle-1 {
              .descripcion-detalle-1 {
                ul {
                  list-style-type: circle;
                }
              }
            }
          }
          .cta-venta {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .btn,
            .btn-dudas {
              margin: 10px 10px 10px 0px;
              padding: 15px 30px;
              width: auto;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
              a {
                font-size: 18px;
                text-decoration: none;
                color: white;
              }
              &:hover {
                background-position: right center;
                /* change the direction of the change here */
                color: #fff;
                text-decoration: none;
              }
              &:active {
                transform: scale(0.95);
              }
            }
            p {
              margin: 20px 0px;
            }
            & .btn-dudas {
              font-size: 12px;
              opacity: 0.5;
              &:hover {
                opacity: 1;
              }
            }
            .confianza {
              margin-top: 50px;
              p {
                margin: 20px 0px;
              }
            }
          }
        }
      }
      .descripcion-servicio {
        .requisitos-carta-natal {
          .listas-gracias {
            list-style-type: disc;
          }
        }
      }
      .cta-venta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .btn,
        .btn-dudas {
          margin: 10px 10px 10px 0px;
          padding: 15px 30px;
          width: auto;
          text-align: center;
          text-transform: uppercase;
          text-decoration: none;
          transition: 0.5s;
          background-size: 200% auto;
          color: white;
          border-radius: 10px;
          display: block;
          border: 0px;
          font-weight: 700;
          box-shadow: 0px 0px 14px -7px #f09819;
          background-image: linear-gradient(
            45deg,
            #ff512f 0%,
            #f09819 51%,
            #ff512f 100%
          );
          cursor: pointer;
          user-select: none;
          -webkit-user-select: none;
          touch-action: manipulation;
          a {
            font-size: 18px;
            text-decoration: none;
            color: white;
          }
          &:hover {
            background-position: right center;
            /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
          &:active {
            transform: scale(0.95);
          }
        }
        & .btn-dudas {
          font-size: 12px;
          opacity: 0.5;
          &:hover {
            opacity: 1;
          }
        }
      }
    }
    .div-content {
      .xenon {
        padding: 20px;
        font-size: 20px;
      }
    }
    .div-content {
      .servicios-personales {
        .servicio-carta {
          .titulo-servicio {
            font-size: 26px;
            margin-bottom: 20px;
          }
          .ejemplos {
            display: flex;
            flex-direction: column;
            .fotos {
              display: flex;
              flex-direction: row;
              margin-bottom: 40px;
            }
            .video {
              width: 40%;
              align-self: center;
              video {
                width: 100%;
              }
            }
          }
          button {
            border: none;
            background-color: transparent;
            .btn-youtube {
              margin: 10px;
              padding: 15px 30px;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
            }

            .btn-youtube:hover {
              background-position: right center;
              /* change the direction of the change here */
              color: #fff;
              text-decoration: none;
            }

            .btn-youtube:active {
              transform: scale(0.95);
            }
          }
        }
        .servicio-solar {
          .titulo-servicio {
            font-size: 26px;
            margin-bottom: 20px;
          }
          .ejemplos {
            display: flex;
            flex-direction: column;
            .fotos {
              display: flex;
              flex-direction: row;
              margin-bottom: 40px;
            }
            .video {
              width: 40%;
              align-self: center;
              video {
                width: 100%;
              }
            }
          }
          button {
            border: none;
            background-color: transparent;
            .btn-youtube {
              margin: 10px;
              padding: 15px 30px;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
            }

            .btn-youtube:hover {
              background-position: right center;
              /* change the direction of the change here */
              color: #fff;
              text-decoration: none;
            }

            .btn-youtube:active {
              transform: scale(0.95);
            }
          }
        }
        .servicio-sinastria {
          .titulo-servicio {
            font-size: 26px;
            margin-bottom: 20px;
          }
          .ejemplos {
            display: flex;
            .fotos {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: 20px 0px 40px 0px;
            }
            .video {
              width: 40%;
              align-self: center;
              video {
                width: 100%;
              }
            }
          }
          button {
            border: none;
            background-color: transparent;
            .btn-youtube {
              margin: 10px;
              padding: 15px 30px;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
            }

            .btn-youtube:hover {
              background-position: right center;
              /* change the direction of the change here */
              color: #fff;
              text-decoration: none;
            }

            .btn-youtube:active {
              transform: scale(0.95);
            }
          }
        }
        .servicio-ayuda {
          .titulo-servicio {
            font-size: 26px;
            margin-bottom: 20px;
          }
          .ejemplos {
            display: flex;
            .fotos {
              display: flex;
              flex-direction: row;
              margin: 20px 0px 40px 0px;
            }
            .video {
              width: 40%;
              align-self: center;
              video {
                width: 100%;
              }
            }
          }
          button {
            border: none;
            background-color: transparent;
            .btn-youtube {
              margin: 10px;
              padding: 15px 30px;
              text-align: center;
              text-transform: uppercase;
              text-decoration: none;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;
              border-radius: 10px;
              display: block;
              border: 0px;
              font-weight: 700;
              box-shadow: 0px 0px 14px -7px #f09819;
              background-image: linear-gradient(
                45deg,
                #ff512f 0%,
                #f09819 51%,
                #ff512f 100%
              );
              cursor: pointer;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
            }

            .btn-youtube:hover {
              background-position: right center;
              /* change the direction of the change here */
              color: #fff;
              text-decoration: none;
            }

            .btn-youtube:active {
              transform: scale(0.95);
            }
          }
        }
      }
    }
    .div-content {
      .testimonios,
      .testimonios-reales {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .img {
          width: 50%;
          img {
            width: 100%;
          }
        }
      }
    }
    .div-content {
      .formulario {
        display: flex;
        width: 100%;
        padding: 20px;
        justify-content: center;
        form {
          display: flex;
          flex-direction: column;
          background-color: #fd79a8;
          border-radius: 20px;
          padding: 20px;
          label {
            padding: 20px;
          }
          .btn-youtube {
            margin: 10px 10px 10px 10px;
            padding: 15px 30px;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;
            border-radius: 10px;
            display: block;
            border: 0px;
            font-weight: 700;
            box-shadow: 0px 0px 14px -7px #f09819;
            background-image: linear-gradient(
              45deg,
              #ff512f 0%,
              #f09819 51%,
              #ff512f 100%
            );
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
          }
          .btn-youtube:hover {
            background-position: right center;
            /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
          .btn-youtube:active {
            transform: scale(0.95);
          }
        }
      }
    }
    .div-content {
      .formacion-personalizada {
        padding: 20px;
      }
    }
    .div-content {
      /* CONTACTO: CTA principal + formulario mejorado */
      .contacto-cta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: 20px 20px;
      }

      .contacto-cta .btn,
      .contacto-cta .btn-dudas {
        margin: 0;
        padding: 15px 30px;
        width: auto;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        display: inline-block;
        border: 0px;
        font-weight: 700;
        box-shadow: 0px 0px 14px -7px #f09819;
        background-image: linear-gradient(
          45deg,
          #ff512f 0%,
          #f09819 51%,
          #ff512f 100%
        );
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .contacto-cta .btn:hover,
      .contacto-cta .btn-dudas:hover {
        background-position: right center;
      }

      .contacto-cta .btn-dudas {
        font-size: 12px;
        opacity: 0.55;
      }

      .contacto-cta .btn-dudas:hover {
        opacity: 1;
      }

      .contacto-nota {
        margin-top: 5px;
        opacity: 0.9;
        line-height: 1.4;
      }

      .separador {
        margin: 30px 0;
        opacity: 0.25;
      }

      .titulo-form {
        margin: 20px 0 10px;
      }

      /* Mejora inputs del formulario (sin romper tu estilo actual) */
      .formulario form input,
      .formulario form select,
      .formulario form textarea {
        width: 100%;
        margin-top: 8px;
        padding: 12px;
        border-radius: 10px;
        border: 0;
        outline: none;
        box-sizing: border-box;
      }

      /* Lista de redes más limpia */
      .redes-contacto {
        list-style: none;
        padding-left: 0;
        margin-top: 10px;
      }

      .redes-contacto li {
        margin: 10px 0;
      }
      .titulo-form {
        margin: 0px 20px;
      }
      .redes-contacto {
        margin: 0px 20px;
      }
    }
  }
  section {
    .wrap {
      .main {
        width: 1000px;
        margin: 0px auto;
        .div-content {
          display: flex;
          justify-content: space-around;
          padding: 40px 30px;
          width: 100%;
          .boton-1,
          .boton-2 {
            margin: 10px 10px 10px 10px;
            padding: 15px 30px;
            width: 35%;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;
            border-radius: 10px;
            display: block;
            border: 0px;
            font-weight: 700;
            box-shadow: 0px 0px 14px -7px #f09819;
            background-image: linear-gradient(
              45deg,
              #ff512f 0%,
              #f09819 51%,
              #ff512f 100%
            );
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            a {
              font-size: 18px;
              text-decoration: none;
              color: white;
            }
            &:hover {
              background-position: right center;
              /* change the direction of the change here */
              color: #fff;
              text-decoration: none;
            }
            &:active {
              transform: scale(0.95);
            }
          }
          .boton-2 {
            opacity: 0.5;
            &:hover {
              opacity: 1;
            }
          }
        }
        & h2 {
          text-align: center;
          padding-top: 50px;
          text-transform: uppercase;
          font-size: 20px;
        }
      }
    }
  }
  .descripcion {
    width: 1000px;
    margin: 0 auto;
    .titulo {
      text-align: center;
      text-transform: uppercase;
      padding-top: 20px;
    }
    .descripcion-seccion {
      padding: 20px;
      font-size: 20px;
    }
  }
  .div-content-reserva {
    display: flex;
    justify-content: center;
    .btn-youtube {
      margin: 0px 0px 20px 0px;
      padding: 15px 30px;
      max-width: 400px;
      text-transform: uppercase;
      text-decoration: none;
      text-align: center;
      font-size: 22px;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;
      border-radius: 10px;
      display: block;
      border: 0px;
      font-weight: 700;
      box-shadow: 0px 0px 14px -7px #f09819;
      background-image: linear-gradient(
        45deg,
        #ff512f 0%,
        #f09819 51%,
        #ff512f 100%
      );
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }
    .btn-youtube:hover {
      background-position: right center;
      /* change the direction of the change here */
      color: #fff;
      text-decoration: none;
    }
    .btn-youtube:active {
      transform: scale(0.95);
    }
  }
  .div-content-despues {
    width: 1000px;
    margin: 0px auto;
    padding: 30px 0px;
    .titulo-despues {
      font-size: 30px;
      padding: 20px;
    }
    .opciones-despues {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: self-start;
      a {
        padding: 20px;
        font-size: 20px;
        text-decoration: none;
        color: black;

        &:hover {
          color: yellow;
        }
      }
    }
  }
  .sobre-mi {
    width: 1000px;
    margin: 0px auto;
    .titulo-sobre-mi {
      font-size: 30px;
      padding: 20px;
    }
    .descripcion-sobre-mi {
      padding: 20px;
      font-size: 20px;
      width: auto;
    }
    a {
      display: inline-block;
      text-decoration: none;
      margin: 20px 0px;
      font-size: 20px;
      padding-left: 20px;
    }
  }
  footer {
    width: 100%;
    background-color: #7e57c2;
    color: #e4e4e4;
    h2 {
      text-align: center;
      font-size: 15px;
      padding: 20px 0px;
    }
  }
}
@media screen and (max-width: 500px) {
  body {
    section {
      .wrap {
        .nav-bar {
          height: 200px;
          ul {
            display: none;
          }
          .logo {
            margin-right: 20px;
            margin-top: 5px;
          }
          .dropdown {
            position: relative;
            display: inline-block;
            padding-top: 15px;
            cursor: pointer;
            &:hover {
              color: yellow;
            }
            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #2e2d2d;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
              padding: 12px 16px;
              z-index: 1;
              ul {
                display: inline-block;
                width: 100%;
                li {
                  &:hover {
                    background-color: #9617e5;
                  }
                }
              }
            }
          }
          /* .dropdown:hover .dropdown-content {
            display: block;
          } */
          .dropdown {
            .dropdown-content-on {
              display: block;
            }
          }
        }
      }
    }
    .descripcion {
      width: auto;
    }
    main {
      .div-content {
        width: auto;

        .titulo-contenido {
          padding: 20px 20px;
        }
        .opciones {
          flex-direction: column;
          justify-content: space-between;
          height: auto;
          padding: 0px 80px;
          .primera-opcion,
          .segunda-opcion,
          .tercera-opcion {
            margin-bottom: 25px;
            width: auto;
          }
        }
        .off {
          display: none;
        }
      }
      .div-content {
        p span {
          color: red;
          display: inline-block;
          &.colorblack {
            color: black;
          }
        }
        .titulo-contenido-1 {
          padding: 20px 0px 0px 45px;
        }
        .descripcion {
          max-width: 450px;
        }
      }
      .div-content {
        .container {
          padding: 20px;
          display: flex;
          .slider-wrapper {
            position: relative;
            max-width: 300px;
            margin: 0px auto;
            .slider {
              width: 100%;
              display: flex;
              /* aspect-ratio: 16 / 9;   QUITAR ESTA PROPIEDAD */
              overflow-x: auto;
              scroll-snap-type: x mandatory;
              scroll-behavior: smooth;
              box-shadow:
                rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
                rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
              border-radius: 10px;

              img {
                flex: 1 0 100%;
                width: 100%;
                scroll-snap-align: start;
                object-fit: cover;
              }
            }
            .slider-nav {
              display: flex;
              column-gap: 1rem;
              position: absolute;
              bottom: 1.25rem;
              left: 50%;
              transform: translateX(-50%);
              z-index: 1;
              a {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #b72130;
                opacity: 0.5;
                transition: opacity ease 250ms;

                &:hover {
                  opacity: 1;
                }
              }
            }
          }
        }
      }
    }
    .sobre-mi {
      width: auto;
    }
    section {
      .wrap {
        .main {
          width: auto;
          .div-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            .boton-1,
            .boton-2 {
              width: 80%;
              padding: 15px 30px;
            }
          }
        }
      }
    }
  }
}