@charset "utf-8";
/* CSS Document */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto Serif", serif;
}

img {
  border: 0;
}

section {
  /* Ajusta estos 80px según la altura real de tu menú */
  scroll-margin-top: 80px; 
}

/* Ajuste para que el contenido no quede tapado por la navbar */
body {
  padding-top: 6rem; /* Igual a la altura de la navbar */
}

.navbar {
  position: fixed; /* o fixed si quieres que siempre quede visible */
  top: 0;
  width: 100%;
  z-index: 1030; /* encima de otros elementos */
   min-height: 6rem;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

/* Aseguramos que el contenedor padre sea relativo para posicionar el menú desplegable */
.navbar .container {
  position: relative;
}

/* Para pantallas pequeñas (cuando el menú está colapsado y desplegado) */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;       /* Justo debajo de la navbar */
    left: 0;
    right: 0;
    max-width: 1140px; /* Igual que el max-width de .container en Bootstrap */
    margin: 0 auto;     /* Centrar horizontalmente */
    background-color: #fff;
    z-index: 1020;
    padding-left: 1rem;  /* Igual que el padding del contenedor para alinear con logo */
    padding-right: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Opcional para dar profundidad */
  }
  
  /* Opcional: añade una transición suave */
  .navbar-collapse.collapse {
    transition: height 0.3s ease;
  }
}


/* ---------- ENLACES ---------- */
a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

a:hover h2 {
  opacity: 0.7;
}

.nav-link, .nav-link:hover, .nav-link:visited, .nav-link:active {
  color: #000000 !important;
}

.nav-link:hover {
  opacity: 0.7;
}


/* ---------- HERO ---------- */
.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item,
.hero img {
  height: 100%;
}

.hero img {
  object-fit: cover;
  filter: brightness(90%);
}

.carousel-caption {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 0 1.5rem; /* espacio lateral en móviles */
  text-align: center;
}

/* Texto principal y entradilla */
.carousel-caption h1,
.carousel-caption p {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
  max-width: 900px; /* evita que se estire demasiado */
  width: 100%;
}

/* Botón: no se estira */
.carousel-caption a {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
  width: auto;      /* que tome su ancho natural */
  max-width: none;  /* nada que limite su tamaño */
  margin-top: 1rem; /* separación del texto */
}

/* Animación al aparecer */
.carousel-item.active .carousel-caption h1,
.carousel-item.active .carousel-caption p,
.carousel-item.active .carousel-caption a {
  opacity: 1;
  transform: translateY(0);
}

/* Tamaños de texto responsive */
.carousel-caption h1 {
  font-size: 2rem;
  line-height: 1.2;
}

.carousel-caption p {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* Media queries */
@media (min-width: 768px) {
  .carousel-caption h1 { font-size: 3rem; }
  .carousel-caption p { font-size: 1.25rem; }
}

@media (min-width: 1200px) {
  .carousel-caption h1 { font-size: 4rem; }
  .carousel-caption p { font-size: 1.5rem; }
}

.carousel-item.active .carousel-caption h1,
.carousel-item.active .carousel-caption p,
.carousel-item.active .carousel-caption a {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- SECCIONES ---------- */
.section-title {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  display: inline-block;
  padding-bottom: 8px;
}

.section-title-contenido {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  display: inline-block;
  padding-bottom: 8px;
}

.text-size-medium {
  font-size: 1.125rem;
}


/* ---------- BOTONES ---------- */
/* Clase base común */
.button-special,
.button-special-1 {
  text-align: center;
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(.165,.84,.44,1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  background-color: transparent;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
}

/* Para el botón del Hero */
.button-special, .button-special:visited, .button-special:active {
  color: #fff !important;
  border-color: #fff !important;
}

.button-special:hover {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* Para el resto de botones */
.button-special-1 {
  color: #000;
  border-color: #000;
}

.button-special-1:hover {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}


/* ---------- OVERLAY CARDS (Artículos / Empresa Global) ---------- */
.overlay-card,
.overlay-card-1 {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
  height: 0;
  padding-bottom: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.overlay-card {
  padding-bottom: 125%;
}

.overlay-card img,
.overlay-card-1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  z-index: 1;
}

.overlay,
.overlay-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
  transition: background 0.3s ease;
  z-index: 2;
}

.overlay-card:hover img,
.overlay-card-1:hover img {
  transform: scale(1.05);
}

.overlay-card:hover .overlay,
.overlay-card-1:hover .overlay-1 {
  background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.2));
}

.overlay-text,
.overlay-text-1 {
  position: absolute;
  bottom: 10px;
  left: 20px;
  right: 20px;
  z-index: 3;
  color: #fff;
}

.overlay-text h5,
.overlay-text-1 h5 {
  margin-bottom: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.4;
}


/* ---------- ZOOM ---------- */
/* Contenedor con overflow oculto y tamaño fijo */
.zoom-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%; /* Mantiene el alto del contenedor */
}

