body {
    background-color: white;
    font-family: 'Helvetica Neue';
    overflow-x: hidden; /* Evita scroll horizontal indeseado */
}



/* --- ESTILOS NAVBAR --- */
nav {
    background-color:transparent; /* Trasparent para que sea transparente */
    padding: 1.2rem 2rem; /* Más "aire" arriba y abajo para elegancia */
    min-height: 50px;
   /* border-bottom: 1px solid rgba(242, 220, 194, 0.05); /* Línea divisoria muy sutil */
   /* box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombra suave para separarla del contenido */
}

.navbar-brand img {
    height: 40px; /* O el tamaño que desees, ej: 30px, 50px */
    width: auto;  
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.05); /* Pequeño zoom al pasar el ratón por el logo */
}

.navbar-nav .nav-link {
    color: white; 
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px; /* Espaciado estilo cine */
    margin: 0 15px; /* Separación entre palabras */
    position: relative;
    white-space: nowrap; /* Evita que se rompan las palabras en dos líneas */}

.navbar-nav .nav-link:hover{
    /*color: #730303; */
  /*  text-shadow: 0 0 10px black ;*/
    
    color: #cc6106; 
}

.navbar-scrolled .navbar-nav .nav-link:hover {
    color: #cc6106;  
}

/*  "DROPDOWN" SECCIÓN EQUIPO (Móvil/Tablet) */

/* Aplicamos esto solo cuando aparece el menú de hamburguesa (según tus ajustes previos, 1199px) */
@media (max-width: 1199px) {

    /* 1. Quitamos la "caja flotante" */
    .equipo-dropdown .dropdown-menu {
        position: static;   /* LA CLAVE: Hace que deje de flotar y ocupe espacio real */
        float: none;
        width: 100%;
        margin-top: 0;
        border: none;                  /* Sin bordes */
        box-shadow: none;              /* Sin sombras */
        background-color: #730303;   
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 4px;
       
    }

    /* 3. Estilo de los textos de los departamentos */
    .equipo-dropdown .dropdown-item {
        color: white;   /* Blanco un poco suave (gris muy claro) */
        font-size: 0.75rem;             /* Un poco más pequeño que el menú principal */
        padding-left: 70px;            /* Sangría: Los movemos a la derecha para que se note que son sub-items */
        padding-top: 8px;
        padding-bottom: 8px;
        background-color: transparent; /* Fondo transparente por defecto */
        transition: all 0.3s ease;
        text-transform: uppercase;
    }

    /* 4. Efecto al pasar el dedo/ratón */
    .equipo-dropdown .dropdown-item:hover,
    .equipo-dropdown .dropdown-item:focus {
        color: #fff;        /* Blanco brillante */
        background-color: rgba(255, 255, 255, 0.1); /* Un destello muy sutil */
        padding-left: 60px;            /* Pequeño movimiento a la derecha */
    }
}
/*  FIN "DROPDOWN" SECCIÓN EQUIPO (Móvil/Tablet) */

/*ESTILO DROPDOWN "EQUIPO" PARA ORDENADOR (PC) */
@media (min-width: 1200px) {

    /* 1. Quitamos la "caja flotante" */
    .equipo-dropdown .dropdown-menu {
        background-color: white;  
        text-transform: uppercase;
    }
    .equipo-dropdown .dropdown-item:hover,
    .equipo-dropdown .dropdown-item:focus {
        color: white;        /* Blanco brillante */
        background-color: #730303; /* Un destello muy sutil */
        padding-left: 10px;            /* Pequeño movimiento a la derecha */
    }
}

/*FIN ESTILO DROPDOWN "EQUIPO" PARA ORDENADOR (PC) */


/* --- ESTILOS PARA MÓVIL --- */
/* Aquí NO ponemos position absolute */

.navbar-toggler {
    border: none; /* Quitamos borde feo */
    padding: 0;
}

/* Icono hamburguesa blanco (porque el fondo es oscuro/transparente) */
.navbar-toggler-icon {
    filter: invert(1); 
}

/* Ajuste del menú desplegado en móvil */
.offcanvas {
    background-color: #730303;
    font-family: 'Helvetica Neue', sans-serif;
    letter-spacing: px;
}
    /* --- ESTILOS PARA MÓVILES Y DISP.PEQUEÑOS ---*/
@media (max-width: 1199px) {
   .offcanvas-body {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centra verticalmente los enlaces */
        align-items: center;
    }
     .navbar-scrolled {
    background-color: #731D0A; 
    opacity: 100%; /*PARA MOVILES SIN OPACIDAD*/
    border-bottom: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombrita para separar del contenido */
}
    
    .navbar-nav {
        text-align: center; 
    }
    
    .nav-link {
        font-size: 1.5rem; /* Letra grande para tocar con el dedo */
        margin: 15px 0;
        color: #F2DCC2;
    }
    .navbar-toggler { border: none; }
    .navbar-toggler-icon { filter: invert(1); }
}


/* --- ESTILOS PARA ORDENADOR (Solo si la pantalla es > 1200px) --- */
@media (min-width: 1200px) {
        .navbar-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        display: flex;
        flex-direction: row;
        margin: 0;
    }
     .navbar-scrolled {
    background-color: #731D0A; 
    opacity: 85%; /*PARA MOVILES CON OPACIDAD*/
    border-bottom: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombrita para separar del contenido */
}
    
    .lang-switch {
        margin-left: auto; /* Empujar a la derecha en PC */
    }
    
}

