html, body {
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        }
    
        main {
            flex: 1;
        }
    
        footer {
            background-color: #f5f5f5;
            text-align: center;
            padding: 10px 0;
        }
        
        .grid-imagenes {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 columnas en desktop */
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto; /* Centrado */
            justify-content: center;
        }
        
        @media (max-width: 768px) {
            .grid-imagenes {
                display: grid;
                gap: 1.5rem; /* Espacio entre celdas */
                padding: 1rem;
                grid-template-columns: repeat(1, 1fr);
            }
            .img-item img {
                width: 100%;
                height: 500px!important; /* Cambiado de 400px a 'auto' para mantener la proporción */
                display: block;
                object-fit: contain; /* Cambiado para que la imagen mantenga su proporción */
                transition: filter 0.4s ease, transform 0.4s ease;
            }
        }
        
        /* Animación de aparición */
        @keyframes fadeUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .img-item {
            position: relative;
            overflow: hidden;
            transform: translateY(50px);
            opacity: 0;
            display:flex;
            align-items:center;
            justify-content:center;
            animation: fadeUp 0.6s forwards;
            width: 100%;
            height: 400px!important;
            cursor: pointer;
        }
        
        /* Imagen normal */
        .img-item img {
            width: 120%;
            height: auto; 
            display: block;
            /* Cambiado para que la imagen mantenga su proporción */
        }
        
        /* Si quieres que la imagen cubra todo el contenedor, usa `object-fit: cover` */
        .img-item img.cover {
            object-fit: cover;
            height: 100%; /* Esto hace que la imagen cubra todo el contenedor */
        }

        
        /* Efecto borroso y ligero zoom al hacer hover */
        .img-item:hover img {
            filter: blur(2px);
            transform: scale(1.03);
        }
        
        
        /* Overlay desde abajo */
        .img-item::before {
            content: "";
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9));
            opacity: 0;
            transition: left 0.3s ease, opacity 0.4s ease;
            z-index: 1;
        }
        
        /* Muestra el overlay tipo "humo" al subir */
        .img-item:hover::before {
            bottom: 0;
            opacity: 1;
        }
        
        .img-item p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff!important; /* blanco puro */
            margin: 0;
            font-weight: 600!important; /* más elegante que 800 */
            font-size: 1.1rem!important; /* más grande */
            z-index: 2!important;
            opacity: 0;
            text-align: center;
            transition: opacity 0.4s ease;
            font-family: 'Montserrat', serif!important; /* estilizada y elegante */
            letter-spacing: 1px;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8)!important; /* resalta el blanco sobre fondo oscuro */
        }
        
        .img-item:hover p {
            opacity: 1!important;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            min-height: 100%;
            background: rgba(0, 0, 0, 0.7);
            overflow-y: auto; /* Scroll en toda la ventana si el contenido es muy largo */
            padding: 0px 0; /* Espacio arriba y abajo */
            color:white;
        }
        
        .modal-content {
            background:black;
            margin: auto;
            padding: 20px;
            width: 80vw;
            max-width: 80vw;
            position: relative;
            border-radius: 10px;
        }
        
        .close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color:white;
        }
        .titulo-nombre {
            background-color:black;
            max-height:250px;
        }
        .titulo-nombre h1 {
            color:white;
            font-size: 2.7rem!important;
            
        }
        .titulo-Experiencia{
            display:flex;
            justify-content:center;
            align-items:center;
            background-color:black;
            flex-direction:column;
            max-height:300px;
            margin-top:10px;
        }
        .titulo-Experiencia h1 {
            color:white;
            font-weight:800!important;
            font-size: 2.7rem!important;
        }
        .titulo-Experiencia p {
            color: rgb(36, 214, 180)!important;
            font-size: 1rem!important;
        }
        
       .informacion-personal {
           display: flex;
            justify-content: space-between; /* Deja espacio entre los dos divs */
            align-items: center;            /* Centra verticalmente el contenido */
            gap: 10px;                      /* Espacio de 20px entre los divs */
            background: white;
            padding: 20px;
            color:black;
            border-radius:10px;
            min-height: 900px!important;
        }
       
        @media (max-width: 768px) {
            .informacion-personal {
                 display: flex;
                flex-direction: column; /* Deja espacio entre los dos divs */
                align-items: center;            /* Centra verticalmente el contenido */
                gap: 10px;                      /* Espacio de 20px entre los divs */
                background: white;
                padding: 10px;
                color:black;
                border-radius:10px;
            }
            .modal-content {
                background:black;
                margin: auto;
                padding: 20px;
                width: 100vw;
                max-width: 100vw;
                position: relative;
                border-radius: 10px;
            }
        }
        .informacion-personal > div {
            flex: 1; /* cada div ocupa el 50% */
        }
        .imagen-informacion{
            display: flex;
            justify-content: center; /* Centra horizontalmente */
            align-items: center;     /* Centra verticalmente */
            height: 400px;           /* Altura del contenedor (ajústala según necesites) */
             
        }
        
        .imagen-informacion img{
            border-radius:10px;
        }
        
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-icons a {
            color: #333; /* Color de los iconos */
            font-size: 36px; /* Tamaño de los iconos */
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .social-icons a:hover {
            color: #007bff; /* Color cuando pasa el mouse por encima */
        }
        
        .ContenedorExpTercero {
            display: flex;
            justify-content: space-between; /* Deja espacio entre los dos divs */
            align-items: center;            /* Centra verticalmente el contenido */
            gap: 10px;                      /* Espacio de 20px entre los divs */
            background: white;
            padding: 20px;
            color:black;
            border-radius:10px;
            min-height: 900px!important;
        }
        @media (max-width: 768px) {
            .ContenedorExpTercero {
                display: flex;
                flex-direction: column; /* Deja espacio entre los dos divs */
                align-items: center;            /* Centra verticalmente el contenido */
                gap: 10px;                      /* Espacio de 20px entre los divs */
                background: white;
                padding: 10px;
                color:black;
                border-radius:10px;
            }
            .ContenedorExpTercero h2{
                color: hsl(0, 0%, 30%)!important;
                font-weight: 600!important;
                font-size: 2rem!important;
            }
             .info-row h3 {
              margin: 0;
              font-size: 18px!important; /* Tamaño mayor */
              line-height: 1.2;
              margin-top:20px;
            }
            
        }
        .ContenedorExpTercero > div {
            flex: 1; /* cada div ocupa el 50% */
        }
       .info-row {
          display: flex;
          align-items: baseline; /* Centrado vertical considerando la línea base del texto */
          margin-bottom: 6px;
        }

        .info-row h3 {
          margin: 0;
          font-size: 35px; /* Tamaño mayor */
          line-height: 1.2;
          margin-top:20px;
        }

        .descEstudio {
          color: #8597ae !important;
          font-weight: bold !important;
          font-size: 18px; /* Más pequeño que h3 */
          margin-left: 10px;
          line-height: 1.4 !important;
        }
        .form-estudios h2{
            color: hsl(0, 0%, 30%)!important;
            font-weight: 900!important;
            font-size: 4rem;
        }
        .form-estudios h3 {
            font-size: 1.3rem;
            margin-bottom: 4px;
            margin-top: 6px;
        }
        .form-estudios i {
            font-size: 1rem;
            color: #168C75;
        }
       
     /* Slider book de actores Modal 3 imgenes */
       .slider-book-container {
          position: relative;
          width: 100% !important;
          max-width: 100%;
          margin: auto;
          overflow: hidden;
        }
        
        .slider-book-track {
          display: flex;
          transition: transform 0.5s ease;
        }
        
        .slider-book-slide {
          min-width: 33.3333%;
          box-sizing: border-box;
          padding: 10px;
        }
        
        @media (max-width: 768px) {
          .slider-book-slide {
            min-width: 100%;
            box-sizing: border-box;
            padding: 10px;
          }
        }
        
        .slider-book-slide img {
          max-height: 800px;
          width: 100%;
          object-fit: contain;
          display: block;
          margin: auto;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        
        .slider-book-prev, .slider-book-next {
          position: absolute;
          top: 45%;
          transform: translateY(-50%);
          background-color: rgba(0,0,0,0.5);
          color: white;
          font-size: 24px;
          border: none;
          padding: 10px;
          cursor: pointer;
          z-index: 10;
        }
        
        .slider-book-prev { left: 0; }
        .slider-book-next { right: 0; }
        
        .video-container {
          position: relative;
          padding-bottom: 56.25%; /* Mantiene relación 16:9 */
          height: 0;
          overflow: hidden;
          width: 100%;
          max-width: 100%;
        }
        
        .video-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 0;
        }
        
        .hidden {
            display: none;
        }
        #toggle-estudios {
            margin-top: 5px;
            background-color: #168C75;
            color: white;
            font-weight:bold;
            border: none;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 5px;
        }
        
        .toggleExtra {
            margin-top: 5px;
            background-color: #168C75;
            color: white;
            font-weight:bold;
            border: none;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 5px;
        }
        .bookActores {
            margin-top: 250px;
        }
        
        .book-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        
        .book-texto {
            margin-top: 40px;
            margin-left: 80px;
            max-width: 40%;
        }
        
        .book-texto h1 {
            font-size: 6.5em;
        }
        
        .book-texto1 {
            margin-top: 40px;
            margin-left: 80px;
            
        }
        
        .book-texto1 h1 {
            font-size: 5em;
        }
        
        .book-titulo-destacado {
            color: transparent;
            -webkit-text-stroke: 2px black;
            font-weight: bold;
        }
        
        .book-texto p {
            font-size: 3em;
            line-height: 1.6;
            margin-top: 10px;
        }
        
        .book-imagen {
            margin: 20px;
            transform: rotate(10deg);
            transition: transform 0.3s ease;
        }
        
        .book-imagen:hover {
            transform: rotate(45deg) scale(1.05);
        }
        
        .book-imagen img {
            width: 300px;
            max-width: 100%;
            height: auto;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .book-container {
                flex-direction: column;
                text-align: center;
            }
        
            .book-texto {
                margin: 20px;
                max-width: 90%;
            }
        
            .book-imagen {
                margin-top: 30px;
                transform: rotate(45deg);
            }
           
           
            .book-texto h1 {
                font-size: 3.5em;
            }
             
            .book-texto1 h1 {
                font-size: 3em;
            }
            
          
        }
        
        /* Contenedor grid responsive */
        .grid-container {
          display: grid;
          gap: 1.5rem; /* Espacio entre celdas */
          padding: 1rem;
          grid-template-columns: repeat(1, 1fr);
        }
        
        @media (min-width: 640px) {
          .grid-container {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        
        @media (min-width: 768px) {
          .grid-container {
            grid-template-columns: repeat(3, 1fr);
          }
        }
        
        @media (min-width: 1024px) {
          .grid-container {
            grid-template-columns: repeat(4, 1fr);
          }
        }
        
        /* Cada tarjeta */
        .grid-item {
          background: #fff;
          border-radius: 1rem;
          box-shadow: 0 4px 10px rgba(0,0,0,0.1);
          overflow: hidden;
          padding: 1rem;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        
        /* Título categoría */
        .grid-item h3 {
          font-weight: 600;
          font-size: 1.125rem; /* 18px */
          color: #2d3748; /* gris oscuro */
          margin-bottom: 0.5rem;
        }
        
        /* Contenedor imagen con proporción */
        .img-wrapper {
          width: 100%;
          aspect-ratio: 3 / 4; /* alto relativo al ancho */
          background-color: #f7fafc; /* gris claro */
          border-radius: 0.5rem;
          overflow: hidden;
        }
        
        /* Imagen que cubre el contenedor sin deformar */
        .img-wrapper img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
        }
        
        /* Nombre actor */
        .grid-item h4 {
          margin-top: 0.75rem;
          font-size: 1rem;
          font-weight: 500;
          color: #1a202c; /* texto oscuro */
        }
        
        /* Edad */
        .grid-item p {
          font-size: 0.875rem;
          color: #718096; /* gris medio */
        }
        
        .ver-mas-container {
          text-align: center;
          margin: 40px 0;
        }
        
        .ver-mas-btn {
          display: inline-block;
          padding: 12px 30px;
          background: linear-gradient(135deg, #395560, #1a2a33);
          color: #fff;
          font-family: "Rubik Mono One", sans-serif;
          text-decoration: none;
          font-size: 1.1rem;
          border-radius: 50px;
          box-shadow: 0 4px 10px rgba(0,0,0,0.5);
          transition: all 0.3s ease;
        }
        
        .ver-mas-btn:hover {
          background: #ffd700;
          color: #111;
          transform: scale(1.05);
          box-shadow: 0 6px 15px rgba(0,0,0,0.7);
        }