@font-face {
    font-family: "Bower-Bold";
    src: url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.eot");
    src: url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.svg#Bower-Bold")format("svg");
}

body{
    background-image: url(../img/foto-fondo-min.jpg);
}
body#home .hub-cards{
    background-color: #fff;
}
    
.interior-blog h4 {
    font-family: Bower-Bold;
    height: auto !important;
    font-size: 36px;
}
.interior-blog .blog-photo {
     margin-left: 0 !important;
}
.blog-photo {
    margin-left: -15px;
}
img.logo-top {
    height: 50px;
    width: auto;
    margin: 0;
    display: block;
}
.slider-title1 {
    font-size: 60px;
    font-weight: 900;
    line-height: 66px;
    color: #fff;
}
.slider-title3 {
    font-size: 25px;
    line-height: 30px;
    color: #000;
}
.destacado h4 {
    font-size: 45px;
    height: auto !important;
}
.cremas, 
.producto-destacado {
    text-align: center;
}
.col-lg-12.col-md-12.blog-caja {
    padding: 0 30px;
}
.destacado .col-8 {
    padding: 0;
}
.cremas h3,
.producto-destacado h3 {
    margin-top: 20px;
    font-size: 35px;
}

.cremas p,
.producto-destacado p {
    text-transform: uppercase;
    font-weight: 800;
    position: relative;
    right: 0;
    left: 0;
}
.blog-info {
    padding: 0 25px 25px;
    height: 100%;
    position: relative;
}
.cremas h2, .producto-destacado h2, .bruma-prod h2 {
    font-size: 24px;
    margin: 20px auto 0px;
}

.producto-destacado a.button-one.font-16px {
	margin-top: 20px;
}

.banner-3 .banner-brief {
    position: absolute;
    right: 20%;
    left: 20%;
    top: 43%;
}

.banner-3 .banner-title {
    font-size: 30px;
    font-weight: 900;
    line-height: 40px;
    color: #fff;
}
.cremas img,
.producto-destacado img {
    width: 100%;
}
p.price-antes {
    margin-top: 20px;
    text-decoration: line-through;
    font-size: 18px;
    font-weight: 100;
}
p.price-ahora {
    font-size: 28px;
    color: #c8a165;
    font-weight: 400 !important;
}
.button-one {
    background: #c8a165 none repeat scroll 0 0;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    padding: 0 15px;
    position: relative;
    color: #fff;
}
.button-one::before {
    background: #efefef none repeat scroll 0 0;
    bottom: 0;
    color: #000;
    content: attr(data-text);
    left: -100%;
    position: absolute;
    text-align: center;
    width: 100%;
    visibility: hidden;
    z-index: 11;
}
.button-one::after {
    border: 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.banner-corte01 img {
    width: 100%;
}
.section-title h2 {
    color: #444;
    font-size: 30px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 25px;
    padding-bottom: 22px;
}
.section-title .title-border::before {
    background: #c8a165 none repeat scroll 0 0;
    margin: 0 auto;
    right: 0;
}
.llamado-corte {
    background-image: url(../img/banner-corte01.jpg);
    background-size: cover;
    text-align: center;
    color: #fff !important;
    padding: 100px 0;
    margin: 80px 0 30px;
}
.llamado-corte h1 {
    font-size: 200px;
    font-family: "Zen Loop", cursive;
    color: #fff;
    font-weight: 100 !important;
}

.llamado-corte p {
    font-size: 36px;
    margin-top: -30px;
}

.llamado-corte a {
    margin-top: 20px;
    display: inline-table;
    background-color: #fff;
    padding: 10px 40px;
}
.discount-2 .discount-product {
    background: #fff none repeat scroll 0 0;
    padding: 20px;
    position: inherit;
}
.discount-info h1 {
    font-size: 45px;
    font-weight: 900;
    line-height: 55px;
    margin-bottom: 15px;
}
.bruma-facial {
    background-image: url("../img/back-bruma.jpg");
    background-size: cover;
    margin: 50px 0;
}

.bruma-prod {
    background-color: #fff;
    padding: 30px;
}
.blog-area h4 {
    height: 70px;
}

img.corazon {
    height: 15px;
}
footer {
    margin-top: 0px;
}
.footer-2 {
    background: #eee none repeat scroll 0 0;
    padding-top: 60px;
}
.mini-cart img {
    height: 20px;
    margin: 0 10px;
}

.mini-cart ul {
    margin: 30px 0;
}
img.wapp {
    position: fixed;
    bottom: 20px;
    right: 10px;
    height: 70px;
    z-index: 999999;
}
a#scrollUp {
    display: none !important;
}
.menu-principal {
    background: transparent none repeat scroll 0 0;
    color: #666;
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 45px;
    padding: 0 0 0 40px;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
}

