@charset "UTF-8";
/* CSS Document */
header {
  position: relative;
  background-color: white;
  /*height: 55vh;*/
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}
.header-home{height: 55vh;}
.header-interior{height: 40vh;}

header video {
  position: absolute;
  top: 70%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}


/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

/*@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }

  header video {
    display: none;
  }
}*/

header h1 a{display:block; width: 97px; height: 41px; text-indent: -9999px; background-image: url(../images/logo-manitacasadedios.png); background-repeat: no-repeat;margin-top:0px!important;}

#redessociales{padding-left: 15px; padding-top: 13px}
#redessociales a{color:#0066ff; font-size: 30px; padding:0px 8px;
 -webkit-transition: color 500ms ease-out;
    -moz-transition: color 500ms ease-out;
    -o-transition: color 500ms ease-out;
    transition: color 500ms ease-out;}
#redessociales a:hover{color:#000;}

#redessociales-int{padding-bottom: 5px}
#redessociales-int a{color:#fff; font-size: 1.3em; padding:0px 5px;
 -webkit-transition: color 500ms ease-out;
    -moz-transition: color 500ms ease-out;
    -o-transition: color 500ms ease-out;
    transition: color 500ms ease-out;}
#redessociales-int a:hover{color:#0c72ee;}

.navbar{padding-bottom: 0px!important; padding-top: 20px;}

#menupeque a{color:#fff!important; font-family: 'gothambold'; font-size:18px; padding:0px 8px;}

#menupeque a:hover{border-bottom:#0275FF solid 2px;}

#menupeque{margin-left: auto !important; 
    margin-right: 0 !important; 
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
 }
#menupeque li {display: inline-flex; width: auto;}


#menupeque2 a{color:#141414!important; font-family: 'gothambold'; font-size:18px; padding:0px 8px;}

#menupeque2 a:hover{border-bottom:#0066ff solid 2px;}

#menupeque2{margin-left: auto !important; 
    margin-right: 0 !important; 
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
 }
#menupeque2 li {display: inline-flex; width: auto;}




