/*COLORES
https://color.adobe.com/es/create/color-wheel/?base=2&rule=Complementary&selected=3&name=Mi%20tema%20de%20Color&mode=rgb&rgbvalues=0.97,0.6311945376929252,0.029060816100553947,1,0.8178271478563317,0.4940649018540977,1,0.7818199894656062,0.3940649018540977,0,0.3254901960784314,0.6980392156862745,0.45852152977343796,0.7110086816208101,1&swatchOrder=0,1,2,3,4
*/
/* @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,500i,600,700&display=swap'); */
*::selection {
    background-color: #FF0090;
    color: #fff;
}
 
*::-moz-selection {
    background-color:#FF0090;
    color: #FFFFFF;
}

::-webkit-input-placeholder { /* Edge */
  color: #07486E;
  font-weight: bold;
}
:-ms-input-placeholder { /* Internet Explorer */
  color: #07486E;
  font-weight: bold;
}
::placeholder {
  color: #07486E;
  font-weight: bold;
}

.pregargaGrafinit{
  position: relative;
  background: #fff;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ocultarbody{
  overflow: hidden;
}

.navbar-brand
{
	background:url("https://grafinit.com.mx/img/menu/grafinitgraduaciones.png") center/cover no-repeat;
	font-size:0;
	width:190px;
	height:30px;
	margin:15px 10px 18px 10px;
	opacity:.6;
}
@media screen and (max-width: 768px){
    .navbar-brand
        {
            width: 190px;
            height:30px;
            margin:10px 5px 10px 0px;
        }
}
    .anillosdegraduacion{
    position: relative;
    top: 0;
    padding: 0 0 1rem 0;
    margin: 0;
    font-size: 1.8rem;
    color: #062B44;
    text-align: center;
  }
  .anillosgraduacion h4{
    color: #BA6604
  }
  .anillosgraduacion h5{
    color: #096E94
  }
  .anillosgraduacion ul{
    color: #FF9000;
  }
  .anillosgraduacion ul li a{
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    color: #063759;
    font-size: 1.1rem;
    font-weight: 400;
  }
  .tituloaleacion, .textoaleacion{
    position: relative;
    padding: 0 1rem 0 1rem;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    font-size: 1.2rem;
    font-weight: 400;
    text-align: justify;
  }
  .tituloaleacion span{
    color: #BA6604;
    font-weight: 600;
  }
  .tituloaleacion img{
    position: relative;
  }
  .textoaleacion span{
    color: #063759;
    font-weight: 600;
  }
  .anillosGradP p{
    width: 100%;
    position: relative;
    padding: 0 1rem 0 2rem;
    font-family: 'Montserrat', sans-serif;
    color: #063759;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: justify;
  }
  .anillosGradP span{
    color: #530F0A;
    font-style: italic;
    font-size: .9rem;
    font-weight: 400;
    text-align: justify;
  }
  .anillosgraduacion .interrogacion{
    color: #2E4053;
    font-weight: 600;
  }
  .anillosgraduacion .respuesta{
    color: #096E94;
    font-weight: 600;
  }
  .anillosGradP .fuentes{
    text-decoration: none;
    font-weight: 500;
    font-size: .9;
    font-style: italic;
    color: #07427F;
  }
/*# sourceMappingURL=examples.min.css.map */

.whatsapp {
  z-index: 999;
}

.whatsapp img {	
  position: relative;
  display: none;
  width: 70px;
  height: 70px; /* 🔥 importante */
  object-fit: contain; /* 🔥 clave */
  text-align: center;
  transition: all .3s;
  right: 2rem;
}

@media screen and (max-width: 800px){
  .whatsapp img {
    display: inline-block;
    width: 45px;
    height: 45px; /* 🔥 importante */
  }
}
.espacioNegro{
  background: #062B44;
}
.espacioNegroPd{
  padding: 1.2rem 0;
}
 .tx-centrar{
  text-align: center;
 }
 .textoNegro h1, .textoNegro h2,.textoNegro  h3,.textoNegro  h4{
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 2rem;
  font-weight: 200;
 }
 .espacio20{
  position: relative;
  height: 2rem;
 }
 .espacio10{
  position: relative;
  height: 1rem;
 }
/* Inicia Pagina CONTACTO http://localhost/a-grafinit-com/img/menu/brands.png*/

/* ===== HERO GRAFINIT (AISLADO) ===== */

/* ===== HERO GRAFINIT ESTILO JUMBOTRON ===== */

.grafinit-h-wrapper {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

/* Imagen tipo background */
.grafinit-h-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* igual que tu jumbotron */
  display: block;
}