/* Si el menú es muy largo y choca con el logo, tienes que reducir el espacio entre letras */
.nav-link {
    white-space: nowrap; /* Evita que los textos se partan en dos líneas */
}
/* --- FIN ESTILOS NAVBAR --- */

/* Sección HERO */
/* PORTADA */
@font-face {
    font-family: 'HexanCustom';
    src: url('../fonts/hexan/Hexan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JaneAustenCustom';
    /* Il ../ permette di uscire da assets/css e tornare in assets/ */
    src: url('../fonts/jane_austen/JaneAust.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#hero {
    background-image: url('../../img/portada.jpg');
    background-size: cover; /* La foto cubre todo sin deformarse */
    background-position: center;
    background-repeat: no-repeat;
     /*min-height: 1100px;*/
    height: 100vh;
    width: 100%;
    position: relative; /* Necesario para que el overlay de abajo funcione bien */
    
    /* Para centrar el texto "EL TELAR" en el medio de la pantalla: */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#hero h1 {
    color:white;
    font-family: "HexanCustom";
    font-size: 150px;
    text-shadow: 5px 5px #731D0A;
    
    opacity: 0; /* Empieza invisible para que no parpadee */
    animation: subirYaparecer 1.2s ease-out forwards; /* Dura 1.2 segundos */
    animation-delay: 0.5s; /* Espera medio segundo antes de empezar */
}
/* Para Móviles (menos de 768px) */
@media (max-width: 768px) {
    #hero h1 {
        font-size: 70px; /* Mucho más pequeño para que quepa bien */
        
    }
}


#hero h2 {
    color: white;
    font-family: "JaneAustenCustom", cursive !important;
    
    /* --- AÑADE ESTAS LÍNEAS NUEVAS --- */
    opacity: 0; /* Empieza invisible */
    animation: subirYaparecer 1.2s ease-out forwards;
    animation-delay: 1s; /* Espera 1.5s (sale después del título) */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
    z-index: 1;
}


/* FIN PORTADA */
/* Sección HERO */


/* PROYECTO */
@font-face {
    font-family: 'HexanCustom';
    src: url('../fonts/hexan/Hexan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#proyecto {
    padding-top: 80px;    /* Espacio arriba */
    padding-bottom: 80px; /* Espacio abajo */
    background-color: #fff; /* Fondo blanco limpio */
    background-image: url('../../img/fondos/granate.png');
    background-size: cover; /* La foto cubre todo sin deformarse */
    background-position: center;
    min-height: 1000px;
}

#proyecto p{
    color: #f2ddc2; 
    font-size: 0.95rem;
    font-weight: 500;
    margin:  20px; 
    text-align: justify;
    margin-bottom: 30px;
    line-height: 1.6;      /* Altura de línea para facilitar la lectura */
}

#proyecto img {
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Sombra suave elegante */
    border-radius: 8px;   /* Bordes un poco redondeados (opcional) */
    width: 100%;
}
#proyecto h2 {
    font-family: HexanCustom;
    text-shadow: 5px 5px #790603;
    font-size: 100px;
    font-weight: 800;      /* Letra muy gruesa */
    text-transform: uppercase; /* Todo en mayúsculas */
    color: #f2ddc2;           /* Gris muy oscuro (casi negro) */
    letter-spacing: 1px;   /* Un poco de aire entre letras */
}

/* Para Móviles (menos de 768px) */
@media (max-width: 768px) {
    #proyecto h2 {
        font-size: 70px; /* Mucho más pequeño para que quepa bien */
        
    }
}

#proyecto h3 {
    font-size: 1.1rem;     /* Tamaño un poco más grande que el texto normal */
    font-weight: 700;      /* Negrita */
    text-transform: uppercase;
    color: #f2ddc2;           /* Título oscuro */
    margin-bottom: 10px;
      text-shadow: 5px 5px #790603;
}


/* 2. Cabecera (Título y Línea) */
.section-header {
    text-align: center;  /* Asegura que todo esté centrado */
}

.project-divider {
    width: 60px;           /* Longitud de la línea */
    height: 3px;           /* Grosor de la línea */
    background-color: #f2ddc2; /* Color de la línea (puedes poner tu rojo si quieres) */
    margin: 0 auto;        /* Truco para centrar elementos de bloque */
    /* AÑADE ESTA LÍNEA DEBAJO: */
    margin-bottom: 30px; /* Esto empuja las fotos hacia abajo */
}

/* 4. Contenedor del Texto (Columna Derecha) */
/* Usamos media query para dar margen solo en PC, no en móvil */
@media (min-width: 992px) {
    .content-wrapper {
        padding-left: 40px; /* Separa el texto de la foto */
         
    }
}


   /* FIN PROYECTO */

/* CARRUSEL */

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 20, 10, 0.7);
    z-index: 1;
}


.full-screen-img {
    height: 100vh; 
    width: 100%;
    object-fit: cover; 
    object-position: center; 
}


.carousel-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
}

#galeria-carousel {
    overflow: hidden;
    width: 100%;
    clip-path: inset(0 0 0 0);
}


.carousel-caption {
    z-index: 2;
    bottom: 0 !important; 
    left: 10%;
    right: 10%;
}

/* Titulo principal: Oro Antiguo */
.carousel-caption h2 {
    color: #C5A059; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombra para profundidad */
    font-family: "JaneAustenCustom", cursive !important;
    text-transform: none;
}

