.contorno-texto {
  -webkit-text-stroke-width: 3px; /* Grosor del contorno */
  -webkit-text-stroke-color: white; /* Color del contorno */
}
  

        .accordion-container .informes{
            max-width: 600px;
            margin: 20px auto;
        }

        /* * 1. ESTILO DE CADA OPCIÓN (el <details>) 
         */
        details {
            background-color: #f6f6f6;
            border-radius: 10px;
            margin-bottom: 12px;
            /* Sombra suave para dar profundidad */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            /* Evita que el contenido se salga al animar */
            overflow: hidden;     
            -webkit-box-shadow: 0 0 10px 5px rgb(51 51 51 / 10%);
        }

        /* * 2. LA OPCIÓN VISIBLE Y CLICABLE (el <summary>) 
         */
         .informes{
    border-top: 3px solid #0a64d2;

            display: block; /* Para que ocupe todo el ancho */
            padding: 20px 25px;
            font-size: 1.1em;
            font-weight: 700;
            cursor: pointer;
            font-family: 'Roboto', serif;
    color: #282428;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin: 0 0 2px;
}

        .accordion-trigger {
    border-top: 3px solid #0a64d2;

            display: block; /* Para que ocupe todo el ancho */
            padding: 20px 25px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: 'Roboto', serif;
    color: #282428;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin: 0 0 2px;



  overflow: hidden;
  
  span {
    z-index: 20;
  }
  
  &:after {
    background: #f6f6f6;
    content: "";
    height: 255px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 120px;
    z-index: -10;
  }

}
            /* Quitamos el marcador de lista/triángulo por defecto */
            list-style: none;

            /* --- EFECTO HOVER: Preparamos la animación --- */
            transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                        background-color 0.2s ease,
                        color 0.2s ease,
                        letter-spacing 0.2s ease;
        }

        /* Oculta el triángulo en navegadores Webkit (Chrome/Safari) */
        .accordion-trigger::-webkit-details-marker {
            display: none;
        }

.accordion-trigger:hover .imagen-giratoria {
            
            /* ...se aplica la animación a la ".imagen-giratoria" 
               que está DENTRO de él. */
            animation: spin 2s linear infinite;
        }

        /* * 3. EL EFECTO LLAMATIVO (al pasar el ratón)
         */
        .accordion-trigger:hover {

            background-color: #007bff;
            color: #ffffff;
            letter-spacing: 0.5px; /* Separa un poco las letras */
            
            /* ¡El efecto! Aumenta y se mueve */
            transform: scale(1.03) translateX(10px);
            box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);


            /* Otro efecto */  
  &:after {
    left: 120%;
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
  }

        }

        /* * 4. EL CONTENIDO DESPLEGABLE (la lista) 
         */
        .accordion-content {
            padding: 0 25px; /* Padding lateral */
            background-color: #fdfdfd;
            border-top: 1px solid #eef;
            color: #555;
            line-height: 1.6;

            /* --- ANIMACIÓN DE DESPLIEGUE (Técnica con Grid) --- */
            /* Esta es la forma moderna de animar altura variable */
            display: grid;
            grid-template-rows: 0fr; /* 0fr = Cero fracciones (colapsado) */
            opacity: 0;
            transition: grid-template-rows 0.4s ease-out, 
                        opacity 0.3s ease-out 0.1s,
                        padding 0.4s ease-out;
        }

        /* * 5. ESTADO ABIERTO (cuando se hace clic) 
         */
        details[open] .accordion-content {
            grid-template-rows: 1fr; /* 1fr = 1 fracción (altura automática) */
            opacity: 1;
            /* Añadimos padding vertical solo cuando está abierto */
            padding-top: 15px;
            padding-bottom: 20px;
        }

        /* Opcional: Mantener el <summary> azul cuando está abierto */
        details[open] .accordion-trigger {
            margin-bottom: 20px;
            background-color: #0069d9;
            color: white;
        }





        .titulo-animado {
            font-size: 3.5rem;
            color: #2c3e50;

            /* PASO 2: APLICAR LA ANIMACIÓN 
              Nombre: 'aparecerDesdeAbajo'
              Duración: 1 segundo
              Curva de tiempo: 'ease-out' (desacelera al final)
              Modo de relleno: 'forwards' (mantiene el estado final)
            */
            animation: aparecerDesdeAbajo 1s ease-out forwards;
            
            /* Define el estado INICIAL antes de que comience la animación.
              Esto asegura que el texto esté oculto incluso si la 
              animación tarda un microsegundo en empezar.
            */
            opacity: 0;
        }

        /* PASO 1: DEFINIR LA ANIMACIÓN 
          'aparecerDesdeAbajo' irá de 0% (from) a 100% (to).
        */
        @keyframes aparecerDesdeAbajo {
            
            /* Estado inicial (0%) */
            from {
                opacity: 0;
                /* El texto empieza 50px MÁS ABAJO de su posición final */
                transform: translateY(50px);
            }
            
            /* Estado final (100%) */
            to {
                opacity: 1;
                /* El texto termina en su posición original */
                transform: translateY(0);
            }
        }

        /* Opcional: Animar un segundo elemento con un retraso */
        .subtitulo-animado {
            font-size: 1.5rem;
            color: #555;
            
            /* Aplicamos la misma animación */
            animation: aparecerDesdeAbajo 1s ease-out forwards;
            
            /* Pero le damos un RETRASO (delay) */
            animation-delay: 0.5s; /* Empezará medio segundo después */
            
            /* Estado inicial (invisible) */
            opacity: 0;
        }