.menu-principal ul li {
    display: inline;
    margin: 0 20px;
}

.menu-principal ul {
    text-align: center;
    padding: 20px 0;
    position: relative;
    margin: 0 auto;
    display: block;
}
#packs-home {
    background: rgba(214, 234, 230, .5);
}
.single-product .price-ahora {
    margin-bottom: 20px;
}

.cart-plus-minus.col-4 {
    margin-left: 15px;
}

.product-info .btn-carro a {
    height: 40px;
    line-height: 38px;
    padding: 0px 30px;
}

.all-blog .blog-caja:nth-child(2n+1) .single-blog {
    border-bottom: solid 10px #35538f;
}
.all-blog .blog-caja:nth-child(2n+1) .single-blog h4 a:hover {
    color: #35538f;
}
.all-blog .blog-caja:nth-child(2n+1) .single-blog a.button-2 {
    color: #35538f;
}
.all-blog .blog-caja:nth-child(2n+1) .cat-blog a {
    margin-left: 10px;
    color: #35538f;
}


.all-blog .blog-caja:nth-child(2n) .single-blog {
    border-bottom: solid 10px #171834;
}
.all-blog .blog-caja:nth-child(2n) .single-blog h4 a:hover {
    color: #171834;
}
.all-blog .blog-caja:nth-child(2n) .single-blog a.button-2 {
    color: #171834;
}
.all-blog .blog-caja:nth-child(2n) .cat-blog a {
    margin-left: 10px;
    color: #171834;
}

.all-blog .blog-caja .single-blog a.button-2:hover,
.cat-blog a:hover{
    color: #717171 !important;
}
#page nav.hero-nav {
    margin-top: 180px;
    position: absolute;
    left: 50%;
    margin-left: -348px;
}

#page .sticky nav.hero-nav {
    margin-top: 0;
}


