/* Estilos personalizados */
 body {
     padding-top: 60px;
     padding-left: 0;
     transition: padding-left 0.3s ease;
 }

 /* Header fijo */
 .main-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1030;
     height: 60px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     transition: left 0.3s ease;
 }

 /* Sidebar */
 .sidebar {
     position: fixed;
     top: 60px;
     left: -250px;
     width: 250px;
     height: calc(100vh - 60px);
     z-index: 1020;
     transition: all 0.3s ease;
     overflow-y: auto;
 }

 /* Cuando el sidebar está abierto */
 .sidebar-open .sidebar {
     left: 0;
 }

 .sidebar-open body {
     padding-left: 250px;
 }

 /* Nav items del sidebar */
 .sidebar .nav-link {
     border-radius: 0;
     color: #333;
     padding: 12px 20px;
     transition: all 0.2s;
 }

 .sidebar .nav-link:hover {
     background-color: rgba(0, 0, 0, 0.05);
 }

 .sidebar .nav-link i {
     margin-right: 10px;
     width: 20px;
     text-align: center;
 }

 /* Botón del menú */
 .menu-btn {
     transition: transform 0.3s ease;
 }

 .sidebar-open .menu-btn {
     transform: rotate(90deg);
 }

 /* Contenido principal */
 .main-content {

     transition: margin-left 0.3s ease;
 }

 /* =================================== Header RESPONSIVO ================= */
.header_titulo{
font-style: italic;
font-size: 2.5rem;
}
.video-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Ocupa toda la pantalla */
  overflow: hidden;
}
.video-container video {
  width: 100%;
  height: 100vh; /* Se ajusta a la altura de la pantalla */
  object-fit: cover; /* Cubre sin deformarse */
}
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 10;
    padding: 20px;
    background-color: rgb(0 0 0 / 100%);
    border-radius: 15px;
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.text-overlay h3 {
  font-size: 2rem;
  margin: 0;
  color: white;
  font-style: italic;
}

.text-overlay p {
  font-size: 1.2rem;
  margin-top: 10px;
  font-style: italic;
}
.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
}
.seccion_color_1{
    background-color: #dfdfdf; /* Color de fondo claro */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

 /* =================================== FOTER RESPONSIVO ================= */

 /* Responsivo */
 @media (max-width: 768px) {
     .sidebar-open body {
         padding-left: 0;
         position: relative;
         overflow: hidden;
     }

     .sidebar-open .sidebar {
         box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
     }
 }