/* Estilo texto "Inspiración" */
.l-spacing {
    letter-spacing: 1px; /* Espacio entre letras */
    margin-bottom: 20px;
}

/* Subtitolo y Citacion: Beige Lana */
.carousel-caption p, 
.quote-text {
    color: #EAD8C0; 
    font-weight: 300;
}

.quote-text {
    max-width: 800px;
    font-size: 1.1rem;
    line-height: 1.6;
    border-left: 2px solid #C5A059;
    padding-left: 20px;
    font-style: italic;
    opacity: 0.9;
}

.carousel-inner {
    border-radius: 0;
    position: relative;
}

/* Transicciones */
#carouselProject {
    background-color: #000; /* fondo negro atras de las imagenes para evitar flash blanco*/
}
.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

.carousel-caption h2, 
.carousel-caption p {
    animation: fadeInUp 1.2s ease backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-item.active img {
    animation: kenburns 20s infinite alternate; /* Efecto Zoom slow */
}

@keyframes kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}
/* FIN CARRUSEL*/

/* PERSONAJES */
@font-face {
    font-family: 'HexanCustom';
    src: url('../fonts/hexan/Hexan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JaneAustenCustom';
    /* Il ../ permette di uscire da assets/css e tornare in assets/ */
    src: url('../fonts/jane_austen/JaneAust.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#personajes {
    padding-top: 80px;    /* Espacio arriba */
    padding-bottom: 80px; /* Espacio abajo */
    background-color: #f2ddc2; 
    background-image: url('../../img/fondos/rojooscuro.png');  
}

#personajes h2{
    font-family: HexanCustom;
    font-size: 100px;
    font-weight: 800;      /* Letra muy gruesa */
    text-transform: uppercase; /* Todo en mayúsculas */
    color: #f2ddc2;           
    letter-spacing: 1px;   /* Un poco de aire entre letras */
    text-align: center; 
    text-shadow: 5px 5px #790603;
}

/* Para Móviles (menos de 768px) */
@media (max-width: 768px) {
    #personajes h2 {
        font-size: 70px; /* Mucho más pequeño para que quepa bien */
        
    }
}

#personajes h3 {
    font-family: "JaneAustenCustom", cursive !important;
    font-size: 4rem; /* Tamaño un poco más grande que el texto normal */
    font-weight: 700; /* Negrita */
    color: #790603;      
    text-transform: lowercase;
    margin-bottom: 10px;
    text-align: center;
}


#personajes h4 {
    font-size: 1.1rem;     /* Tamaño un poco más grande que el texto normal */
    font-weight: 700;      /* Negrita */
    text-transform: uppercase;
    color: #f2ddc2;          
    margin-bottom: 10px;
    text-align: center;
    
}

#personajes p{
    color: #f2ddc2; 
    font-size: 0.95rem;
    font-weight: 500;
    margin:  20px; 
    text-align: justify;
    margin-bottom: 30px;
    line-height: 1.6;   
}

#personajes img{
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Sombra suave elegante */
    border-radius: 8px;   /* Bordes un poco redondeados (opcional) */
    width: 100%;
    display: block;
    
}

/* --- 2. Las Tarjetas de los Personajes --- */

/* El contenedor que envuelve imagen + info */
.personajes-wrap {
    position: relative; 
    overflow: hidden;   
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px; 
}

.personajes-info {
    /* Posicionamiento absoluto para cubrir la imagen */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: #731D0A ;

    /* Centrar el texto vertical y horizontalmente (Flexbox) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px; /* Espacio interno para que el texto no toque los bordes */

    /* ESTADO INICIAL: Invisible */
    opacity: 0;
    transition: all 0.3s ease-in-out; /* Transición suave al aparecer */
}

/* --- 4. EL EFECTO HOVER  --- */

/* Cuando el ratón entra en .personajes-wrap, la info se vuelve visible (opacity 1) */
.personajes-wrap:hover .personajes-info {
    opacity: 0.9;
}

/* Opcional: pequeño zoom en la foto al pasar el ratón */
.personajes-wrap:hover img {
    transform: scale(1.02);
}


/* FIN PERSONAJES */

/* Sección  GALERIA */
@font-face {
    font-family: 'HexanCustom';
    src: url('../fonts/hexan/Hexan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JaneAustenCustom';
    src: url('../fonts/jane_austen/JaneAust.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#galeria {
    background-color: navajowhite;
     min-height: 500px;   
    background-image: url('../../img/fondos/beige.png');
    
}

#galeria h2{
    font-family: HexanCustom;
    font-size: 100px;
    font-weight: 800;      /* Letra muy gruesa */
    text-transform: uppercase; /* Todo en mayúsculas */
    color: #790603;           /* Gris muy oscuro */
    letter-spacing: 1px;   /* Un poco de aire entre letras */
    text-align: center;
    padding-top: 120px;  
    
    opacity: 0; /* Empieza invisible para que no parpadee */
    animation: subirYaparecer 1.2s ease-out forwards; /* Dura 1.2 segundos */
    animation-delay: 0.5s; /* Espera medio segundo antes de empezar */
}

/* Para Móviles (menos de 768px) */
@media (max-width: 768px) {
    #galeria h2 {
        font-size: 70px; /* Mucho más pequeño para que quepa bien */
        
    }
}