h1.title-blog {
    font-size: 80px;
    font-weight: 100;
    padding: 0;
    font-family: Bower-Bold;
    color: #000;
}
a .btn-rrss {
    width: 20px;
    height: 30px;
    fill: #b9b7b6;
    transition: fill 0.3s ease;
    margin-left: 10px;
}
a:hover .btn-rrss {
    width: 20px;
    height: 30px;
    fill: #35538f;
    transition: fill 0.3s ease;
}
.rrss-m li {
    display: inline-block;
    margin: 0px 6px 0 -10px;
}
.footer-area.footer-2 {
    color: #fff;
    background-image: url("../img/foto-footer.jpg");
	background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
img.logo-footer {
    width: 200px;
}
img.logo-ficem {
    height: 60px;
    display: block;
    margin: 20px 0 0 0;
}

.row.header-blog p {
    font-size: 24px;
    color: #666;
    font-weight: 100;
}
.cat-blog {
    text-align: right;
}
.botonera-single a {
    color: #0d3962;
    font-weight: 600;
}

.botonera-single .cat-blog a {
    margin-left: 15px;
}

.botonera-single {
    margin: 10px;
}
.blog-info.destacado {
    position: relative;
    z-index: 999999;
    padding: 25px;
    background: #fff;
}
ul.menu-top li {
    display: inline-block;
    margin: 10px 25px;
    color: #666;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

ul.menu-top {
    margin: 23px auto;
    display: block;
    text-align: left;
}
.destacado .link-blog {
    position: absolute;
    bottom: 20px;
    width: 95%;
}
/* Contenedor que aloja las entradas NO destacadas */
.contenedor-masonry {
  column-count: 3;
  column-gap: 30px;
  padding-top: 40px;
}

.blog-caja.masonry-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 30px;
  break-inside: avoid;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.blog-caja.masonry-item:hover {
  transform: translateY(-5px);
}
@font-face {
    font-family: "Bower-Bold";
    src: url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.eot");
    src: url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/40fccfffa7bc57048f06f7420d6fe7ae.svg#Bower-Bold")format("svg");
}

body{
    background-image: url(../img/foto-fondo-min.jpg);
}
body#home .hub-cards{
    background-color: #fff;
}
    
.interior-blog h4 {
    font-family: Bower-Bold;
    height: auto !important;
    font-size: 36px;
}
.interior-blog .blog-photo {
     margin-left: 0 !important;
}
.blog-photo {
    margin-left: -15px;
}
img.logo-top {
    height: 50px;
    width: auto;
    margin: 0;
    display: block;
}
.slider-title1 {
    font-size: 60px;
    font-weight: 900;
    line-height: 66px;
    color: #fff;
}
.slider-title3 {
    font-size: 25px;
    line-height: 30px;
    color: #000;
}
.destacado h4 {
    font-size: 45px;
    height: auto !important;
}
.cremas, 
.producto-destacado {
    text-align: center;
}
.col-lg-12.col-md-12.blog-caja {
    padding: 0 30px;
}
.destacado .col-8 {
    padding: 0;
}
.cremas h3,
.producto-destacado h3 {
    margin-top: 20px;
    font-size: 35px;
}

.cremas p,
.producto-destacado p {
    text-transform: uppercase;
    font-weight: 800;
    position: relative;
    right: 0;
    left: 0;
}
.blog-info {
    padding: 0 25px 25px;
    height: 100%;
    position: relative;
}
.cremas h2, .producto-destacado h2, .bruma-prod h2 {
    font-size: 24px;
    margin: 20px auto 0px;
}

.producto-destacado a.button-one.font-16px {
	margin-top: 20px;
}

.banner-3 .banner-brief {
    position: absolute;
    right: 20%;
    left: 20%;
    top: 43%;
}

.banner-3 .banner-title {
    font-size: 30px;
    font-weight: 900;
    line-height: 40px;
    color: #fff;
}
.cremas img,
.producto-destacado img {
    width: 100%;
}
p.price-antes {
    margin-top: 20px;
    text-decoration: line-through;
    font-size: 18px;
    font-weight: 100;
}
p.price-ahora {
    font-size: 28px;
    color: #c8a165;
    font-weight: 400 !important;
}
.button-one {
    background: #c8a165 none repeat scroll 0 0;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    padding: 0 15px;
    position: relative;
    color: #fff;
}
.button-one::before {
    background: #efefef none repeat scroll 0 0;
    bottom: 0;
    color: #000;
    content: attr(data-text);
    left: -100%;
    position: absolute;
    text-align: center;
    width: 100%;
    visibility: hidden;
    z-index: 11;
}
.button-one::after {
    border: 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.banner-corte01 img {
    width: 100%;
}
.section-title h2 {
    color: #444;
    font-size: 30px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 25px;
    padding-bottom: 22px;
}
.section-title .title-border::before {
    background: #c8a165 none repeat scroll 0 0;
    margin: 0 auto;
    right: 0;
}
.llamado-corte {
    background-image: url(../img/banner-corte01.jpg);
    background-size: cover;
    text-align: center;
    color: #fff !important;
    padding: 100px 0;
    margin: 80px 0 30px;
}
.llamado-corte h1 {
    font-size: 200px;
    font-family: "Zen Loop", cursive;
    color: #fff;
    font-weight: 100 !important;
}

.llamado-corte p {
    font-size: 36px;
    margin-top: -30px;
}

.llamado-corte a {
    margin-top: 20px;
    display: inline-table;
    background-color: #fff;
    padding: 10px 40px;
}
.discount-2 .discount-product {
    background: #fff none repeat scroll 0 0;
    padding: 20px;
    position: inherit;
}
.discount-info h1 {
    font-size: 45px;
    font-weight: 900;
    line-height: 55px;
    margin-bottom: 15px;
}
.bruma-facial {
    background-image: url("../img/back-bruma.jpg");
    background-size: cover;
    margin: 50px 0;
}

.bruma-prod {
    background-color: #fff;
    padding: 30px;
}
.blog-area h4 {
    height: 70px;
}

img.corazon {
    height: 15px;
}
footer {
    margin-top: 0px;
}
.footer-2 {
    background: #eee none repeat scroll 0 0;
    padding-top: 60px;
}
.mini-cart img {
    height: 20px;
    margin: 0 10px;
}

.mini-cart ul {
    margin: 30px 0;
}
img.wapp {
    position: fixed;
    bottom: 20px;
    right: 10px;
    height: 70px;
    z-index: 999999;
}
a#scrollUp {
    display: none !important;
}
.menu-principal {
    background: transparent none repeat scroll 0 0;
    color: #666;
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 45px;
    padding: 0 0 0 40px;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
}

.menu-principal ul li {
    display: inline;
    margin: 0 20px;
}

.menu-principal ul {
    text-align: center;
    padding: 20px 0;
    position: relative;
    margin: 0 auto;
    display: block;
}
#packs-home {
    background: rgba(214, 234, 230, .5);
}
.single-product .price-ahora {
    margin-bottom: 20px;
}

