/* 
 * HOJA DE ESTILOS - Portafolio Nicolás Huenchual
 * Estilos principales para el portafolio web
 * Incluye diseño responsive y efectos interactivos
 */

/* ======================
   RESET Y ESTILOS BASE
   ====================== */
   body {
    margin: 0; /* Elimina márgenes por defecto */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente principal */
    background-color: #f4f6f8; /* Color de fondo suave */
    color: #333; /* Color de texto principal */
    line-height: 1.6; /* Espaciado entre líneas */
  }
  
  /* ======================
     ENCABEZADO Y NAVEGACIÓN
     ====================== */
  header nav {
    background-color: #003366; /* Azul oscuro corporativo */
    color: white; /* Texto blanco */
    padding: 1.5rem 2rem; /* Espaciado interno */
    display: flex;
    justify-content: space-between; /* Distribución horizontal */
    align-items: center; /* Centrado vertical */
    flex-wrap: wrap; /* Responsive: envuelve elementos en móviles */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  }
  
  nav h1 {
    margin: 0; /* Elimina margen por defecto */
    font-size: 1.8rem; /* Tamaño de fuente */
    font-weight: 600; /* Grosor de fuente */
  }
  
  nav ul {
    list-style: none; /* Elimina viñetas */
    display: flex;
    gap: 1.5rem; /* Espacio entre elementos */
    padding: 0;
    margin: 0;
  }
  
  nav ul li a {
    color: white;
    text-decoration: none; /* Sin subrayado */
    font-weight: 500;
    transition: color 0.3s ease; /* Transición suave para hover */
    font-size: 1.1rem;
  }
  
  /* Efecto hover para enlaces */
  nav ul li a:hover {
    color: #aad4ff; /* Azul claro al pasar mouse */
  }
  
  /* ======================
     CONTENIDO PRINCIPAL
     ====================== */
  main {
    max-width: 1200px; /* Ancho máximo del contenido */
    margin: 3rem auto; /* Centrado horizontal */
    padding: 0 1.5rem; /* Espaciado lateral */
    display: flex;
    flex-direction: column; /* Disposición en columna */
    gap: 3rem; /* Espacio entre secciones */
  }
  
  /* ======================
     ESTILOS DE SECCIONES (BOXES)
     ====================== */
  .box {
    background-color: white; /* Fondo blanco */
    border: 1px solid #e0e6ed; /* Borde sutil */
    border-radius: 12px; /* Esquinas redondeadas */
    padding: 2.5rem; /* Espaciado interno */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones */
  }
  
  /* Efecto hover para las cajas */
  .box:hover {
    transform: translateY(-5px); /* Levanta ligeramente */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
  }
  
  /* ======================
     ESTILOS DE TÍTULOS
     ====================== */
  h2 {
    color: #003366; /* Color azul corporativo */
    font-size: 2rem;
    margin-bottom: 1.5rem;
    position: relative; /* Para el pseudo-elemento */
    padding-bottom: 0.5rem; /* Espacio para la línea */
  }
  
  /* Línea decorativa bajo títulos h2 */
  h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #005299; /* Azul más claro */
  }
  
  h3 {
    color: #003366;
    font-size: 1.5rem;
    margin: 1.5rem 0 1rem;
  }
  
  /* ======================
     IMAGEN DE PERFIL
     ====================== */
  .profile-img {
    width: 400px; /* Tamaño fijo */
    height: 400px;
    object-fit: cover; /* Ajuste de imagen */
    border-radius: 50%; /* Forma circular */
    border: 5px solid #003366; /* Borde azul */
    margin: 0 auto 2rem; /* Centrado y margen inferior */
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra */
  }
  
  /* ======================
     SECCIÓN DE PROYECTOS
     ====================== */
  .project-item {
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease; /* Transición para efectos */
  }
  
  /* Efecto hover para items de proyecto */
  .project-item:hover {
    border-color: #aad4ff; /* Borde azul claro */
    transform: translateY(-3px); /* Levanta ligeramente */
  }
  
  .project-img {
    width: 50%; /* Responsive */
    height: 50%;
    border-radius: 8px;
    margin: 1rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* Zoom suave */
  }
  
  /* Efecto zoom en hover */
  .project-item:hover .project-img {
    transform: scale(1.02); /* Zoom sutil */
  }
  
  /* Estilos para enlaces de proyectos */
  .project-item a {
    color: #005299; /* Azul */
    text-decoration: none;
    font-weight: 500;
    display: inline-flex; /* Para alinear icono */
    align-items: center;
    gap: 0.5rem; /* Espacio entre texto e icono */
    transition: color 0.3s ease;
  }
  
  .project-item a:hover {
    color: #003366; /* Azul más oscuro */
    text-decoration: underline;
  }
  
  /* ======================
     SECCIÓN DE FORMACIÓN
     ====================== */
  #formacion ul {
    list-style-type: none; /* Sin viñetas */
    padding: 0;
  }
  
  #formacion li {
    background: #f8fafc; /* Fondo muy claro */
    margin-bottom: 0.8rem;
    padding: 1rem 1.5rem;
    border-left: 4px solid #005299; /* Borde lateral azul */
    border-radius: 0 4px 4px 0; /* Redondeo solo lado derecho */
  }
  
  /* ======================
     FORMULARIO DE CONTACTO
     ====================== */
  .contact-form {
    background: #f8fafc; /* Fondo claro */
  }
  
  .contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #003366; /* Azul corporativo */
  }
  
  /* Campos de formulario */
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-family: inherit; /* Hereda fuente del body */
    transition: border-color 0.3s ease; /* Transición suave */
  }
  
  /* Efecto focus para campos */
  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: #005299; /* Borde azul */
    outline: none; /* Elimina outline por defecto */
    box-shadow: 0 0 0 3px rgba(0, 83, 153, 0.1); /* Sombra interior */
  }
  
  /* Botón de enviar */
  .contact-form button {
    background-color: #003366;
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
  }
  
  .contact-form button:hover {
    background-color: #005299; /* Azul más claro */
  }
  
  /* ======================
     FOOTER
     ====================== */
  footer {
    background-color: #003366; /* Igual que header */
    color: white;
    text-align: center;
    padding: 2rem;
    margin-top: 5rem; /* Espacio superior */
  }
  
  /* ======================
     MENSAJES DEL FORMULARIO
     ====================== */
  #form-message {
    display: none; /* Oculto por defecto */
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: 6px;
    font-weight: 500;
    animation: fadeIn 0.3s ease-out; /* Animación al aparecer */
  }
  
  /* Variante para mensajes de éxito */
  #form-message.success {
    background-color: #e8faf8;
    color: #2ec4b6;
    border-left: 4px solid #2ec4b6;
  }
  
  /* Variante para mensajes de error */
  #form-message.error {
    background-color: #ffecec;
    color: #f72585;
    border-left: 4px solid #f72585;
  }
  
  /* Animación para mensajes */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* ======================
     ESTADO DESHABILITADO
     ====================== */
  button[disabled] {
    opacity: 0.7;
    cursor: not-allowed; /* Cursor prohibido */
  }
  
/* ======================
   MEDIA QUERIES ADICIONALES
   ====================== */

/* Tablet - Vista horizontal (entre 769px y 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .profile-img {
    width: 300px;
    height: 300px;
  }
  
  .box {
    padding: 2rem;
  }
  
  main {
    gap: 2.5rem;
  }
}

/* Tablet - Vista vertical (entre 481px y 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .profile-img {
    width: 250px;
    height: 250px;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  h3 {
    font-size: 1.3rem;
  }
}