brand.sidenav li a {
  color: rgb(255, 255, 255);
}

.dropdown-content {
  border-radius: 12px;     /* esquinas redondeadas */
  overflow: hidden;        /* evita que se “salgan” las líneas */
}

.dropdown-content li a {
  color: #3f3f3f; /* color del texto */
  
}

.dropdown-content li:not(:last-child) {
  border-bottom: 1px solid currentColor;
}

/* Quitar borde negro al hover / focus en navbar */
nav ul li a:focus,
nav ul li a:hover,
nav ul li a:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.sidenav {
  color: rgb(14, 160, 204);
}

#navlogo {
  max-height: 55px;
  /* tamaño menor en móviles */
    max-width: 70vw;
  /* que no ocupe todo el ancho */;
}

.brand-logo {
  position: relative;
  left: 0;
  transform: none;
  top: 5px;
  padding-left: 25px; /* espacio opcional */
}

@media only screen and (max-width: 992px) {
  .brand-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
    padding-left: 0;
  }
}

.ubicacion {
  font-family: 'Roboto', sans-serif;
  padding: 4rem 1rem;
}

.ubicacion .titles {
  font-size: 1.8rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 1rem;
}

.ubicacion h6.titles {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

#divmap {
  padding: 1rem;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

#divmap iframe {
  width: 100%;
  height: 350px;
  border: none;
  border-radius: 10px;
}