/* Overlay centrado verticalmente */
.grafinit-h-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%); /* centra como flex */
}

/* Franja naranja */
/* Overlay centrado vertical */
.grafinit-h-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}

/* Franja naranja */
.grafinit-h-title {
  margin: 0;

  width: 70%;              /* ancho del 70% */
  margin-left: auto;       /* centra horizontal */
  margin-right: auto;      /* centra horizontal */

  padding: 10px 0;

  background: rgba(247,161,7,.9);
  color: #fff;
  text-align: center;

  font-size: 45px;
  line-height: 1.2;
  font-weight: 600;
}

/* Móvil */
@media (max-width: 768px) {
  .grafinit-h-wrapper {
    height: 120px;
  }

  .grafinit-h-title {
    font-size: 22px;
  }
}

.jumbotron{
        background: url('../img/fondo-paginas.webp') no-repeat center top / cover;
        color: #fff;
        height: 180px;
        display: flex;
        align-items: center;
        margin:0;
        padding: 0;
      }
.jumbotron .container > h3
{
  padding: 8px 0;
  position: relative;
  left: 0;
  width: 100%;
  background: rgba(247,161,7,.9);
  text-align: center;
  color: #fff;
  font-size: clamp(24px, 4vw, 48px);
}

@media screen and (max-width: 750px){
  .jumbotron {
    height: 120px;
  }
}

.gracias-mobil
{
  padding: .5rem 1.5rem;
  position: relative;
  left: 0;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  background: rgb(247,161,7) !important;
  text-align: center;
  color: #fff;
  font-size: 7vw;
}


.noBullet
{
	list-style-type: none;
}
.contactanos{
  position: relative;
  display: flex;
  padding: 0;
  background-image: url("../img/contacto/banner3.jpg");
  flex-wrap: wrap;
}
.contacto-texto{
  position: relative;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 40%;
  height: auto;
  background: linear-gradient(-45deg, #062c56, #195598, #062c56);
  color: #FFFFFF;
}
.contacto-head, .contacto-head2{
  position: relative;
  padding: 0;
  margin-top: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 1.3px;
}
.contacto-head2{
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 2.3rem;
  line-height: 2rem;
}
.contacto-texto .linea{
  position: relative;
  height: .1rem;
  width: 50%;
  padding: 0;
  margin: 0 0 1rem 0;
  background: #FF9C00;
}
.texto-con-logos{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0rem;
}
.texto-con-logos .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 15%;
}
.texto-con-logos .logo i{
    color: #FFA800;
    font-size: 1.5rem;
}
.texto-con-logos .texto-texto{
  position: relative;
  width: 85%;
  margin: 0;
  padding-bottom: .5rem;
  font-family: 'Montserrat', cursive;
  font-size: 1.2rem;
  letter-spacing: 1.1px;
}
.contactanos-form{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(6,44,86,.7);
  width: 60%;
  margin: 0;
  padding: 0;
}
.contactanos-form form{
  width: 100%;
}
.alcien{
  position: relative;
  left: 0;
  margin: 0 0 1rem 0;
  padding: 0;
  background: #062c56;
  width: 100%;
  text-align: center;
}
.alcien h2{
  letter-spacing: .2rem;
  margin: 0;
  padding: .5rem 0;
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 2rem;
  font-weight: 200;
}
@media screen and (max-width: 850px){
  .contactanos{
    flex-direction: column-reverse;
  }
  .contacto-texto, .contactanos-form{
    width: 100%;
  }
}
.contactanos-form form{
  position: relative;
  width: 100%;
  }
