/* vertical-layout.css */
/* CSS específico para mejorar el diseño en modo vertical/móvil */

@media (max-width: 768px) {
  /* Estructura general en modo vertical */
  body {
    display: flex;
    flex-direction: column;
  }
  
  /* Asegurar que el terminal siempre esté en la parte superior */
  #header {
    order: 1;
    margin-bottom: 20px;
    z-index: 10;
  }
  
  /* Botones debajo del terminal */
  #botones-portafolio {
    order: 2;
    margin-bottom: 15px;
    z-index: 9;
  }
  
  /* Tarjetas debajo de los botones */
  .tarjetas {
    order: 3;
    z-index: 8;
    position: relative;
    margin-top: 15px;
  }
  
  /* Carrusel debajo de todo */
  #carrusel-wrapper {
    order: 4;
    z-index: 7;
    margin-top: 20px;
  }
  
  /* Mejorar la transparencia y separación entre elementos */
  .code-editor {
    margin: 0 auto 25px auto;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  }
  
  /* Ajustar el footer */
  #footer {
    order: 5;
    margin-top: 30px;
  }
}