/* -----  _general.scss     -----*/
p{
	color: #1B1845
}
.btn-cta {
    font-weight: 700;
    border: none;
    background: #C74039 !important;
    padding: 1.20rem 1.5rem;
    border-radius: 0.5rem;
    color: #fff !important;
    font-size: 1.2em;
    transition: all 0.2s ease
}
.btn-cta:hover {
    background: #a9332e !important;
    text-decoration: none
}
@media(min-width: 992px) {
	font-size: 0.95em;
}
.bgBlue{
	background: linear-gradient(135deg, #1D2438 40%, #2C4078 120%)
}
.br{
	border-radius: 2em;
	border-top-left-radius: 0
}
strong{
	font-weight: 600
}
/* -----  _portada.scss     -----*/
.portada {
	padding: 4.5em 0;
    background: linear-gradient(135deg, #fff 30%, #DBEAF2 100%)
}
h2.lema{
	color: #1B1845;
	font-size: 2em;
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.25em;
}
.portada p{
	font-size: 1.3rem;
	color: #1B1845
}
@media(min-width: 768px) {
    h2.lema{
        font-size: 2.2em !important
    }
}
@media(min-width: 992px) {
    h2.lema {
        font-size: 2.8em !important
    }
}
@media(min-width: 1200px) {
    h2.lema{
        font-size: 3.4em !important
    }
}
@media(min-width: 1400px) {
    h2.lema {
        font-size: 3.6em !important
    }
}
/* -----  _whatsapp.scss   -----*/

.fijados .whatsapp {
    position: fixed;
    z-index: 9;
    bottom: 6em;
    right: 1em
}

@media(min-width: 768px) {
    .fijados .whatsapp {
        right:1.5em
    }
}

.fijados .static-wsp {
    display: block;
    line-height: 1;
    padding: 1em;
    background-color: #25D366;
    border-radius: 50%;
    color: #fff;
    animation: wsp 1.5s ease infinite
}

.fijados .static-wsp .icon {
    width: 1.5em;
    height: 1.5em
}

@media(min-width: 992px) {
    .fijados .static-wsp .icon {
        width:2em;
        height: 2em
    }
}

@keyframes wsp {
    0% {
        box-shadow: 0 0 0 0 rgb(37 211 102 / 50%)
    }

    100% {
        box-shadow: 0 0 0 1em rgba(0,0,0,0)
    }
}
/* -----  _servicios.scss     -----*/
h2.titulo{
	background: rgba(255,255,255,0.2);
	text-align: center;
	display: inline-block;
	font-size: 0.9em;
	color: #fff;
	padding: 1em 2em;
	border-radius: 2em
}
p.lema{
	color: #fff;
	font-size: 2em !important;
	letter-spacing: -0.025em;
	line-height: 1.25em;
}
@media(min-width: 768px) {
    p.lema{
        font-size: 2.2em !important
    }
}
@media(min-width: 992px) {
    p.lema {
        font-size: 2.6em !important
    }
}
@media(min-width: 1200px) {
    p.lema {
        font-size: 3em !important
    }
}
@media(min-width: 1400px) {
    p.lema {
        font-size: 3em !important
    }
}
.servicios .service-box {
	background: rgba(255,255,255,0.05);
	border-radius: 20px;
	border-top-left-radius: 0
}
.servicios h3{
	color: #ededed;
	font-size: 1.6em
}
.servicios p{
	color: rgba(255,255,255,0.9);
	font-size: 1.2em;
}
.servicios .fijo {
	margin-top: 0
}
@media(min-width: 992px) {
	.servicios h3{
		font-size: 1.2em
	}
	.servicios p{
		font-size: 1em
	}
	.servicios .fijo {
		margin-top: 60%
	}
}
.service-box .icon {
    width: 4em;
    height: 4em
}
@media(min-width: 992px) {
	.service-box .icon {
	    width: 2.2em;
	    height: 2.2em
	}
}
.fijo {
  position: relative;
  top: 0;
  transition: all 0.3s ease;
}

@media screen and (min-width: 992px) {
  .fijo.sticky {
    position: sticky;
    top: 100px; /* Ajusta según tu header */
  }
}
/* -----  _por-que-elegirnos.scss     -----*/
.por-que-elegirnos{
	background: #EDEDED
}
.por-que-elegirnos p.lema {
	color: #1B1845
}
.por-que-elegirnos h2.titulo{
	background: #fff;
	color: #1B1845
}
.por-que-elegirnos h3{
	color: #C74039;
	font-size: 1.6em
}
.por-que-elegirnos p{
	color: #1E2436;
	font-size: 1.2em;
}
@media(min-width: 992px) {
	.por-que-elegirnos h3{
		font-size: 1.2em
	}
	.por-que-elegirnos p{
		font-size: 1em
	}
}
/* -----  _lema.scss     -----*/
.banner-lema{
	background: url(../images/bkg-lema.webp) no-repeat center center;
	background-size: cover;
	background-attachment:initial;
	padding: 7em 0
}
@media(min-width: 992px) {
	.banner-lema{
		background: url(../images/bkg-lema.webp) no-repeat center center;
		background-size: initial;
		background-attachment:fixed;
		padding: 10em 0
	}
}
/* -----  _quienes-somos.scss     -----*/
.quienes-somos p{
	color: rgba(255,255,255,0.95);
	font-size: 1.2em
}
@media(min-width: 992px) {
	.quienes-somos p{
		font-size: 1em
	}
}

.quienes-somos p.lema{
	font-size: 1.6em !important
}
.quienes-somos .icon{
	width: 4.5em;
    height:4.5em
}
.quienes-somos .valores p{
	font-size: 0.9em
}
@media(min-width: 992px) {
	.quienes-somos .icon{
		width: initial;
	    height: initial
	}
}
/* -----  _contacto.scss     -----*/
.contacto p{
	color: rgba(255,255,255,0.95);
	font-size: 1.2em
}
@media(min-width: 992px) {
	.contacto p{
		font-size: 1em
	}
}
.contacto p.lema{
	font-size: 2.4em !important
}
.contacto p.sublema{
	font-size: 1.4em !important
}
.contacto p.sublema{
	font-size: 1.4em !important
}
.contacto .row{
	border-top: 1px solid rgba(255,255,255,0.6);
	border-bottom: 1px solid rgba(255,255,255,0.6);
	padding-top: 5em;
	padding-bottom: 5em
}
.contacto .mail{
	color: rgba(255,255,255,0.95);
	font-size: 1.4em;
	letter-spacing: 0.1em;
	font-weight: 600;
	border-bottom: 1px dotted #fff;
	text-decoration: none
}
.made-by a{
	color: rgba(255,255,255,0.7);
	font-size: 1.2em;
	padding: 0 1em;
}
.made-by a:hover{
	background: rgba(255,255,255,0.7);
	text-decoration: none;
	color: #26355f
}
@media(min-width: 992px) {
	.contacto .mail{
		font-size: 1.2em
	}
	.made-by a{
		font-size: 0.8em
	}
}