.cart-plus-minus.col-4 {
    margin-left: 15px;
}

.product-info .btn-carro a {
    height: 40px;
    line-height: 38px;
    padding: 0px 30px;
}

.all-blog .blog-caja:nth-child(2n+1) .single-blog {
    border-bottom: solid 10px #35538f;
}
.all-blog .blog-caja:nth-child(2n+1) .single-blog h4 a:hover {
    color: #35538f;
}
.all-blog .blog-caja:nth-child(2n+1) .single-blog a.button-2 {
    color: #35538f;
}
.all-blog .blog-caja:nth-child(2n+1) .cat-blog a {
    margin-left: 10px;
    color: #35538f;
}


.all-blog .blog-caja:nth-child(2n) .single-blog {
    border-bottom: solid 10px #171834;
}
.all-blog .blog-caja:nth-child(2n) .single-blog h4 a:hover {
    color: #171834;
}
.all-blog .blog-caja:nth-child(2n) .single-blog a.button-2 {
    color: #171834;
}
.all-blog .blog-caja:nth-child(2n) .cat-blog a {
    margin-left: 10px;
    color: #171834;
}

.all-blog .blog-caja .single-blog a.button-2:hover,
.cat-blog a:hover{
    color: #717171 !important;
}
#page nav.hero-nav {
    margin-top: 180px;
    position: absolute;
    left: 50%;
    margin-left: -348px;
}

#page .sticky nav.hero-nav {
    margin-top: 0;
}


h1.title-blog {
    font-size: 80px;
    font-weight: 100;
    padding: 0;
    font-family: Bower-Bold;
    color: #000;
}
a .btn-rrss {
    width: 20px;
    height: 30px;
    fill: #b9b7b6;
    transition: fill 0.3s ease;
    margin-left: 10px;
}
a:hover .btn-rrss {
    width: 20px;
    height: 30px;
    fill: #35538f;
    transition: fill 0.3s ease;
}
.rrss-m li {
    display: inline-block;
    margin: 0px 6px 0 -10px;
}
.footer-area.footer-2 {
    color: #fff;
    background-image: url("../img/foto-footer.jpg");
	background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
img.logo-footer {
    width: 200px;
}
img.logo-ficem {
    height: 60px;
    display: block;
    margin: 20px 0 0 0;
}

.row.header-blog p {
    font-size: 24px;
    color: #666;
    font-weight: 100;
}
.cat-blog {
    text-align: right;
}
.botonera-single a {
    color: #0d3962;
    font-weight: 600;
}

.botonera-single .cat-blog a {
    margin-left: 15px;
}

.botonera-single {
    margin: 10px;
}
.blog-info.destacado {
    position: relative;
    z-index: 999999;
    padding: 25px;
    background: #fff;
}
ul.menu-top li {
    display: inline-block;
    margin: 10px 25px;
    color: #666;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

ul.menu-top {
    margin: 23px auto;
    display: block;
    text-align: left;
}
.destacado .link-blog {
    position: absolute;
    bottom: 20px;
    width: 95%;
}
/* Contenedor que aloja las entradas NO destacadas */
.contenedor-masonry {
  column-count: 3;
  column-gap: 30px;
  padding-top: 40px;
}

.blog-caja.masonry-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 30px;
  break-inside: avoid;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.blog-caja.masonry-item:hover {
  transform: translateY(-5px);
}

/* Responsive: 2 columnas en tablets */
@media (max-width: 991px) {
  .contenedor-masonry {
    column-count: 2;
  }
}

/* Responsive: 1 columna en móviles */
@media (max-width: 575px) {
  .contenedor-masonry {
    column-count: 1;
  }
}


.caja-pasos {
    border: solid 3px #fff;
    border-radius: 8px;
    padding: 25px;
    color: #fff;
    margin: 15px 0;
}
:root{ --toggle-duration: .3s; --toggle-ease: ease; }
.caja-pasos > p.caja-txt{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--toggle-duration) var(--toggle-ease), opacity var(--toggle-duration) var(--toggle-ease), margin-top var(--toggle-duration) var(--toggle-ease);
  margin-top: 0;
  will-change: max-height, opacity, margin-top;
}
.caja-pasos.is-open > p.caja-txt{
  opacity: 1;
  margin-top: .5rem;
}
.caja-pasos > a{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  margin-top: .5rem;
}
/* Etiquetas con líneas a los lados, posicionadas sobre cada grupo */
.group-col{ position: relative; }         /* aplícalo a cada columna-grupo */
.group-title{
   /* sube/baja el rótulo */
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   color: #fff;
   font-weight: 700;
   line-height: 1.2;
   text-align: center;
   pointer-events: none;                   /* no bloquea clicks en las cajas */
   font-size: 16px;
}
.group-title span{ white-space: nowrap; }
.group-title::before,
.group-title::after{
  content: "";
  height: 2px;
  background: rgba(255,255,255,.9);
  flex: 1 1 auto;                         /* líneas a los lados del texto */
}
nav.mobile-nav #menu-menu-1 {
    display: none;
}
.cabecera-descarga svg {
    height: 37px;
    fill: #fff;
    display: block;
    margin: 20px auto;
}
.container.pag-descarga {
    width: 60%;
}
.container.pag-descarga {
    width: 60%;
}

