/* Section Portada */
.portada {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 2rem 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-content: flex-start;
  place-items: center;
  gap: 3rem;
  overflow: hidden;
  margin-block-end: 4rem;

  @media (width < 720px) {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

.video-background {
  
  position:fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  background-color: black;

}



.text-resume {
  text-align: center;
  filter: opacity(0) blur(5px);
  animation: text-resume 1s ease-in-out 0.1s forwards;

  h1 {
    color: var(--title-work);
    font-size: clamp(34px, 3vw + 1rem, 64px);
  }

  h2 {
    color: var(--title-pasion);
    font-size: clamp(36px, 2vw + 1rem, 56px);
  }

  p {
    color: white;
    font-weight: bold;
    text-shadow: 0px 2px 1px violet;
    font-size: clamp(24px, 1vw + 1rem, 36px);
    margin-block-start: 2rem;
  }
}

@keyframes text-resume {
  0% {
    transform: translateX(30rem);
    filter: opacity(0);
  }

  100% {
    transform: translateX(0);
    filter: opacity(1) blur(0);
  }
}

/* Container Section-Services */
.servicios {
  width: 100%;
  min-height: 100%;
  padding: 4rem 2rem 0;
 display: flex;
  align-items: center;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* para iOS */

  div {
    transition: ease 1s;
  }
}

/* Styles Scrollbar-Servicios */
@supports selector(::-webkit-scrollbar) {
  .servicios::-webkit-scrollbar {
    background: transparent;
  }

  .servicios::-webkit-scrollbar-thumb {
    background: linear-gradient(
      45deg,
      rgba(238, 130, 238, 0.375),
      rgba(0, 255, 255, 0.428),
      rgba(255, 217, 0, 0.393)
    );
  }

  .servicios::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}

/* Items Articulos-Services */
.items {
  width: 100%;
  min-height: 100%;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-content: flex-start;
  place-items: flex-start;
  overflow: hidden;
  gap: 2rem;

  svg {
    width: 1.3em;
    height: 1.3rem;
    fill: white;
  }

  @media (width < 720px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.items_parrafo {
  color: wheat;
  font-size: 1.7rem;
  text-shadow: 1px 1px black;
  text-align: left;
  padding: 1rem;
  border-radius: 1.4rem;
  box-shadow: var(--shadow-One);
  margin-block-end: 1rem;
  background: rgba(0, 0, 0, 0.577);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  position: relative;
  top: -5%;
  filter: opacity(0);
  animation: sweet 1s ease-out 0.5s forwards;
  z-index: -1;
}

.items_image {
  width: min(100%, 500px);
  border-radius: 2rem;
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 auto;
  transition: ease 1s;

  img {
    border: solid 5px rgba(0, 0, 0, 0.38);
    z-index: -1;
  }
}

.items_prev-buttom {
  width: max-content;
  height: max-content;
  background: black;
  border: solid 2px transparent;
  padding: 5px;
  font-size: 1.3rem;
  display: block;
  margin: auto;
  z-index: 2;
  border-image: linear-gradient(to left, lightgreen, gold, cyan, violet) 1;
  box-shadow: var(--shadow-One);
  transform: scale(0);
  transition: ease-in 0.5s;
}

.items_prev-buttom:hover {
  scale: 1.1;
}

.items_reserva {
  position: absolute;
  transform: scale(0);
  bottom: 10%;
  background: linear-gradient(135deg, #00ffff8f, #ee82ee94, #ffd7008a);
  padding: 1rem;
  border-radius: 1rem;
  filter: drop-shadow(3px 2px 1px black) !important;
  transition: ease-out 0.5s;
}

.items_image:hover {
  transform: translateY(1rem);

  img {
    filter: blur(2px);
  }
  .items_reserva {
    scale: 0.9;
  }
}

/* Item_Cards Service-Info */
.item_cards {
  width: min(100%, 300px);
  height: 330px;
  scroll-snap-align: center;
  cursor: default;
  margin: 2rem auto;
  border-radius: 2rem;
  aspect-ratio: 4/4;
  position: relative;
    scroll-margin-top: 50rem;


  background: linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 80%)) padding-box,
    linear-gradient(to right, #f472eeac, #f2f2f29c,   #88edfd96) border-box;
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 1rem;
  background-size: cover;
  background-position: center;


  svg {
    width: 1rem;
    height: 1rem;
    fill: white;
  }

  span {
    color: wheat;
    font-size: 1.4rem;
    text-align: center;
    transition: ease-in-out 0.5s;
    padding: 1rem;
  }

  img {
    position: absolute;
    border-radius: 2rem;
    margin: auto;
    width: 150px;
    height: 150px;
    object-fit: cover;
    transition: ease 1s;
    border: 2px outset transparent;
    filter: drop-shadow(2px 4px 6px black);
    z-index: 1;
    top: 0;
    left: 0;
  }

  p {
    color: white;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }

  /* buttoms-next_articles*/
  a {
    width: max-content;
    height: max-content;
    background: black;
    border: solid 2px transparent;
    padding: 5px;
    font-size: 1.3rem;
    position: absolute;
    inset: 75% 0 0 0;
    margin: auto;
    z-index: 2;
    border-image: linear-gradient(to left, violet, cyan, gold) 1;
    box-shadow: var(--shadow-One);
    transform: scale(0);
    transition: ease-in 0.5s;
  }
}

/* Efect-Animated Neon-Img Items-seriveces */
.neon_img {
  position: absolute;
  border-radius: 2rem;
  top: 0;
  left: 50%;
  translate: -50% -50% !important;
  margin: auto;
  width: 150px;
  height: 150px;
  background: wheat;
  font-size: 3rem;

  div {
    background: black;
    position: absolute;
    align-content: center;
    border-radius: 2rem;
    top: 50%;
    left: 50%;
    width: 97%;
    height: 97%;
    translate: -50% -50%;
    z-index: 2;
  }
  p {
    text-align: center;
    z-index: 2;
    position: relative;
  }

  p:first-child {
    color: violet;
    font-family: "Dancing Script", serif;
    text-shadow: 2px 2px black, 0 2px 20px white;
    animation: destello 2s ease 1s alternate infinite;
  }

  p:last-child {
    color: #dab8f8;
    font-family: "Josefin Sans", serif;
    text-shadow: 2px -3px 1px black, 0 1px 20px white;
    filter: drop-shadow(2px 0 5px white);
    animation: destello 2s ease 2s alternate infinite;
  }
}

@keyframes destello {
  0% {
    filter: opacity(0) blur(5px) hue-rotate(45deg);
  }

  100% {
    filter: opacity(1) blur(0) hue-rotate(-360deg);
  }
}

/*Custom Property Lineal-Gradient Efect-Neon   */

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

.neon_img::after,
.neon_img::before {
  content: "";
  min-width: 102%;
  min-height: 102%;
  border-radius: 2rem;
  position: absolute;
  background-image: conic-gradient(
    from var(--angle),
    lightgreen,
    cyan,
    violet,
    gold,
    lightgreen
  );
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  animation: neon 3s linear infinite;
}

.neon_img::before {
  filter: blur(15px) opacity(0.5);
}

@keyframes neon {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 360deg;
  }
}

.item_cards:hover {
  filter: brightness(1.1);

  .neon_img {
    transform: translateY(-0.1rem);
  }

  img {
    transform: translateY(-0.1rem);
    filter: brightness(1) saturate(0.5);
  }

  a {
    filter: opacity(0.7);
    scale: 1.1;
  }

  span {
    color: white;
    scale: 0.98;
    background-color: rgba(0, 0, 0, 0.311);
  }
}

/* Indicators Next-Prev_Buttoms Items-Services */
.indicators {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  top: 50;
  left: 0;
  z-index: 5;

  svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
    fill-opacity: 0.8;
  }

  button {
    padding: 4px;
    font-size: 3rem;
    cursor: pointer;
    display: flex;
    border-radius: 5%;
    filter: drop-shadow(0 1px 6px black);

    border: none;
    color: violet;
    background-color: white;
  }

  button:last-child {
    color: cyan;
  }

  button:hover {
    filter: drop-shadow(0 2px 14px);
    rotate: 10deg;
    scale: 0.9;
  }
}
/* Animations-bottoms */
.time1 {
  animation: buttom 0.5s ease 0.5s forwards;
}

.time2 {
  animation: buttom 0.6s ease 0.6s forwards;
}

.time3 {
  animation: buttom 0.7s ease 0.7s forwards;
}

@keyframes buttom {
  100% {
    transform: scale(1);
    filter: opacity(1);
  }
}

/* --> Section Reservas - FAQ  <-- */

.reservas {
  width: 100%;
  height: 100%;
  padding: 1rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;

  article {
    width: min(100%, 800px);
    margin-block-start: 4rem;
    display: grid;
    gap: 1rem;
    color: white;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: var(--shadow-One);
    border-radius: 2rem;
    font-size: 1.7rem;
    padding: 5px;
  }

  h1{color: gold;}
}

.btn-reserva {
  width: max-content;
  background: white;
  color: black !important;
  text-align: center !important;
  border-radius: 2rem;
  border: solid 2px black;
  padding: 1rem;
  position: relative;
  bottom: -1rem;
  margin: auto;
  transition: all ease 1s;
}

.btn-reserva:hover {
  background: black;
  color: white !important;
  border: solid 2px white;
}

/* FAQ */
.faq_container {
  width: min(100%, 900px);
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  margin: auto;

  h2 {
    margin-block-start: 2rem;
    color: currentColor;
    text-shadow: none;
  }

  input[type="checkbox"] {
    display: none;
  }
}

.faq_items {
  margin-block-start: 2rem;
  list-style: none;
  padding: 1rem;
  display: grid;
  gap: 0.5rem;

  label {
        border: outset 1.2px;
        background: linear-gradient(328deg, rgba(0, 0, 0, 0.7), gray, transparent);
        padding: 0.5rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: cornsilk;
    margin: auto;
    position: relative;
  }

  label::after {
    position: absolute;
    content: "+";
    right: 0.5rem;
    font-weight: bold;
    transition: ease-in 0.2s;
  }
}

.faq_content {
  font-size: 1.4rem;
  padding: 0 0.5rem;
  color: black;
  background: white;
  line-height: 1.2;
  overflow: hidden;
  max-height: 0;
  transition: max-height ease-in-out 0.5s, padding 0.2s ease 0.3s;
}

input[type="checkbox"]:checked ~ .faq_content {
  max-height: 100vh;
  padding: 1rem 0.5rem;
}

input[type="checkbox"]:checked ~ label::after {
  transform: rotate(135deg);
}

/* Section-Nosotros  */

.container-nosotros {
  width: 100%;
  min-height: 100%;
  padding: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  overflow: hidden;

  @media (width < 780px) {
    flex-wrap: wrap;
  }
}

.nosotros-portada {
  position: relative;
  margin-block-start: -6rem;
  animation: image-nosotros 1s ease forwards;

  img {
    width: min(100%, 500px);
    display: block;
    margin: auto;
    aspect-ratio: 9/16;
    object-fit: cover;
    mask-image: linear-gradient(black 70%, transparent);
    filter: drop-shadow(0 -16px 12px white) contrast(0.7) brightness(1.1);
  }

  h1 {
    font-family: "Josefin Sans", serif;
    font-size: 2rem;
    line-height: 1.5;
    background: linear-gradient(90deg, violet, cyan, gold);
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }
}

@keyframes image-nosotros {
  0% {
    filter: opacity(0) blur(100px);
    transform: translateX(100rem);
  }

  100% {
    filter: opacity(1) blur(0);
    transform: translateX(0);
  }
}

.nosotros-historia {
  width: 100%;
  background: rgba(0, 0, 0, 0.61);
  padding: 1rem;
  border-radius: 2rem;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: grid;
  gap: 1rem;
  margin-block-start: 4rem;

  h1 {
    filter: opacity(0);
    background: linear-gradient(45deg, cyan, violet, gold, lightgreen);
    background-clip: text;
    color: #ffffff8b;
    font-size: 2.5rem;
    text-shadow: none;
    -webkit-background-clip: text;
    animation: history-nosotros 1.5s ease 0.4s forwards;
  }

  p {
    text-align: left;
    filter: opacity(0);
    background: linear-gradient(45deg, cyan, violet, gold);
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 1.5rem;
    animation: history-nosotros 1.5s ease 0.8s forwards;
  }
}

@keyframes history-nosotros {
  0% {
    filter: opacity(0) blur(100px);
    transform: translateY(100rem);
  }

  100% {
    filter: opacity(1) blur(0);
    transform: translateY(0);
  }
}

/* Section  Contacto */

.contacto {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
  color: white;
  padding: 2rem;
  text-align: center;
  overflow: hidden;
}

.contacto-text {
  width: min(100%, 500px);
  margin: auto;
  font-size: 2rem;
  animation: text-resume 1s ease forwards;
}

.form-container {
  width: min(100%, 400px);
  background: linear-gradient(#212121, #212121) padding-box,
    linear-gradient(145deg, transparent 35%, #e81cff, #40c9ff) border-box;
  border: 5px solid transparent;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 16px;
  margin: auto;
  z-index: 2;
  animation: transition-slider 1s ease forwards;

  p {
    margin: 1rem 0;
    font-size: 1.2em;
  }
}

.form-labels {
  display: flex;
  flex-direction: column;
  margin-block-end: 1rem;
}

input,
textarea {
  font-size: 1.2rem;
  border: solid 2px #312e2e;
  border-radius: 1rem;
  field-sizing: content;
}

textarea {
  padding: 1rem;
  resize: none;
  color: #fff;
  width: min(100%, 400px);
  min-height: 6em;
  background-color: transparent;
  font-family: inherit;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1.5rem;
}

.form-labels:nth-child(1) {
  color: cyan;
}

.form-labels:nth-child(2) {
  color: violet;
}

input {
  width: 100%;
  padding: 12px 16px;
  color: #fff;
  font-family: inherit;
  background-color: transparent;
  text-transform: capitalize;
}

input:focus,
textarea:focus {
  outline: none;
  background-color: white;
  color: black;
}

input:focus {
  border-color: cyan;
}

textarea:focus {
  border-color: #e81cff;
}

.form-submit-btn {
  font-family: inherit;
  color: gold;
  font-weight: 600;
  width: 40%;
  background: #313131;
  border: 1px solid #414141;
  padding: 12px 16px;
  font-size: 1.3rem;
  margin: 10px;
  cursor: pointer;
  border-radius: 6px;
}
.form-submit-btn:last-child {
  color: lightgreen;
}

.form-submit-btn:hover:active {
  scale: 0.95;
}

.form-submit-btn:hover {
  background-color: #fff;
  border-color: #fff;
  color: violet;
}