/*
body {
  background-image: url("bk.png"); /* Ruta de la imagen 
    background-size: 880px; /* Ajusta para cubrir toda la pantalla 
    background-repeat: no-repeat; /* Evita que se repita 
    background-position: top right; /* Centrada horizontal y verticalmente 
    background-color: black;
  color: white;
  font-family: Garamond;
}

h1{
  color:red;
  font-family: "Brush Script MT";
  font-size: 8rem;
  } 


.tablinks{
  background-color: #4CAF50; /* Verde
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.tablinks:hover {
    background-color: #45a049; /* Verde más oscuro al pasar el mouse 
}*/


        /* ===== Estilos generales ===== */
        body {
          margin: 0; /* Quitamos el margen por defecto del navegador */
          padding: 50px; /* Espacio interno alrededor del contenido */
          background-image: url("bk.png"); 
          background-size: 880px; 
          background-repeat: no-repeat; 
          background-position: top right; 
          background-color: #07141B;
          color: white;
          font-family: Garamond;
          cursor: url('Gallery/navegacion.png'), auto;

          
        } 
        
           header {
            padding: 2rem;
            display: flex; /* Divide el header en partes */
            justify-content: space-between; /* Espacio entre elementos */
            align-items: center;
        }

        
        
        h1{
          color:red;
          font-family: "Brush Script MT";
          font-size: 4rem;
        } 

        /* ===== Enlace de accesibilidad ===== */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #000;
            color: #fff;
            padding: 8px;
            z-index: 100;
            text-decoration: none;
            transition: top 0.3s;
        }
        .skip-link:focus {
            top: 0;
        }

        /* ===== Header ===== */

        nav a {
           background-color: red;
            color: white;
            text-decoration: none;
            margin-right: 10px; /* Espacio entre botones*/
            padding: 10px 85px; /* Tamano de botones*/
            text-align: center;
            font-size: 15px;
        }
        
        #work:hover {
            text-decoration: underline;
            cursor: url('Gallery/dinero.png'), auto;
        }
        #media:hover {
            text-decoration: underline;
            cursor: url('Gallery/media.png'), auto;
        }
        #about:hover {
            text-decoration: underline;
            cursor: url('Gallery/about.png'), auto;
        }

        
    
        

        /* ===== Layout principal ===== */
        main {
            flex-wrap: wrap; /* Permite que se acomode en pantallas pequeñas */
          
            display: grid;
            grid-template-columns: 1fr 1fr 3fr; /* Proporciones: 2 - 3 - 1 */
            
            min-height: 70vh;
        }


        
        .centro{
            background-color: rgba(250, 0, 0, 0.4); /* Azul con 50% de transparencia */          
        }
        
        
         .iframe-container {
        width: 430px;   /* tamaño visible */
        height: 450px;
        overflow: hidden; /* oculta scroll extra */
        border: 1px solid #ccc;
    }
    .iframe-container iframe {
        width: 165%;
        height: 168%;
        transform: scale(0.6); /* 80% del tamaño original */
        transform-origin: 0 0; /* escala desde la esquina superior izquierda */
    }
      
        
        
        
        

        /* ===== Footer ===== */
        footer {
           
            color: white;
            text-align: center;
            padding: 10px;
        }

        /* ===== Responsive ===== */
        @media (max-width: 768px) {
            main {
                flex-direction: column; /* Apila las columnas en pantallas pequeñas */
            }
        }