@import url("header.css");
@import url("footer.css");
@import url('https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*Se aplica lo siguiente siempre para que quede en cero.*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Andika", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
}

html, body {
	background:#ffffff;
	height: 100%;
	margin: 0;
  padding: 0;
	}
  
main{
    /*background-image: url('/assets/img/FondoD.png');  Ruta relativa a la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    color: rgb(0, 0, 0); /* Texto en blanco para que se lea mejor sobre el fondo */
    background-size: cover; /* Escala la imagen para que cubra todo el contenedor */
    
}
.des{
  font-family: 'Alkatra', display;  
  text-align: center;
    
    color: #02062a;
    margin: 20px 0;
      
}
.main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2); /* Color semitransparente negro */
    z-index: 1; /* Coloca la superposición detrás del contenido */
}


body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

main {
  flex: 1;
}
.main > * {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté encima de la superposición */
}
footer {
  position: relative;
  width: 100%;
}

/* Subrayado con acento Usar en cada título para darle a todos el mismo estilo*/
.titulo-subrayado {
    display: inline-block;
    position: relative;
    margin-bottom: 40px;
}
.titulo-subrayado::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50%;
    height: 4px;
    background-color: #EF8C30;
    border-radius: 2px;
}

.content {
    padding: 10px;
}
.carousel-fixed-height {
  height: 500px;
}

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

.carousel-fixed-height .carousel-item img {
  width: 100%;
  object-fit: cover;
  object-position: center center;
  padding: 0.22rem;
  border-radius: 1.5%;
}

/* Portadas generales de contacto, pastoral y admin código reutilizable*/
.portada {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("/assets/img/Ntra Sra de los Dolores.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 20px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;

  /* 🔥 Animación */
  animation: moverFondo 18s ease-in-out infinite alternate;
}

@keyframes moverFondo {
  0% {
    background-position: center;
  }
  50% {
    background-position: center 20px; /* hacia abajo */
  }
  100% {
    background-position: center -20px; /* hacia arriba */
  }
}


/* Para pantallas pequeñas */
@media (max-width: 768px) {
  .carousel-fixed-height {
    height: 300px;
  }
}

.des{
    color: #333;
    margin: 10px 25px 10px 25px;
    padding: 20px;
    text-align: center;
    font-size: 18px;
}


.banner-bg {
  position: relative;
  background-image: url('/assets/img/Secundario.jpg');
  background-size: cover;
  background-position: center;
  width: 90%;  
  height: 400px;
  overflow: hidden;
}

.banner-bg .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* oscurecer fondo */
  z-index: 1;
}

.banner-bg .contenido {
  z-index: 2;
}

/* Estilo para las cards de cada nivel: */
.card-img-top {
  height: 200px;
  object-fit: cover;
  object-position: center;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: none;
  overflow: hidden;
}

