/* Contenedor Principal */
#container-completo {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Fondo de video */
#container_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Para que quede detrás del contenido */
    filter: blur(3px) brightness(30%);
}

#video-edicion {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: brightness(50%); /* Para oscurecer un poco el video y que el texto resalte */
}

/* Contenido sobre el video */
#container_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 1;
}

#hero-text {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: 2.3rem;
    font-weight: normal;
    margin-bottom: 30px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Agrega sombra al texto */
}

:root {
    /*========== Colors ==========*/
    --first-color: hsl(353.66deg 100% 31.57%);
    
    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --normal-font-size: 1.28rem;
  }
  
  /*=============== BASE ===============*/
  
  
#container_buttom {
  display: grid;
  place-items: center;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

a {
  text-decoration: none;
}

/*=============== MAGIC BUTTON ===============*/
.button {
  position: relative;
  background: linear-gradient(180deg, hsl(354deg 100% 41.57%), hsl(353deg 100% 81.05%));
  color: #fff;
  padding: .9rem 2.20rem;
  border-radius: 3rem 8rem ;
  transition: .4s;
}



.button__text {
  position: relative;
  z-index: 10;
}

.button img {
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
  transition: .6s;
  opacity: 1;
}

.button__cone {
  width: 18px;
  transform: translate(-58px, -13px) scale(1.2);
  filter: blur(.5px);
}

.button__torus {
  width: 30px;
  transform: translate(7px, -32px) scale(1.1);
  filter: blur(.5px);
}

.button__icosahedron {
  width: 36px;
  transform: translate(69px, -20px) scale(1.1);
  filter: blur(.9px);
}

.button__sphere {
  width: 50px;
  transform: translate(-16px, 26px) scale(1.1);
  filter: blur(.5px);
}

#galery_image {
  background-color: #030f07;
  padding: 10px;
  text-align: center;
}

#galery_image h2 {
  color: #fdf8f3;
  font-size: 30px;
  
}
#galery_image h2 b {
  color: #030f07;
  padding: 7px;
  font-family: 'Poppins', sans-serif;
  background: #fdf8f3;
  text-shadow: 4px 3px 0px #b9b3ac;
  border-radius: 21px;
}
#galery_image #galery {
  font-size: 43px;
  margin-bottom: 10px;
  text-shadow: 4px 3px 0px #b9b3ac;
  color: #fdf8f3;
  font-family: 'Poppins', sans-serif;
}

#galery_image img {
  display: block;
  max-width: 100%;
}

#galery_image main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
}

.container-galery {
  display: grid;
  place-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --position: 50%;
}

.image-container {
  max-width: 800px;
  max-height: 40vh;
  aspect-ratio: 1/1;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.image-before {
  position: absolute;
  inset: 0;
  width: var(--position, 50%); /* 50% por defecto */
  overflow: hidden;
}


.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  /* for Firefox */
  width: 100%;
  height: 100%;
}

.slider:focus-visible ~ .slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}

.slider-line {
  position: absolute;
  inset: 0;
  width: .2rem;
  height: 100%;
  background-color: #fff;
  /* z-index: 10; */
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}

.slider-button {
  position: absolute;
  background-color: #fff;
  color: black;
  padding: .5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* z-index: 100; */
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}

/* SECCIÓN SERVICIOS */
#services {
  background-color: #fdf8f3;
  padding: 40px 20px;
  width: auto;
  height: auto;
  text-align: center;
}

#services #title_services{ 
  font-size: 43px;
  margin-bottom: 10px;
  text-shadow: 4px 3px 0px #00000038;
  color: #030f07;
  font-family: 'Poppins', sans-serif;
}

#services #container-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  font-family: 'Poppins', sans-serif;
  color: #2c2c2c;
}

/* ESTILOS DE LAS TARJETAS */
#services .card {
  background-color: #030f0740;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  border-bottom: 6px solid #2c2c2c;
  border-radius: 10px 10px 0 0;
  position: relative;
  overflow: hidden;
  transition: background-color 0.5s ease-in-out;
}

/* ESTILOS DEL TÍTULO */
#services .card_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

