/* =========================
   RESET BÁSICO
========================= */
* {
    box-sizing: border-box;
    /* scroll-behavior: smooth; */
}

div, ul, header, nav, footer, a, li, label, body {
    margin: 0;
    padding: 0;
}

/* =========================
   BASE
========================= */
body {
    font-family: 'Trebuchet MS';
    background-color: #9ebbcacb;
    background-image: url("../img/evento10.jpg");
    background-position: center;
    background-size: cover;
}

/* =========================
   HEADER (MOBILE FIRST)
========================= */
.header {
    background-color: rgba(4, 9, 17, 0.952);
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    z-index: 10;
    text-align: center;
    font-size: 50px;
    color: rgb(23, 77, 102);
}

.header__checkbox {
    display: none;
}

.header__nav {
    margin-top: -10%;
    display: none;
    background-color: #ffffff;
    position: absolute;
    height: 120vh;
    width: 100%;
    top: 0;
    z-index: -1;
}

.header__nav-list {
    display: flex;
    flex-direction: column;
    height: 40vh;
    margin: auto;
    justify-content: space-evenly;
   
}

.header__checkbox:checked ~ .header__nav {
    display: flex;
    font-size: x-large;
}

.header__checkbox:checked ~ .header__open-nav-button {
    color: rgb(0, 0, 0);
}

.header .header__checkbox {
    display: none;
}

.header__logo {
    display: flex;
    max-width: 100%;
    width: 50px;
    margin: 10px 20px;
    border-radius: 10%;
    align-self: center;
}

.header__open-nav-button {
    color: rgb(255, 255, 255);
    font-size: 3rem;
    font-weight: 600;
    position: absolute;
    right: 10px;
}

.header__nav-item {
    list-style: none;
}

.header__nav-item a {
    color: inherit;
    font-size: x-large;
    font-weight: lighter;
    text-shadow: -1px 1px 1px #000000;
}

.header__nav-item a:not(:is(:hover, :active)) {
    text-decoration: none;
}

/* =========================
  titulos y contador
========================= */

.event_date{
  position: absolute;
  display: flex;
  align-self: center;
  align-self: center;
  text-align: center;
  margin-left: 2%;
  margin-top:3%;
  top : 0;   
}

.event__place{
  
  position: absolute;
  display: flex;
  flex-direction: column;
  align-self: center;
  text-align: center;
  margin-left: 3%;
  top: 28%;
   
}

 .event_title__countdown{
      position:absolute;
      display: flex;
      justify-content:space-around;
      flex-direction: column;
      text-align: center;
      align-self: center;
      top: 38%;
      bottom: 0%;
      z-index: 10;   
}
  .event_date h4, .event__place h4, .event_title__countdown h4{
    color: rgb(255, 255, 255);
    font-weight: lighter;
    font-family: "DynaPuff", system-ui;
    font-size: clamp(1rem, 2.2vw, 1.4rem);
    /* filter: drop-shadow(0px 0px 1px #48ff00)
    drop-shadow(0px 0px 1px #9dff00e1); */
    text-shadow: 1px 1px 1px #000000, 1px 1px 1px #000000,
    1px 1px 10px #ffffff,1px 1px 10px #06ffde;
      
}

/* =========================
   HERO / PROFILE (SIN ANIMACIÓN, SOLO CENTRADO)
========================= */

.profile {
    min-height: 150vh;  /* más alto para que haya scroll dentro */
    background-color:transparent;
     padding-top: 30px;
}

.profile__wrapper {
      max-width: 1400px;
    margin: 0 auto;
    min-height: 130vh;         /* igual que .profile */
    display: flex;
    justify-content: center;
    align-items: stretch;       /* que el sticky pueda ocupar todo */
    position: relative;
    background-color: transparent; /* sin fondo gris */
}

