body {
      background-color: #0A1828; /* azul oscuro clásico */
      color: #e0e0e0; /* blanco */
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    h1 {
      margin-top: 40px;
      font-size: 2.5em;
      color: #e0e0e0;
    }
    h2 {
      font-weight: normal;
      margin-bottom: 20px;
      color: #31EC56;
    }
    .buttons {
      margin: 20px 0 40px 0;
    }
    .buttons a {
      display: inline-block;
      margin: 0 10px;
      padding: 8px 16px;
      border: 1px solid #178582; /* turquesa */
      border-radius: 20px; /* botones redondeados */
      text-decoration: none;
      color: #178582;
      transition: background 0.3s, color 0.3s;
      font-size: 0.9em;
    }
    .buttons a:hover {
      background: #178582;
      color: #0A1828;
    }
    .container {
      max-width: 700px;
      margin: 0 auto 60px auto;
      padding: 20px;
      text-align: left;
      text-indent: 2em;
      line-height: 1.6;
    }
    .work {
      max-width: 700px;
      margin: 0 auto 60px auto;
    }
    .work2 {
      max-width: 700px;
      margin: 0 auto 60px auto;
      padding: 20px;
      border: 2px solid #31EC56; /* verde malaquita */
      background-color: rgba(0,0,0,0.3); /* ligero contraste */
    }
    .mini-btn {
      display: inline-block;
      margin-left: 10px;
      padding: 4px 10px;
      border: 1px solid #178582; /* turquesa */
      border-radius: 12px; /* mini-botones redondeados */
      text-decoration: none;
      color: #178582;
      font-size: 0.8em;
      transition: background 0.3s, color 0.3s;
    }
    .mini-btn:hover {
      background: #178582;
      color: #0A1828;
    }
    .work img, 
    .work iframe {
      display: block;
      margin: 20px auto;
      max-width: 100%;
      height: auto;
    }
    iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
    
    /* MEJORAS PARA DISPOSITIVOS MÓVILES */
    @media (max-width: 768px) {
      iframe {
        width: 100%;
        height: auto;
      }
      
      /* Mejoras específicas para botones en mobile */
      .buttons {
        margin: 25px 0 45px 0;
        padding: 0 10px; /* Añadir padding lateral al contenedor */
      }
      
      .buttons a {
        display: inline-block;
        margin: 5px 15px; /* Aumentar espaciado horizontal y añadir vertical */
        padding: 12px 20px; /* Aumentar área táctil */
        min-height: 44px; /* Altura mínima para accesibilidad táctil */
        box-sizing: border-box; /* Incluir padding en el cálculo de altura */
        line-height: 1.2; /* Mejorar alineación vertical del texto */
        font-size: 1em; /* Aumentar ligeramente el tamaño de fuente */
      }
      
      /* Asegurar que los botones no se compriman demasiado */
      .buttons a {
        min-width: 120px; /* Ancho mínimo para evitar botones muy estrechos */
        text-align: center;
      }
      
      /* Espaciado adicional para el contenedor principal en mobile */
      .work2 {
        margin: 0 auto 40px auto;
        padding: 15px;
      }
      
      /* Ajustar el título principal en mobile */
      h1 {
        font-size: 2.2em;
        margin-top: 30px;
      }
    }
    
    /* Para pantallas muy pequeñas (teléfonos en vertical) */
    @media (max-width: 480px) {
      .buttons a {
        margin: 8px 10px; /* Aumentar aún más el espaciado vertical */
        padding: 14px 22px; /* Área táctil más grande */
        font-size: 1.1em; /* Texto más legible */
      }
      
      .buttons {
        margin: 30px 0 50px 0;
      }
      
      h1 {
        font-size: 2em;
      }
    }