#services .card_title i {
  background-color: #2c2c2c;
  padding: 15px;
  border-radius: 100%;
  color: #bfbeb8;
  font-size: 30px;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

#services .card h1 {
  font-size: 18px;
  text-align: center;
  margin-top: 10px;
}

/* ESTILOS DEL CONTENIDO */
#services .card_content {
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}


.wave {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  background-color: #fdf8f3;
}

.wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 150px;
}

.wave .shape-fill {
  fill: #030f07;
}

.wave2 {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background-color: #fdf8f3;
}

.wave2 svg {
  position: relative;
  display: block;
  width: calc(163% + 1.3px);
  height: 307px;
}

.wave2 .shape-fill {
  fill: #212121;
}

/* Estilos de FAQ's */
#faq-multimedia {
  padding: 20px;
  border-radius: 10px;
}

#faq-multimedia h2 {
  text-align: center;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
  color: #b60000;
}

.faq-item {
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
}

.faq-question {
  font-family: 'Poppins', sans-serif;
  color: #fdf8f3;
  width: 100%;
  background: none;
  border: none;
  padding: 15px;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.faq-icon {
  transition: transform 0.3s ease;
}

.faq-answer {
  font-family: 'Poppins', sans-serif;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 15px;
}

.faq-answer p {
  color: #fdf8f3;
  margin: 10px 0;
}

/* 🔹 Rotar la flecha cuando se expande la respuesta */
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

@media (min-width: 1024px){

  .button img {opacity: 0;}
  
  /* View shadow gradient */
  .button:hover::after {opacity: 1;}
  
  /* Button scale */
  .button:hover {transform: scale(1.3);}
  
  /* View 3D geometric elements */
  .button:hover img {opacity: 1;}
  
  /* Move 3D geometric elements */
  .button__cone {
    width: 18px;
    transform: translate(-25px, -6px) rotate(55deg);
    filter: blur(.5px);
  }
  
  .button__torus {
    width: 30px;
    transform: translate(7px, -14px) rotate(80deg);
  }
  
  .button__icosahedron {
    width: 36px;
    transform: translate(34px, -4px) rotate(-45deg);
    filter: blur(.9px);
  }
  
  .button__sphere {
    width: 50px;
    transform: translate(-5px, 15px) rotate(40deg)
  }

  .button:hover .button__cone {transform: translate(-58px, -13px) scale(1.2);}
  
  .button:hover .button__torus {transform: translate(7px, -32px) scale(1.1);}
  
  .button:hover .button__icosahedron {transform: translate(69px, -20px) scale(1.1);}
  
  .button:hover .button__sphere {transform: translate(-16px, 26px) scale(1.1);}

  #galery_image #galery {font-size: 73px;}

  #galery_image main {flex-direction: row;}

  .image-container {
    max-width: 800px;
    max-height: 80vh;
    aspect-ratio: 1/1;
  }

  #services #container-cards{flex-direction: row;}

  #services .card{width: 25%;}

/* Pseudo-elemento para el efecto de transición */
  #services .card::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: #2c2c2c;
    transition: height 0.5s ease-in-out; /* Hace que el color suba lentamente */
    z-index: 0;
    border-radius: 10px 10px 0 0;
  }

  /* Aplica el efecto cuando el mouse está encima */
  #services .card:hover::before {height: 100%;}

  /* Asegurar que el contenido de la card esté encima del pseudo-elemento */
  #services .card * {
    position: relative;
    z-index: 1;
  }


  #services .card:hover i {
    background-color: #bfbeb8;
    color: #2c2c2c;
    transition: background-color 0.3s ease-in-out 0.3s, color 0.3s ease-in-out 0.3s; 
    /* El color cambia 0.8s después del efecto de fondo */
}

  #services .card:hover {
      color: #bfbeb8;
      transition: color 0.5s ease-in-out 0.3s;  
      /* El texto cambia de color después del fondo */
  }

  #services #titile_services{font-size: 73px;}
  
  #faq-multimedia {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.faq-item {
    width: 70%;
}
.faq-question:hover {
    color: #b60000;
}
}