.contactanos-form form ul{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.contactanos-form form ul li{
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
  .datos-form, .datos-form-desc {
  margin: .5rem 0;
  font-size: 1.1rem;
  font-weight: bold;
  padding: .50rem;
  width: 90%;
  border: 3px solid #FFA200;
  border-top: none;
  border-left: none;
  border-right: none;
  background: rgba(250, 250, 250, .8);
  color: #0B3E39;
  outline: none;
}
 .datos-form-desc {
  height: 100px;
  resize: none;
}
.btn-enviar {
  border-radius: 25px;
  border: 3px solid #0E7A91;
  background: #FFFFFF;
  font-size: 18px;
  color: #000000;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px 50px;
  cursor: pointer;
  transition: .4s;
  box-shadow: 0 9px 18px rgba(0,0,0,0.2);
}
.btn-enviar:hover {
  color: #FFFFFF;
  background: linear-gradient(-45deg, #062c56, #195598, #062c56);
  /*background: rgba(20, 20, 20, .8);*/
  padding: 10px 80px;
}
.mapa-ubicacion{
  position: relative;
}
.mapa-ubicacion .img-ubicaion{
  width: 100%;
}
/* .mapa-ubicacion{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  background: linear-gradient(-45deg, #062c56, #195598, #062c56);
  min-width: 90%;
  height: 400px;
  background-image: url("http://grafinit.com/images/stories/mapa_grafinit.jpg");
}
@media screen and (max-width: 650px){
  .mapa-ubicacion {

    height: 700px;
    overflow: hidden;
    background-image: url("http://localhost/a-grafinit-com/img/contacto/mapa-grafinit-mobil.jpg");

  }
}
*/

/* #0f5a9f #043e74 */
/* Finaliza Pagina CONTACTO */

/* Inicia Primer menu Pagina de Inicio / Index */
#t-cards {
    padding: 2.5rem;
    background-color: #E7D6B5;    
}

/********************************/
/*          Panel trajetas      */
/********************************/

.intro-anillos {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #333;
    text-align: left;
}

@media (min-width: 768px) {
    .intro-anillos {
        text-align: justify;
        text-justify: inter-word;
    }
}

.panel.panel-card {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    height: 100%;
}

/* separación */
.separar {
    margin-bottom: 20px;
}

/* link completo */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* imagen */
.panel-heading {
    position: relative;
    overflow: hidden;
}

.panel-heading img {
    width: 100%;
    height: auto;
    display: block;
}

/* botón */
.panel-heading .btn {
    position: absolute;
    bottom: 10px;
    left: 10%;
    width: 80%;
    text-align: center;
}

/* contenido */
.panel-body {
    padding: 15px;
}

.panel-header {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 10px;
}

.letter-gal {
    font-size: 1em;
    color: #551B1B;
    font-weight: 600;
}

/* botón estilo */

.btn-grafazul {
    background: #062B44;
    color: #fff !important;
}

.panel-heading .btn-grafazul {
    font-size: 1.5em;      /* texto más grande */
    padding: 0.8em 1em;    /* tamaño del botón */
    width: 85%;            /* más ancho */
    left: 7.5%;            /* centrado */
    font-weight: 700;      /* más fuerte */
    letter-spacing: 0.03em;
}

/* pequeño efecto (opcional pero mobile-friendly) */
.card-link:hover {
    transform: translateY(-3px);
    transition: 0.2s ease;
}
/* Fin Primer menu Pagina de Inicio / Index */


/* Inicia SubMenu de cuadros-de-graduacion.html */
.submenus{
  position: relative;
  margin: 0;
  width: 100%;
  left: 0;
  padding: 0 0 1rem 0;
}
.sub-anillos{
  box-sizing: border-box;
  position: relative;
  width: 95%;
  left: 2.5%;
  line-height: 2.3rem;
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.sub-anillos .subanillos, .subactive{
  text-align: center;
  flex: 1;
}

.sub-anillos .subanillos > a{
  display: block;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #0E2F44;
  font-size: 1.2rem;
  border-bottom: 2px solid #D2D2D2;
  transition: all 1s;
}
.sub-anillos .subanillos > a:hover{
  box-sizing: border-box;
  font-weight: 600;
  border-bottom: 2px solid #043e74;
  color: #043e74;
}
.subactive > a{
  display: block;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #790E7B;
  font-size: 1.2rem;
  border-bottom: 2px solid #043e74;
  border-width: 100%;
  cursor: auto;
}
@media screen and (max-width: 800px){
	.sub-anillos .subanillos > a{	  
	  font-size: .9rem;
	}
}

/* Finaliza SubMenu de cuadros-de-graduacion.html */


/* Inicia Galeria de Imagenes */ 
/* ===== GALERÍA ===== */

.blog-area {
  background-color: #fff;
}

/* CONTENEDOR DE CADA ITEM */
.single-blog .thumb {
  position: relative; /* 🔥 clave para evitar CLS */
  overflow: hidden;
  margin-bottom: 2rem;
  border-radius: 2%;
  background-color: rgba(14,70,125, 0.8);
}

/* VARIANTE DE COLOR */
.single-blog .thumb.alt {
  background-color: rgba(247,161,7, 0.8);
}

/* IMAGEN */
.single-blog img {
  width: 100%;
  height: auto;
  border-radius: 2%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  
  /* 🔥 estabilidad visual */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* EFECTO HOVER (optimizado) */
.single-blog:hover img {
  transform: scale(1.1); /* antes 1.5 ❌ */
  opacity: 0.3;
}

/* TEXTO ENCIMA DE LA IMAGEN */
.blog-area .description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 🔥 centrado perfecto */
  width: 100%;
  padding: 0 1rem;
  text-align: center;
  color: #fff;
  
  opacity: 0;
  transition: opacity 0.3s ease;
  
  text-shadow: 1px 1px 1px rgba(25, 20, 20, 0.8);
}

/* TEXTO VISIBLE EN HOVER */
.single-blog:hover .description {
  opacity: 1;
}

/* TITULO */

.description-heading,
.description-body {
  display: block;
}
.blog-area .description-heading {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2pt;
}



/* SUBTEXTO */
.blog-area .description-body {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2pt;
  margin-top: 10px;
  font-weight: 300;
}

/* ===== OPCIONAL: MEJORA UX MÓVIL ===== */

@media (max-width: 768px) {
  .blog-area .description {
    opacity: 1; /* visible siempre en móvil */
  }

  .single-blog:hover img {
    transform: scale(1.05);
    opacity: 0.4;
  }
}

/* 🔥 FIX PRINCIPAL CLS GALERÍA */
.single-blog {
  aspect-ratio: 1 / 1;
}

/* refuerzo */
.single-blog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* NAVBAR estable */
.navbar {
  min-height: 80px;
}

/* Finaliza Galeria de Imagenes */ 

/* Textos debajo de las paginas INICIA */
.bd-callout
{
	padding:1.25rem;
	margin-top:.25rem;
	margin-bottom:1.25rem;
	border-left: 4px solid #eee;
  border-right: 4px solid #eee;
	border-left-width:.25rem;
	border-radius:.5rem;
  text-align: justify;
}

.bd-callout p:last-child
{
	margin-bottom:0
}
.bd-callout code
{
	border-radius:.25rem
}
.bd-callout+.bd-callout
{
	margin-top:-.25rem
}
.bd-callout-info
{
	border-left-color:#F7A107;
}
.bd-callout-info h4
{
	color:#5bc0de
}
.bd-callout-warning
{
	border-left-color:#23516F;
  border-right-color:#23516F;
}
.bd-callout-warning h4
{
	color:#23516F;
}
.bd-callout-danger
{
	border-left-color:#d9534f
}
.bd-callout-danger h4
{
	color:#d9534f
}
/* Textos debajo de las paginas FIN */

/* Pagina Garantia INICIO */
	
.garantias
{
	font-size: 1.2rem; 
}
.garantiaa, .nom-graf
{
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

}
.garantia-img, .nom-img
{	
	flex: 2;
}
.garantia-text, .nom-text
{	
	position: relative;
	flex: 4;
	font-size: 1.2rem;
  text-align: justify;
}


.nom-graf-img{
	flex: 2;
	border-right: solid 2px rgba(0,0,0,.2);
}
@media screen and (max-width: 768px){
  	.garantia-img
	{	
		flex: 100%;
		border-right: solid 1px transparent;
	}
	.garantia-text, .nom-text
	{
		flex: 100%;
		font-size: 1rem;
	}
	.nom-graf
	{
		flex-direction: column-reverse;
	}
}


/* Pagina Garantia FIN*/

/* Footer INICIO */
.footers
{	
	position: relative;
	box-sizing: border-box;
	padding: 1rem 0;
	background: #fff;
	border-top: solid 1px rgba(1,1,1,.2);
	border-bottom: solid 3px rgba(247,161,7,.8);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	color: white;
  transition: all 1s;
}
.footers:hover{
  background: #D9E5EC;
}
.footers a
{	
	position: relative;
	box-sizing: border-box;
	padding: 50px 10px;
	color: white;
	background: rgba(0,83,168,1);
	padding: 5px;
	text-decoration: none;
	width: 160px;
	transition: all .4s;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.footers a:after
{
	content: "";
	position: absolute;
	bottom: 0;
	width: 0px;
	background: #F7A107;
	height: 2px;
	transition: all .4s;
}
.footers a:before
{
	content: "";
	position: absolute;
	top: 0;
	width: 0px;
	background: #F7A107;
	height: 2px;
	transition: all .4s;
}
.footers a:hover:after, .footers a:hover:before
{
	width: 100%;
}
.footers a:hover
{
	background: rgba(0,46,99,.8);
	letter-spacing: 2px;
}
.footers i{
  padding:0 .5rem;
  font-size: 1.2rem;
}

.footers svg {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  flex-shrink: 0;
}

.footers a span {
  display: flex;
  align-items: center;
  gap: 6px;
}


@media screen and (max-width: 650px){
  .footers {
    -webkit-flex-direction: column;
    flex-direction: column-reverse;
  }
  .footers a
  {
  	width: 90%;
  	margin-bottom: 10px;
  	padding: 7px 0 7px 0;
  }
  .footers a:hover
{
	width: 100%;
}
}
/* Footer FIN */

/* Acordeones Acordeon INICIO*/
/* Menu Footer para Moviles Inicio */
.sin-padding {
	padding:0 0 .5rem 0;
}

.container .accordion .card{
	background-color: transparent;
	border:0;
}

.card-title{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.1rem;
	color: #0E2F44 ;
}
.card-header:hover{
	cursor: pointer;
}
.card-body{
	color: #0E2F44 ;
	font-family: 'Roboto Condensed', sans-serif;
}

.card-header{
	background-color: transparent;
	border:0;
	border-bottom: .1rem solid #F7A107;
}

.accordion img{
	padding: 0;
	margin: 0;
	border: 0;
}


.accordion .card-header:after {
    font-family: 'FontAwesome';  
    content: "\f068";
    float: right;
    color: #0053B2;
}
.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067"; 
    color: #0053B2;
}
/* Menu Footer para Moviles FIN */
/* Acordeones Acordeon FIN */

/* Paquetes de Graduaci贸n INICIO */
.tarjetas-paquetes{
  position: relative;
  width: 95%;
  left: 2.5%;
}
.tarjetas-paquetes .card
{
	margin-bottom: 25px;
}
.tarjetas-paquetes .card a
{
	position: relative;
}
.tarjetas-paquetes .card .card-body{
  margin: 0;
  padding: 0;
}
.tarjetas-paquetes .card .btn-info{
  background: #0D3156;
}
.tarjetas-paquetes .card .card-body .card-title{
    padding: .5rem 0 .5rem .5rem;
  }
.tarjetas-paquetes .card .card-text{
  padding: 0;
  margin: 0;
  background: #1E4751;
  }

@media (max-width: 768px) {
  .tarjetas-paquetes{
  width: 80%;
  left: 10%;
}
}
/* Paquetes de Graduaci贸n FIN */

/* Textos de Agradecimiento INICIO */
.centrar-enviado{
    display: flex;
	justify-content: center;
	align-items: center;
}
/* Boton de descarga de textos de Agradecimiento INICIO */
.centrar
{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px;
}
.botondescargartextos {
	display: inline-block;
	position: relative;
	padding: 10px 25px;
  
	background-color: #0053B2;
	color: white;
  
	font-family: sans-serif;
	text-decoration: none;
	font-size: 0.9em;
	text-align: center;
	text-indent: 15px;
}

.botondescargartextos:hover {
	background-color: #F7A107;
	color: black;
		text-decoration: none;
}

.botondescargartextos:before, .botondescargartextos:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
}

/* Download box shape  */
.botondescargartextos:before {
	width: 10px;
	height: 2px;
	border-style: solid;
	border-width: 0 2px 2px;
}

/* Flecha de descarga */
.botondescargartextos:after {
	width: 0;
	height: 0;
	margin-left: 1px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 1s linear infinite;
	animation-play-state: paused;
}

.botondescargartextos:hover:before {
	border-color: #0053B2;
}

.botondescargartextos:hover:after {
	border-top-color: #0053B2;
	animation-play-state: running;
}

/* Animacion de descarga */
@keyframes downloadArrow {
	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
	0% {
		margin-top: -7px;
		opacity: 1;
	}
	
	0.001% {
		margin-top: -15px;
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		margin-top: 0;
		opacity: 0;
	}
}
/* Boton de descarga de textos de Agradecimiento FIN */

.mb-60 {
    margin-bottom: 40px;
}
.services-inner {
	background: #fff none repeat scroll 0 0;
    border: 1px solid transparent;
    margin: 1px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.our-services-text {
    padding-right: 10px;
}
.our-services-text {
    overflow: hidden;
    padding: 28px 0 25px;
}
.our-services-text h4 {
    color: #0D3F78;
    font-size: 18px;
    left: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    position: relative;
    text-transform: uppercase;
}
.our-services-text h4::before {
    background: #F7A107 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    position: absolute;
    width: 90%;
}
.our-services-wrapper:hover .services-inner {
    border: 1px solid #FFD17E;
    margin: 1px;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.4);
    transition: .3s;
}
.our-services-text p {
    margin-bottom: 0;
}
.our-services-wrapper p {
	position: relative;
	margin: 5px 15px 0 15px;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #666;
    margin-bottom: 15px;
}

/* Textos de Agradecimiento FIN */

/* Detalles Anillos de Graduaci贸n INICIO */

.imagen-detalles-izq, .imagen-detalles-der {
  display: flex;
  margin: 1.5rem 0;
  position: relative;
}
.imagen-detalles-izq .img-det-izq,
.imagen-detalles-der .img-det-der {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex: 1;
}
.imagen-detalles-izq .img-det-izq{
  border-radius: 10px 0 0 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.imagen-detalles-der .img-det-der{
  border-radius: 0 10px 10px 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.detalles-texto-derecha{
  width: 100%;
  flex: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 0 10px 10px 0;
}
.detalles-texto-izquierda{
  position: relative;
  flex: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px 0 0 10px;
}
.detalles-texto-izquierda:after,
.detalles-texto-derecha:after{
  content: "";
  position: absolute;
  width: 0%;
  height: .2rem;
  top: 0;
  left: 0;
  background: #233F61;
  border-radius: 10px 0 0 0;
  transition: all 0.2s;
  z-index: -1;
}
.detalles-texto-izquierda:hover:after,
.detalles-texto-derecha:hover:after{
  width: 100%;
  border-radius: 10px 0 0 0;
}
.detalles-texto-izquierda:before,
.detalles-texto-derecha:before{
  content: "";
  position: absolute;
  width: 0%;
  height: .3rem;
  bottom: 0;
  right: 0;
  background: #233F61;
  transition: all 0.2s;
  z-index: -1;
}
.detalles-texto-izquierda:hover:before,
.detalles-texto-derecha:hover:before{
  width: 100%;
  border-radius: 0 0 0 10px;
}
.imagen-detalles-izq .img-det-izq img,
.imagen-detalles-der .img-det-der img{
  width: 100%;
}
.detalles-titulo{
  position: relative;
  padding-top: .2rem;
  text-align: center;
  color: #444343;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: .3rem;
}

.detalles-subtitulo{
  position: relative;
  text-align: center;
  color: #47607E;
  text-transform: uppercase;
  font-size: 1rem;
}
.detalles-titulo:after
{
  content: "";
  position: absolute;
  width: 50%;
  text-align: center;
  height: .1rem;
  bottom: 0;
  left: 25%;
  background: #233F61;
  transition: all 0.2s;
}
.detalles-parrafo{
  padding: 1.5rem 0 1.1rem 0;
}
@media screen and (max-width: 992px) {
  .imagen-detalles-izq {
  flex-direction: column;
  }
  .imagen-detalles-der {
  position: relative;
  flex-direction: column-reverse;
  }
  .imagen-detalles-izq .img-det-izq{
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.19), 0 0px 0px rgba(0, 0, 0, 0.23);
  }
  .imagen-detalles-der .img-det-der{
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.19), 0 0px 0px rgba(0, 0, 0, 0.23);
  }
  .detalles-texto-derecha{
  flex: 1;
  box-shadow: 0;
  border-radius: 0 0 10px 10px;
  }
  .detalles-texto-izquierda{
  flex: 1;
  box-shadow: 0;
  border-radius: 0 0 10px 10px;
  position: relative;
  }
  .detalles-texto-izquierda:after,
  .detalles-texto-derecha:after{
    border-radius: 0;
  }
  .detalles-texto-izquierda:before,
  .detalles-texto-derecha:before{
    border-radius: 0;
  }
  .imagen-detalles-izq .img-det-izq img,
  .imagen-detalles-der .img-det-der img{
  /* height: 320px;*/
  width: 100%;
  }
}
/* Detalles Anillos de Graduaci贸n FIN */




/* Fabricación de anillos de graduación INICIO */

/* CONTENEDOR GENERAL */

.anillo-grid{
    max-width:1100px;
    margin:60px auto;
    padding:0 20px;

    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;

    /* CAMBIO IMPORTANTE */
    grid-auto-rows:auto;

    gap:40px;

    align-items:stretch;
}

.anillo-col-izq{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.anillo-col-izq .anillo-img{
    flex:1;
}

/* POSICIÓN DE ELEMENTOS (ESCRITORIO) */

.terminado{
    grid-column:1;
    grid-row:1;
}

.render{
    grid-column:1;
    grid-row:2;
}

.anillo-video{
    grid-column:2;
    grid-row:1 / span 2;
    display:flex;
    align-items:center;
}


/* TARJETAS */

.anillo-img,
.anillo-video{
    background:white;
    border-radius:12px;
    padding:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    text-align:center;

    display:flex;
    flex-direction:column;
}

.anillo-img{
    height:100%;
     min-height:200px;
}

/* CONTENEDOR INTERNO DE IMAGEN */

.anillo-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:8px;
    flex-grow:1;
}


/* TEXTO */

.anillo-grid p{
    font-size:14px;
    color:#555;
    margin-top:12px;
    line-height:1.4;
}


/* VIDEO RESPONSIVE */

/* EFECTO HOVER */

.anillo-img:hover,
.anillo-video:hover{
    transform:translateY(-3px);
    transition:0.25s;
    box-shadow:0 14px 35px rgba(0,0,0,0.12);
}


/* VIDEO LITE */

.video-lite{
    width:100%;
}

.youtube-lite{
    position:relative;
    width:100%;
    aspect-ratio:9/16;
    overflow:hidden;
    border-radius:8px;
    cursor:pointer;
}

.youtube-lite img{
    width:100%;
    object-fit:cover;
    display:block;
}

.youtube-lite iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}

.video-lite img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

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


/* BOTÓN PLAY */

.play-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80px;
    height:80px;
    background:rgba(0,0,0,0.65);
    border-radius:50%;
}