.searchmenu a{color:#fff; font-size:22px;}
#imagenbienvenida{padding-top:130px; /*padding-bottom: 100px;*/ padding-left:15px; padding-right:15px;}
#titulo-header-page{padding-top:110px; padding-bottom: 0px; padding-left:15px; padding-right:15px;}
#titulo-header-page h1{    font-family: 'gothamblack';
 font-size:4.2em; color: #ffffff; letter-spacing: 0.04em;}



.searchmenu span a{  cursor: pointer;   padding: 0 .1em; font-family: 'gothambold'; font-size:18px; color:#fff; text-decoration: none; text-transform: capitalize;}
.searchmenu {text-align: right}
.menulink {
  background: 
     linear-gradient(#0275ff 0 0) 
     50% calc(-3px - 100%) /var(--d, 0%) 200% no-repeat;
  transition: 0.3s, background-size 0.3s 0.3s;
    padding-left: 10px!important;
    padding-right: 10px!important;
}
.menulink:hover {
  --d: 100%;
  background-position: 50% 0%;
  color: #fff;
  transition: 0.3s, background-position 0.3s 0.3s, color 0.3s 0.3s;
}

.menulink2 {
  background: 
     linear-gradient(#0275ff 0 0) 
     50% calc(-3px - 100%) /var(--d, 0%) 200% no-repeat;
  transition: 0.3s, background-size 0.3s 0.3s;
    padding-left: 10px!important;
    padding-right: 10px!important;
      color: #000;

}
.menulink2:hover {
  --d: 100%;
  background-position: 50% 0%;
  color: #000;
  transition: 0.3s, background-position 0.3s 0.3s, color 0.3s 0.3s;
}

.searchmenu2 a{color:#141414; font-size:22px;}
.searchmenu2 a:hover{color:#0275FF;}

.searchmenu2 span a{  cursor: pointer;   padding: 0 .1em; font-family: 'gothambold'; font-size:18px; color:#141414; text-decoration: none; text-transform: capitalize;}
.searchmenu2 span a:hover{   color:#ffffff;}
.searchmenu2 {text-align: right}


#proclamaciondefe{background-color: #006ef8;padding: 60px 0px; background-image: url("../images/palomita.png"); background-repeat: no-repeat; background-position: bottom right; color: #fff; font-size: 2.8em; font-family: 'gothambold'; line-height: 1.3em;   text-align: justify;}

#proclamaciondefe span{background-color: #fff; color:#006ef8; }

#proclamaciondefe h2{font-family: 'gothamblack';
  font-size: 1.5em;
  color: #fff;
  letter-spacing: 0.04em;
}

.titulogrande{font-family: 'gothamblack'; font-size: 4em; color: #000; letter-spacing: 0.04em;}
.titulograndew{font-family: 'gothamblack'; font-size: 4em; color: #fff;letter-spacing: 0.04em; }
/*h2{font-family: 'gothamblack'; font-size: 2.9em; color: #000; }
*/


#infopastores p{font-family: 'gothambook'; /*font-size: 1.4em;*/ color: #000000;}

#infopastores a, #textogaleriadomingo a, #itemprincipal a{font-family: 'gothambold'; font-size: 1em; color: #000; text-decoration: none;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;}
#infopastores a:hover, #textogaleriadomingo a:hover{border-bottom:#0066ff solid 2px;}

#boxnecesitasoracion{background-color: #fffe16; color: #000000; background-image: url("../images/manitasoracion.png"); background-repeat: no-repeat; background-position: bottom right;}

#boxdeseasofrendar, #realizarofrenda{background-color: #0275ff; color: #ffffff; background-image: url("../images/manitafondoofrendas.png"); background-repeat: no-repeat; background-position: bottom right;}

#boxdeseasofrendar h2, #realizarofrenda h2{font-family: 'gothamblack'; font-size: 3.5em; color: #fff; }
#boxdeseasofrendar h3, #realizarofrenda h3{font-family: 'gothamblack'; font-size: 2.5em; color: #fff; }

#boxdeseasofrendar p, #realizarofrenda p{font-family: 'gothambook'; font-size: 1.2em; line-height: 1.2em;}


#boxnecesitasoracion p{font-family: 'gothambold'; font-size: 1.2em; line-height: 1.1em;}

.botonredondo{border: solid 2px #000;-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px; padding: 10px; text-decoration: none; color: #000; font-family: 'gothambold';}
.botonredondo:hover{background-color: #000; color: #fff;}

.botonredondo2{border: solid 2px #fff;-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px; padding: 10px; text-decoration: none; color: #fff; font-family: 'gothambold';}
.botonredondo2:hover{background-color: #fff; color: #000;}

.botonredondo2-ofrenda{border: solid 2px #fff;-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px; padding: 10px; text-decoration: none; color: #fff; font-family: 'gothambold'; font-size: 1.2em;}
.botonredondo2-ofrenda:hover{background-color: #fff; color: #000;}

.botonredondo6{background-color:#fff!important; -webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px; padding: 10px; text-decoration: none; color: #000; font-family: 'gothambold';}
.botonredondo6:hover{background-color: #fff; color: #000;}

#slidegaleriahome{border-top: solid 50px #006cf6; margin-right:0px!important;}
#slidergaleriahomebox{margin-left: auto; margin-right: 0;}

#bloquehorariodomingo{background-color: #010206;}

#voluntariado{background-color: #fafafa;}
#boxvoluntariado{background-image: url("../images/fotovoluntariado.jpg");background-size: cover;background-repeat: no-repeat; background-position: top center;}
#voluntariado h2{font-size: 2em; font-family: 'gothambold'; color: #fff;}


#textohorariodomingo{color:#ffffff!important; padding-top: 40px; padding-bottom: 25px}
#textohorariodomingo .p1{color:#ffffff!important; font-family: 'gothambook'; font-size: 23px;}
#textohorariodomingo .p2{color:#ffffff!important; font-family: 'gothambook'; font-size: 18px; }
#textohorariodomingo .p2 span{padding-top: 5px; border-top: solid 1px #ffffff;}
#textohorariodomingo h2{color:#ffffff!important; font-family: 'gothamblack'; font-size: 20px; text-transform: uppercase;}
#textohorariodomingo h2 span{border:solid 1px #fff;padding: 5px; }
#textohorariodomingo h3{color:#ffffff!important; font-family: 'gothamblack'; font-size: 2.5em; text-transform: uppercase;}

#bloquelineadeoracion{background-color:#00eb8a; padding-top: 50px; padding-bottom: 50px; color:#000000;}
#textolineadeoracion{ padding-top: 60px;}
#textolineadeoracion h3{font-family: 'gothambold'; font-size: 2em;}
#textolineadeoracion h3 a{color: #000000; text-decoration: none;}
#textolineadeoracion h3 a:hover{color: #00eb8a; text-decoration: none; background-color: #000000;}
#textolineadeoracion .p4{font-family: 'gothambold'; font-size: 1.7em; }
#textolineadeoracion .p2{font-family: 'gothambook'; font-size: 16px;border-top:solid 1px #000; padding-top: 5px }

.botonmas{font-family: 'gothambold'; font-size: 1em; color:#FFFFFF!important; text-decoration: none; background-color: #0c72ee; padding: 10px 20px; border-radius: 25px; }
.botonmas:hover{background-color:#000000;color:#FFFFFF;}

.botonmas5{font-family: 'gothambold'; font-size: 1em; color:#FFFFFF!important; text-decoration: none; background-color: #0c72ee; padding: 10px 20px; border-radius: 25px; }
.botonmas5:hover{background-color:#000000;color:#FFFFFF;}

.botonmas3,.botonmas3e{font-family: 'gothambold'; font-size: 1.3em; color:#FFFFFF!important; text-decoration: none; background-color: #0c72ee; padding: 10px 20px; border-radius: 25px; }
.botonmas3:hover, .botonmas3e:hover{background-color:#000000;color:#FFFFFF;}

.botonmas6{font-family: 'gothambold'; font-size: 1.2em; color:#FFFFFF!important; text-decoration: none; background-color: #000000; padding: 10px 20px; border-radius: 25px; }
.botonmas6:hover{background-color:#0c72ee;color:#FFFFFF;}

#bloqueensenanza{}

#itemprincipal h3 a{ font-family: 'gothammedium'; font-size: 1.2em; text-decoration: none; color: #010206; letter-spacing: -2px; border-bottom: solid 2px #0275ff;}
#itemprincipal h3 a:hover, .itemposts h3 a:hover, .itemnews h3 a:hover{color:#0275ff; text-decoration: none; border-bottom: none}


#itemprincipal h4 a{font-family: 'gothammedium'; font-size: 0.7em; text-decoration: none; color: #0275ff; }
#itemprincipal h4 a:hover, .itemposts h4 a:hover, .itemnews h4 a:hover, .itempostsint h3 a:hover{border-bottom: solid 1px #010206;}

#itemprincipal h3 {margin-bottom: 5px!important; padding-bottom: 0px!important;line-height: 0.7em;}
#itemprincipal h4 {margin-bottom: 0px!important; padding-bottom: 0px!important; margin-top: 10px!important; padding-top: 0px!important}
#itemprincipal {border-bottom: solid 1px #006cf6; padding-bottom: 5px; margin-bottom: 10px;}
.extracto-predicas{font-family: 'gothambook'; color:#010206; font-weight: 100;}
.text-ensenanza2{font-size: 18px;}

.itemposts h3 a, .itempostsint h2 a{font-family: 'gothammedium';
font-size: 0.7em;
text-decoration: none;
color: #010206;
letter-spacing: -1px;
border-bottom: solid 2px #0275ff;
}

.itemnews h3 a{font-family: 'gothammedium';
font-size: 0.6em;
text-decoration: none;
color: #010206;
letter-spacing: -1px;
border-bottom: solid 2px #0275ff;
}

.itemnews h4 a{font-family: 'gothammedium'; font-size: 0.5em; text-decoration: none; color: #0275ff; }



.itemposts h4 a,.itempostsint h3 a{font-family: 'gothammedium'; font-size: 0.6em; text-decoration: none; color: #0275ff; }


.itemposts h3, .itemnews h3, .itempostsint h2 {margin-bottom: 0px!important; padding-bottom: 0px!important;line-height: 0.8em;}
.itemposts h4, .itemnews h4, .itempostsint h3 {margin-bottom: 0px!important; margin-top: 0px!important; padding-bottom: 0px!important; padding-top: 0px!important}
.text-ensenanza3{font-size: 14px;}

.text-ensenanza4{font-size: 12px;}


.zoom {
  transition: transform .2s; 
}

.zoom:hover {
  transform: scale(1.05); 
}

#eventos{background-color: #0275FF; }
#eventos h2{color: #fff;}
#boxeventos{background-image: url("../images/fondoblanco.png")}

#innovacionsocial {background-image: url("../images/bancodealimentohome.jpg"); background-size: cover; background-repeat: no-repeat; background-position:center center;}
#innovacionsocial h2{color:#fff; font-family: 'gothamblack';
  font-size: 3em; }
#innovacionsocial h3{color:#fff; font-family: 'gothambold'; font-size: 1.8em;}

#innovacionsocial-int {background-image: url("../images/bancodealimentohome.jpg"); background-size: cover; background-repeat: no-repeat; background-position:center center;}
#innovacionsocial-int h2{color:#fff; font-family: 'gothamblack';
  font-size: 3em;}
#innovacionsocial-int h3{color:#fff; font-family: 'gothambold'; font-size: 1.8em;}

.innovacion-sub {font-family: 'gothambook';}

.itemeventos{border-top: solid 1px #000;}
 .card-body {min-height: 205px;}
    .card-body h3 a{ font-family: 'gothambold'; font-size: 1em!important; text-decoration: none; color: #0275ff; letter-spacing: -2px;}
    .card-body h3, .em.pixelbones h3 { font-family: 'gothambold'; font-size: 1.4em!important; text-decoration: none; color: #0275ff; letter-spacing: -1px;}

.card-body h3 a:hover{color:#000; text-decoration: none;}
.fechaevento{font-family: 'gothambold'; font-size: 16px; text-decoration: none; color: #000; padding-top: 5px;}
.textoevento{font-family: 'gothambook';color: #000;font-weight: 100; font-size: 13px;}
.botonevento{padding-top: 10px}
.form-control{border-radius: 25px; border: solid 2px #000; font-family: 'gothambold'; font-size: 16px;}

#suscribitemailing{background-color: #fafafa}

#whatsappblock{background-color: #00eb8a}
#whatsappblock h2{font-family: 'gothambook'; font-size: 1.6em; text-decoration: none; color: #000; letter-spacing: -2px;}

#footer{background-color: #000; color: #fff; font-family: 'gothambook'; font-size: 13px;}

#enuevo-b1{background-color: #006cf6; }
#enuevo-b2{background-color: #0056B8; }
#enuevo-b3{background-color: #006cf6 }
.cajashomenuevo{padding: 20px; color: #FFFFFF;}
.cajashomenuevo h3{font-size: 1.8em}
#necesitasoracion{background-color: #fafafa;}

.image-container{padding-bottom: 5px}
#bloqueensnoticias2{/*border-bottom: solid 1px #000000;*/}
#breadcrumb{background-color: #0275ff; font-family: 'gothambook'; font-size: 14px; font-weight: normal; color: #fff;}
#breadcrumb a{color:#ffffff; text-decoration: none; font-family: 'gothambold'; padding-right:5px; padding-left: 5px; }
#breadcrumb a:hover{color:#000;}

#titulo-cat{ padding-top: 0px;}
#titulo-cat h1{font-family: 'gothamblack';
  font-size: 4.5em!important;
  color: #000; margin-bottom: .1em!important; letter-spacing: 0.04em;}

#titulo-interior{ padding-top: 0px;}
#titulo-interior h1{font-family: 'gothamblack';
  font-size: 3.8em!important;
  color: #000; margin-bottom: .1em!important;}
#titulo-interior h2{font-family: 'gothamblack';
  font-size: 1.2em!important;
  color: #000;margin-bottom: .1em!important;}
#titulo-interior h2 a{font-family: 'gothamblack';
  font-size: 1.2em!important;
  color: #0275FF; text-decoration: none; }

#texto-content{font-family: 'gothambook'; font-size: 16px; text-align: justify; padding: 5px;}

#sidebar {padding-top: 0px;}
#sidebar .card-img-top {
    width: 100%;
    height: 12vw;
    object-fit: cover;
}
#sidebar h2{font-family: 'gothamblack';
  font-size: 1.9em!important; letter-spacing: 0.02em;}
#sidebar-wrap, .sidebar-wrap{background-color: #f4f4f4;  padding-bottom: 20px;}
.sidebar-wrap{margin-bottom:15px;}

.sidebar-wrap2{background-color: #fcfcfc;  padding-bottom: 20px;}



#texto-content-page{font-family: 'gothambook'; font-size: 16px; text-align: justify;}
#texto-content-page h2{font-size: 2em!important; color: #0275FF;}
#texto-content-page h3{font-size: 1.4em!important; }

.fechapost{margin-bottom: 0em!important;}
.tiempolectura{margin-bottom: 0.1em!important;}

.card-principal h2 a{font-family: 'gothamblack'; font-size: 1.2em; /*color: #0275FF*/; text-decoration: none;}
.card-principal h2 a:hover,.card-segundarios h2 a:hover{color:#75b2fb;}
.card-principal h2{margin: 0px!important;padding: 0px!important;}
.card-principal h3 {margin-bottom: 0px!important; margin-top:-10px;}

.card-principal .extracto-predicas{font-family: 'gothambook'; color: #fff; text-decoration: none;}

.card-principal h3 a{font-family: 'gothammedium'; font-size: .7em; color: #fff; text-decoration: none;}
.card-principal h3 a:hover,.card-segundarios h3 a:hover{ border-bottom: solid 1px #0275FF;}


.card-segundarios,.card-principal{margin: 10px;            cursor: pointer;
 }
.card-segundarios h2 a{font-family: 'gothamblack'; font-size: 0.8em; color: #0275FF; text-decoration: none;}
.card-segundarios h2 a:hover{color: #FFF; }
.card-segundarios h2 {margin: 0px!important;}
.card-segundarios h3 a{font-family: 'gothammedium'; font-size: 0.5em; color: #fff; text-decoration: none;}
.card-segundarios h3 {margin-bottom: 0px!important; margin-top:-16px;}

.card-principal p{color: #FFFFFF; font-family: 'gothambook'; font-size: .9em; }
.card-segundarios p{color: #FFFFFF; font-family: 'gothambook'; font-size: .9em; /* max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;*/}


.card-principal .card-img-overlay, .card-segundarios .card-img-overlay{background-image: linear-gradient(to bottom,rgba(0, 0, 0, .40),rgba(0, 0, 0, .30), rgba(0, 0, 0, 0));}
.card-principal .card-img-overlay:hover, .card-segundarios .card-img-overlay:hover{background-image: none!important;}

.card,.card-img{border: none!important;border-radius: 0rem!important;}
/*
.card-img-overlay {
  pointer-events: none;
}

.card-img-overlay:hover {
  pointer-events: auto;
}*/

.hover{color: #75b2fb!important;}

.titulotemasrelacionados, .heateor_sss_sharing_title {
  font-family: 'gothamblack';
  font-size: 18px;
}
.temasrelacionados a{font-family: 'gothambook'; font-size: 16px; text-decoration: none; color:#0275FF; padding-right: 5px; padding-left: 5px; font-weight: bold;}
.temasrelacionados a:hover{text-decoration: none; color:#000;}

.titulodireccion h3{font-size: 1.6em!important}
.direcciondireccion{font-size: 1.2em!important}

.size-large {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex!important;
  flex-wrap: wrap!important;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
    grid-gap:0px!important;
}

  



@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }}

@media screen and (max-width: 440px) {
    #proclamaciondefe{padding: 30px 0px; font-size: 1.5em; line-height: 1.1em; background-image: none; text-align: center;}
    
    .image-container {
 /* width: 100%;  ancho deseado */
  height: 240px; /* altura deseada */
text-align:center;
  position: relative;
  overflow: hidden; /* ocultar las partes de la imagen que quedan fuera del contenedor */
       
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* asegurar que la imagen cubra todo el contenedor */
  height: auto; /* ajustar la altura proporcionalmente al ancho */
  clip-path: square(50%); /* crear una máscara circular centrada en la imagen */
  object-fit: cover; /* asegurar que la imagen se ajuste a la máscara sin deformarse */
}

    
  /*  .cropmobile {
    width: 325px!important; 
    height: 350px!important; 
    overflow: hidden!important;
}*/
    
    .itemposts h3 a, .itempostsint h2 a{ font-family: 'gothammedium'; font-size: 1em; text-decoration: none; color: #010206; letter-spacing: 0px; line-height: 1em;}
.itemposts h3 a:hover, .itempostsint h2 a:hover{color:#0275ff; text-decoration: none;}

.itemposts h4 a, .itempostsint h3 a{font-family: 'gothammedium'; font-size: 0.7em; text-decoration: none; color: #0275ff; }
.itemposts h4 a:hover, .itempostsint h3 a:hover{border-bottom: solid 1px #010206;}

.itemposts h3, .itempostsint h2 {margin-bottom: 5px!important; padding-bottom: 0px!important;line-height: 0.7em; text-align: center;}
.itemposts h4, .itempostsint h3 {margin-bottom: 0px!important; padding-bottom: 0px!important; margin-top: 0px!important; padding-top: 0px!important;text-align: center;}
    .text-ensenanza2,.text-ensenanza3, #itemprincipal h4, #itemprincipal h3{text-align: center}
    
   #boxdeseaofrendarblock2{padding-top: 0px;}
 #boxdeseasofrendar{ background-position: center right!important;}
    
    .botonevento{padding-top: 15px; padding-bottom: 15px}
.fechaevento{ font-size: 18px; }

    #boxvoluntariado{background-size: cover; background-position: top right;}
    
    
    .botonredondo6{ padding: 10px; text-decoration: none; color: #000; font-family: 'gothambold'; font-size: 1em;}
    
#sidebar .card-img-top {
    width: 100%;
    height: 50vw;
    object-fit: cover;
}
    .card-principal h2 a {font-size:0.8em;}
    .card-principal h3 a {font-size:0.5em;}
  /*  .card-principal .card-img{height: 150px;}*/
    .itempostsint{padding-left: 30px; padding-right: 30px;}
    
    .card-principal p{display: none;}

    #titulo-cat h1, .titulogrande{font-size: 3.1em!important;}
    .card-segundarios h3{margin-top:-10px;}
    
    #titulo-header-page h1{font-size: 3.2em}
    
    .itemnews h3 a{
font-size: 0.8em;
letter-spacing: 0px;
    line-height: 1em;
    }
    
    .botonmas3e{font-size: 1em; }
    
    .botonredondo2-ofrenda{font-size: 1.1em;}
}


/*Estilos del boton de mute off*/

/* Forzar a que el contenedor del video permita overlay */
.video-wrapper {
    position: relative !important;
}

/* Botón centrado como pastilla, sin interferencia de Bootstrap */
#activarSonido {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    z-index: 500 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    color: #fff !important;

    padding: 12px 28px !important;
    border-radius: 40px !important;
    border: none !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    font-size: 1.2em !important;
    font-weight: normal !important;
    white-space: nowrap !important;

    cursor: pointer !important;

    width: auto !important;
    height: auto !important;

    opacity: 1 !important;
    
    backdrop-filter: blur(4px) !important;
    
    max-height: 70px;
  
}

/* Ícono */
#activarSonido .icono-audio,.boton-sonido {
    font-size: 22px !important;
}


/* Cuando el JS lo oculta */
#activarSonido.oculto,
#activarSonido[style*="opacity: 0"] {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .4s ease !important;
}

.video-wrapper {
    position: relative;
}

.video-unmute-btn {
    position: absolute;
    z-index: 20;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 28px;
    background: rgba(0,0,0,0.75);
    border: none;
    color: #fff;
    font-size: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: all .3s ease;
}

.video-unmute-btn i {
    margin-right: 8px;
    font-size: 18px;
}
/* Asegura que nada esté recortando el video */
.video-wrapper,
.video-wrapper * {
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* yt video */

/* Iframe responsive */
/* Forzar que el iframe se adapte al ancho */
p > iframe {
    display: block;
    width: 100% !important;
    height: auto !important;
    border: 0;
    aspect-ratio: 16/9;
    margin: 20px 0;
}


/* Quita cualquier alineación del iframe */
.entry-content p iframe {
    float: none !important;
}


@media screen and (max-width: 400px) {
    .botonmas5 {
    font-size: 0.7em;
    
  }
}


@media screen and (max-width: 820px) {
    #menupeque{margin-left: auto!important; margin-right: auto!important; margin-top: 0!important; margin-bottom: 0!important;}
    #proclamaciondefe{padding: 30px 0px; font-size: 2em; line-height: 1.1em; background-image: none;}
    
    .botonmas5{font-size: 0.7em; color:#FFFFFF!important; text-decoration: none; background-color: #0c72ee; padding: 10px 8px; border-radius: 25px; }
    #textohorariodomingo{padding-top: 10px;}
    #textohorariodomingo h3{font-size: 2em;}
    #textohorariodomingo .p1{font-size: 18px}
    #textohorariodomingo .p2 span{border-top: none;}
    .botonredondo6{ padding: 10px; text-decoration: none; color: #000; font-family: 'gothambold'; font-size: 0.8em;}
    #titulo-interior h1{
  font-size: 2.6em!important;}
    #titulo-interior h2 a{ font-size: 1.2em!important;}
    .card-principal p{font-size: 0.75em;}
    .card-segundarios p{display: none;}
    
   
    
    .card-body h3, .em.pixelbones h3{font-size: 1em;}
    .titulogrande{font-size: 3em}
    
}

#eventos .botonredondo2{font-size: 1.3em!important;}
/* Deshabilitar el tema negro en Samsung */
@media all and (-webkit-min-device-pixel-ratio:0) and (pointer: fine) {
    /* Selector para el modo oscuro del navegador de Samsung */
    @media (forced-colors: active) {
        body {
            color-scheme: light !important;
            background-color: white !important;
        }
    }
}