/* =============================
RESET BÁSICO
============================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #f8f9fa;
color: #333;
}

/* =============================
LAYOUT GENERAL
============================= */
.main-container {
display: flex;
min-height: 100vh;
}

/* =============================
SIDEBAR
============================= */
.sidebar {
width: 220px;
background: rgb(0, 0, 70);
color: white;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
}

.sidebar .logo {
font-size: 2rem;
font-weight: bold;
margin-bottom: 2rem;
}

.sidebar nav ul {
list-style: none;
width: 100%;
}

.sidebar nav ul li {
margin: 1rem 0;
}

.sidebar nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
transition: color 0.3s;
}

.sidebar nav ul li a:hover {
color: #0d6efd;
}

/* =============================
CONTENIDO PRINCIPAL
============================= */
.content {
flex: 1;
padding: 2rem;
overflow-y: auto;
}

.section {
margin-bottom: 4rem;
}

/* =============================
SECCIÓN ABOUT
============================= */
.about h1 {
font-size: 2.5rem;
font-weight: bold;
}

.about h1 span {
color: #0d6efd;
}

.about p {
margin: 1rem 0 2rem;
font-size: 1.1rem;
color: #333;
}


#nombre, #descripcion {

padding-right: 5px;
white-space: normal;      
word-wrap: break-word;    
line-height: 1.5;
max-width: 90%;           

}

/* =============================
SECCIÓN PROYECTOS
============================= */
.projects .project-card {
border-radius: 15px;
transition: transform 0.3s, box-shadow 0.3s;
}

.projects .project-card:hover {
transform: translateY(-5px);
box-shadow: 0px 10px 20px rgba(0,0,0,0.15);
}

/* =============================
SECCIÓN CONTACTO
============================= */
.contact form input,
.contact form textarea {
width: 100%;
border-radius: 10px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 15px;
}

.contact button {
border-radius: 10px;
}

/* =============================
RESPONSIVIDAD
============================= */
@media (max-width: 768px) {
.main-container {
flex-direction: column;
}

.sidebar {
width: 100%;
flex-direction: row;
justify-content: space-around;
padding: 1rem;
position: relative;
}

.sidebar .logo {
margin-bottom: 0;
font-size: 1.5rem;
}

.content {
margin-left: 0;
padding: 1rem;
}

.about h1 {
font-size: 2rem;
text-align: center;
}

.about p {
text-align: center;
}

.projects .row {
flex-direction: column;
}

#nombre, #descripcion {
max-width: 100%;
text-align: center;
}
}
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: #007bff;
  margin-left: 2px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}