.doc-descarga svg {
    fill: #fff;
    position: relative;
}

.doc-descarga a {
    position: absolute;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    24:
    px;
    font-size: 18px;
    left: 10%;
    top: 20%;
}
.doc-descarga:hover svg, .doc-descarga:hover a {
    fill: #000;
    color: #000;
}
.doc-descarga {position: relative;}

/* Centrar el <a> sobre el SVG en cada tarjeta de descarga */
.doc-descarga{
  position: relative;
  padding: 30px;
}

.doc-descarga svg{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;             /* debajo del enlace */
  /* opcional: si el SVG tapa el click, habilita la siguiente línea */
  /* pointer-events: none; */
}

.doc-descarga > a{
  position: absolute;
  inset: 0;               /* ocupa toda la caja */
  display: flex;
  align-items: center;    /* centra vertical */
  justify-content: center;/* centra horizontal */
  text-align: center;
  z-index: 2;
  padding: .25rem .5rem;
  width: 100%;
  /* Estilos visuales, ajusta a tu maqueta: */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  top: -25px;
}

/* Para nombres largos: limita ancho visual si lo prefieres */
.doc-descarga > a span,
.doc-descarga > a{
  max-width: 70%;
  margin: 0 auto;
  word-wrap: break-word;
}
.pag404 {
    text-align: center;
    color: #fff;
}

.pag404 h1 {
    font-size: 200px;
    font-weight: 800;
}

.pag404 p {
    font-size: 30px;
    margin-bottom: 80px;
}

.pag404 a {
    color: #fff;
    border: solid 1px #fff;
    padding: 15px 40px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 65px;
}

.pag404 a:hover {
    background: #fff;
    color: #000;
}

/* Que los medios ocupen el ancho del contenedor */
.media-fluid { width:100%; height:auto; display:block; }

/* Si usas .ratio de Bootstrap 5, esto ya viene; lo dejo por seguridad */
.interior-image .ratio { position: relative; width:100%; }
.interior-image .ratio > iframe,
.interior-image .ratio > video,
.interior-image .ratio > .embed-responsive-item {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}












































/* Opcional: en mobile que el rótulo vaya encima sin líneas */
@media (max-width: 991.98px){
  .group-title{ position: static; margin: 8px 0 12px; }
}
.pyp h3 {
    background-color: #4ab3d0 !important;
    border-color: #4ab3d0 !important;
    color: #fff !important;
}

.eje {
    background-color: #1a3f6f;
}

