/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/*GENERAL-------------------------------------------------------------*/
body 
{
  background-color: #627362; /*B3D1B3 es el color del favicon*/
  /* #8FBC8F mas oscurito */
  background-image: url("images/fondo.png");
  background-repeat: repeat;
  color: #2d342d;
  font-family: Monospace, 'Courier New';
  font-size: 1.2rem;
  text-align: justify;
}
h1
{
  font-family: RetroGanon;
  font-size: 2.5rem;
}
h2 {
  font-family: RetroGanon;
  font-size: 1.5rem;
}
.GeneralBox
{
    width: 100%;
    max-width:1000px;
    margin: 0 auto;
}
  /* Contenedor principal*/
  .MainBox {
      background-color: #abcdab;
      background-image: linear-gradient(0deg,rgba(127, 151, 127, 1) 0%, rgba(171, 205, 171, 1) 100%);      margin: 1% 0;
      border: 2px solid #d2e4d2;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

/*header-------------------------------------------------------------*/
.Header
{
  width:100%;
  height: auto;
  font-size: 0.5rem;
}

/*navBar--------------------------------------------------------------*/
.NavBar
{
  
  list-style-type: none;
  background: #2D342D;
  background-image: linear-gradient(90deg,rgba(45, 52, 45, 1) 0%, rgba(143, 188, 143, 1) 50%, rgba(45, 52, 45, 1) 100%);
  display: flex;
  justify-content: space-evenly;
  margin: 0;
  overflow: auto; 
  white-space: nowrap;
  position: sticky;
  top: 0;
  overflow-x: auto;
  z-index: 2;
  

}

@font-face {
    font-family: "RetroGanon";
    src: url("/fonts/retganon.ttf") format("truetype");;
}
.NavBar li a {
  display: flex;
  color: white;
  padding: 10px 16px;
  font-family: RetroGanon;
  font-size: 2rem;
  text-decoration: none; 
  text-align: center; 

}

.NavBar li a:hover {
  color: #d2e4d2; 
  cursor: pointer; 
  transform: scale(1.1);
}
/*SobreMi--------------------------------------------------------------*/

      /* Contenedor interno / grid */
      .SMSobreMi 
      {
        background-color: #d2e4d2;
        margin: 1%;
        border: 2px solid #f9fcf9;
        display: grid;
        grid-template-columns: 75% 25%; /* Texto 75% imagen 25% */
        gap: 15px;
        padding: 15px;
        box-sizing: border-box;
      }
      /* Texto */
      .SMTexto {
        word-break: break-word;
        overflow-wrap: break-word;
        padding-right: 10px;
      }
     
      

      /* Columna derecha con foto y CV, flex*/
      .SMDerecha {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding:15px;
        justify-content: space-evenly;
      }

      /* Foto de perfil */
      .SMFotoPerfil {
        width: 100%;
        max-width: 100%;
        min-width: 150px;
        border: 2px solid #f9fcf9;
        box-sizing: border-box;
        object-fit: cover; 
      }

      /* Icono CV */
      .SMCV {
        max-width:128px;
        width: 100%;
        height: auto;
        box-sizing: border-box;
      }
      
      .SMCV:hover {
       cursor: pointer;
        transform: scale(1.1);
      }
    /* Sección inferior con habilidades dcha y foto izda" */
      .SMAbajo {
        display: flex;
        flex-direction: row;
        padding: 10px;
        padding-top: 0;
        align-items: center;
      }
        .SMHabilidades
        {
        padding: 10px;
        background-color: #d2e4d2;
        border: 2px solid #f9fcf9;
        box-sizing: border-box;
        margin: 0;
        flex: 1;
        }
        .SMGifGusano 
       {
         display:flex;
              align-items: center;
          justify-content: center;
          margin: 0;       
          flex: 0 0 auto;
        }


        .SMGifGusano img {
        max-width: 100%;
        height: auto;
        width:auto;
        display: block;
        margin:0;
         
        }   
/*Proyectos*/
.PProyectos {
  background-color: #d2e4d2;
  margin: 10px;
  border: 2px solid #f9fcf9; 
  box-sizing: border-box;
  display: grid;
  padding: 10px;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
  .PJuego {
    background-color: #D2E4D2;
    background-image: linear-gradient( rgba(210, 228, 210, 1) 50%, #bcd7bc 100%);  
   display: flex;
   flex-direction: column;
    overflow: hidden;
  }

  .PJuego:hover {
    transform: scale(1.02);
  }
    .PContenido {
      padding: 10px 15px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
      .PFoto {
        width: 100%;
        aspect-ratio: 16 / 9;
       overflow: hidden;
      }
      .PFoto img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
      }
      .PTitulo {
        font-family: RetroGanon;
        font-size: 1.8rem;
        color: #2d342d;
      }

      .PDetalles {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 0.9rem;
    }

        .PDetalle {
          background: #f1f3f1;
          border-radius: 10px;
          padding: 2px 6px;
        }
     .PRol {
        margin-top: 8px;
        background: #f1f3f1;
        border-left: 4px solid #8fbc8f;
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 0.95rem;
        color: #2d342d;
        font-style: italic;
      }

      .PDescripcion {
        font-size: 1rem;
        color: #2d342d;
        margin-top: 5px;
      }
/*Página de Juegos----*/
.JJuego
{
  background-color: #d2e4d2;
  margin: 10px;
  border: 2px solid #f9fcf9; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  }
  .JFotoPrincipal {
    width: 100%;
    overflow: hidden;
  }
  .JFotoPrincipal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

/* DETALLES Y DESCRIPCIÓN */
  .JInfo {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
  }

    .JDetalles {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

      .JDetalle {
        background: #f1f3f1;
        border-radius: 10px;
        padding: 4px 8px;
        font-size: 0.9rem;
      }

    .JDescripcion {
      display: grid;
      grid-template-columns: 200px 1fr; /* imagen a la izquierda, texto a la derecha */
      gap: 15px;
      align-items: start;
      font-size: 1.1rem;
      color: #2d342d;
      line-height: 1.4;
      text-align: justify;
    }

    .JImagenTexto {
      width: 100%;
      max-width: 200px;
      justify-self: start;
    }

    .JImagenTexto img {
      width: 100%;
      height: auto;
      display: block;
      border: 2px solid #f9fcf9;
      border-radius: 10px;
      box-sizing: border-box;
      background-color: #b3d1b3;
    }   

    .JTexto {
      word-break: break-word;
      overflow-wrap: break-word;
    }
    /* BOTONES */
    .JBotones {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
      .JBoton {
        background: #2d342d;
        color: #f1f3f1;
        padding: 8px 16px;
        text-decoration: none;
        border-radius: 8px;
        font-family: RetroGanon;
        font-size: 1.2rem;
      }
      .JBoton:hover {
        background: #8fbc8f;
        color: #2d342d;
        transform: scale(1.05);
      }

/*RESPONSABILIDADES y APRENDIZAJES */
.JSec {
  background: #f1f3f1;
  padding: 0 15px 10px 15px;
  border-radius: 8px;
}
.JSec ul {
  margin: 0;
  padding-left: 20px;
}

/* GALERÍA */
.JGaleria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.JGaleria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #f9fcf9;
  border-radius: 10px;
}

.JGaleria img:hover {
  transform: scale(1.03);
}
/*Contacto---------------*/
.CContacto 
{
  margin: 10px;
    border: 2px solid #f9fcf9;
    display: grid;
    grid-template-rows: auto;
    gap: 10px;
    background-color: #d2e4d2;
}
.CFila
{
  display: grid;
  grid-template-columns: 64px auto; 
  gap: 15px;
  padding: 15px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;

}      
.CImages{
  width: 64px;
  height: auto;
}      
.CImages img {
  width: 100%;
  height: auto;
  display: block;
}
.CTexto {
  word-break: break-word;
  overflow-wrap: break-word;
      }

/* DISPOSITIVOS MOVILES -------------------------------------------------------------*/
@media (max-width: 768px) { 
  /* Sección Sobre Mí */
  .SMSobreMi {
    grid-template-columns: 1fr 150px;
  }

  .SMDerecha {
    padding: 0;
  }

  .SMAbajo {
    flex-direction: column;
    justify-content: flex-start; 
  }

  .SMGifGusano {
    transform: rotate(90deg);
  }

  /* Proyectos en lista */
  .PProyectos {
    grid-template-columns: 1fr;
  }

  /* --- PÁGINA DE JUEGOS --- */
  .JDescripcion {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto; /* texto primero, imagen después */
  }

  /* Orden correcto: texto arriba, imagen abajo */
  .JDescripcion .JTexto {
    order: 1;
  }
  .JImagenTexto {
      justify-self: center;
  }

  .JDescripcion .JImagenTexto {
    order: 2;
  }

  .JDescripcion img {
    margin: 10px auto 0 auto;
    width: 100%;
    max-width: 300px;
    display: block;
  }

  /* Responsabilidades y Aprendizaje */
  .JSec {
    padding: 12px 15px;
  }

  .JGaleria {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* PANTALLAS MUY PEQUEÑAS ------------------------------------------*/
@media (max-width: 480px) {
  .SMSobreMi {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .SMTexto {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
  }

  .SMDerecha {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    justify-content: space-around;
    padding: 0;
  }

  .SMFotoPerfil {
    max-width: 150px;
  }

  .CImages {
    width: 32px;
  }

  .CFila {
    grid-template-columns: 32px auto;   
  }

  /* Página de juego: imagen más pequeña */
  .JDescripcion img {
    max-width: 250px;
  }
  /* Galería */
  .JGaleria {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .JGaleria img {
    width: 100%;
    height: auto;
  }
}