a:hover {
    color: white;
    size: 18px;
}
  




        .titulo-zoom {    
            padding-top: 30px;
            font-size: 300%;
            
            /* PASO 2: APLICAR LA ANIMACIÓN
               Nombre: 'zoomDesdeCentro'
               Duración: 0.8 segundos
               Curva: 'ease-out' (desacelera al final)
               Modo: 'forwards' (mantiene el estado final)
            */
            animation: zoomDesdeCentro 0.8s ease-out forwards;
            
            /* Estado inicial para evitar "parpadeos" (FOUC) */
            opacity: 0;
            transform: scale(0); /* Asegura que empieza pequeño */
        }

        /* PASO 1: DEFINIR LA ANIMACIÓN */
        @keyframes zoomDesdeCentro {
            
            /* Estado inicial (0%) */
            from {
                opacity: 0;
                /* El texto empieza con escala 0 (invisible) */
                transform: scale(0);
            }
            
            /* Estado final (100%) */
            to {
                opacity: 1;
                /* El texto termina en su escala normal (100%) */
                transform: scale(1);
            }
        }








        /* 1. Definimos la animación de rotación */
        @keyframes spin {
            /* Comienza en 0 grados de rotación */
            from {
                transform: rotate(0deg);
            }
            /* Termina en 360 grados (una vuelta completa) */
            to {
                transform: rotate(360deg);
            }
        }

        /* 2. Aplicamos la animación a nuestra imagen */
        #imagen-giratoria {
            transition: transform 0.3s ease-out;


        }
        #imagen-giratoria:hover {
            /* Nombre de la animación: spin
              Duración: 2s (cámbialo para ir más rápido o lento)
              Velocidad: linear (constante)
              Repetición: infinite (gira MIENTRAS el ratón esté encima)
            */
            animation: spin 2s linear infinite;
        }




/****************  Galeria  */


        /* --- Contenedor Principal de la Galería --- */
        .gallery-container {
            width: 90%;
            max-width: 1000px;
            margin: 2rem auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }


        /* --- 1. Carrusel de Miniaturas --- */
        .thumbnail-scroller {
            position: relative;
            width: 100%;
            overflow: hidden; /* Oculta las fotos que no caben */
        }

        .thumbnail-wrapper {
            display: flex;
            /* 10px de espacio entre fotos */
            gap: 10px;
            /* Transición suave para el desplazamiento */
            transition: transform 0.5s ease-in-out;
        }

        .thumbnail-wrapper img {
            /* * Muestra 5 fotos. 
             * 100% / 5 = 20%.
             * Restamos el 'gap'. (4 gaps * 10px) / 5 fotos = 8px por foto.
             */
            width: calc(20% - 8px);
            flex-shrink: 0; /* Evita que las imágenes se encojan */
            height: auto;
            aspect-ratio: 4 / 3; /* Proporción 4:3 */
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .thumbnail-wrapper img:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        /* --- Estilo de foco para navegación con teclado --- */
        .thumbnail-wrapper img:focus {
            outline: 3px solid #007bff; /* Un borde azul visible */
            outline-offset: 2px; /* Espacio entre la imagen y el borde */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            transform: scale(1.05);
        }

        /* --- Botones del Carrusel (Atrás/Adelante) --- */
        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #ddd;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: background-color 0.2s;
        }
        .scroll-btn:hover {
            background-color: #fff;
        }
        .scroll-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        #prev-btn {
            left: -15px;
        }
        #next-btn {
            right: -15px;
        }

        /* --- 2. Lightbox (Pantalla Completa) --- */
        #lightbox {
            /* Oculto por defecto */
            display: none; 
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            /* Fondo oscuro semitransparente */
            background-color: rgba(0, 0, 0, 0.85);
            /* Centra la imagen */
            justify-content: center;
            align-items: center;
            z-index: 1000;
            padding: 20px;
            box-sizing: border-box;
        }

        .lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #lightbox-img {
            max-width: 80%;
            max-height: 80%;
            object-fit: contain;
            border-radius: 5px;
        }

        /* --- Botones del Lightbox (Anterior/Siguiente) --- */
        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 5px;
            width: 45px;
            height: 60px;
            font-size: 24px;
            color: white;
            cursor: pointer;
            z-index: 1001;
            transition: background-color 0.2s;
        }
        .lightbox-nav:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }

        #lightbox-prev {
            left: -60px;
        }
        #lightbox-next {
            right: -60px;
        }

        /* Botón para cerrar (X) */
        #lightbox-close {
            position: absolute;
            top: -40px;
            right: -40px;
            font-size: 40px;
            color: white;
            cursor: pointer;
            font-weight: 200;
            z-index: 1001;
        }

        /* Media Query para pantallas pequeñas */
        @media (max-width: 768px) {
            .thumbnail-wrapper img {
                /* Muestra 3 fotos en móvil */
                width: calc(33.33% - 7px);
            }
            .scroll-btn {
                top: auto;
                bottom: -25px; /* Mueve los botones abajo */
                transform: translateY(0);
            }
            #prev-btn { left: 35%; }
            #next-btn { right: 35%; }
            .gallery-container { padding-bottom: 50px; }

            .lightbox-nav {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }
            #lightbox-prev { left: 5px; }
            #lightbox-next { right: 5px; }
            #lightbox-close { top: 5px; right: 10px; font-size: 30px; }
        }

        @media (max-width: 480px) {
            .thumbnail-wrapper img {
                /* Muestra 2 fotos en móvil muy pequeño */
                width: calc(50% - 5px);
            }
            #prev-btn { left: 30%; }
            #next-btn { right: 30%; }
        }