.play-btn::after{
    content:"";
    position:absolute;
    left:32px;
    top:24px;
    border-left:26px solid white;
    border-top:16px solid transparent;
    border-bottom:16px solid transparent;
}


/* RESPONSIVE TABLET Y MÓVIL */

@media (max-width:1000px){

.anillo-grid{
    grid-template-columns:1fr;
    gap:35px;
}

.terminado{
    grid-column:auto;
    grid-row:auto;
}

.render{
    grid-column:auto;
    grid-row:auto;
}

.anillo-video{
    grid-column:auto;
    grid-row:auto;

    display:flex;
    flex-direction:column;

    height:auto;
}

.anillo-img img{
    height:auto;
}

}


/* RESPONSIVE MÓVIL */

@media (max-width:600px){

.anillo-grid{
    margin:40px auto;
}

.anillo-grid p{
    font-size:13px;
}

}

@media (min-width:1001px){

.youtube-lite{
    height:100%;
    aspect-ratio:auto;
}

}

/* Fabricación de anillos de graduación FIN */



/* Alianzas triples INICIO */
.anillosparamujer
{
  width: 100;
  height: auto;
}
.anillos-dobles{
  background: #23516F;
  text-align: justify;
}
.anillosparamujer p
{
  margin: 1rem 2rem;
  padding: 1rem 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: #FFFFFF; 
}
.anillosparamujer p span
{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
/* Alianzas Triples FIN */

/*  INDICE Inicio */
.indice-varios{
  margin: 0;
  padding: 2rem 0 1rem 0;
  background: #ECE4E3;
}
.container .posteo-indice .destacado {
  width: 100% !important;
  height: 250px !important;
  margin: 0em 0 1.5em 0 !important;
}
.container .posteo-indice .destacado .indice-img {
    background-color: #ddd;
  height: 250px !important;
  
}
.container .posteo-indice .destacado .conteo-texto {
  height: 250px !important;
}
.container .posteo-indice .fila-indice {
  display: flex;
}
.container .posteo-indice .fila-indice .posteo:last-child {
  margin-right: 0 !important;
}
.container .posteo-indice .posteo {
  flex: 1;
  overflow: hidden;
  background: white;
  height: 200px;
  -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  margin-right: 1em;
  margin-bottom: 1em;
}
.container .posteo-indice .posteo:hover {
  -moz-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.container .posteo-indice .posteo:hover .indice-img {
  opacity: 0.5;
}
.container .posteo-indice .posteo .indice-img, .container .posteo-indice .posteo .conteo-texto {
  display: inline-block;
  position: relative;
  -moz-transition: opacity 0.3s ease, transform 0.3s ease;
  -o-transition: opacity 0.3s ease, transform 0.3s ease;
  -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.container .posteo-indice .posteo .indice-img {
  float: left;
  width: 50%;
  height: 200px;
  background-size: cover;
  background-position: center center;
}
.container .posteo-indice .posteo .indice-img .tiempo-indice {
  width: 50%; 
  text-align: center;
  padding: 0.2em 0;
  color: #FFFFFF;
  -moz-transition: opacity 0.3s ease, transform 0.3s ease;
  -o-transition: opacity 0.3s ease, transform 0.3s ease;
  -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.azulForm{
  color: #E7F5F8;
}
.indice-azul{
    background: #113B5C;
}
.indice-naranja{
    background: #093F02;
}
.indice-morado{
    background: #41115C;
}
.indice-rosas{
    background: #B40532;
}
.container .posteo-indice .posteo .indice-img .tiempo-indice .dia-indice {
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 300;
}

.container .posteo-indice .posteo .indice-img .tiempo-indice .mes-indice {
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 200;
}
.container .posteo-indice .posteo .conteo-texto {
  padding: 0.5em 1em;
  width: 50%;
  -moz-box-shadow: -2px 0 16px -1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: -2px 0 16px -1px rgba(0, 0, 0, 0.1);
  box-shadow: -2px 0 16px -1px rgba(0, 0, 0, 0.1);
  height: 200px;
}
.container .posteo-indice .posteo .conteo-texto:before {
  content: '';
  position: absolute;
  background: #FFFFFF;
  width: 10px;
  height: 10px;
  top: 50%;
  left: -5px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-box-shadow: -1px 0 16px -1px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: -1px 0 16px -1px rgba(0, 0, 0, 0.7);
  box-shadow: -1px 0 16px -1px rgba(0, 0, 0, 0.7);
}
.container .posteo-indice .posteo .conteo-texto h4 {
  font-weight: 600;
  color: #626262;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container .posteo-indice .posteo .conteo-texto p {
  font-weight: 300;
  color: #412121;
  font-size: 0.9rem;
  margin-bottom: 0.5em;
  font-family: 'Merriweather', sans-serif;
}
.container .posteo-indice .posteo .conteo-texto .mitin .comentario-fin {
  font-size: 0.7em;
  margin-top: auto;
}
.comentario-fin{
  color: #576366;
}


@media screen and (max-width: 840px) {
  .fila-indice {
    display: block !important;
  }
  .fila-indice .posteo {
    width: 100%;
    margin: 0;
  }
}
@media screen and (max-width: 600px) {
  .conteo-texto {
    width: 70% !important;
  }

  .indice-img {
      background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
      background-color: #ddd;
    width: 30% !important;
  }

  .container .posteo-indice .posteo .conteo-texto h4 {

    font-size: 1.2rem;
    text-overflow: inherit;
    white-space: normal;
  }
  .container .posteo-indice .posteo .indice-img .tiempo-indice {
  width: 100%; 
  }
}
/* clearfix */
.claro-indice:before,
.claro-indice:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.claro-indice:after {
  clear: both;
}
/* INDICE fin */
.derechos {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: .3rem 0;
  background: #062B44;
  color: #FFFFFF;
  font-size: 0.9rem;
  text-align: center;
}

/* Aviso de privacidad */
.aviso p{
  text-align: justify;
  transition: all .3s;
}
.aviso p:hover{
  background: #FEEEB7;
}
.aviso p:hover b{
  background: #F5C286;
}
/* Aviso de privacidad*/
.error01{
  position: relative;
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.error01 span{
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  color: #454444;
  padding: 1rem 2rem;
  font-size: 2rem;
  font-weight: 300;
}
.error01 img{
  padding: 1.2rem;
}
.error01 button{
  margin: 0 0 1rem 0;
}
@media screen and (max-width: 600px) {
    .error01 span{
        font-size:1.2rem;
    }
}
/* Anillos de Promoción INICIO */
  .promotext{
    border-left: 3px solid #07486E;
  }
  .promotext p{
    font-family: 'Alata', sans-serif;
    font-size: 1rem;
    color: #515151;

  }
  .promocion h4{
    font-family: 'Alata', sans-serif;
    font-size: 1.2rem;
    color: #07486E;
    line-height: 35%;
  }
  .promocion h4 span{
    font-size: 0.8rem;
    line-height: .7rem;
  }
  @media screen and (max-width: 600px) {
    .promocion h4{
        line-height: 100%;
    }
}
/* Anillos de Promoción FIN */

/* Anillos de Promoción INICIO */
  .promotext{
    border-left: 3px solid #07486E;
  }
  .promotext p{
    font-family: 'Alata', sans-serif;
    font-size: 1rem;
    color: #515151;

  }
  .promocion h4{
    font-family: 'Alata', sans-serif;
    font-size: 1.2rem;
    color: #07486E;
    line-height: 35%;
  }
  .promocion h4 span{
    font-size: 0.8rem;
    line-height: .7rem;
  }
  @media screen and (max-width: 600px) {
    .promocion h4{
        line-height: 100%;
    }
}
/* Anillos de Promoción FIN */

@font-face {
  font-family: 'FontAwesome';
  font-display: swap;
}

code.highlighter-rouge {
  color: #0b3d91;
  background-color: #f4f8fb;
  padding: 2px 5px;
  border-radius: 4px;
}