/* PALETA DE COLORES */
:root {
  --fondo: rgb(10, 0, 30); 
  --texto: #ffffff;         
}

/* RESET */
* { 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: var(--fondo);
  color: var(--texto);            
  line-height: 1.6;
}

/* PORTADA */
#portada {
  position: relative;
  width: 100%;
  height: 90vh; 
  overflow: hidden;
  background-color: var(--fondo);
}

#portada h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--texto);
  font-size: 3rem; 
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

/* HEADER */
.header {
  background-color: rgba(0,0,0,0.3);
  color: var(--texto);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1rem 0;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  margin: 0 1rem;
  font-size: 1.8rem;
}

/* Menú como botones horizontales */
.header nav {
  display: flex;
  gap: 1rem;
}

.menu-btn {
  padding: 0.6rem 1.2rem;
  background-color: rgba(255,255,255,0.2);
  color: var(--texto);
  font-weight: 700;
  text-decoration: none; /* quita la línea */
  border-radius: 8px;
  transition: background 0.3s, transform 0.3s;
}

.menu-btn:hover,
.menu-btn:active {
  background-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

/* SECCIONES */
.seccion { 
  padding: 5rem 0; 
  text-align: center; 
}
.seccion h2 { 
  font-size: 2rem; 
  color: var(--texto); 
  margin-bottom: 1.5rem; 
}
.seccion p { 
  max-width: 800px; 
  margin: 0 auto; 
  font-size: 1.1rem; 
  line-height: 1.8; 
  color: var(--texto);
}

/* TRABAJOS GRID */
.trabajos-grid {
  display: grid;
  grid-auto-flow: column; 
  grid-auto-columns: minmax(220px, 1fr); 
  gap: 2rem;
  overflow-x: auto; 
  justify-items: center;
}

.trabajo-card {
  background-color: rgba(255, 255, 255, 0.1); 
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.5);
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none; /* quita cualquier subrayado */
}

.trabajo-card:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.7);
}

.trabajo-preview {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: block;
  transition: transform 0.5s ease; 
}

.trabajo-card h3 {
  margin: 0.5rem 0 1rem 0;
  color: var(--texto);
  font-weight: 700;
  text-align: center;
  text-decoration: none; /* asegura que no aparezca línea */
}

/* BOTONES EXTRA */
.extra-btn, .recurso-btn {
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
  background-color: rgba(255,255,255,0.1);
  color: var(--texto);
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
}

.extra-btn:hover, .extra-btn:active,
.recurso-btn:hover, .recurso-btn:active {
  background-color: rgba(255,255,255,0.2);
  transform: scale(1.05);
}

/* FOOTER */
footer { 
  background-color: rgba(0,0,0,0.3); 
  padding: 1.5rem 0; 
  text-align: center; 
  color: var(--texto); 
}

/* RESPONSIVO */
@media(max-width:768px){ 
  .header nav ul { flex-direction: column; gap: 0.5rem; } 
}
@media(max-width:480px){ 
  .trabajos-grid{ grid-template-columns: 1fr; } 
}

.sobre-curso {
  background-color: rgba(255, 255, 255, 0.1); /* blanco transparente */
  border-radius: 16px;                        /* bordes redondeados */
  padding: 2rem;                               /* espacio interno */
  max-width: 600px;                            /* ancho máximo */
  margin: 2rem auto;                           /* centrado horizontal */
  text-align: center;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);     /* sombra tipo botón */
  transition: transform 0.3s, background 0.3s;
}

.sobre-curso:hover {
  background-color: rgba(255, 255, 255, 0.2); /* un poco más sólido al pasar mouse */
  transform: translateY(-3px);                /* efecto “flotante” */
}

.sobre-curso h2 {
  color: var(--texto);
  margin-bottom: 1rem;
}

.sobre-curso p {
  color: var(--texto);
  line-height: 1.6;
}