.seccion {
  margin-top: 0.3%;
}
/*--------------------------------------------- imagenes ------------------------------------*/
.txtimg {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.smallmed {
  font-size: 3rem;
}

.row {
  margin-bottom: 2px;
}

.justify {
  text-align: justify;
}

.valign {
  display: flex;
  align-items: center;
}

.right-align {
  text-align: left;
}


.imgredondear {
  border-radius: 15px;
}



.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Corrige las imágenes del slider */
.slider .slides li img {
  width: 100% !important;
  height: 100vh !important;
  object-fit: cover;
  display: block;
}

/* Oscurecer suavemente las imágenes */
.oscurecer {
  filter: brightness(40%);
}

/* Ajuste opcional para los captions */
.slider .caption {
  bottom: 20% !important;
  z-index: 2;
  position: absolute;
  width: 100%;
  text-align: relative;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

/* Asegura altura y evita scroll o duplicados */
.slider,
.slider.fullscreen,
.slider .slides {
  height: 100vh !important;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

.selection {
  color: #fff;
  background: #0E232E;
}

.wrapper {
  max-width: 1080px;
  margin: 50px auto;
  padding: 0 20px;
  position: relative;
}


.wrapper .rowh {
  margin: 10px 0;
}

.wrapper .rowh-1 {
  justify-content: flex-start;
}

.wrapper .rowh-2 {
  justify-content: flex-end;
}

.wrapper .rowh section {
  width: 100%;
}

.before {
  left: -7px;
}

.center-line .scroll-icon {
  bottom: 0px;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}

.rowh-1 section .icon {
  left: -60px;
}

.rowh-2 section .icon {
  top: 15px;
  left: -60px;
}

.rowh section .details .title {
  font-size: 22px;
  font-weight: 600;
}

.rowh section p {
  margin: 10px 0 17px 0;
}

.rowh section .bottom a {
  text-decoration: none;
  background: #0E232E;
  color: #fff;
  padding: 7px 15px;
  border-radius: 5px;
  /* font-size: 17px;
  */
    font-weight: 400;
  transition: all 0.3s ease;
}

.rowh section .icon {
  display: none;
}

.tabs {
  background-color: transparent;
}

.tabs .tab a {
  color:#fff;
}

.active {
  background-color:transparent;
  color:#fff59d;
}


.lineaverde {
  border-left:2px solid #ffffff;
}

.lineaazul {
  border-left:2px solid #020088;
}



.imgrequisitos {
  width:85%;
  margin-top: 5px;
}

first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #2b81ba;
  /* dorado litúrgico */
    padding-right: 0.2rem;
  vertical-align: baseline;
}

ol {
  list-style: circle;
}



.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  text-decoration: none;
  margin-right: 10px;
  transition: background-color 0.3s ease-in-out;
}


@keyframes rollInDown {
  0% {
    opacity: 0;
    transform: translateY(-40px) rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.roll-in {
  animation: rollInDown 1s ease-out both;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.parallax-container {
  height: 500px;
  /* o lo que tú desees */;
}

.parallax-horarios {
  height: 700px;
  /* Puedes modificar este valor */;
}

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

.parallax-calendario {
  height: 300px;
  /* puedes ajustarlo según tu imagen */;
}

.parallax-cpp {
  height: 600px;
}

.parallax-pastorales {
  height: 300px;
}

.parallax-movimientos {
  height: 300px;
}

.parallax-capellanias {
  height: 300px;
}

.parallax-bienvenida {
  height: 300px;
}

.parallax-patronato {
  height: 300px;
}


.subtitulo-seccion {
  height: 250px;
  position: relative;
}

.overlay-subtitulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.principal
 {
  background-color: #4c9a2a !important; /* Cambia aquí tu color del baner*/
  color: rgb(255, 255, 255) !important;
}

.secundario {
  background-color: #a9c191;   /* Cambia aquí tu color del fondo de las secciones*/
}

.secundario-2 {
  background-color: #a9c191;  /* Cambia aquí tu color del index secundario el de los anuncios*/
}

.fondo {
  background-color: #ffffff;
}

#content {
  position: relative;
  top : 90px;
}


/*------------------------------------------ seccion de titulos y textos -----------------------------------------*/
.seccion-titulo-cu {
  background-color: #ffffff;
  padding: 4rem 1rem 2rem 1rem;
  text-align: center;
  border-bottom: 2px solid #e0e0e0;
  position: relative;
}

.titulo-principal {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: 100;
  color: #000000;
  margin-bottom: 1rem;
  letter-spacing: 1px;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

.subtitulo {
  font-family: 'Merriweather', serif;
  font-size: 1.8rem;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.2);
  color: #000000;
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  text-align: center;
  position: relative;
}

.subtitulo-2 {
  font-family: 'Merriweather', serif;
  font-size: 1.8rem;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  text-align: center;
  position: relative;
}

.temporada {
  font-family: 'Merriweather', serif;
  font-size: 1.6rem;
  color: #000000;
  margin: 0.3rem 0;
}

.mensaje_1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  color: #000000;
  margin-top: 0.5rem;
}

.subtitulo:hover,
.subtitulo-2:hover,
.temporada:hover,
.mensaje_1:hover {
  color: #4c9a2a; /* color del hover se cambia al pasar el mouse sobre los titulos.*/
  cursor: default;
  transform: scale(1.02);
  transition: all 0.3s ease;
  text-shadow: 0px 2px 5px rgba(33, 150, 243, 0.2);
}

.subtitulo,
.temporada,
.mensaje_1 {
  transition: all 0.3s ease;
}

.subtitulo::after {
  content: "\f4d8"; /* Unicode del ícono fa-seedling */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  font-size: 1.2rem;
  margin: 0.6rem auto 0;
  color: #4479db;
  background: linear-gradient(to right, #3264e2, #fff59d, #d4af37);
  background-clip: text; /* propiedad estándar */
  -webkit-background-clip: text; /* compatibilidad con WebKit */
  -webkit-text-fill-color: transparent;
}
/*----------------------------------------- textos .titles para index ------------------------------*/

.titles {
  font-family: 'Roboto Slab', serif;
  font-weight: 500;
  font-size: 1.8rem;
  color: #ffffff;
  margin: 1rem 0;
  text-align: center;
}

h6.titles {
  font-size: 1.1rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
  text-align: center;
}

.liturgico-texto {
  font-family: 'Roboto Slab', serif;
  color: initial;
}

.liturgico-texto-2 {
  font-family: 'Roboto Slab', serif;
  color: #ffffff;
}

.enfoque {
  background-color: rgba(0, 0, 0, 0.55); /* Oscurece el fondo para mejor contraste */
  padding: 2rem 1.5rem;
  border-radius: 10px;
}

/* Fondo con imagen de la Virgen en la sección de bienvenida */
.bienvenida-con-fondo {
  position: relative;
  background-image: url('/img/slider-images/virgen.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  padding: 4rem 1rem;
}

/* Capa oscura encima de la imagen para mejorar contraste */
.bienvenida-con-fondo::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* nivel de oscurecimiento */
  z-index: 0;
}

/* Asegura que el contenido esté encima de la capa oscura */
.bienvenida-con-fondo .row {
  position: relative;
  z-index: 1;
}

.collapsible-header {
  color: rgb(0, 0, 0) !important; /* o el color que desees */
  background-color: transparent !important;
}

.collapsible-header.active {
  color: rgb(0, 0, 0) !important; /* mismo color al estar activo */
  background-color: transparent !important;
}
/*---------------------------------- seccion bienvenida -----------------------------------------*/
.bienvenida-con-fondo {
  position: relative;
  background-image: url('/img/virgenflor.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 1rem;
  z-index: 1;
}

.bienvenida-con-fondo::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* oscurece para mayor legibilidad */
  z-index: 0;
}

.bienvenida-con-fondo .row {
  position: relative;
  z-index: 2;
}

.bienvenida-texto {
  padding: 1.5rem;
}

.padre-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.enfoque-content {
  background-color: rgba(0, 0, 0, 0.3); /* caja semitransparente opcional */
  padding: 1.5rem;
  border-radius: 12px;
}

/*---------------------------------- Backgrounds  ------------------------------------*/
#bghorarios{
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/entradaprincipal.jpg');
  background-size:cover;
  }

#bgcopon{
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/copon.jpg');
  background-size:cover;
  }
  
  #bgrequisitos{
  width: 100%;
  background-repeat: no-repeat;
  background-position:bottom;
  background-image: url('../img/virgenflor.JPG');
  background-size:cover;
  }
  
  #bgjubilar{
  width: 100%;
  background-repeat: no-repeat;
  background-position:bottom;
  background-image: url('../img/templointerior.jpg');
  background-size:cover;
  }
  #bgbienvenida{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/templointerior.jpg');
  background-size:cover;
  }
  #bgcapilla{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/carrusel santisimo/angeles.jpg');
  background-size:cover;
  }
  
  #bgcriptas{
  width: 100%;
  background-repeat: no-repeat;
  background-position:center;
  background-image: url('../img/carrusel criptas/criptas2.jpg');
  background-size:cover;
  }
  
  #bgequipo{
  width: 100%;
  background-repeat: no-repeat;
  background-position:center;
  background-image: url('../img/virgenaltar.JPG');
  background-size:cover;
  }
  
  #bgotros{
  width: 100%;
  background-repeat: no-repeat;
  background-position:center;
  background-image: url('../img/entradaprincipal.jpg');
  background-size:cover;
  }
  
  #bgcomunidad{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/virgenflor.jpg');
  background-size:cover;
  }
  
  #bgsacramentos{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/fondovitral.jpg');
  background-size:cover;
  }
  
  #bgadviento{
  width: 100%;
  background-repeat: no-repeat;
  background-position:center;
  background-image: url('../img/fondoadviento.jpg');
  background-size:cover;
  }
  
  #bgnavidad{
  width: 100%;
  background-repeat: no-repeat;
  background-position:center;
  background-image: url('../img/fondonacimiento.jpg');
  background-size:cover;
  }
  
  #bgcuaresma{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/fondocuaresma.jpg');
  background-size:cover;
  }
  
  #bgpascua{
  width: 100%;
  background-repeat: no-repeat;
  background-position:center;
  background-image: url('../img/fondopascua.jpg');
  background-size:cover;
  }
  
  #bgresurreccion{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/fondoresurreccion.jpg');
  background-size:cover;
  }
  
  #bgfiestas{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/slider-images/virgen.jpg');
  background-size:cover;
  }
  
  #bgcpp{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/templointerior.jpg');
  background-size:cover;
  }
  
  #bgcursos{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/galeria fotografica/templo/t11.jpg');
  background-size:cover;
  }
  
  #bgadolescentes{
  width: 100%;
  background-repeat: no-repeat;
  background-position:top;
  background-image: url('../img/adolescentes1.jpeg');
  background-size:cover;
  }

  [id^="bg"] {
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 2rem;
  
    /* Sombra decorativa */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  #bgcapellanias {
    background-image: url('/img/vitralespiritu.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 4rem 2rem;
  }
  
  .bgcapellanias-opaco {
    background-color: rgba(0, 0, 0, 0.6); /* oscurecer fondo para legibilidad */
    padding: 3rem 2rem;
    border-radius: 20px;
  }

/*--------------------- Textos generales -----------------*/
.texto-general {
  background-color: #094875; /* azul secundario */ 
  color: #e0e0e0; /* gris claro */
  font-family: 'Roboto', sans-serif;
  padding: 2rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.texto-general p {
  margin-bottom: 0;
}
/* -------------------------------GALERÍAS ----------------------- */
.carousel.carousel-slider {
  height: 800px !important; /* Altura estándar para escritorio */
}

.carousel .carousel-item {
  height: 100% !important; /* Que use toda la altura del carrusel */
}

.carousel.carousel-slider {
  max-height: 80vh; /* Ajusta según cuánto espacio quieres que ocupe */
  overflow: hidden;
}



/* --------------------------- Config galerías móvil ------------------------ */
@media (max-width: 600px) {
  .carousel.carousel-slider {
    height: 250px !important; /* Más compacto en móvil */
  }

  .carousel .carousel-item {
    height: 100% !important;
  }

  .carousel-item img {
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
  }

  .valign .col.s12 {
    margin-bottom: 1rem;
  }

  .flow-text {
    font-size: 1.1rem !important;
  }

  .carousel-item {
    padding: 0;
  }
}

/*--------------------------------------- linea del tiempo ----------------------------*/
/* CONTENEDOR PRINCIPAL */
.timeline {
  position: relative;
  padding-left: 40px;
}

/* LÍNEA ROJA VERTICAL CENTRAL */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background-color: #d32f2f;
  z-index: 0;
}

/* CONTENEDOR GENERAL DE TARJETAS */
.wrapper {
  padding: 2rem 0;
  margin: 2rem auto;
  max-width: 1100px;
  position: relative;
}

/* FILAS DE LA LÍNEA DE TIEMPO */
.rowh {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  margin-bottom: 5rem;
  z-index: 2;
}

.rowh-1,
.rowh-2 {
  justify-content: center !important;
}

/* TARJETA */
.rowh section {
  background: white;
  border-radius: 15px;
  padding: 1.5rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  position: relative;
}

.rowh p {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.rowh img {
  width: 100px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.rowh img:hover {
  transform: scale(1.05);
}

/* TITULO */
.details .title {
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: 1rem;
  display: block;
}

/* ICONOS EN CÍRCULO ROJO CENTRADO */
.rowh::before {
  content: attr(data-icon);
  font-family: 'Material Icons';
  position: absolute;
  top: -30px; /* ⬅ mueve el ícono hacia arriba */
  left: 50%;
  transform: translateX(-50%);
  background-color: #d32f2f;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 3px solid #1976d2;
  z-index: 3;
}

/* CONECTOR CON FLECHA HACIA ABAJO */
.connector {
  position: relative;
  height: 40px;
}

.arrow-down {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #d32f2f;
  z-index: 2;
}

/* ANIMACIÓN AL HACER SCROLL */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */
@media screen and (max-width: 768px) {
  .rowh {
    justify-content: center;
    gap: 1rem;
  }

  .rowh::before {
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%);
  }
}

/* =================================================
   GALERÍA – CONTENEDOR
================================================= */
.gallery{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  aspect-ratio: 16 / 9;

  background: #000;
  overflow: hidden;
  border-radius: 12px;
  contain: layout paint;
}


/* =================================================
   STAGE (visor principal)
================================================= */
.gallery-stage {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background: #000;
}


/* =================================================
   IMAGEN PRINCIPAL
================================================= */
.gallery-viewer {
  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
  object-position: center;

  background: #000;

  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;

  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
}

.gallery-viewer.is-visible{
  opacity: 1;
}


/* =================================================
   AISLAMIENTO TOTAL (ANTI CONFLICTOS)
================================================= */
.gallery .gallery-stage > img.gallery-viewer {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;
}


/* =================================================
   CONTROLES NAVEGACIÓN
================================================= */
.gallery .nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  opacity: .85;
  transition: opacity .15s ease, transform .15s ease;
}

.gallery .nav:hover{
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}

.gallery .prev{ left: 10px; }
.gallery .next{ right: 10px; }
.gallery .fs{ right: 60px; }


/* =================================================
   LOADER
================================================= */
.viewer-loader{
  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  background:rgba(0,0,0,.4);

  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.viewer-loader.on{
  opacity:1;
}

.viewer-loader span{
  width:40px;
  height:40px;

  border:4px solid rgba(255,255,255,.3);
  border-top-color:#fff;

  border-radius:50%;

  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}


/* =================================================
   MINIATURAS
================================================= */
.thumbs{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;

  max-width: 980px;
  margin: .75rem auto 0;
}

.thumbs button{
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;

  width: 100px;
  aspect-ratio: 16 / 9;

  overflow: hidden;
  border-radius: 8px;

  outline-offset: 3px;
  transition: transform .15s ease;
}

.thumbs button:hover{
  transform: scale(1.05);
}

.thumbs button:focus-visible{
  outline: 3px solid #38bdf8;
}

.thumbs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
}

.thumbs .active{
  outline: 3px solid #0ea5e9;
}


/* =================================================
   FULLSCREEN
================================================= */
.gallery-fs{
  position:fixed;
  inset:0;

  background:#000;
  z-index:9999;

  display:none;

  grid-template-rows:auto 1fr auto;
  gap:10px;

  padding:12px;
}

.gallery-fs.open{
  display:grid;
}

.gallery-fs img{
  max-width:100%;
  max-height:80vh;
  margin:auto;

  transition: transform .25s ease;
}

.gallery-fs img.is-zoomed{
  transform: scale(2);
  cursor: grab;
}

.fs-top{
  display:flex;
  justify-content:space-between;
  color:#fff;
}

.fs-btn{
  background:rgba(255,255,255,.15);
  border:none;
  color:#fff;

  padding:.5rem .75rem;
  border-radius:10px;
  cursor:pointer;
}


/* =================================================
   RESPONSIVE
================================================= */
@media (max-width: 600px){

  .gallery{
    border-radius: 10px;
  }

  .thumbs button{
    width: 84px;
  }

}



/* ===== Horizontal Collapsible ===== */
/* ===== Barra azul centrada y redondeada ===== */
.h-acc-bar {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;               /* elimina espacio sobrante */
  margin: 0 auto 20px auto; /* centra y deja margen inferior */
  margin-top: 15px;
  display: flex;
  justify-content: center;  /* centra los botones */
  flex-wrap: wrap;
  gap: .75rem;              /* espacio entre botones */
  border-radius:12px;
}
/* Botones del menú */
.h-acc-header{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(58, 18, 202);
  color:#fff;
  cursor:pointer;
  transition:background .2s ease, transform .06s ease, border-color .2s ease;
}
.h-acc-header .material-icons{ font-size:20px; line-height:20px; }
.h-acc-header .chevron{ transition:transform .2s ease; }
.h-acc-header:hover{ background:rgba(255,255,255,.16); }
.h-acc-header:active{ transform:scale(.98); }
.h-acc-header.active{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.35);
}
.h-acc-header.active .chevron{ transform:rotate(180deg); }