/* Imagen con tamaño absoluto dentro del contenedor */
.zoom-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* La imagen se recorta si hace falta, pero mantiene el contenedor */
  transition: transform 0.5s ease;
}

/* Efecto de zoom al hacer hover */
.zoom-container:hover img {
  transform: scale(1.1);
}


/* ---------- MENÚ MÓVIL ---------- */
/* Ajuste para el menú móvil */
@media (max-width: 991.98px) {
.navbar-collapse.is-top {margin-top: 18px!important;}
}

/* Quitar el borde y el resplandor del botón de hamburguesa */
.navbar-toggler {
    border: none !important;
    padding: 0;
}

/* Quitar la sombra que aparece al hacer clic (focus) */
.navbar-toggler:focus {
    text-decoration: none;
    outline: none;
    box-shadow: none !important;
}


/* ---------- FOOTER ---------- */
footer {
  background: url("https://cdn.prod.website-files.com/67174dcb1d43b06a0eae317e/672bc66011197f5c6f932666_footer-bg.avif")
              center / cover no-repeat;
}





/* Estado inicial (Oculto y Abajo) */
.reveal {
  opacity: 0;
  transform: translateY(200px); /* Aumentamos un poco más el recorrido */
  visibility: hidden;
  /* Duración de 1.8 segundos para un efecto muy pausado y elegante */
  transition: 
    opacity 1.5s ease-out, 
    transform 1.8s cubic-bezier(0.2, 1, 0.2, 1);
  will-change: transform, opacity;
}

/* Estado activo (Visible y en su sitio) */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* El contenedor padre se activa con JS, pero sus hijos reaccionan con retraso */

/* 1. Preparamos los elementos internos con opacidad rápida y movimiento lento */
.reveal .section-title,
.reveal .text-size-medium,
.reveal article,
.reveal .btn {
  opacity: 0;
  transform: translateY(60px); /* Aumentado para mayor sutileza en el recorrido */
  transition: 
    opacity 0.6s ease-out, 
    transform 1.8s cubic-bezier(0.2, 1, 0.2, 1);
}

/* 2. El contenedor padre (la sección) */
.reveal {
  visibility: hidden; 
  will-change: transform, opacity;
}

/* 3. Cuando la sección se activa, los hijos pasan a su estado final */
.reveal.active {
  visibility: visible;
}

.reveal.active .section-title,
.reveal.active .text-size-medium,
.reveal.active article,
.reveal.active .btn {
  opacity: 1;
  transform: translateY(0);
}

/* 4. Aplicamos los retrasos escalonados (Staggering) */
.reveal.active .section-title      { transition-delay: 0.1s; }
.reveal.active .text-size-medium   { transition-delay: 0.3s; }

/* Tarjetas (cards) una tras otra */
.reveal.active article:nth-child(1) { transition-delay: 0.5s; }
.reveal.active article:nth-child(2) { transition-delay: 0.7s; }
.reveal.active article:nth-child(3) { transition-delay: 0.9s; }

/* Botón final */
.reveal.active .btn                { transition-delay: 1.1s; }






/* --- ESTILOS CORREGIDOS PARA EL VÍDEO EN EL CAROUSEL --- */

/* 1. Contenedor de la diapositiva del vídeo */
/* Aseguramos que el contenedor ocupe todo el espacio disponible */
.carousel-item .video-container {
  position: relative;
  width: 100%;
  height: 100%; /* Cambiamos el valor fijo por 100% */
  min-height: 600px; /* Esto asegura que en pantallas grandes no se encoja */
  overflow: hidden;
  background-color: #000;
}