.eje h3 {
    color: #1a3f6f;
}
.caja-pasos svg {
    fill: #fff;
    border: solid 1px #fff;
    height: 16px;
    padding: 3px;
    border-radius: 50%;
}
.bajada-home p {
    font-size: 16px;
    line-height: 28px;
}
.caja-pasos a {
    color: #fff;
}
.caja-pasos a:hover, .caja-pasos a:hover svg {
    color: #49b3d0 !important;
    fill: #49b3d0;
    border-color: #49b3d0;
    transition: .3s;
}
/* Centrar horizontalmente el bloque ROADMAP dentro de su columna */
.cedos{
  display: flex;
  justify-content: center;   /* centro horizontal */
}

/* Estilos del título (opcional, por si quieres igualar tipografía/espaciado) */
.cedos__title{
  margin: 0;
  text-transform: uppercase; /* como en la maqueta */
  /* font-size / peso los hereda de tus estilos globales */
  text-align: center;
}
/* Fondo imagen: usa variable --bg-img si existe; si no, queda none */
.interior-section.has-dyn-bg{
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 15px #000;
}

/* Degradado SIEMPRE visible y encima de la imagen */
.interior-section.has-dyn-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--grad-top, rgba(0,0,0,0)),
    var(--grad-bot, rgba(0,0,0,0))
  );
  pointer-events: none;
}


.bajada-home {
    margin-top: 30px;
}

/* Mantiene icono + texto en línea y anima la rotación */
  .caja-pasos > a{
    display:inline-flex; align-items:center; gap:.35rem;
  }
  .caja-pasos > a svg{
    flex:0 0 auto;
    transition:transform .3s ease;
    transform-origin:50% 50%;
    /* opcional: tamaño
    width:18px; height:auto;
    */
  }
  /* Cuando la caja está abierta, rota la flecha */
  .caja-pasos.is-open > a svg{
  }
  .txt-bajada {
    text-align: center;
    padding: 0 30px;
}


    :root { --follow-offset: 24px; } /* distancia desde el top al “pegarse” */

    /* Límite general del módulo interior */
    .interior-section.not-int { position: relative; }
    .interior-section.not-int > .container { position: relative; overflow: visible; }

    /* Columnas */
    .cont-txt { position: relative; }
    .cont-img { position: relative; } /* su min-height se iguala al alto del texto por JS */

    /* Envolvente del bloque que sigue el scroll */
    .follow-wrap { position: relative; min-height: 10px; }
    /* Elemento que se mueve dentro del contenedor (no usamos sticky) */
    .js-follow {
      position: absolute;
      left: 0; right: 0; top: 0;
      transform: translateY(0);
      will-change: transform;
    }

    /* La imagen conserva su tamaño natural (alto auto) y solo escala al ancho de su columna */
    .foto-not-int {
      display: block;
      width: 100%;
      height: auto;          /* CLAVE: no forzar 100% alto */
      max-width: 100%;
      -webkit-user-drag: none;
      user-select: none;
    }

    /* Móviles: desactivar seguimiento para evitar saltos y costos de repintado */
    @media (max-width: 991.98px){
      .cont-img { min-height: 0 !important; }
      .follow-wrap { min-height: 0 !important; }
      .js-follow { position: static; transform: none !important; }
    }




/* Mostrar/Ocultar detalle */
.caja-pasos .caja-txt { display: none; }
.caja-pasos.is-open .caja-txt { display: block; }

/* Botón ver más/menos */
a.ver-mas { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
a.ver-mas .ico { display: inline-block; transition: transform .25s ease; }
.caja-pasos.is-open a.ver-mas .ico { transform: rotate(180deg); }

/* Accesibilidad */
a.ver-mas:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }































/* Responsive: 2 columnas en tablets */
@media (max-width: 991px) {
  .contenedor-masonry {
    column-count: 2;
  }
}

/* Responsive: 1 columna en móviles */
@media (max-width: 575px) {
  .contenedor-masonry {
    column-count: 1;
  }
}