#galeria p {
    font-family: 'JaneAustenCustom', cursive !important;
    color: #790603; 
    font-size: 40px;
    
    opacity: 0; /* Empieza invisible para que no parpadee */
    animation: subirYaparecer 1.2s ease-out forwards; /* Dura 1.2 segundos */
    animation-delay: 1s; /* Espera medio segundo antes de empezar */
}

@media (max-width: 768px) {
    #galeria p {
        font-size: 20px; /* Mucho más pequeño para que quepa bien */
        
    }
}



/* 1. Estilo de los Filtros (Botones superiores) */
.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 35px auto;
  list-style: none;
  text-align: center;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #444444;
  margin: 0 5px 10px 5px;
  transition: all 0.3s ease-in-out;
  border-radius: 50px; /* Bordes redondeados */
    
    opacity: 0; /* Empieza invisible para que no parpadee */
    animation: subirYaparecer 1.2s ease-out forwards; /* Dura 1.2 segundos */
    animation-delay: 1.5s; /* Espera medio segundo antes de empezar */

}

/* --- MEDIA QUERY PARA FILTROS EN MÓVIL (Menos de 768px) --- */
@media (max-width: 768px) {
    .portfolio #portfolio-flters li {
        font-size: 12px !important;    /* Reduce el tamaño de la fuente */
        padding: 6px 15px !important;  /* Reduce el espacio interno del botón */
        margin: 0 2px 8px 2px !important; /* Acerca los botones entre sí para ahorrar espacio */
        letter-spacing: 0.5px;         /* Ajusta el espacio entre letras para legibilidad */
    }

    .portfolio #portfolio-flters {
        margin-bottom: 20px !important; /* Reduce el margen inferior en pantallas pequeñas */
        padding: 0 10px;               /* Añade un poco de margen lateral */
        display: flex;                 /* Opcional: ayuda a distribuir los botones */
        flex-wrap: wrap;               /* Permite que los botones salten de línea si no caben */
        justify-content: center;       /* Centra los botones en el móvil */
    }
}

/* Efecto hover y botón activo */
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: navajowhite !important;
  background: #790603; /* Tu rojo corporativo */
  transform: translateY(-5px) !important; 
  transition: all 0.3s ease;
}

/* 2. Estilo de las Imágenes */
.portfolio .portfolio-item {
  margin-bottom: 30px;
  opacity: 0;
}

.init-reveal {
  animation: subirYaparecer 1.2s ease-out backwards;
  animation-delay: 1.8s;
  animation-fill-mode: both;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 4px;
}

.portfolio .portfolio-wrap img {
  transition: transform 0.4s ease-in-out; /* Controla la suavidad del movimiento del zoom de la imagen al paar del raton */
}

/* La capa roja semitransparente */
.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(121, 6, 3, 0.8); /* Rojo con 80% de opacidad */
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  bottom: 30px;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0; /* Invisible por defecto */
}

/* El contenedor de la lupa */
.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* El icono de la lupa */
.portfolio .portfolio-wrap .portfolio-info a {
  color: navajowhite !important;
  font-size: 32px;
  display: inline-block;
  transition: 0.3s;
  line-height: 1;
}

/* EFECTO AL PASAR EL RATÓN */
.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1; /* La capa roja se expande y se vuelve visible */
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1; /* La lupa aparece */
}

.portfolio .portfolio-wrap .portfolio-info a:hover {
    color: #cc6106 !important;
}


.portfolio .portfolio-wrap:hover img {
  transform: scale(1.1); /* Cuando pasas el ratón sobre el contenedor, la imagen crece */
}