/* 2. El vídeo en sí - Ajuste "Background-style" */
/* El video debe estirarse para cubrir el contenedor */
.carousel-item .bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* Forzamos el llenado total */
  width: 100%; 
  height: 100%; 
  
  /* IMPORTANTE: Esto evita que el video se deforme al estirarlo */
  object-fit: cover; 
  z-index: 0;
}

/* 3. La Capa Oscura (Overlay) - ESTO ES LO QUE FALTA EN TU CAPTURA */
/* Al añadir esta capa, oscurecemos el vídeo para que el texto blanco sea legible. Sin esto, el texto se pierde. */
.carousel-item .video-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Capa negra con 40% de opacidad. Ajusta el 0.4 si lo quieres más o menos oscuro. */
  background-color: rgba(0, 0, 0, 0.0); 
  z-index: 1;
}

/* 4. Asegurar que el texto esté por ENCIMA de la capa oscura */
.carousel-item .carousel-caption {
  z-index: 10;
}



.video-scroll-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  padding: 20px; /* Área de clic más grande */
}

.arrow-down {
  display: inline-block;
  animation: bounce 2s infinite;
  /* Controlamos el tamaño desde aquí */
  width: 60px;  /* Prueba con 60px o 80px según prefieras */
  height: auto;
}

.arrow-down img {
  width: 100%;  /* La imagen llenará los 60px del padre */
  height: auto;
  /* Si el icono es negro y quieres que sea blanco: */
  filter: brightness(0) invert(1); 
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(15px); } /* Rebote un poco más largo ya que es solo el icono */
  60% { transform: translateY(7px); }
}

.kerning-2 {letter-spacing: 2px;}
/* Para pantallas menores a 400px */
@media (max-width: 400px) {
    .kerning-2  {
        letter-spacing: 1.5px; /* Reducimos a la mitad para que quepa en una línea */
        font-size: 1.0rem !important;     /* Si ves que aún así no cabe, baja un pelín el tamaño */
    }
}


/* --- CONTROLES PERSONALIZADOS DE INFORMES --- */

/* Contenedor de las flechas para separarlas un poco del botón 'Accede' */
.informes-controls {
    margin-top: -10px; /* Ajuste óptico para que queden mejor alineadas */
}

/* Reset de los botones de control para que sean pequeños y clicables */
.custom-control-prev,
.custom-control-next {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Efecto al pasar el ratón (se vuelven un poco más translúcidas) */
.custom-control-prev:hover,
.custom-control-next:hover {
    opacity: 0.6;
}

/* Definimos los iconos negros y nítidos */
.custom-control-prev-icon,
.custom-control-next-icon {
    display: inline-block;
    width: 25px; /* Un tamaño editorial, no muy grande */
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* Icono Anterior Negro (Copiado de la referencia de Bootstrap, teñido de negro) */
.custom-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

/* Icono Siguiente Negro */
.custom-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Ajuste de alineación para móvil */
@media (max-width: 991px) {
    .informes-controls {
        text-align: center !important; /* En móvil, mejor centradas */
        margin-top: 20px;
    }
}



.report-title {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 10px; 
}
.report-title a {
  color: #000000;text-decoration: underline;
}
.report-title a:hover {
  text-decoration: none;
}
.link-fancy {color: #000000;  text-decoration: underline;}
.accordion-button{font-size:22px;}



#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none; /* Se oculta por defecto */
  width: 45px;
  height: 45px;
  border-radius: 50%; /* Circular */
  z-index: 1000;
  background-color: #000; /* Negro para que combine con tus botones */
  border: none;
  transition: all 0.3s ease;
  padding: 0;
  line-height: 45px;
  text-align: center;
}

#btn-back-to-top:hover {
  background-color: #333;
  transform: translateY(-5px); /* Pequeña animación al pasar el ratón */
}

#btn-back-to-top .arrow-up {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: #062D3F!important;
}
.bg-dark h1,  .bg-dark p {
  color: #f3f3f3!important;
}

        /* Estilos específicos para esta página de listado */
        .article-list-item {
            transition: all 0.3s ease;
            border-bottom: 1px solid #eee;
        }
        .article-list-item a {
            text-decoration: none;
            color: #000;
            display: block;
        }
        .article-list-item:hover h4 {
            color: #000000;
			text-decoration: underline;
        }
        .date-badge {
    font-size: 0.85rem;
    letter-spacing: 1px; /* Un poco de aire entre letras para el medio en mayúsculas */
    text-transform: uppercase;
    color: #6c757d; /* Un gris intermedio para que no "manche" el diseño */
}



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

