@charset "utf-8";
/* CSS Document */

.cuerpoPag
{
     height: 250vh;
     /*background-color:rgb(105, 179, 243);*/
      background-color: whitesmoke;
}
.grid_portada{
   position: relative;
   top: 11%; 
   right:8%;
   display: grid;
   grid-template-columns: 0% 70% 30%;
   column-gap: 10px;
   
   row-gap: 5px;
   background-color: whitesmoke;
}
.imgPortada{
    position: relative;
    grid-column: 2;
    grid-row: 1;
    background-color: whitesmoke;
    top: 0%;
    left:0%;
    display: flex;
    justify-content: end;
    align-items: center;
    

}
.imgPortada img {
    max-width: 46%;
    /*display: block;*/
    border-radius: 20px;
    margin-right: 0%;
}
.contact1{
    position:relative;
    left:1%;
    display: flex;
    grid-column: 3;
    grid-row: 1;
    color: darkgray;
    font-size: 1.0em;
    text-align: center;

}
.contact1-link{
    position:relative;
    grid-column: 3;
    grid-row: 1;
    top: 16%;
    left:4%;
}
.contact2{
    position:relative;
    left:1%;
    display: flex;
    grid-column: 3;
    grid-row: 1;
    color: darkgray;
    font-size: 1.0em;
    text-align: center;
    top:20%;
}
.contact2-link{
    position:relative;
    grid-column: 3;
    grid-row: 1;
    top: 36%;
    left:4%;
}
   
/*------------------------------------------------------*/
.grid_image {
    position: relative;
    top: 12%;
    display: grid;
    grid-template-columns: 40% 20% 40%;
    column-gap: 10px;
    grid-auto-rows: 10% 89%;   /* ✅ Ajusta la altura de cada fila al contenido */
    row-gap: 5px;
    background-color: whitesmoke;
}
.centered-text {
    position: relative;
    grid-column: 1 / 3;
    grid-row: 1;
    top: 0%;
    left: 25%;
    /*transform: translate(-50%, -50%);*/
    color:darkgray;
    font-size: 1.5em; /* Ajusta este valor según el tamaño de texto que desees */
    text-align: center;
    
}