@keyframes subirYaparecer {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- CONFIGURACIÓN DE GALERÍA TIPO MASONRY (Mampostería) --- */
.portfolio-container {
  /* Define el número de columnas */
  column-count: 4; /* 4 columnas en escritorio */
  /* Define el espacio entre las columnas */
  column-gap: 10px; 
  width: 100%;
}

.portfolio-item {
  /* Evita que una imagen se corte o se divida entre dos columnas */
  display: inline-block;
  width: 100%;
  /* Espacio vertical entre las fotos */
  margin-bottom: 20px; 
}

        /* --- RESPONSIVIDAD (Diseño Adaptable) --- */

        /* Tablet (menos de 992px) */
        @media (max-width: 992px) {
          .portfolio-container {
            column-count: 3;
          }
        }

        /* Smartphone (menos de 768px) */
        @media (max-width: 768px) {
          .portfolio-container {
            column-count: 2; /* 2 columnas en teléfonos */
            column-gap: 15px;
          }
        }

        /* Smartphone pequeños (menos de 480px) */
        @media (max-width: 480px) {
          .portfolio-container {
            column-count: 1; /* 1 sola columna si la pantalla es muy estrecha */
          }
        }

        /* --- ARREGLO GALERÍA: Fotos iguales y ordenadas --- */
        .portfolio-item .portfolio-wrap img {
            height: 300px; /* Altura fija para todas (puedes cambiar el número) */
            width: 100%;
            object-fit: cover; /* "Recorta" la foto para llenar el hueco sin deformar la cara */
            object-position: center; /* Centra el recorte */
        }
/* FIN GALERIA*/


/*CONTACTO */
@font-face {
    font-family: 'HexanCustom';
    src: url('../fonts/hexan/Hexan.ttf') format('truetype');
    font-weight: normal;

    font-style: normal;
}

@font-face {
    font-family: 'JaneAustenCustom';
    /* Il ../ permette di uscire da assets/css e tornare in assets/ */
    src: url('../fonts/jane_austen/JaneAust.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.contact-section {
    background-color: #790603; 
    background-image: url('../../img/fondos/oveja3.png');
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: 900px;
}

/* 2. La Caja Blanca del formulario */
.contact-card {
    background-color: #f2ddc2; /* Fondo blanco */
    background-image: url('../../img/fondos/beige.png');
    padding: 40px;             /* Espacio interior */
    border-radius: 4px;        /* Bordes ligeramente redondeados */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Sombra para que destaque */
}

/* 3. Estilo de los Inputs (Cajas de texto) */
.contact-card .form-control {
    border-radius: 0;          /* Bordes cuadrados o muy poco redondeados */
    border: 1px solid #ddd;    /* Borde gris suave */
    padding: 12px 15px;        /* Un poco más de altura para que sea elegante */
    font-size: 0.95rem;
    background-color: #fcfcfc; /* Un blanco muy sutilmente grisáceo */
 
}

/* Efecto al hacer clic en un input */
.contact-card .form-control:focus {
    box-shadow: none;
    border-color: #7a2021; /* Se pone del color del botón al escribir */
}

/* 4. El Botón "¡Enviar!" */
.btn-contact {
    background-color: #790603; /* Color Marrón/Rojo oscuro (según tu imagen) */  
    background-image:url('../../img/fondos/granate.png');
    color: #fff;               /* Letra blanca */
    border: none;
    padding: 12px 40px;        /* Tamaño del botón */
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    transition: 0.3s;
    cursor: pointer;
}

/* Efecto Hover del botón */
.btn-contact:hover {
    background-color: #521c1d; /* Se oscurece un poco al pasar el ratón */
    background-image:url('../../img/fondos/rojo.png');
    color: #ffffff;
}

/* Ajuste para el texto del encabezado */
.contact-section h2 {
    font-family: HexanCustom;
    font-size: 100px;
    margin-bottom: 10px;
    color: #f2ddc2;
    letter-spacing: 1px;
    font-weight: 800;   
    text-transform: uppercase; /* Todo en mayúsculas */
    text-shadow: 5px 5px #790603;
}
   

/* Para Móviles (menos de 768px) */
@media (max-width: 768px) {
   .contact-section h2  {
        font-size: 70px; /* Mucho más pequeño para que quepa bien */
        
    }
}



.contact-section p {
    font-family: 'JaneAustenCustom', cursive !important;
    color: #DECBB1; 
    font-size: 2.5rem;
}

/*FIN CONTACTO */

/*--FOOTER--*/

#footer {
    background: #3c1b0d; 
    background-image: url('../../img/fondos/rojooscuro.png');
    color: #fff;
    font-size: 14px;
    padding-top: 20px; 
    text-align: center;
}

.upvlogo {
    width: 40px;       
    height: auto;      /* Mantiene la proporción para que no se deforme */
    transition: transform 0.4s ease-in-out; /* Controla la suavidad del movimiento del zoom del logo al pasar del raton */
}

.upvlogo:hover {
    transform: scale(1.1); /* Zoom al pasar con el raton */
}

/* Títulos de las columnas (Contacto, Síguenos...) */
#footer h3, #footer h4 {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    
}

/* Línea decorativa debajo de los títulos (Opcional, queda elegante) */
#footer h3::after, #footer h4::after {
    content: '';
    position: absolute;
    display: block;
    width: 20px;
    height: 2px;
    background: #cc6106; /* Color naranja obscuro */
    bottom: 0;
    left: 50%;                  /* La pone en la mitad del contenedor */
    transform: translateX(-50%); /* La mueve un poquito a la izquierda para centrarla matemáticamente perfecta */
}

/* Texto general */
#footer p {
    line-height: 24px;
    color: #e0e0e0; /* Blanco un poco apagado para no cansar la vista */
    margin-bottom: 20;
    text-align: center;
}

/* Iconos de contacto (ubicación, teléfono...) */
.footer-contact i {
    color: #cc6106; /* Iconos en naranja obscuro */
    font-size: 16px;  
    text-align: center;
}

/* --- ESTILO DE REDES SOCIALES (Lo importante) --- */
.social-links a {
    font-size: 20px; /* Icono grande */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
    color: #fff;
    line-height: 1;
    margin-right: 10px;
    margin-bottom: 20px;
    border-radius: 50%; /* Círculo perfecto */
    width: 45px;  /* Ancho del botón */
    height: 45px; /* Alto del botón */
    transition: 0.3s;
    text-decoration: none;
    
}

/* Efecto al pasar el ratón por las redes */
.social-links a:hover {
    background: #cc6106; /* Se vuelve naranja al tocarlo */
    color: #3c1b0d;      /* El icono se vuelve oscuro */
    transform: translateY(-3px); /* Pequeño saltito hacia arriba */
}

/* --- COPYRIGHT (Parte de abajo) --- */
.copyright-wrap {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea separadora sutil */
    display: flex !important;
    flex-direction: column;   /* Pone el texto uno debajo de otro */
    justify-content: center;
    align-items: center;      /* Esto es lo que centra horizontalmente */
    text-align: center !important;
}

/* 2. Anulamos las clases de Bootstrap que empujan a la izquierda */
/* El selector '>' afecta al div que está justo dentro */
.copyright-wrap > div {
    text-align: center !important; /* Fuerza el texto al centro */
    margin-right: 0 !important;    /* Quita el margen automático derecho */
    width: 100%;                   /* Asegura que ocupe todo el ancho */
}