.caja-pasos {
    border: solid 3px #fff;
    border-radius: 8px;
    padding: 25px;
    color: #fff;
    margin: 15px 0;
}
:root{ --toggle-duration: .3s; --toggle-ease: ease; }
.caja-pasos > p.caja-txt{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--toggle-duration) var(--toggle-ease), opacity var(--toggle-duration) var(--toggle-ease), margin-top var(--toggle-duration) var(--toggle-ease);
  margin-top: 0;
  will-change: max-height, opacity, margin-top;
}
.caja-pasos.is-open > p.caja-txt{
  opacity: 1;
  margin-top: .5rem;
}
.caja-pasos > a{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  margin-top: .5rem;
}
/* Etiquetas con líneas a los lados, posicionadas sobre cada grupo */
.group-col{ position: relative; }         /* aplícalo a cada columna-grupo */
.group-title{
   /* sube/baja el rótulo */
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   color: #fff;
   font-weight: 700;
   line-height: 1.2;
   text-align: center;
   pointer-events: none;                   /* no bloquea clicks en las cajas */
   font-size: 16px;
}
.group-title span{ white-space: nowrap; }
.group-title::before,
.group-title::after{
  content: "";
  height: 2px;
  background: rgba(255,255,255,.9);
  flex: 1 1 auto;                         /* líneas a los lados del texto */
}
nav.mobile-nav #menu-menu-1 {
    display: none;
}
.cabecera-descarga svg {
    height: 37px;
    fill: #fff;
    display: block;
    margin: 20px auto;
}
.container.pag-descarga {
    width: 60%;
}
.container.pag-descarga {
    width: 60%;
}

.doc-descarga svg {
    fill: #fff;
    position: relative;
}

.doc-descarga a {
    position: absolute;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    24:
    px;
    font-size: 18px;
    left: 10%;
    top: 20%;
}
.doc-descarga:hover svg, .doc-descarga:hover a {
    fill: #000;
    color: #000;
}
.doc-descarga {position: relative;}

/* Centrar el <a> sobre el SVG en cada tarjeta de descarga */
.doc-descarga{
  position: relative;
  padding: 30px;
}

.doc-descarga svg{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;             /* debajo del enlace */
  /* opcional: si el SVG tapa el click, habilita la siguiente línea */
  /* pointer-events: none; */
}

.doc-descarga > a{
  position: absolute;
  inset: 0;               /* ocupa toda la caja */
  display: flex;
  align-items: center;    /* centra vertical */
  justify-content: center;/* centra horizontal */
  text-align: center;
  z-index: 2;
  padding: .25rem .5rem;
  width: 100%;
  /* Estilos visuales, ajusta a tu maqueta: */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  top: -25px;
}

/* Para nombres largos: limita ancho visual si lo prefieres */
.doc-descarga > a span,
.doc-descarga > a{
  max-width: 70%;
  margin: 0 auto;
  word-wrap: break-word;
}
.interior-content {
    margin-bottom: 80px;
}







/* Opcional: en mobile que el rótulo vaya encima sin líneas */
@media (max-width: 991.98px){
  .group-title{ position: static; margin: 8px 0 12px; }
}
.pyp h3 {
    background-color: #4ab3d0 !important;
    border-color: #4ab3d0 !important;
    color: #fff !important;
}

.eje {
    background-color: #1a3f6f;
}

.eje h3 {
    color: #1a3f6f;
}
.caja-pasos svg {
    fill: #fff;
    border: solid 1px #fff;
    height: 16px;
    padding: 3px;
    border-radius: 50%;
}
.bajada-home p {
    font-size: 16px;
    line-height: 28px;
}
.caja-pasos a {
    color: #fff;
}
.caja-pasos a:hover, .caja-pasos a:hover svg {
    color: #49b3d0 !important;
    fill: #49b3d0;
    border-color: #49b3d0;
    transition: .3s;
}
/* Centrar horizontalmente el bloque ROADMAP dentro de su columna */
.cedos{
  display: flex;
  justify-content: center;   /* centro horizontal */
}

/* Estilos del título (opcional, por si quieres igualar tipografía/espaciado) */
.cedos__title{
  margin: 0;
  text-transform: uppercase; /* como en la maqueta */
  /* font-size / peso los hereda de tus estilos globales */
  text-align: center;
}
/* Fondo imagen: usa variable --bg-img si existe; si no, queda none */
.interior-section.has-dyn-bg{
  position: relative;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Degradado SIEMPRE visible y encima de la imagen */
.interior-section.has-dyn-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--grad-top, rgba(0,0,0,0)),
    var(--grad-bot, rgba(0,0,0,0))
  );
  pointer-events: none;
}


.bajada-home {
    margin-top: 30px;
}