/* Paneles */
.h-acc-panels{ width:100%; }
.h-acc-panel{
  display:none;
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.2);
}
.h-acc-panel.is-open{ display:block; }

/* Contenido centrado dentro de los paneles */
.h-acc-panel .row.h-centered{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:20px;
}
.h-acc-panel .row.h-centered .col{
  flex:0 1 600px;  /* limita el ancho por columna en desktop */
}

/* Imágenes responsivas dentro del panel */
.h-acc-panel img{
  display:block;
  max-width:100%;
  height:auto;
}

/* --- Quitar cualquier fondo azul detrás del menú --- */
#bgcopon,
#bgcopon .enfoque,
#bgcopon .principal,
#bgcopon .row.enfoque,
#bgcopon .h-accordion,
#bgcopon .h-acc-bar,
#bgcopon .h-acc-bar::before,
#bgcopon .h-acc-panels {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* La barra no ocupa toda la franja ni tiene “caja”; solo botones centrados */
#bgcopon .h-acc-bar {
  padding: 0 !important;
  margin: 0 auto 20px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  border-radius: 0 !important;
}

/* Los paneles también sin fondo para que se vea la imagen detrás */
#bgcopon .h-acc-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 0 !important; /* deja solo aire vertical */
}
/*----------------------------------------- seccion versiculo del dia --------------------*/
/* Tarjeta tipo “nota” */
.versiculo-nota{
  position: absolute;
  top: 12rem;          /* ajusta fino para que coincida con tu recuadro rojo */
  right: 2rem;
  max-width: 360px;
  background: #fff8dc;          /* papel nota (cornsilk) */
  border: 1px solid #e6d8a2;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Cabecera */
.versiculo-header{
  display: flex; gap: 8px; align-items: center;
  font-weight: 600; color: #5c4b2a;
  margin-bottom: 8px;
}
.versiculo-header .material-icons{ font-size: 20px; }

/* Texto y cita */
.versiculo-text{
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #3c3321;
}
.versiculo-cita{
  font-size: .95rem;
  font-weight: 600;
  color: #7a6a44;
}

/* Responsive: en móviles la nota baja debajo del título */
@media (max-width: 992px){
  .versiculo-nota{
    position: static;
    margin: 1rem auto 0;
    max-width: 520px;
  }
}

/* Contenedor de difusión */
.difusion-parroquial .collapsible-body {
    padding: 1rem !important;
}

/* Quitar rellenos extra dentro del body */
.difusion-parroquial .collapsible-body .col {
    padding: 0;
}

/* Imagen dentro de difusión */
.difusion-parroquial .difusion-img {
    width: 100%;
    max-width: 100%;
    max-height: 350px;         /* altura máxima para que no ocupen toda la pantalla */
    object-fit: contain;         /* recorta un poquito para que no se deforme */
    border-radius: 10px;
    cursor: pointer;

    /* Animación suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el cursor */
.difusion-parroquial .difusion-img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Opcional: un poco más baja en pantallas pequeñas */
@media only screen and (max-width: 600px) {
    .difusion-parroquial .difusion-img {
        max-height: 260px;
    }
}

/* ==========================
   SECCIÓN VIDEO PARROQUIAL
========================== */
.video-parroquial {
    background-color: #f2f04a; /* mismo amarillo que usas */
    padding: 40px 15px;
}

.video-container-custom {
    position: relative;
    width: 100%;
    max-width: 700px;   /* 🔹 controla el tamaño del video */
    margin: 0 auto;      /* centrado */
    padding-top: 35%; /* relación 16:9 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.video-container-custom iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.difusion-parroquial .col.s12 .difusion-img {
    max-width: 520px;
    margin: 0 auto;
}


/* ==========================
   SECCIÓN Documentos
========================== */

.documentos-container {
  margin-top: 40px;
  margin-bottom: 70px;
}

/* CONTENEDOR VERDE (usa .principal) */
.documentos-wrapper {
  padding: 40px 25px 60px 25px;
  border-radius: 18px;
}

/* TÍTULO (usa .secundario) */
.titulo-documentos {
  padding: 18px;
  border-radius: 14px;
  margin-bottom: 35px;
}

/* CENTRAR COLUMNAS INCOMPLETAS */
.documentos-wrapper .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* TARJETAS */
.doc-card {
  background: #f4f7f2;
  border-radius: 14px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  text-align: center;
}

.doc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}

.doc-icon i {
  font-size: 70px;
  color: #c62828;
  margin-bottom: 15px;
}

.doc-meta {
  font-size: 0.9rem;
  color: #666;
  margin: 10px 0;
}

.descargar-btn {
  margin-top: 15px;
  border-radius: 25px;
}

.descargar-btn:hover {
  filter: brightness(0.9);
}

.documentos-wrapper .doc-card {
  color: #222 !important;
}

.documentos-wrapper .doc-card h6,
.documentos-wrapper .doc-card p {
  color: #222 !important;
}