.credits {
    padding-top: 5px;
    font-size: 13px;
    text-align: center;
}

.credits a {
    color: #cc6106;
    transition: 0.3s;
}
/*--FIN FOOTER--*/


/*--FLECHA TOP--*/
.back-to-top {
  position: fixed;  /* Se queda fijo en la pantalla */
  visibility: hidden;
  opacity: 0;
  right: 15px;      /* Distancia desde la derecha */
  bottom: 15px;     /* Distancia desde abajo */
  z-index: 996;     /* Para que esté siempre encima de todo */
  background: #8b0000; /* Tu color rojo oscuro */
  width: 40px;      /* Ancho del cuadrado */
  height: 40px;     /* Alto del cuadrado */
  border-radius: 4px; /* Bordes un poco redondeados */
  transition: all 0.4s;
}

/* El icono de la flecha */
.back-to-top i {
  font-size: 24px;  /* Tamaño de la flecha */
  color: #fff;      /* Flecha blanca */
  line-height: 0;
}

/* Efecto al pasar el ratón */
.back-to-top:hover {
  background: #a52a2a; /* Un rojo un poco más claro al tocarlo */
  color: #fff;
}

/* Cuando JS añade la clase 'active', el botón se vuelve visible */
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}
/*--FIN FLECHA TOP--*/



/* =========================================
   PÁGINAS DE DEPARTAMENTOS (EQUIPO)
   ========================================= */