.imgMain {
    position: relative;
    grid-column: 1 ;
    grid-row: 2;

    background-color: whitesmoke;

    top: 0%;
    left: 0%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.imgMain img {
    width: 43%;
    /*display: block;*/
    border-radius: 20px;
}


.nvideo{
    /*background-color: white;*/
    grid-column: 3;
    grid-row: 2;
    /* position: relative; */
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: space-around;
    border-radius: 20px;

}
.nvideo video{
    width: 36.8%;
    
    /*display: block;*/
    border-radius: 20px;
}

.instagram-link{
    grid-column: 2;
    grid-row: 2;
    position: relative;
    top: 1%;
    left: 3%;;
}
.linkedin-link{
    position: relative;
    grid-column: 2;
    grid-row: 2;
    top: 16%;
    left: 3%;;
}
.btn{
    border:none;
}
/*----------------------------------------------------*/
.grid_Hosp {
    position: relative;
    top: 14%;
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 10px;
    grid-auto-rows: 7% 96% 12%;  /* ✅ Ajusta la altura de cada fila al contenido */
    row-gap: 5px;
    row-gap: 5px;
    background-color: whitesmoke;
}
.hospText {
    position: relative;
    grid-column: 1 / 2;
    grid-row: 1;
    top: 58%;
    left: 15%;
    display: flex;
    /*transform: translate(-50%, -50%);*/
    color:darkgray;
    font-size: 1.5em; /* Ajusta este valor según el tamaño de texto que desees */
    justify-content: end;
    text-align: center;
    
    
}
.imgZorrotzaurre {
    position: relative;
    grid-column: 1 ;
    grid-row: 2;

    background-color: whitesmoke;

    top: 1%;
    left: 0%;
    display: flex;
    justify-content: end;
    align-items: center;
}
.imgGuimon {
    position: relative;
    grid-column: 2 ;
    grid-row: 2;

    background-color: whitesmoke;

    top: 1%;
    left: 0%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.imgZorrotzaurre img {
    max-width: 86%;
    border-radius: 20px;
}
.imgGuimon img {
    max-width: 91.0%;
    border-radius: 20px;
}
.hospTextLeft{
    position: relative;
    grid-column: 1 ;
    grid-row: 3;
    top: 1%;
    left: 60%;
    right:0%;
    display: flex;
    /*transform: translate(-50%, -50%);*/
    color:darkgray;
    font-size: 1.5em; /* Ajusta este valor según el tamaño de texto que desees */
    justify-content: start;
    text-align: center;
}
.hospTextRight{
    position: relative;
    grid-column: 2 ;
    grid-row: 3;
    top: 1%;
    left: 10%;
    right:0%;
    display: flex;
    /*transform: translate(-50%, -50%);*/
    color:darkgray;
    font-size: 1.5em; /* Ajusta este valor según el tamaño de texto que desees */
    justify-content: start;
    text-align: center;
}
/*----------------------------------------------------- */
.carrusel {
    position: relative;
    display: flex;
    top: 17%;
    width: 800px;
    /*overflow: hidden;*/
    /*border: 2px solid #ccc;*/
    margin: auto;
    background-color: white;

}

    .carrusel-imagenes {
      display: flex;
      width: 12500px; /* 25 imágenes × 500px */
      animation: deslizar 60s infinite;
    }

    .carrusel-imagenes img {
      width: 500px;
      height: auto;
    }

    @keyframes deslizar {
      0%    { transform: translateX(0); }
      4%    { transform: translateX(-500px); }
      8%    { transform: translateX(-1000px); }
      12%   { transform: translateX(-1500px); }
      16%   { transform: translateX(-2000px); }
      20%   { transform: translateX(-2500px); }
      24%   { transform: translateX(-3000px); }
      28%   { transform: translateX(-3500px); }
      32%   { transform: translateX(-4000px); }
      36%   { transform: translateX(-4500px); }
      40%   { transform: translateX(-5000px); }
      44%   { transform: translateX(-5500px); }
      48%   { transform: translateX(-6000px); }
      52%   { transform: translateX(-6500px); }
      56%   { transform: translateX(-7000px); }
      60%   { transform: translateX(-7500px); }
      64%   { transform: translateX(-8000px); }
      68%   { transform: translateX(-8500px); }
      72%   { transform: translateX(-9000px); }
      76%   { transform: translateX(-9500px); }
      80%   { transform: translateX(-10000px); }
      84%   { transform: translateX(-10500px); }
      88%   { transform: translateX(-11000px); }
      92%   { transform: translateX(-11500px); }
      96%   { transform: translateX(-12000px); }
      100%  { transform: translateX(0); } /* Retorno rápido */
    }
@media screen and (max-width: 600px) {
    .grid_portada{
        display: block;
        top: 6%;
        left: 0%; 
        border-radius:8px;
    }
    .imgPortada{
        top: 0%;
        left: 0%;
        justify-content: center;
        
    }
    .imgPortada img {
        max-width: 94%;
        border-radius: 20px;
        margin-right: 0%;
    }
    
    .contact1{
        
        position: relative;
        /* top: 0%; */
        left: 0%;
        display: flex;
        font-size: 1.0em;
        justify-content: center;
    
    }
        
    .contact1-link{
        position: relative;
        top: 0%;
        left: 0%;
        margin-left: 17%;
        font-size: 1.0em;
    }
    
    .contact2{
        position: relative;
        /* top: 0%; */
        left: 0%;
        display: flex;
        font-size: 1.0em;
        justify-content: center;
    
    }
    
    .contact2-link{
        position: relative;
        top: 0%;
        left: 0%;
        margin-left: 17%;
        font-size: 1.0em;
   
    }
    /*---------------------------------------------*/
    .grid_image {
        position: relative;
        display: block;
        top: 7.0%;
        left:0%;
        background-color: whitesmoke;
    }
    .centered-text {
        position: relative;
        top: 0%;
        left: 0%;
        /*transform: translate(-50%, -50%);*/
        color:darkgray;
        font-size: 1.0em; /* Ajusta este valor según el tamaño de texto que desees */
        text-align: center;
        
    }   
    .imgMain {
        position: relative;
        top: 0%;
        left: 0%;
        display: flex;
        justify-content: center;
        align-items: center;

        background-color: whitesmoke;

    }
        
    .imgMain img {
        width: 75%;
        /*display: block;*/
        border-radius: 5px;
    }
    .instagram-link{
        position: relative;
        margin-top: 5px;
        top: 0%;
        left: 0%;
        margin-left: 10px;
    }
    .linkedin-link{
        position: relative;
        margin-top: 5px;
        top: 0%;
        left: 0%;
        margin-left: 10px;
    }
    .nvideo{
        position: relative;
        display: flex;
        margin-top: 20px;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-around;
        /* background-color: white; */
       
    }
    .nvideo video{
        width: 56%;
        border-radius: 5px;
    }
/*-----------------------------------------------------*/
  .grid_Hosp {
        display: grid;
        top: 4.5%;
        left: 0%;
        grid-template-columns: 45% 45%;
        column-gap: 6px;
        grid-auto-rows: 15% 57% 20%;
        background-color: whitesmoke;
        justify-content: center;
}
    .hospText {
        top:10%;
        left: 57%;
        justify-content: center;
    }
    .imgZorrotzaurre {
        background-color: whitesmoke;
        justify-content: center;
        align-items: center;
    }
    .imgGuimon {
        background-color: whitesmoke;
        justify-content: center;
    }
    .imgZorrotzaurre img {
        max-width: 100%;
        border-radius: 5px;
    }
    .imgGuimon img {
        max-width: 100%;
        border-radius: 5px;
    }
    .hospTextLeft{
        left: 0%;
        font-size: 1.0em;
        justify-content: center;
    }
    .hospTextRight{
        left: 0%;
        font-size: 1.0em;
        justify-content: center;
    }  
    /*----------------------------------------------------- */
    .carrusel {
        position: relative;
        overflow: hidden;
        top: 5%;
        width: 350px;
        background-color: white;
    }
    /*+++++++++*/
        .carrusel-imagenes {
        display: flex;
        width: 8750px; /* 25 imágenes × 500px  o 350px*/
        animation: deslizar 60s infinite;
    }

   
    .carrusel-imagenes img {
        width: 350px;
        height: auto;
    }
 
    @keyframes deslizar {
      0%    { transform: translateX(0); }
      4%    { transform: translateX(-350px); }
      8%    { transform: translateX(-700px); }
      12%   { transform: translateX(-1050px); }
      16%   { transform: translateX(-1400px); }
      20%   { transform: translateX(-1750px); }
      24%   { transform: translateX(-2100px); }
      28%   { transform: translateX(-2450px); }
      32%   { transform: translateX(-2800px); }
      36%   { transform: translateX(-3150px); }
      40%   { transform: translateX(-3500px); }
      44%   { transform: translateX(-3850px); }
      48%   { transform: translateX(-4200px); }
      52%   { transform: translateX(-4900px); }
      56%   { transform: translateX(-5250px); }
      60%   { transform: translateX(-5600px); }
      64%   { transform: translateX(-5950px); }
      68%   { transform: translateX(-6300px); }
      72%   { transform: translateX(-6650px); }
      76%   { transform: translateX(-7000px); }
      80%   { transform: translateX(-7350px); }
      84%   { transform: translateX(-7700px); }
      88%   { transform: translateX(-8050px); }
      92%   { transform: translateX(-8400px); }
      96%   { transform: translateX(-8750px); }
      100%  { transform: translateX(0); } 
    }


    
}