.articulo-extra {
    /* Esto asegura que la animación se ejecute cuando quitemos el d-none */
}




/* CAPA COOKIES */
.capa_cookies_abajo {
    width: 100%;
    background-color: #e7e7e7;
    position: fixed;
    bottom: 0px;
    margin-right: auto;
    margin-left: auto;
    z-index: 200;
}
.titulo_cookies {
    font-family: "Roboto Serif";
    font-size: 20px;
    font-weight: 600;
    border-bottom: solid 1px #999999;
    padding: 0 0 3px 0;
}
.content_texto_cookies {
    margin: auto;
    color: #333333;
    font-family: "Roboto Serif";
    font-size: 12px;
    text-align: justify;
    padding: 10px 10% 10px 10%;
    line-height: 17px;
  }
.content_texto_cookies p {
    margin-bottom: 0px !important;
  }
a.cookies_lnk:link, a.cookies_lnk:hover, a.cookies_lnk:active, a.cookies_lnk:visited {color: #3ac1e1;}
.separator {clear:both}

.boton_cookies {
    float: right;
    background-color: #ffffff;
    border: solid 1px #999999;
    box-sizing: border-box;
    padding: 7px 10px;
    color: #2C3E50;
    border-radius: 3px;
    line-height: 1.5;
    cursor: pointer;
    text-align: center;
    align-items: flex-start;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
.boton_cookies:hover {
	box-shadow: 0 5px 5px 0 rgba(0,0,0,0.24);
	color: #000000;
}
	
.boton_cookies1 {
    float: right;
    background-color: #ffffff;
    border: solid 1px #999999;
    box-sizing: border-box;
    padding: 7px 10px;
    color: #2C3E50;
    border-radius: 3px;
    line-height: 1.5;
    cursor: pointer;
    text-align: center;
    align-items: flex-start;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
.boton_cookies1:hover {
	background-color: #555555;
	border: solid 1px #555555;
  	color: #ffffff;
	box-shadow: 0 5px 5px 0 rgba(0,0,0,0.24);
}

.boton_cookies2 {
    float: right;
    background-color: #ffffff;
    border: solid 1px #999999;
    box-sizing: border-box;
    padding: 7px 10px;
    color: #2C3E50;
    border-radius: 3px;
    line-height: 1.5;
    cursor: pointer;
    text-align: center;
    align-items: flex-start;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
.boton_cookies2:hover {
	background-color: #008ACF;
	border: solid 1px #008ACF;
  	color: #ffffff;
	box-shadow: 0 5px 5px 0 rgba(0,0,0,0.24);
}
.ul_cookies {list-style-type: square; margin: 15px 0 15px 0; text-align: justify;}
.valign_bottom_cookies {vertical-align: bottom !important;}
.margin_right_cookies {margin-right: 20px;}
.justify_cookies  {text-align: justify !important;}
.h1_cookies {font-size: 36px !important;}


 /* 320px */
@media (min-width: 320px) and (max-width: 479px) {
.section-title {
  font-size: 1.75rem;  
  padding-bottom: 6px;
}
	.section-padding {margin-top: -100px !important;}
	.mb-8{margin-bottom: 0.5rem!important}
}

/* 480px */
@media (min-width: 480px) and (max-width: 767px) {
  .section-title {
    font-size: 2.1rem;
    padding-bottom: 6px;
  }
	.section-padding {margin-top: -100px !important;}
	.mb-8{margin-bottom: 1.5rem!important}
}

/* 768px */
@media (min-width: 768px) and (max-width: 991px) {
  .section-title {
    font-size: 2.5rem;
    padding-bottom: 7px;
  }
	.section-padding {margin-top: -70px !important;}
	.mb-8 {margin-bottom: 2rem!important}
	/*.no-visible {display:none;}*/
	.texto-tablet {width: 75%}
}