.card:hover,
.card:active {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.card-img-top {
  height: 200px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.card:hover .card-img-top,
.card:active .card-img-top {
  transform: scale(1.05);
}


/* Clase base para todos los botones de las cards */
/* --- BASE: mantiene estilo Bootstrap pero le da prioridad a los colores si no no se aplican los cambios --- */
.boton-nivel {
  color: #fff !important;
  border: none !important;
  padding: 0.5rem 1rem !important; /* mismo tamaño que .btn */
  border-radius: 0.375rem !important; /* equivalente a btn */
  display: inline-block;
  transition: 
    background-color 0.3s ease,
    transform 0.25s ease;
}

/* --- ZOOM --- */
.boton-nivel:hover {
  transform: scale(1.05);
}

/* --- COLORES PERSONALIZADOS + HOVER OSCURO --- */

/* Inicial */
.boton-inicial { background-color: #0e2267 !important; }
.boton-inicial:hover { background-color: #0b1c52 !important; }

/* Primario */
.boton-primario { background-color: #004660 !important; }
.boton-primario:hover { background-color: #003447 !important; }

/* Secundario */
.boton-secundario { background-color: #7fad06 !important; }
.boton-secundario:hover { background-color: #6c8e05 !important; }

/* Superior */
.boton-superior{ background-color: #0e5708 !important; }
.boton-superior:hover{ background-color: #0a4206 !important; }



/*cards novedades Instagram*/

.redes-anim {
  opacity: 0;
  transform: translateY(30px);
  animation: redesFade 0.8s ease forwards;
}

.redes-anim:nth-child(1) { animation-delay: 0.1s; }
.redes-anim:nth-child(2) { animation-delay: 0.2s; }
.redes-anim:nth-child(3) { animation-delay: 0.3s; }
.redes-anim:nth-child(4) { animation-delay: 0.4s; }

@keyframes redesFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.card_instagram{
  margin-top: 20px;
  width:100px;
  height: 300px;
  background: #ffffff;
  border-radius: 10px;
  position: relative;
  display: flex;
  cursor: pointer;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.13);

}
.tarjetas-instagram-container {
    margin-bottom: 5rem; 
}

.card_instagram::before{
content: "";
position: absolute;
top: 2%;
width: 95%;
height: 120px;
z-index: 1;
border-radius: 10px 10px 0 0;
background: linear-gradient(to right, #02293f, #046b9b, #02293f);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.13);
transform-origin: bottom;
transition: transform 0.4s;

}

.card_instagram:hover::before{
transform: translateY(-5px) scale(1.05);

}

.card_instagram .img{
width: 120px;
height: 120px;
border-radius: 50%;
z-index: 10;
transform: translateY(50px);
border: 10px solid #ffffff;
overflow: hidden;
position: absolute;
background: #fff;
}

.card_instagram .img img{
  width: 120px;
  height: 120px;
  transform: translate(-8%, -8%);
}

.content{
  width: 100%;
  height: 100%;
  transform: translateY(160px);
  display: flex;
  flex-direction: column;
  z-index: 20;
  align-items: center;
  container: grid;
}


.content h2{
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}

.list-inline-item{
font-size: 2rem;
  color: #002244;
}




/*FIN cards novedades Instagram*/


  /* estilo para contacto*/
.ratio_personal {
  width: 100%;
  height: 100%; /* Que ocupe toda la altura disponible */
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}


@media screen and (max-width: 768px){
	html, body {
		background:#FFFFFA;
		height: 50%;
		margin: 0;
		
	}
	.content {
		min-height: calc(70vh - 100px);  /* Ajusta 100 px al tamaño de tu footer  */
	}

    .function-card{
        /* max-width: 90px; */
        text-align: center;
        align-items: center;
    }
    h2{
        text-align: center;
        align-items: center;
        
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 110%;
        position: absolute;
        top: 250px;
        left: 0;
        background-color: #333;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        text-align: center;
        padding: 5px;
        width: 100%;
        margin-top: 5px;
    }

    .burger {
        display: block;
    }

      .banner-bg {
    height: 200px;
    }

    .banner-bg h2 {
        font-size: 1.3rem;
    }
}

/*código botón flotante del home*/
.floating-home-btn {
    position: fixed;
    top: 85%;
    right: 20px;
    background-color: #007bff;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    z-index: 1000;
}

.floating-home-btn:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

.floating-home-btn i {
    font-size: 24px;
}

@media (max-width: 768px) {
    .floating-home-btn {
        width: 40px;
        height: 40px;
        right: 15px;
    }

    .floating-home-btn i {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .floating-home-btn {
        width: 35px;
        height: 35px;
        right: 10px;
    }

    .floating-home-btn i {
        font-size: 18px;
    }
}

/*aquí comienza el código para el carrusel de novedades*/
:root{
  --nc-media-h: 220px;
}

body{ margin:0; font-family:sans-serif; }

.news-coverflow{
  max-width: 960px;
  margin: 40px auto;
  padding: 0 16px;
  text-align: center;
}

.nc-title{ margin-bottom: 20px; }

.nc-viewport{
  position: relative;
  overflow: hidden;
}

.nc-track{
  position: relative;
  height: 320px; /* espacio para las cards */
}

.nc-slide{
  position: absolute;
  top: 0;
  left: 50%;
  width: 60%;
  max-width: 500px;
  opacity: 0;
  transform: translateX(-50%) scale(0.7);
  transition: transform .5s ease, opacity .5s ease;
}

.nc-slide.active{
  opacity: 1;
  z-index: 3;
  transform: translateX(-50%) scale(1);
}

.nc-slide.left{
  opacity: 1;
  z-index: 2;
  transform: translateX(-110%) scale(0.85);
}

.nc-slide.right{
  opacity: 1;
  z-index: 2;
  transform: translateX(10%) scale(0.85);
}

.nc-media{
  width: 100%;
  height: var(--nc-media-h);
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 8px;
}

.nc-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nc-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.6);
  color: white;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}
.nc-btn--prev{ left: 10px; }
.nc-btn--next{ right: 10px; }

@media (max-width:600px){
  .nc-slide{ width: 80%; }
  .nc-media{ height: 180px; }
}

/* adaptable para pantallas pequeñas */
@media (max-width:600px){
  .nc-slide{ 
    width: 90%;              /* más angosto para mobile */
  }
  .nc-media{ 
    height: 180px; 
  }
  .nc-desc{ 
    font-size: 0.85rem; 
  }

  /* 👇 ocultamos laterales en pantallas pequeñas */
  .nc-slide.left,
  .nc-slide.right{
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
    pointer-events: none;   /* no clickeables */
  }
}