/* Contenedor de imagen + textos */
.profile__img-container {
   position: sticky;
   /* sube el hero un poquito */

    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
img{
    margin-top: 20%;
    border-radius: 10%;
}
/* Imagen del hero */
.profile__img-container > img {
   display: block;
    max-width: 60vw;
    max-height: 60vh;
    height: auto;
    opacity: 0;                /* 🔹 oculta al inicio */
    transition: opacity 0.25s ease-out;
 
}

/* Textos centrados encima de la imagen */
.text__container {
    position: absolute;
    flex-direction: column;
    align-items: center;
    top: 17%;
    left: 50%;

    transform: translate(-50%, -50%);
    display: flex;
    gap: 5px;
    font-size: clamp(1.2rem, 4vw, 3.5rem);
    font-weight: lighter;
    font-family: "Lucida Sans Unicode";
    /* font-family: "Russo One" !important; */

    pointer-events: none;
}

.left__text,
.right__text {
    color: #ffffff;
 text-shadow: -1px 0px 1px rgb(0, 0, 0),
 -1px 0px 1px rgb(0, 0, 0), 
  -1px 0px 20px rgb(0, 255, 255),
    -1px 0px 20px rgb(0, 255, 255);
    white-space: nowrap;
}
.left__text,
.right__text {
    transition: transform 0.1s linear, opacity 0.1s linear;
}

/* (mantengo tus estilos extra de profile por si los usas luego) */
.profile__data-container {
    max-width: 600px;
    padding: 15px;
}

.profile__img {
    max-width: 100%;
    width: 720px;
}


/* =========================
   PORTAFOLIO (MOBILE FIRST)
========================= */
.portfolio {
    background-color: #0a121af5;
    color: white;
    width: 90%;
    margin: auto;
    min-height:fit-content;
    display: flex;
    flex-direction: column;
    text-align: center;
    container-type: inline-size;
    container-name: portfolio;
    justify-content: space-evenly;
    margin-top: -60%;
    font-family: "Lucida Sans Unicode";
    border-radius: 10px;
     box-shadow: 6px 6px 40px rgba(0, 247, 255, 0.836);

}

.portfolio__tittle {
    font-size: 18px;
    margin-top: 8%;
    margin-bottom: 0;
     text-shadow: -1px 0px 1px rgb(0, 0, 0),
 -1px 0px 1px rgb(0, 0, 0), 
  -1px 0px 20px rgb(0, 255, 255),
    -1px 0px 20px rgb(0, 255, 255);
    font-weight: lighter;
}

.portfolio__project-container {
    display: grid;

    grid-template-columns: 1fr;
    max-width: 100%;
    margin: auto;
    width: 100%;
    gap: 15px;
    padding: 20px;
    min-height: 70vh;
    margin-top: 3%;
    margin-bottom: 0%;
    
}

.portfolio__project {
    background-image: linear-gradient(#023a3be7, #f2f5e177), url("../img/hardware3.jpg");
    background-position: center;
    background-size: cover;
    display: grid;
    place-content: center;
    border-radius: 12px;
    animation: aparecer both;
    animation-timeline: view();
    animation-range: contain 5% cover 40%;
    align-items: center;


   
}
.portfolio__project h2{
 color: #fff130;
    font-size: large !important;
    text-shadow: -1px 1px 1px black;
    font-weight: lighter;
}

.portfolio__project:hover {
    opacity: 0.74;
    outline: 2px solid white;
}
.portfolio__project--precios {
    cursor: pointer;
}

.portfolio__project--precios:hover {
    opacity: 0.9;
    outline: 2px solid #00ffbf;
}


/*<------ NEON BUTTON ------>*/

.button-container:has(.btn-2) {
      filter: drop-shadow(0px 0px 50px #03c4ff)
      drop-shadow(0px 0px 5px #2b7ae0);
      margin-top: 10%;
      margin-bottom: 10%;

}

.btn-2 {
      border: 2px solid rgba(255, 253, 139, 0.904);
      color: rgba(255, 245, 109, 0.884);

}

.btn-2:hover {

      animation: parpadear 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-fill-mode:forwards;

}

.btn-2::before {
      content: '';
      background-color: aqua;
      display: block;
      height: 1px;
      width: 20%;
      position: absolute;
      z-index: -1;
      left: 0;
      right: 0;
      margin: auto;
      opacity: 0;
      top:-20px ;
      transition: top .6s, opacity .6s, width.6s;
   
      animation: parpadear 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-fill-mode:forwards;
   
}
.btn-2:hover:before {

      opacity: 2;
      top: -6px;
      width: 80%;
    
   
}
.btn-2::after{
      content: '';
      background-color: aqua;
      display: block;
      height: 1px;
      width: 30%;
      position: absolute;
      z-index: -1;
      left: 0;
      right: 0;
      margin: auto;
      opacity: 0;
      top:-10px ;
      transition: top .6s, opacity .6s, width .6s;
   
      animation: parpadear 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-fill-mode:forwards;
   
}
.btn-2:hover:after {
      width: 50%;
      opacity: 2;
      top: -5px;
    
   
}



@keyframes parpadear {
      0% {
            border: 2px solid rgba(36, 128, 128, 0.418);
            color: rgba(255, 255, 255, 0.329);
            /* text-shadow: 0px;
            box-shadow: 0px; */
            text-shadow: none;
            box-shadow: none;

      }

      25% {
            border-color: aqua;
            color: rgb(2, 255, 221);
            box-shadow: 0px 0px 6px rgb(0, 255, 136), 0px 0px 16px rgb(0, 255, 136);
            text-shadow: 0px 0px 6px rgb(0, 219, 117), 0px 0px 16px rgb(0, 219, 117);
      }

      30% {
            border: 2px solid rgba(36, 128, 128, 0.418);
            color: rgba(255, 255, 255, 0.329);
            text-shadow: none;
            box-shadow: none;


      }

      35% {
            /* border-color: aqua; */
            color: rgb(2, 255, 221);
            /* box-shadow: 0px 0px 6px rgb(0, 255, 136), 0px 0px 16px rgb(0, 255, 136); */
            text-shadow: 0px 0px 6px rgb(0, 219, 117), 0px 0px 16px rgb(0, 219, 117);
      }

      46% {
            border: 2px solid rgba(36, 128, 128, 0.418);
            color: rgba(255, 255, 255, 0.329);
            text-shadow: none;
            box-shadow: none;


      }

      60% {
            border-color: aqua;
            /* color: rgb(2, 255, 221); */
            box-shadow: 0px 0px 6px rgb(0, 255, 136), 0px 0px 16px rgb(0, 255, 136);
            /* text-shadow: 0px 0px 6px rgb(0, 219, 117), 0px 0px 16px rgb(0, 219, 117); */
      }
      72% {
            border: 2px solid rgba(36, 128, 128, 0.418);
            color: rgba(255, 255, 255, 0.329);
            text-shadow: none;
            box-shadow: none;


      }

      100% {
            /* border-color: aqua; */
            color: rgb(2, 255, 221);
            /* box-shadow: 0px 0px 6px rgb(0, 255, 136), 0px 0px 16px rgb(0, 255, 136); */
            text-shadow: 0px 0px 6px rgb(0, 219, 117), 0px 0px 16px rgb(0, 219, 117);
      }


      
}

@keyframes parpadear-linea {
      0% {
            
            background-color: rgb(3, 166, 187);
            box-shadow: 0px 0px 6px #45eea8d0, 0px 0px 16px rgb(0, 255, 136);
          

      }

      25% {
      
            background-color: rgba(0, 135, 153, 0.329);
            box-shadow: none
      }

      30% {
            background-color: rgba(0, 135, 153, 0.329);
            box-shadow: 0px 0px 6px rgb(3, 117, 64), 0px 0px 16px rgb(0, 100, 54);
          

      }

      35% {
            background-color: rgba(0, 135, 153, 0.329);
            box-shadow: none;
          
      }

      46% {
            background-color: rgba(6, 209, 236, 0.329);
            box-shadow: 0px 0px 6px rgb(3, 117, 64), 0px 0px 16px rgb(0, 100, 54);
          

      }

      60% {
            background-color: rgba(0, 135, 153, 0.329);
            box-shadow: none;
          
      }
      78% {
            background-color: rgba(0, 225, 255, 0.637);
            box-shadow: 0px 0px 6px rgb(3, 117, 64), 0px 0px 16px rgb(0, 100, 54);
          


      }

      100% {
            background-color: rgba(0, 135, 153, 0.329);
            box-shadow: none;
          
      }


      
}
@media(prefers-reduced-motions:reduce){
      .btn .btn::before, .btn::after {
animation: none;
      }
}
/* =========================
   CONTACTO (MOBILE FIRST)
========================= */
.form__form {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr ;
    
        width: 97%;
        margin-top: 5%;
        margin-bottom: 10%;
        justify-self: center;
        grid-template-areas:
            "name lastname"
            "email email"
            "message message"
            "button button";
        gap: 12px;
        background-image: linear-gradient(#143447ee, #78ffb0de);
        border-radius: 12px;
        padding: 30px;
        box-shadow: 6px 6px 40px rgba(0, 247, 255, 0.836);
            font-family: "Lucida Sans Unicode";
    }
.form__title {
    font-size: 30px;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 8%;
    color: #ffffff;
    font-weight: lighter;
    text-shadow: -1px 1px 1px black, -6px 6px 40px rgba(0, 247, 255, 0.836);
    
   

}
    .form__input-container:first-child {
        grid-area: name;
    }

    .form__input-container:nth-child(2) {
        grid-area: lastname;
    }

    .form__input-container:nth-child(3) {
        grid-area: email;
    }

    .form__input-container:nth-child(4) {
        grid-area: message;
    }

    .form__input-container:nth-child(5) {
        grid-area: button;
    }

    .form__input-container :is(input, textarea) {
        box-shadow: 0;
        border-radius: 4px;
      
     
    }

    .form__form label {
    color: #ffffff;
    font-weight: lighter;
    text-shadow: -1px 1px 1px black;
    margin-top: 5%;
    }

    .form__form ::placeholder {
        color: #6e7896af;
    }

.btn_send{
  background-color: #00f94fc5;
  color: rgba(255, 255, 255, 0.888);
  outline: 1px solid rgba(255, 255, 255, 0.809);
  text-shadow: -1px 1px 1px #000000,-1px 1px 1px #000000;
  font-weight:lighter;
  text-decoration: none;
  padding: 6px 35px  6px 35px;
  margin-top: 5%;
align-self: center;
  width: 80%;
  border-radius: 10px;
  transition: background-color 1s, border-radius 0.8s, outline 0.7s,
  outline-offset 0.5s;
  outline: 0;
  outline-offset: 0;
  font-size: 16px;
 

}

.btn_send:hover  {
   background-color: rgba(0, 0, 0, 0.242);
  outline: 2px solid rgba(0, 255, 94, 0.596);
  color: rgb(22, 255, 119);
  text-shadow: -1px 1px 1px #000000;
  border-radius: 25px;
  box-shadow: 0px 0px  20px rgb(84, 250, 134);
  padding: 7px 39px  7px 39px;


}



/* =========================
   FOOTER
========================= */
footer {
    padding: 60px;
    text-align: center;
    background-color: #01050fef;
    color: white;
    font-size: 22px;
}
 footer  a{
    color: #f6ff78 !important;

    display: flex;
    justify-self: center;
    padding: 1%;
}

/* =========================
   ANIMACIONES GENERALES
========================= */

@keyframes header-movement {
    from {
        padding: 10px 0;
        background-color: #01050fef;
         color: #ffffff;
         font-weight: lighter;
         text-shadow: -1px 1px 1px rgb(0, 247, 255);
       
         
    }
 
    to {
        padding: 5;
        background-color: #c9d9f388;
        color: #00fff2;
        text-shadow: -1px 1px 1px black;
    }
}

@keyframes logo-size {
    from {
        max-width: 100%;
        width: 90px;
    }
    to {
        max-width: 100%;
        width: 80px;
    }
}

/* Aparición genérica (se usa en varias secciones) */
@keyframes aparecer {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* =========================
   MEDIA QUERIES (TABLET / LAPTOP)
========================= */

/* HEADER – a partir de ~tablet */
@media screen and (min-width: 600px) {
    .header {
     
        animation: header-movement;
        animation-fill-mode: both;
        animation-timeline: scroll();
        animation-range: cover 10px contain 100px;
        position: sticky;
        top: 0;
    }

    .header__nav {
        display: block;
        position: static;
        height: auto;
        width: auto;
        justify-content: space-between;
        background-color: initial;
    }

    .header__nav-list {
        display: flex;
        flex-direction: row;
        margin-top: 18%;
        height: auto;
        width: auto;
        gap: 40px;
        margin-right: 40px;
        
       
    }

    .header__nav-item a {
        font-size: large;
     
    }
    .header__nav-item a:hover {
        font-size: large;
        color: #00ff37;
     
    }
    .header__open-nav-button {
        display: none;
    }

    .header__logo {
    
        animation: logo-size;
        animation-fill-mode: both;
        animation-timeline: scroll();
        animation-range: cover 10px contain 100px;
        position: sticky;
        top: 0;
    }

    /* =========================
  titulos y contador
========================= */

.event_date{
  margin-top:2%;  
}

.event__place{
  top: 38%;
   
}

 .event_title__countdown{
   
      bottom: -70%;
}
  .event_date h4, .event__place h4, .event_title__countdown h4{
    font-size: clamp(1rem, 2.2vw, 1.6rem);
}

/* =========================
   HERO / PROFILE (SIN ANIMACIÓN, SOLO CENTRADO)
========================= */

img{
    margin-top: 30%;
}


/* Textos centrados encima de la imagen */
.text__container {
    top: 25%;
}


/* (mantengo tus estilos extra de profile por si los usas luego) */
.profile__data-container {
    max-width: 600px;
    padding: 15px;
}

.profile__img {
    max-width: 100%;
    width: 720px;
}


/* =========================
   PORTAFOLIO (MOBILE FIRST)
========================= */
.portfolio {
   
    margin-top: 5%;
      width: 50%;
}

.portfolio__tittle {
    font-size: 28px;
    margin-top: 5%;
    margin-bottom: 5%;
}

}




/* PORTFOLIO – tablet / desktop */
@container portfolio (min-width: 56.24rem) {
    
    .portfolio__project-container {
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    }

    .portfolio__project:first-child {
        grid-column: span 2;
    }

    .portfolio__project:nth-child(6) {
        grid-column: span 2;
    }
}

@container portfolio (min-width: 81.25rem) {
    .portfolio__project-container {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .portfolio__project:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }

    .portfolio__project:nth-child(6) {
        grid-column: span 4;
    }
}

/* FORM – tablet / desktop */
@media screen and (min-width: 600px) {
  
.form__form {
        width: 35%;
    }
.form__title {
    font-size: 30px;
    margin-top: 5%;
    margin-bottom: 5%;
}
   
    .form__form label {
   font-size: large;

    }

    .form__form ::placeholder {
        color: #6e7896af;
    }

.btn_send{
  width: 50%; 
  font-size: 17px;
}


}