@font-face {
    font-family: 'HexanCustom';
    src: url('../fonts/hexan/Hexan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JaneAustenCustom';
    src: url('../fonts/jane_austen/JaneAust.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 1. Ajustes generales de la sección */
.team-section {
    padding: 60px 0;
    background-color: #fdfbf6; /* Color beige claro de fondo (tipo papel) */
    background-image: url('../../img/fondos/granate.png');
   
}

.team-section h2 {
    color: #f2ddc2; /* Tu rojo corporativo */
    font-family: 'HexanCustom'; /* Fuente elegante tipo la de tu imagen */
    font-size: 5rem;
    margin-bottom: 40px;
    margin-top: 40px;
    text-transform: none; /* Respetamos mayúsculas/minúsculas */
    animation: portfolioReveal 0.8s ease forwards; /* Animaccion */
}

/* 2. La Tarjeta de cada miembro */
.member-card {
    position: relative; /* Necesario para que el texto se coloque encima */
    overflow: hidden;   /* Para que nada se salga de la tarjeta */
    border-radius: 4px; /* Bordes un poco suaves */
    cursor: pointer;
     
    /* Aseguramos que empiece invisible para evitar el "salto" */
    opacity: 0;
    
    /* Animaccion */
    animation: portfolioReveal 0.8s ease forwards; /* Usamos 'forwards' para que mantenga el estado final (visible) */
    animation-delay: 0.3s;
    
    /* Ayuda al navegador a preparar la animación */
    will-change: opacity, transform;
}

/* Aseguramos que todas las fotos sean del mismo tamaño (cuadradas) */
.member-card img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Fuerza a que sea cuadrada perfecta */
    object-fit: cover;   /* Recorta la foto para llenar el cuadrado sin deformar */
    display: block;
    transition: transform 0.5s ease; /* Transiccion */
}

/* 3. El Texto que aparece encima (Overlay) */
.member-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Fondo oscuro semitransparente (Rojo oscuro al 80%) */
    background: rgba(121, 6, 3, 0.85); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* INVISIBLE AL PRINCIPIO */
    /* Transiccion */
    transform: scale(0.95);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
               transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.member-info h3 {
    font-family: 'JaneAustenCustom', cursive !important;
    color: rgb(242, 221, 194) !important;
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.member-info span {
    color: rgb(226, 196, 176) !important; /* Un color beige/dorado para el cargo */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 4. Efecto HOVER (La magia) */
/* Al pasar el ratón por la tarjeta... */
.member-card:hover .member-info {
    opacity: 1; /* El texto se vuelve visible */
    transform: scale(1); 
}

.member-card:hover img {
    transform: scale(1.1); /* Pequeño zoom a la foto de fondo */
}

/* 5. Foto de Grupo */
.group-photo img {
    border-radius: 4px;
    height: 100%;       /* Intenta ocupar el alto de la columna */
    object-fit: cover;  /* Cubre el espacio */
    min-height: 400px;  /* Altura mínima para que se vea grande */
    transform: scale(1.28);
    /* Animaccion */
    opacity: 0;
    animation: portfolioReveal 1s ease forwards;
    animation-delay: 0.5s;
}

.group-caption p {
    font-style: italic;
    color: #f2ddc2;
    font-size: 20px;
}
/*Para borrar borde blanco de la imagen de grupo*/
.team-section .row > .col-lg-5 {
    padding: 0 !important;
     overflow: hidden; /* Por si acaso, para que nada se salga */
}

@media (max-width: 768px) {
    .team-section h2 {
        font-size: 3rem;
        padding-top: 40px;
        margin-bottom: 20px;
    }
    
    .member-info h4 {
        font-size: 0.9rem; /* Testo mas pequeno en movil */
    }
}

@keyframes portfolioReveal {
    from {
        opacity: 0;
        transform: translateY(20px); /* Un movimiento más sutil para mayor fluidez */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo para la caja de descripción del departamento */
.dept-description {
    padding: 30px;
    background-color: #fff;       /* Fondo blanco sobre el beige */
    background-image:url('../../img/fondos/rojooscuro.png');
    border-radius: 8px;           /* Bordes suaves */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Sombra muy sutil */
    border-left: 4px solid #790603; /* Línea roja elegante a la izquierda */
    text-align: center;
}

.dept-description p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #f2ddc2;
    margin: 0;
    font-family: "Georgia", serif; /* O la fuente que uses para textos largos */
}

/* Estilo para las tiras de imágenes */
.img-strip {
    width: 100%;        /* Que ocupe todo el ancho de su columna */
    height: 180px;      /* ALTURA FIJA: Aquí decides cuán "finita" es. Prueba 150px o 200px */
    object-fit: cover;  /* LA MAGIA: Recorta la foto para llenar el hueco sin deformarla */
    display: block;     /* Evita una pequeña línea blanca que a veces sale debajo */
    filter: sepia(0.3) contrast(1.1); /* Opcional: Un toque vintage para que pegue con tu web */
    transition: all 0.3s ease;
}

/* Opcional: Efecto al pasar el ratón */
.img-strip:hover {
    filter: none; /* Se ve la foto original al tocarla */
    transform: scale(1.02); /* Un pequeño zoom sutil */
    z-index: 2;
}

/* Estilo para la tira única de ancho completo */
.img-strip-full {
    width: 100%;        /* Obligatorio: Ocupa todo el ancho de la pantalla */
    
    /* --- AQUÍ CONTROLAS EL GROSOR --- */
    height: 150px;      /* Define la altura fija de la franja. Cámbialo a 200px si la quieres más fina o 400px si la quieres más gruesa. */
    
    /* --- LA MAGIA DEL RECORTE --- */
    object-fit: cover;  /* ESTO es lo que pides: la imagen hará zoom para llenar el hueco de 300px de alto sin estirarse ni aplastarse. Lo que sobre por arriba o abajo, se recorta. */
    
    display: block;     /* Elimina un pequeño espacio blanco molesto que a veces sale debajo de las imágenes */
}


/*CROWFUNDING*/
/* --- SECCIÓN CROWDFUNDING RENOVADA --- */
.crowdfunding-section {
    /* Aquí controlas el aire: 80px arriba/abajo es estándar y elegante */
    padding: 80px 0; 
    /* Tu fondo original */
    background-image: url('../../img/fondos/rojooscuro3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Un overlay oscuro suave por si el fondo dificulta la lectura */
    color: #f2ddc2; /* Tu color crema */
    text-align: center;
}

/* Título */
.crowdfunding-title {
    font-family: 'HexanCustom';
    font-size: 100px;
    color: #f2ddc2;
    margin-bottom: 20px;
    text-align: center; 
     letter-spacing: 1px;
    font-weight: 800;   
    text-transform: uppercase; /* Todo en mayúsculas */
    text-shadow: 5px 5px #790603;
}

/* Para Móviles (menos de 768px) */
@media (max-width: 768px) {
    .crowdfunding-section h2 {
        font-size: 70px; /* Mucho más pequeño para que quepa bien */
        
    }
}

/* Texto descriptivo */
.crowdfunding-text {
    font-size: 30px;
    max-width: 800px;
    margin: 0 auto 40px auto; /* Centrado y con margen abajo */
    line-height: 1.6;
    color: #f2ddc2;
}

/* Para Móviles (menos de 768px) */
@media (max-width: 768px) {
    .crowdfunding-section p {
        font-size: 1.1rem;; /* Mucho más pequeño para que quepa bien */
        
    }
}

/* Botón de Donar */
.crowdfunding-actions {
    margin-bottom: 60px; /* Separación entre el botón y los iconos */
}

.crowdfunding-btn {
    display: inline-block;
    background-color: #790603; /* Rojo Óxido de tu paleta */
    color: #f2ddc2;
    font-family: 'HexanCustom', sans-serif;
    font-size: 1.5rem;
    padding: 15px 40px;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #790603;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.crowdfunding-btn:hover {
    background-color: transparent;
    color: #cc6106;
    border-color: #cc6106;
    transform: translateY(-3px); /* Efecto de elevación */
}

.crowdfunding-btn i {
    margin-left: 10px;
}

/* --- GRID DE TRANSPARENCIA (ICONOS) --- */
.stats-grid {
    display: grid;
    /* Crea columnas automáticas. Mínimo 150px de ancho cada una */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 40px; /* Espacio entre elementos */
    max-width: 1000px;
    margin: 0 auto; /* Centrar el grid */
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: scale(1.05); /* Pequeño zoom al pasar el ratón */
}

.stat-item i {
    font-size: 3rem; /* Tamaño del icono */
    color: #790603; /* Iconos en Rojo Óxido para destacar */
    margin-bottom: 10px;
}

.stat-item i:hover {
    color: #cc6106; /* El icon vuelve naranja al tocarlo */;
}
    
.stat-number {
    font-family: 'HexanCustom', sans-serif;
    font-size: 2.5rem;
    color: #f2ddc2; /* Números en Crema */
    line-height: 1;
}

/* Animaccion Numeros */ 


.stat-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-top: 5px;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .crowdfunding-title {
        font-size: 40px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
        gap: 30px;
    }
}



/* --- AJUSTES PARA PANTALLAS GRANDES (Escritorio) --- */
@media (min-width: 992px) {
    
    /* 1. Botón más grande e impactante */
    .crowdfunding-btn {
        font-size: 1.8rem; /* Texto más grande */
        padding: 20px 60px; /* Botón más ancho y alto */
    }

    /* 2. Iconos y textos de la cuadrícula más grandes */
    .stat-item i {
        font-size: 4rem; /* Iconos gigantes */
        margin-bottom: 15px;
    }

    .stat-number {
        font-size: 3rem; /* Números más grandes */
    }

    .stat-label {
        font-size: 1.2rem; /* Etiquetas más legibles */
    }

    /* 3. Forzar exactamente 4 elementos por fila */
    .stats-grid {
        /* "repeat(4, 1fr)" significa: crea 4 columnas de igual tamaño */
        grid-template-columns: repeat(4, 1fr);
        /* Aumentamos el espacio entre ellos para que respire mejor */
        gap: 60px;
        /* Aumentamos el ancho máximo para que se expanda más en pantallas muy anchas */
        max-width: 1200px;
    }
}

/*FIN CROWFUNDING*/




/*--------------ANIMACIONES----------------*/
/* --- Efecto de Scroll para la Imagen --- */

/* Estado inicial: invisible y desplazada hacia abajo */
.scroll-hidden {
    opacity: 0; /* Totalmente transparente */
    transform: translateY(50px); /* Movida 50px hacia abajo */
    transition: all 0.8s ease-out; /* La animación dura 0.8 segundos y es suave */
}

/* Estado final: visible y en su posición original */
.scroll-visible {
    opacity: 1; /* Totalmente visible */
    transform: translateY(0); /* Vuelve a su posición original */
}
/*Animación h1 portada*/
@keyframes subirYaparecer {
    from {
        opacity: 0;
        transform: translateY(40px); /* Empieza 40px más abajo */
        filter: blur(5px); /* Empieza un poco borroso */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina en su sitio original */
        filter: blur(0); /* Termina nítido */
    }
}


/* --- CURSOR DE TIJERAS --- */

body, a, button, .btn, input[type="submit"], select, .nav-link {
    /* IMPORTANTE: Los números "16 16" indican el punto exacto del clic (X Y).
       Si tu imagen es de 32x32px, el centro es 16 16.
       Si es de otro tamaño, pon la mitad de su ancho y alto.
    */
    cursor: url('../../img/tijeraabierta%20(1).png') 16 16, auto !important; 
}

/* 2. Estado CLIC (Cerrada) - Punto de clic en el CENTRO */
*:active {
    /* Debes poner las mismas coordenadas para que no dé un salto al hacer clic */
    cursor: url('../../img/tijeracerrada%20(1).png') 16 16, auto !important; 
}


/* --- TEASER ---*/
/* --- NUEVA SECCIÓN TEASER (Esquinas) --- */

/* Estilos para el título H2 */
.teaser-title {
    font-family: 'HexanCustom', sans-serif; /* Tu fuente personalizada */
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); /* Sombra para que se lea bien sobre video */
    font-size: 1.5rem;
}

/* ESTILO CRÍTICO PARA QUE FUNCIONE EL BOTÓN */
.teaser-overlay {
    /* La capa contenedora deja pasar los clics al video... */
    pointer-events: none;
    z-index: 10;
    background: rgba(0,0,0,0.1); /* Un pelín de oscurecido general opcional */
}

.teaser-overlay .overlay-content-top,
.teaser-overlay .overlay-content-bottom {
    /* ...pero el título y el botón SÍ capturan los clics */
    pointer-events: auto;
}

  #unmuteBtn {
        font-size: 0.9rem; /* Letra legible */
        padding: 10px 20px; /* Botón más "gordito" para el dedo */
        background-image: url('../../img/fondos/granate.png'); /* Fondo semitransparente para que destaque sobre el video */
        backdrop-filter: blur(4px); /* Efecto borroso elegante */
        color:#f2ddc2;
    }
    
    
    #unmuteBtn:hover{
    background-image: url('../../img/fondos/beige.png');
    color: #790603; 
}

/* --- AJUSTES MÓVILES PARA EL TEASER --- */
@media (max-width: 768px) {
    
    /* 1. EL VIDEO: Que se vea entero sin recortar */
    #teaserVideo {
        object-fit: contain !important; /* Fuerza a que quepa todo el video en la pantalla */
    }

    /* 2. EL CONTENEDOR: Fondo negro para las bandas arriba/abajo */
    #teaser {
       background-image: url('../../img/fondos/rojooscuro.png'); 
    }

    /* 3. TÍTULO Y BOTÓN: Cambiamos la posición para móvil */
    .teaser-overlay {
        /* Cambiamos la dirección para que no estén tan pegados a los bordes */
        align-items: center; /* Centramos horizontalmente */
        padding-bottom: 80px !important; /* Subimos todo para evitar la barra del navegador */
    }

    /* Título un poco más pequeño */
    .teaser-title {
        font-size: 50px;
        text-align: center;
        width: 100%;
        color: #f2ddc2;
        letter-spacing: 1px;
        font-weight: 800;   
        text-transform: uppercase; /* Todo en mayúsculas */
        
    }

    /* Botón centrado y más fácil de pulsar */
    .overlay-content-bottom {
        text-align: center !important; /* Forzamos centro */
        width: 100%;
    }
}
/* --- FIN TEASER ---*/