/* Mantiene icono + texto en línea y anima la rotación */
  .caja-pasos > a{
    display:inline-flex; align-items:center; gap:.35rem;
  }
  .caja-pasos > a svg{
    flex:0 0 auto;
    transition:transform .3s ease;
    transform-origin:50% 50%;
    /* opcional: tamaño
    width:18px; height:auto;
    */
  }
  /* Cuando la caja está abierta, rota la flecha */
  .caja-pasos.is-open > a svg{
  }
  .txt-bajada {
    text-align: center;
    padding: 0 30px;
}


    :root { --follow-offset: 24px; } /* distancia desde el top al “pegarse” */

    /* Límite general del módulo interior */
    .interior-section.not-int { position: relative; }
    .interior-section.not-int > .container { position: relative; overflow: visible; }

    /* Columnas */
    .cont-txt { position: relative; }
    .cont-img { position: relative; } /* su min-height se iguala al alto del texto por JS */

    /* Envolvente del bloque que sigue el scroll */
    .follow-wrap { position: relative; min-height: 10px; }
    /* Elemento que se mueve dentro del contenedor (no usamos sticky) */
    .js-follow {
      position: absolute;
      left: 0; right: 0; top: 0;
      transform: translateY(0);
      will-change: transform;
    }

    /* La imagen conserva su tamaño natural (alto auto) y solo escala al ancho de su columna */
    .foto-not-int {
      display: block;
      width: 100%;
      height: auto;          /* CLAVE: no forzar 100% alto */
      max-width: 100%;
      -webkit-user-drag: none;
      user-select: none;
    }

    /* Móviles: desactivar seguimiento para evitar saltos y costos de repintado */
    @media (max-width: 991.98px){
      .cont-img { min-height: 0 !important; }
      .follow-wrap { min-height: 0 !important; }
      .js-follow { position: static; transform: none !important; }
    }




/* Mostrar/Ocultar detalle */
.caja-pasos .caja-txt { display: none; }
.caja-pasos.is-open .caja-txt { display: block; }

/* Botón ver más/menos */
a.ver-mas { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
a.ver-mas .ico { display: inline-block; transition: transform .25s ease; }
.caja-pasos.is-open a.ver-mas .ico { transform: rotate(180deg); }

/* Accesibilidad */
a.ver-mas:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }



/* ===== Swipe dentro del container (ajustes) ===== */
.hero-swipe{ position:relative; width:100%; margin:0 0 24px 0; }
.hero-swipe .swipe-viewport{
  width:100%;
  overflow:hidden;
  position:relative;
  border-radius:12px; /* opcional */
}

/* Desktop: imagen normal */
.hero-swipe .swipe-img{
  display:block;
  width:100%;
  height:auto;
  transform:none;
  transition:transform .06s linear;
}

/* Overlay oculto por defecto (solo se ve en mobile) */
.hero-swipe .swipe-hint{ display:none; }

/* ===== Mobile: alto fijo + imagen más ancha que la caja ===== */
@media (max-width: 767.98px){
  .hero-swipe .swipe-viewport{ height:var(--mobile-hero-h); }

  .hero-swipe .swipe-img{
    height:var(--mobile-hero-h) !important;
    width:auto !important;
    max-width:none !important;      /* evita que WP la limite al 100% */
    display:block;
    will-change:transform;
    -webkit-user-drag:none;
    user-select:none;
    touch-action:pan-y;             /* permite scroll vertical de la página */
    cursor:grab;
  }
  .hero-swipe .swipe-img.dragging{ cursor:grabbing; }

  .hero-swipe .swipe-hint{
    display:flex;
    align-items:center; justify-content:center;
    position:absolute; inset:0;
    background:rgba(0,0,0,.45);
    color:#fff; text-align:center; padding:16px;
    font-weight:700; letter-spacing:.02em;
    opacity:1; visibility:visible;
    transition:opacity .25s ease, visibility .25s ease;
    pointer-events:none;            /* no bloquea el gesto */
  }
  .hero-swipe.is-interacted .swipe-hint{
    opacity:0; visibility:hidden; pointer-events:none;
  }
  .hero-swipe .hint-inner{ max-width:90%; }
  .hero-swipe .hint-text{ font-size:16px; margin-bottom:6px; }
  .hero-swipe .hint-finger{
    display:inline-block;
    animation:swipeX 1.6s ease-in-out infinite;
  }
  @keyframes swipeX{
    0%{ transform:translateX(-24px); }
    50%{ transform:translateX(24px); }
    100%{ transform:translateX(-24px); }
  }
}