html{
    scroll-behavior: smooth;
}

.classdiv label{
    display:block;
    text-align:left;
    font-weight:600;
    font-size:0.85rem;
    color:#4a4a4a;
    margin:8px 0 0 5.5%;
}

.categoria-culster-lineclass{
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem,1fr));
  padding:0% 13% 0% 13%;
}


.grid-container-fila-top{
  display: grid;
  grid-template-columns: auto 25%;
  grid-gap: 10px;
  background-color:white;
  margin:2% 3% 2% 1%
}


.clDer{
    padding:0% 6% 0% 6%;
}


.classImageCotiza{
    padding:2%;
    border-radius: 50px;
    width:96%;
    
}

.curveBoton{
    background-color:#D3FCEF;
    font-weight:bold;
    padding:0.4% 0.7% 0.4% 0.7%;
    color:#3C9B7C;
    width:450px;   
    border-radius: 9px;
    text-align:center;
    margin: 2% 1% 2% 3%;
}

.urlNormal{
    text-decoration:none;
    color:green;
}


.urlFontWhite{
    text-decoration:none;
    color:white !important;
}


.lineMigaPan{
    font-size:12px;
    width:99%;
    color:silver;    height:26px;
    padding:0 0 0 1%;
    margin:50px 0 0 0;
    background-color:#f1f1f1;
    border-bottom:3px rgba(255, 135, 70,1) solid;
}

.lineMigaPan a{
    color:gray;
    padding:0;
}

.lineMigaPan ol{
    padding:8px 0 0 10px;
}

.lineMigaPan ol li{
    padding:0;
}



.lineMigaPanServ{
    font-size:12px;
    width:99%;
    color:silver;    height:26px;
    padding:0 0 0 1%;
    margin:50px 0 0 0;
    background-color:#f1f1f1;
    border-bottom:3px #14b8ce solid;
}

.lineMigaPanServ a{
    color:gray;
    padding:0;
}

.lineMigaPanServ ol{
    padding:8px 0 0 10px;
}

.lineMigaPanServ ol li{
    padding:0;
}


.card-panel{
     background-color:white;
     opacity:1;
     height:150px;
     overflow:auto;
     scrollbar-color: rgba(127,197,54,1) white;
     overflow-y: scroll;
     scroll-behavior: smooth;
     display:none;
     width:72%;
     margin:0 1% 0 1%;
     padding: 0 0 0 0;
     border:solid 1px silver;
     position:absolute;
     z-index:5;   
}


.searchItems{
    margin:8px 0 8px 0;
    padding:0 0 0 0; 
    width:100%;
    list-style: none;   
    text-align:left;
}


.searchItems:hover{
    background-color:rgba(218,247,166,0.5);
}


.inpsearch{
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    border-radius:16px;
    width:99%;
    border:0 !important;
    margin:0.5% 0.5% 0.5% 0.5%;
    padding:0.5% 0.5% 0.25% 0.5%;
    box-shadow:none;
    outline:none;
    font-size:1rem;    
}

.urlSearch{
    text-decoration:none;
    color:#14b8ce;
    font-size:1.1rem;
    font-weight:bold;
}

.searchResLi{
    font-size:1.4rem; 
    color:silver;
}

.urlNormalRed{
    text-decoration:none;
    color:#ff6363 !important;
}

.urlNormalNocolor{
    text-decoration:none;
    color:black !important;
}

.urlNormalNocolor:hover{
    font-weight:bold;
    color:#ff3636 !important;
}

.urlNormalNocolorgrid{
    font-size:1.2rem; 
    text-decoration:none;
    color:black;
    padding: 1% 1% 0.2% 1%;
    margin-left:2%;
}

.urlNormalNocolorgrid:hover{
    font-weight:normal;
    color:#ff3636;
}


.olGrid{
    margin-left:5%;
    counter-reset: li-counter;
    list-style-type: none; /* Elimina la numeración predeterminada */
    padding-left: 0; /* Opcional: elimina el relleno por defecto del <ol> */    
}

.olGrid li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 15px;
}

.olGrid li::before {
    content: counter(li-counter) "";
    counter-increment: li-counter;
    position: absolute;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    background-color: #35aca8;
    color: white;
    border-radius: 20%;
}




.urlBotonWtRed{
    text-decoration:none;
    color:white !important;
    border:1px rgba(0,187,45,1) solid;
    padding:0.4% 2% 0.4% 2%;
    border-radius:18px;
    background:rgba(0,187,45,1);
    transition:background-color .2s, border-color .2s;
}

.urlBotonWtRed:hover{
    background-color:#0a8a24;
    border-color:#0a8a24;
}


.urlBotonFcRed{
    text-decoration:none;
    color:white !important;
    border:1px #10439F solid;
    padding:0.4% 2% 0.4% 2%;
    border-radius:18px;
    background:#10439F;
}


.urlBotonTwRed{
    text-decoration:none;
    color:white !important;
    border:1px #14b8ce solid;
    padding:0.4% 2% 0.4% 2%;
    border-radius:18px;
    background:#14b8ce;
}

.urlBotonAirRed{
    text-decoration:none;
    color:white !important;
    border:1px #ff6363 solid;
    padding:0.4% 2% 0.4% 2%;
    border-radius:18px;
    background:#ff6363;
}


.urlBotonItRed{
    text-decoration:none;
    color:white !important;
    border:1px #d0417e solid;
    padding:0.4% 2% 0.4% 2%;
    border-radius:18px;
    background:#d0417e;
}

.urlBotonBanner{
    text-decoration:none;
    color:white !important;
    border:1px #f35525 solid;
    padding:1.5% 2.5% 1.5% 2.5%;
    border-radius:16px;
    background:#f35525;
    font-weight:bold;
    transition:background-color .2s, border-color .2s;
}

.urlBotonBanner:hover{
    background-color:#d6491d;
    border-color:#d6491d;
}


.urlBotonBannerBig{
    text-decoration:none;
    color:white !important;
    border:1px #14b8ce solid;
    padding:1.5% 2.5% 1.5% 2.5%;
    border-radius:16px;
    background:#14b8ce;
    font-weight:bold;
}


.urlBotonComplemento{
    display:inline-block;
    text-decoration:none;
    color:white !important;
    border:1px #f35525 solid;
    padding:1.5% 5% 1.5% 5%;
    border-radius:16px;
    background:#f35525;
    font-weight:bold;
    text-align:center;
}

.urlBotonComplemento:hover{
    background-color:#d5451d;
    border-color:#d5451d;
}



.urlBotonYtRed{
    text-decoration:none;
    color:white !important;
    border:1px red solid;
    padding:0.4% 2% 0.4% 2%;
    border-radius:18px;
    background:red;
}


.lineNormal{
	background:rgba(255,255,255,1);
	padding:6px 0px 6px 0px;
	line-height: normal;
	color:black;
	display: block;
	margin: 0% 1% 0% 3%;
	
}

.lineBold{
	background:rgba(255,255,255,1);
	padding:6px 0px 6px 0px;
	line-height: normal;
	color:black;
	display: block;
	margin: 0% 1% 0% 3%;
	font-weight:bold;
	
}



.categoria-secondsclusters-lineclass{
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem,1fr));
  padding:0% 0% 10% 0%;
}


.categoria-thirdclusters-lineclass{
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem,1fr));
  padding:0% 0% 0% 0%;
}

/* Franja de fondo alterna para separar bloques de texto consecutivos —
   mismo patrón que .franjaTestimonios/.franjaDestacado de la home
   (plantilla/amoblados/index.php), reusable acá para páginas Categoria/Genero. */
.franjaAlterna{
	background:#fafafa;
	padding:1px 0 24px 0;
}

.divParrafoPortadaClass{
	margin-top:0%;
	padding:0% 13% 1% 13%;
	width:74%;
	text-align: left;
	font-size:1.2rem;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
	/*background:#ACB7BD;*/
}

.divClassFlotante{
	padding:0% 1% 0% 1%;
	width:30%;
	margin-left:30%;
	text-align: left; 
	font-size:1.2rem;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
	position: fixed;
    word-wrap: break-word;
    background-color:white;
    border:solid silver 1px;
	top:20%;
	z-index:3;
}


.divClassFijo{
	padding:0;
	width:100%;
	margin:0 0 2% 0;
	text-align: left; 
	font-size:1.2rem;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
    word-wrap: break-word;
    background-color:white;
    border:solid silver 0px;
	top:0;
}


.divParrafoPortadaClassRecords{
	margin-top:0%;
	padding:0% 13% 0% 13%;
	width:74%;
	text-align: left; 
	font-size:1.1rem;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
}


.divParrafoPortadaClassRecords-ficha{
	margin-top:0%;
	padding:0% 3% 0% 3%;
	width:94%;
	text-align: left; 
	font-size:1.1rem;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
}


.divParrafoPortadaClassRecords-2-col{
	margin-top:0%;
	padding:0% 0% 0% 0%;
	width:100%;
	text-align: left; 
	font-size:1.1rem;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
}


.divParrafoPortadaClassRecordsPerfil{
	padding:0% 3% 0% 3%;
	width:94%;
	text-align: left;
	font-size:1.1rem;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
}

.divParrafoPortadaClass a,
.divParrafoPortadaClassRecords a,
.divParrafoPortadaClassRecords-ficha a,
.divParrafoPortadaClassRecords-2-col a,
.divParrafoPortadaClassRecordsPerfil a{
	color:#f35525;
	text-decoration:none;
	font-weight:600;
}

.divParrafoPortadaClass a:hover,
.divParrafoPortadaClassRecords a:hover,
.divParrafoPortadaClassRecords-ficha a:hover,
.divParrafoPortadaClassRecords-2-col a:hover,
.divParrafoPortadaClassRecordsPerfil a:hover{
	text-decoration:underline;
}



.anuncioClass{
    width:100%;
}


.anuncioWidth{
    flex: 1;
    background-color:rgba(255,215,0,0.5);
    border:blue solid 0px;
    width:90%;
}

#google_image_div{
    border-radius: 20px;
    margin-top:5px;
    margin-bottom:5px;
}

ins.adsbygoogle > div >iframe{
    
    width:100% !important;
    padding:2% !important;
    border-width:2px !important;
    box-sizing: border-box;
}


/*ins.adsbygoogle[data-ad-status="unfilled"] {
    border: red 0px solid;
}

div:has(> div > a > center > ins.adsbygoogle[data-ad-status="unfilled"]) {
  display: none;
}
*/



.linkClass{
    text-decoration:none;
}




.divParrafoAmpliadoClass{
	margin-top:0%;
	padding:0% 4% 0% 5%;
	width:90%;
	text-align: left; 
	font-size:0.8rem;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
}


.divParrafoAmpliadoClass > a > h3{
    width: 98%;
    transition: box-shadow .3s;
    background-color: #EBF5FB;
    border-radius: 0px 0px 0px 0px;
    padding:7px 10px 7px 10px;
    border: solid 1px silver;
    text-align: left; 
}

.divParrafoAmpliadoClass > .lisColegios{
    color:#0b5aa5;
    text-decoration:none;
    font-weight:bold;
    text-align: left; 
}


.divParrafoAmpliadoClass  > a > h3:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
  background-color: #fed13a;
}


.classDataUno{
    background-color:#E8F8F5;
    padding:1%;
    margin:0;
}

.classDataUnoPerfil{
    background-color:#E8F8F5;
    padding:2% 3% 2% 3%;
    margin:0;
}


.classDataOne{
    background-color:rgba(0,187,45,1);
    padding:2% 3% 2% 3%;
    margin:0;
    border-radius:20px;
}

.classDataDos{
    background-color:#F8F9F9;
    padding:1%;
    margin:0;
}

.classDataDosPerfil{
    background-color:#F8F9F9;
    padding:2% 3% 2% 3%;
    margin:0;
}

.classDataDosPerfilArbnb{
    background-color:#ff6363;
    padding:2% 3% 2% 3%;
    margin:0 0 3 0;
    border-radius:20px;
}


.divClassPortadaEtiquetaTitulo{
	margin-top:0%;
	padding:0% 13% 0% 13%;	
	text-align: left; 
	font-size:1.3rem;	
}


.divClassPortadaMarcaTitulo{
	margin-top:0%;
	padding:0% 13% 0% 13%;
	/*padding:2% 3% 0% 3%;*/
	text-align: left; 
	font-size:1.1rem;	
}


.bloqueAds{
 	margin:0% 3% 0% 3%;
	padding:0% 3% 2% 3%;
}


.portadaMarcaTituloClass{
    margin:0;
    padding:0;
    border-left:25px solid #f35525;
    /*border-radius:10px;*/
}


.portadaEtiquetaTituloClass{
    margin:0;
    padding:0;
    border-left: 25px solid #7F8E9A;
}


.marca-culster-lineclass{
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(auto-fill, minmax(21rem,1fr));
  padding:0% 3% 0% 3%;
}

.classImagePortada{
	border: solid red 0px;
	width: 100%;
	height: auto;
	max-height: 450px;
	object-fit: cover;
}


.classImagePortadaRedondo{
	border: solid red 0px;
	border-radius:20px;
	width: 100%;
	height: auto;
}

.classImagePortadaBorder{
	border: solid red 1px;
	width: 100%;
	padding:0.2%;
	box-sizing: border-box;
	background-color:#BB0E0C;
}


.classImageSecciones{
	border: solid gray 1px;
	width: 100%;
}


.divClassImagePortada{
	border: solid blue 0px;
	height:220px;
	width: 100%;	
}

.divClassImageTopPortada{
	width: 100%;
	border: solid orange 0px;	
	padding:0;
	margin:0;
	margin-top:-5px;
}


.divClassImageTopPortadaParallax{

	width: 100%;
	border: solid orange 0px;	
	padding:0;
	margin:0;
	/*margin-top:22px;*/
    height: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.textParallaxClass{
    position:absolute;
	width: 100%;
	height: 500px;
    background-color:rgba(0,0,0,0.4);
}


.textParallaxClass > div{
    font-family:Montserrat,sans-serif;
    opacity:1 !important;
    color:white;
    font-weight:bold;
    width:50%;
    margin:5% 3% 5% 3% !important;
    font-size:55px;
}


.textParallaxClass > div > div{
    font-size:0.4em;
    font-weight:normal;
    line-height:normal;
    width:80%;
}





.divClassImageComplemento{
    	padding:0% 3% 1% 3%;
    	width:94%;    
    	border: 0px;
}


.divClassVideoComplemento{
        display:block;
    	padding:0% 3% 1% 3%;
    	width:94%;    
    	border: solid orange 0px;	
    	margin:0;
    	margin-top:10px;
}

.divClassVideoComplemento > object{
     	width:100%;   
     	height:100%;
}


.divClassVideoComplemento_2{
        display:block;
    	padding:4% 3% 1% 3%;
    	width:94%;    
    	border: solid silver 0px;
    	border-radius:30px;
    	margin:0;
    	margin-top:10px;
}

.divClassVideoComplemento_2 > object{
     	width:100%;   
     	height:100%;
     	border-radius:30px;
}

.divClassVideoComplemento_2 > .youtube{
     	width:100%;   
     	height:100%;
     	border-radius:30px;
}


.classImageTopPortada{
	width: 100%;
	height: auto;
	border: solid yellow 0px;
	padding:0;
	margin:0 0 0 0;
}


.classImageTopPortadaMiga{
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	border: solid yellow 0px;
	padding:0;
	margin:5px 0 0 0;
	display:block;
}


.classImageComplemento{
        display:block;
    	width: 100%;
    	height: auto;
    	border: solid yellow 0px;
    	padding:0;
    	margin:0;
}

/* Clases adicionales (no reemplazan a classImageTopPortadaMiga/classImageComplemento,
   se suman) para modernizar la foto de Artículos sin afectar el resto de los layouts
   que comparten esas clases base (Categoria/Genero/Institución/Marca/Portada/Servicio/Venta). */
.imagenModernaHero{
	width: 74%;
	display: block;
	margin: 0 auto;
	border-radius: 14px;
}

/* Se suma a divClassImageTopPortada (que trae margin-top:-5px) para darle aire
   arriba a la foto del artículo, sin tocar la clase compartida. */
.imagenModernaHeroWrap{
	margin-top: 60px;
}

.imagenModernaSecundaria{
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.1);
}


.divClassInternasTitulo{
	margin-top:0%;
	padding:0% 13% 0% 13%;
	text-align: left; 
	font-size:1.3rem;	
}

.internasTituloClass{
	padding:0;
	margin:1% 0% 0% 0%;
	line-height: 140%;
}

.kickerModerno{
	display:flex;
	align-items:center;
	gap:8px;
	color:#f35525;
	font-size:0.85rem;
	font-weight:700;
	letter-spacing:1.5px;
	text-transform:uppercase;
	margin-bottom:10px;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
}

.kickerIcono{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	flex-shrink:0;
	border-radius:50%;
	background:#fbd9cf;
}

.kickerIcono i{
	font-size:12px;
	color:#f35525;
}

.tituloModerno{
	display:block;
	color:#1e1e1e;
	font-size:1.9rem;
	font-weight:700;
	line-height:130%;
	font-family: 'Poppins', Roboto, verdana, sans-serif;
}



.separador-lineClass{
	margin:0% 3% 2% 3%;
	text-align: left; 
	background-color:rgba(249,249,249,1);
	padding:0.1% 0.1% 0.1% 2%;
}

.separador-lineClass h2{
	color:red;
	font-size:1.2rem;
	font-weight:bold;
	font-size-adjust: 0.22;
}


.separador-lineClass-oscuro{
	margin:0% 3% 2% 3%;
	text-align: left; 
	background-color:rgba(0,0,0,1);
	padding:0.1% 0.1% 0.1% 2%;
}

.separador-lineClass-oscuro h2{
	color:#FFC300;
	font-size:1.2rem;
	font-weight:bold;
	font-size-adjust: 0.22;
}

.separador{
	border:0px;
	color:white;
	background:white;
	margin:3%;
}

.separador-sutil{
	border:0px;
	color:white;
	background:white;
	margin:1.3%;
}

.separador-conservador{
	border:0px;
	color:white;
	background:white;
	margin:2%;
}

.separador-medio{
	border:0px;
	color:white;
	background:white;
	margin:3%;
}

.separador-alto{
	border:0px;
	color:white;
	background:white;
	margin:5%;
}



.separador-seccion{
	border:0px;
	color:white;
	background:white;
	margin:1.5%;
}


.separador-minimo{
	border:0px;
	color:white;
	background:white;
	margin:0.5%;
}

.linePurchase{
	display: flex;
	margin-top:5px;
}

.linePurchaseSecond{
	display: block;
	color:#ff6363;
	margin-top:5px;
	font-size:0.8rem;
	font-weight:bold;
}

.linePurchaseSecondHora{
	display: block;
	font-size:0.8rem;
	color:white;
	background:red;
	width:40%;
	border-radius: 50px;
	padding:3px 6px 3px 6px;
	text-align:center;
	margin:5px 0px 0px 25px;
}

.btAmazonCircle {
	border-radius: 20px;
	width: 30px;
	height: 30px;
	background-color: #FFC300;
	margin-right:8px;
	display: flex;
	align-items: center;
}

.btAmazonCircle > span {
	font-size:1rem;
	width:100%;
	text-align:center;
	color:black;
}

.btAmazonSquare {
	border-radius: 6px;
	width: 100%;
	height: 38px;
	background-color: #FFC300;
	margin-right:8px;
	display: flex;
	align-items: center;
	border:solid black 2px;
}


.btAmazonSquare > span {
	font-size:1rem;
	width:100%;
	text-align:left;
	margin:4px 2px 2px 10px;
	color:black;
}

.btAmazonSquare > span > i {
	border:1px white solid;
	color:black;
	padding:3px 5px 3px 5px;
}


.enlace-limpio{
    text-decoration:none;
    color:black;
}


.text-amazon{
    padding-left:1%;
    font-weight:bold;
}


.text-amazon  a{
    text-decoration:none;
    color:black;
}


.text-amazon  a:hover{
    text-decoration:none;
    color:white;
}



.btOficialSquare {
	border-radius: 2px;
	width: 100%;
	height: 38px;
	background-color: black;
	margin-right:8px;
	margin-top:3px;
	display: flex;
	align-items: center;
}


.btOficialSquare > span {
	font-size:1rem;
	width:100%;
	text-align:left;
	margin:4px 2px 2px 10px;
	color:white;
}

.btOficialSquare > span > i {
	border:1px white solid;
	color:white;
	padding:3px 5px 3px 5px;
	font-size:0.7rem;
}


.text-oficial{
    padding-left:1%;
    font-weight:bold;
}


.text-oficial  a{
    text-decoration:none;
    color:white;
}


.text-oficial  a:hover{
    text-decoration:none;
    color:#FFC300;
}



.btWsp {
	border-radius: 20px;
	width: 30px;
	height: 30px;
	background-color: #27AE60;
	margin-right:8px;
	display: flex;
	align-items: center;
}

.btWsp > span {
	font-size:1rem;
	width:100%;
	text-align:center;
	color:white;
}


.btStore {
	border-radius: 20px;
	width: 30px;
	height: 30px;
	background-color: black;
	margin-right:8px;
	display: flex;
	align-items: center;
}

.btStore > span {
	font-size:1rem;
	width:100%;
	text-align:center;
	color:white;
}


.compralo{
	font-size:0.8rem;
	font-weight:normal;
	padding-top:5px;
	color:gray;
}


.compralo-news{
	font-size:1rem;
	font-weight:normal;
	padding-top:5px;
	color:gray;
	text-align: left; 
}


.box-day{
    color:red;
    display:none;
}


.box-subtitle > i{
    color:#ff3636;
}


.higtligthAqua{
	background: aquamarine;
	padding:6px 16px 6px 16px;
}


.higtligthOrange{
	background:white;
	padding:6px 16px 6px 16px;
	line-height: normal;
	color:#f35525;
	display: inline-block;
	font-size:2rem;
	font-weight:bold;
	width:98%;
}


.higtligthNormal{
	background:rgba(255,255,255,1);
	padding:6px 0px 6px 0px;
	line-height: normal;
	color:black;
	display: inline-block;
}




.higtligthYellow{
	background:#f35525;
	padding:6px 16px 6px 16px;
	line-height: normal;
	display: inline-block;
	color:white;
	width:98%;
}


.higtligthRed{
	background: red;
	padding:6px 16px 6px 16px;
	color:white;
}


.higtligthBlue{
	background: #AED6F1;
	padding:6px 16px 6px 16px;
}

.higtligthBlack{
	background: white;
	padding:6px 16px 6px 16px;
	line-height: normal;
	color:black;
	font-size:2rem;
	display: inline-block;
	width:98%;
}

.higtligthBlackPerfil{
	background: #14b8ce;
	padding:6px 16px 6px 16px !important;
	border-radius:30px 0 30px 0;
	line-height: normal;
	color:white;
	display: inline-block;
	
}


.higtligthYellowPerfil{
	background: #f35525;
	padding:6px 16px 6px 16px !important;
	border-radius:30px 0 30px 0;
	line-height: normal;
	color:white;
	display: inline-block;
	
}


.higtligthNocolorPerfil{
    width:100%;
    font-size:1.5em;
    text-align:center;
    background:white;
	/*padding:6px 16px 6px 16px !important;*/
	border-radius:30px 0 30px 0;
	line-height: normal;
	color:black;
	display: inline-block;
	
	
}



.bodies{
	width: 100%;
	border: 0px;	
	padding:0px;
	margin:0px;	
	background-color: white;
	font-family: Arial, Helvetica, sans-serif;
}

.menu-superpuesto{
    position: fixed;
    min-height: 90px;
	height:90px;	
    width: 100%;
    text-align: left;
    word-wrap: break-word;
    background-color: white;
	top:0px;
	margin-top:0;
	z-index:2;
}

.logo-web{
    position: fixed;
    min-height: 70px;
    width: 200px;
    text-align: right;
    word-wrap: break-word;
	top:0px;
	margin-top:16px;
	z-index:2;
	margin-left:8%;
}

.logo-web-institucion{
    position: fixed;
    min-height: 100px;
    width: 100px;
    background-color:white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:2px solid silver;
    text-align:center;
    word-wrap: break-word;
	top:0px;
	margin-top:16;
	z-index:3;
	margin-left:calc(50% - 50px);
	padding:20px 10px 0px 10px;
}

.classImageLogo{
    width:100%;height:auto;
}

.classImageLogo-institucion{
    width:80px;
}


.map-responsive{
    overflow:auto;
    padding-bottom:26.25%;
    position:relative;
    width:74%;
    height:100px;
    max-height:100px;
    margin:2% 13% 2% 13%;
    border-radius: 50px;
}

.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


.map-responsive_2{
    overflow:hidden;
    padding-bottom:26%;
    position:relative;
    width:94%;
    box-sizing:border-box;
    min-height:100%;
    margin:0 3% 0 3%;
}

.map-responsive_2 iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    border-radius:30px;
}



.search-responsive{
    overflow:hidden;
    position:relative;
    height:0;
    width:100%;
    height:200px;
    margin:0 0 0 0;
}

.search-responsive iframe{
    left:0;
    top:0;
    width:100%;
    height:200px;
    position:absolute;
}


.parent {
  display: flex;
}

.parent-2-col {
  display: flex;
  flex-direction: row-reverse;
  border: solid silver 0px;
  background:#F8F9F9;
  border-radius:30px;
  padding:1% 0% 1% 0%;
}


/* El <p class="parrafoPortada"> que envuelve una cajita queda con el margen default
   del navegador (~1em arriba/abajo) porque .parrafoPortada no tiene reglas propias —
   sumado al margen del párrafo anterior, se veía un salto grande antes de la caja. */
.parrafoPortadaCajita{
  margin: 0;
}

.parent-cajitas-defecto{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  border:solid 1px #f3d5c9;
  background:#fef7f4;
  border-radius:10px;
  padding:1% 0% 1% 0%;
}

.parent-cajitas-defecto h6 i{
  color:#f35525;
}

.parent-cajitas-defecto.cajita-cliente{
  border-color:#f0c4c8;
  background:#fdf1f2;
}

.parent-cajitas-defecto.cajita-cliente h6 i{
  color:#ee626b;
}

.image-cajita-center{
    display:none;
    width:30%;
}

.boton-cajita-center{
    display:none;
    width:30%;
}

.narrow {
  width: 610px;
  background: rgba(99,172,152,0.2);
}

.wide {
  flex: 1;
  background: white;
  padding:0% 2% 1% 2%;
  border-right:0px gray solid;
}


.wide_2 {
  width: 610px;
  background: lightblue;
 }
 
.wide-2-col {
  width: 50%;
  padding:0% 1% 0% 2%;
  display:flex;
  flex-direction:column;
  justify-content:center;
 }

/* La imagen del complemento estira a la altura del bloque de texto vecino
   (.parent-2-col ya es flex, así que ambas columnas ya miden lo mismo).
   Si el complemento trae botón debajo de la imagen, se deja la altura
   natural para que la imagen no se deforme y el botón quede pegado a ella.
   Mapas y videos (iframe/embed) nunca tienen esta regla de altura —
   por eso .wide-2-col queda centrado verticalmente por defecto arriba,
   así también quedan centrados sin importar si traen botón o no. */
.wide-2-col img.widtotal{
  height:100%;
  object-fit:cover;
  display:block;
}

.wide-2-col:has(.urlBotonComplemento) img.widtotal{
  height:auto;
  object-fit:initial;
}


.wide-image-cajitas{
  width: 100px;
  height: 100px;
  margin: 0 5% 0 4%;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border:0px red solid;
 }

.wide-image-cajitas img{
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 
 .wide-boton-cajitas{
  width: 25%;
  text-align:center;
  padding:0.5% 2% 0.5% 2%;
  border:0px red solid;
  margin: 2.5% 0% 2.5% 0%;
 }
 
 .wide-boton-cajitas > div{
  background:rgba(127,197,54,1);
  padding:3% 4% 3% 4%;
  border-radius:30px;
 } 
 
  .wide-boton-cajitas > div:hover{
    background:rgba(0,187,45,1);
 } 
 
 
 
 .wide-boton-cajitas > div > a{
  text-decoration:none;
  color:white;
  font-weight:bold;
 }
 
 
  .wide-boton-cajitas-large{
  width: 85%;
  text-align:center;
  padding:1% 2% 0.5% 2%;
  border:0px red solid;
  margin: 2.5% 0% 2.5% 0%;
 }
 
 .wide-boton-cajitas-large > div{
  background:#1e1e1e;
  padding:3% 4% 3% 4%;
  border-radius:30px;
  transition:background-color .2s;
 }

  .wide-boton-cajitas-large > div:hover{
    background:#f35525;
 }
 
 .wide-boton-cajitas-large > div > a{
  text-decoration:none;
  color:white;
  font-weight:bold;
 }
 
 
 
 .wide-texto-cajita{
  flex: 1;
  padding:0% 2% 1% 2%;
  border-right:0px gray solid;
  border-radius:30px;
}
 
.narrow_2 {
  flex: 1;
  background: white;
  padding:0% 2% 1% 2%;
  border-right:0px gray solid;
}

.narrow-2-col {
  flex: 1;
  background: #F8F9F9;
  padding:0% 2% 1% 2%;
  border-right:0px gray solid;
  border-radius:30px;
}


.widtotal{
    width:100%;
}

.widtotalCover{
    width:100%;
    max-height:400px;
    object-fit:fill;
    border: 1px dashed silver;
}


.liHref{
    word-wrap: break-word;
    width:100%;
}

.textCluster{
     font-size:1.3rem;   
}

.menu-new-line{
	position: relative;
	width: 40%;
	height:80px;
	z-index: 9999;
	
}

.portadaTituloClass{
	font-size:20px;
}

.headerClass{
	height:auto;
	min-height:80px;
	overflow:visible;
}


.centrado{
		position: relative;
		z-index:1;
        background-color:rgba(0,0,0,0.5);
        top: -65%;
        left:0px;
        height:40%;
		font-size-adjust: 0.30;	
		font-weight:bold;
		color:white;
		padding:10% 1% 1% 1%;
}

.centrado:hover{
		animation: fadeMeText 800ms linear forwards;
        position:  inline-block;
        background-color: #F4D03F;
        left:0px;
		font-size-adjust: 0.30;	
		font-weight:bold;
		color:black;
}

.centrado a{
		text-decoration:none;	
		color:white;
		padding:10px;
		font-size:1.6em;
}

.centrado a:hover{
		text-decoration:none;	
		color:black;
}



.centradosecond{
		position: relative;
		z-index:1;
        background-color:rgba(0,0,0,0.5);
        top: -77%;
        left:0px;
        height:40%;
		font-size-adjust: 0.30;	
		font-weight:bold;
		color:white;
		padding:10% 1% 1% 1%;
}

.centradosecond:hover{
		animation: fadeMeText 800ms linear forwards;
        position:  inline-block;
        background-color: #E73565;
        left:0px;
		font-size-adjust: 0.30;	
		font-weight:bold;
		color:black;
}

.centradosecond a{
		text-decoration:none;	
		color:white;
		padding:10px;
		font-size:1.6em;
}

.centradosecond a:hover{
		text-decoration:none;	
		color:black;
}



.oculta{
    display:none;
}



.fa-chevron-circle-right{
	color:red;
}


.boton-fixed{
   position: fixed; 
   height:40px;
   bottom:25px;
   right:5%;
   word-wrap: break-word;
   border:red solid 0px;
   padding:15px;
   background-color:rgba(255,255,255,1);
   margin-top:20%;
   width:40px;
   border-radius: 50%;
   border:1px solid rgba(39,170,225,1);
   display: inline-block;  
   z-index:5;
}

.icon-fixed{
    font-size:34px;
    color:rgba(231, 19, 47,1);
    margin-top:3px;
}

.icon-fixed:hover{
    font-size:34px;
    color:rgba(127,255,212,1);
}


.icon-fixed-perfil{
    font-size:38px;
    color:white;
    margin:0px 0px 0px -1.5px;
}

.boton-fixed-perfil:hover .icon-fixed-perfil{
    color:#f35525;
}


.boton-fixed:hover{
   background-color:rgba(255,255,255,1);
}


.bwtsp-fixed{
   position: fixed; 
   height:40px;
   bottom:100px;
   right:5%;
   word-wrap: break-word;
   border:red solid 0px;
   padding:15px;
   background-color:rgba(0,187,45,1);
   margin-top:20%;
   width:40px;
   border-radius: 50%;
   border:1px solid rgba(39,170,225,1);
   display: inline-block;  
   z-index:5;
}


.boton-fixed-perfil{
   position: fixed;
   height:35px;
   bottom:40px;
   right:5%;
   word-wrap: break-word;
   padding:10px 10px 10px 10px;
   background-color:#f35525;
   margin-top:20%;
   width:35px;
   border-radius: 50%;
   border:2px solid #fff;
   box-shadow: 0 1px 6px rgba(0,0,0,0.25);
   display: inline-block;
   z-index:5;
}

/* Aditiva, solo Artículos: el naranja #f35525 ya es el color dominante de la página
   (kickers/badges), el botón flotante se pierde contra tanto naranja repetido. Usa
   el navy del logo en vez de tocar .boton-fixed-perfil (compartida por 8 layouts). */
.botonInicioModerno{
   background-color:#19374f;
   border:1px solid #19374f;
}

.botonInicioModerno:hover .icon-fixed-perfil{
   color:#19374f;
}


.btop-fixed-perfil{
   position: fixed;
   height:35px;
   bottom:40px;
   left:5%;
   word-wrap: break-word;
   padding:10px 10px 10px 10px;
   background-color:white;
   width:35px;
   border-radius: 50%;
   border:1px solid #f35525;
   box-shadow: 0 1px 6px rgba(0,0,0,0.25);
   z-index:5;
}

.btop-fixed-perfil .icon-fixed-perfil{
   color:#f35525;
}

.btop-fixed-perfil:hover{
   background-color:#f35525;
}

.btop-fixed-perfil:hover .icon-fixed-perfil{
   color:white;
}

.boton-fixed-perfil:hover{
   background-color:rgba(255,255,255,1);
}



.bwtsp-fixed-perfil{
   position: fixed;
   height:35px;
   bottom:100px;
   right:5%;
   word-wrap: break-word;
   padding:10px 10px 10px 10px;
   background-color:rgba(0,187,45,1);
   margin-top:20%;
   width:35px;
   border-radius: 50%;
   border:2px solid #fff;
   box-shadow: 0 1px 6px rgba(0,0,0,0.25);
   display: inline-block;
   z-index:5;
}

.bwtsp-fixed-perfil:hover{
   background-color:rgba(255,255,255,1);
}

.bwtsp-fixed-perfil:hover .iwtsp-fixed-perfil{
   color:rgba(0,187,45,1);
}


.bindice-fixed-perfil{
   position: fixed;
   height:35px;
   bottom:160px;
   right:5%;
   word-wrap: break-word;
   padding:10px 10px 10px 10px;
   background-color:#35aca8;
   margin-top:20%;
   width:35px;
   border-radius: 50%;
   border:1px solid #35aca8;
   display: inline-block;
   z-index:5;
}

.bindice-fixed-perfil:hover{
   background-color:rgba(255,255,255,1);
   border:1px solid #35aca8;
}

.bindice-fixed-perfil:hover .iwtsp-fixed-perfil{
   color:#35aca8;
}


/* Widget NAP (nombre/dirección/teléfono) — apilado sobre WhatsApp/índice, mismo estilo/box-model de botón circular fijo (el tamaño+padding va en .napWidget, igual que en .bwtsp-fixed-perfil, para que el borde derecho quede alineado con los otros 2 botones) */
.napWidget{
   position: fixed;
   height:35px;
   bottom:220px;
   right:5%;
   padding:10px;
   width:35px;
   background-color:#19374f;
   border:1px solid #19374f;
   border-radius:50%;
   box-shadow: 0 1px 6px rgba(0,0,0,0.25);
   display:inline-block;
   z-index:6;
   margin:0;
}

.napWidget > summary{
   list-style:none;
   width:100%;
   height:100%;
   display:flex;
   align-items:center;
   justify-content:center;
   cursor:pointer;
}

.napWidget > summary::-webkit-details-marker{ display:none; }
.napWidget > summary::marker{ content:""; }

.napWidget > summary i{
   color:#fff;
   font-size:20px;
}

.napWidget:hover,
.napWidget[open]{
   background-color:#fff;
}

.napWidget:hover > summary i,
.napWidget[open] > summary i{
   color:#19374f;
}

.napPanel{
   box-sizing:border-box;
   position:fixed;
   bottom:220px;
   right:calc(5% + 55px + 12px);
   width:300px;
   max-width:80vw;
   background:#fff;
   border-radius:1rem;
   border:1px solid #eee;
   box-shadow: 0 4px 18px rgba(0,0,0,0.18);
   padding:1rem;
   z-index:6;
}

.napEmpresa{
   font-weight:700;
   color:#19374f;
   margin-bottom:0.5rem;
}

.napFila{
   font-size:0.9rem;
   margin:0.35rem 0;
   color:#1e1e1e;
}

.napFila a{
   color:#1e1e1e;
   text-decoration:none;
}

.napFila a:hover{
   text-decoration:underline;
   color:#f35525;
}

.napFila i{
   color:#35aca8;
   margin-right:0.4rem;
   width:1.1rem;
   text-align:center;
}

@media (max-width: 767.98px){
   .napPanel{
      box-sizing:border-box;
      position:fixed;
      bottom:16px;
      left:16px;
      right:16px;
      top:auto;
      width:auto;
      max-width:none;
      border-radius:1rem;
      max-height:50vh;
      overflow-y:auto;
      box-shadow: 0 4px 18px rgba(0,0,0,0.25);
   }
}



.iwtsp-fixed-perfil{
    font-size:38px;
    color:rgba(255, 255, 255,1);
    margin:0px 0px 0px -1px;
    
}

.iwtsp-fixed-perfil:hover{
    font-size:38px;
    color:rgba(0,187,45,1);
}




.iwtsp-fixed{
    font-size:42px;
    color:rgba(255, 255, 255,1);
    margin:0px 3px 3px 2px;
    
}

.iwtsp-fixed:hover{
    font-size:42px;
    color:rgba(0,187,45,1);
}

.bwtsp-fixed:hover{
   background-color:rgba(255,255,255,1);
}


.embalaje-metodos-lineclass{
    display: flex;
    justify-content: space-around;
    align-items:center;
    flex-wrap: wrap; 
    width:90%;
    margin:1% 0 1% 5%;
}

.metodos-pago-container{
    transform:scale(0.7);
}




/*CSS PARA EL MENÚ DE LA PÁGINA*/

:root {
  --primColor: white;
  --secoColor: #555555;
  --cornerRad: 10px;
  --white:white;
  --black:#14b8ce;
  --navMenu:white;
  --summary:white;
  --primOrange: #f35525;
  --sumborderColor: white;
  --ancho: 100%;
  --spaceLateral: 2%;
  --columnas: 3;
  --sizeCol: calc(var(--ancho) / var(--columnas));
  --sizeColFull: calc(var(--sizeCol) - var(--spaceLateral));  
}

#menuSimpleId details {
  margin: 20px;
  width:100%;
}
#menuSimpleId summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--primOrange);
  border: 2px solid var(--sumborderColor);
  border-radius: var(--cornerRad);
  color: var(--summary);
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: transform 200ms ease-in-out 0s;
}
#menuSimpleId summary:hover {
  transform: scale(1.1);
}
#menuSimpleId summary::marker {
  font-size: 0;
}
#menuSimpleId summary::-webkit-details-marker {
  display: none;
}
#menuSimpleId summary .icon-menu-cerrado {
  display: none;
}
#menuSimpleId details[open] summary .icon-menu-abierto {
  display: none;
}
#menuSimpleId details[open] summary .icon-menu-cerrado {
  display: inline-block;
}
#menuSimpleId details[open] .menu {
  animation-name: menuAnim;
}


.menu {
  height: 0;
  width: 220px;
  padding-right:3%;
  border-radius: var(--cornerRad);
  background-color: var(--primColor);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  word-wrap: break-word;
  font-size:14px;
  animation: closeMenu 300ms ease-in-out forwards;
}

.menu a {
  padding: 12px 24px;
  margin: 0 16px;
  color: var(--secoColor);
  align-items: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
  text-align: left;
  transition: filter 200ms linear 0s;
}
.menu a:nth-of-type(1) {
  padding-top: 24px;
}
.menu a:nth-last-of-type(1) {
  border-bottom: none;
}
.menu a:hover {
  filter: brightness(200%);
}
#menuSimpleId details::before {
  content: "← ";
  color: var(--white);
  position: absolute;
  margin-left: 50px;
  padding: 10px 10px;
  opacity: 1;
}
#menuSimpleId details[open]::before {
  animation: fadeMe 300ms linear forwards;
}
@keyframes menuAnim {
  0% {
    height: 0;
  }
  100% {
    height: 230px;
  }
}
@keyframes fadeMe {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeMeText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}


/*CERRANDO EL CSS PARA EL MENÚ DE LA PÁGINA
https://html-online.com/articles/image-align-center/
*/



.embalaje-producto-lineclass{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem,1fr));
  padding:0% 3% 0% 3%;
  height:auto;
}



.embalaje-news-lineclass{
  display: block;
  width:74%;
  padding:0% 13% 1% 13%;
  height:auto;
}



.embalaje-producto-lineclass-list{
  padding:0% 3% 0% 3%;
  height:auto;    
}


.embalaje-marcas-lineclass{
  width:94%;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem,1fr));
  padding:1% 1% 0% 1%;
  vertical-align: middle;
  height:auto;
  border-top:0px solid gray;
  border-bottom:1px solid gray;
  background:white;
  margin:0 0 0% 2%;
  justify-content: center;
  align-content:center;
}


.container-carusel-class{
   align-items: center;  
   display:inline-block;
}

.container-producto-class{
    box-sizing: border-box;
	border:silver solid 1px;
	height:auto;
	padding:2% 1% 1% 2%;
	width: var(--sizeColFull);
	margin:1% 1% 1% 1%;
	border-radius:5px;
}


.container-producto-class-perfil{
	border:pink solid 0px;
	height:auto;
	padding:2% 1% 0% 1%;
	width: 100%;
	margin-right:0%;
}

.container-producto-class-news{
	height:auto;
	margin: 2% 0px 0px 0px;
	background-color:#f9f9f9;
	border-radius:14px;
	padding:16px 20px 20px 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.container-producto-class-list{
	border:pink solid 0px;
	height:auto;
	padding:1% 3% 1% 3%;
	margin-bottom:2%;
	background-color:rgba(178,235,242,0.3);
	border-radius:12px;
	
}


.containerImg{
	box-sizing: border-box;
	border-top: solid gray 0px;
	border-bottom: dashed gray 1px;
    display: table-cell;
    vertical-align: middle;
    width:var(--sizeColFull);
    /*esto le da el tamaño calculado*/
}



.containerGoogle{
	box-sizing: border-box;
	border-top: solid gray 0px;
	border-bottom: dashed gray 1px;
    display: flex;
    vertical-align: middle;
    width:100%;
    
    /*esto le da el tamaño calculado*/
}



.containerImgPerfil{
	box-sizing: border-box;
	border-top: solid gray 0px;
    display: table-cell;
    vertical-align: middle;
    width:100%;
}


.containerImgMarcas{
	box-sizing: border-box;
	border-top: solid gray 0px;
	border-bottom: dashed gray 0px;
    display: block;
    vertical-align: middle;
    align-items: center;
}

.containerImg img{
	border:orange solid 0px;
	margin:0px 0px 0px 0px;
	width:100%;
    object-fit: cover;
    object-position: bottom;	
	bottom:0px;
	height: 300px;
	align-items: center;
}



.containerImgPerfil img{
	border:orange solid 0px;
	margin:0px 0px 0px 0px;
	width:100%;
    object-fit: cover;
    object-position: bottom;	
	bottom:0px;
	height: 300px;
	align-items: center;
	border-radius:30px;
}


.containerImgMarcas img{
	border:orange solid 0px;
	margin:0px 0px 0px 0px;
	width:100%;
	bottom:0px;
	height:auto;
	align-items: center;
}


.embalaje-titulo-list{
  color:red;
  border-bottom: solid silver 0px;
  padding:10px;
  overflow:hidden;
}

.embalaje-titulo-list h3{
  color:black;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding:0px;
  font-size:1rem;
  margin:0px;
}

.embalaje-titulo-list h4{
  color:red;
  padding:5px 0px 5px 0px;
  margin:0px;
  font-size:1rem;
  font-weight:normal;
}

.embalaje-titulo-list h5{
  color:black;
  padding:0px;
  margin:10px 0px 5px 10px;
  font-size:0.9rem;
  font-weight:bold;
}

.embalaje-titulo-list h6{
  color:gray;
  padding:0px;
  margin:8px 0px 0px 0px;
  font-size:0.8rem;
  margin-bottom:8px;
}



.embalaje-titulo{
  color:red;
  border-bottom: solid #ff6363 3px;
  padding:10px;
  overflow:hidden;
  height:110px;
}

.embalaje-titulo-news{
  color:red;
  border-bottom: solid silver 1px;
  padding:10px;
  height:auto;
}


.embalaje-titulo h3{
  color:black;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding:0px;
  font-size:0.8rem;
  margin:0px;
}

.embalaje-titulo > h3.box-title-serv{
  color:black;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: visible;
  padding:0px;
  font-weight:normal;
  font-size:1rem;
  margin:0px;
}




.embalaje-titulo-news h3{
  color:black;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  padding:0px;
  font-size:0.5rem;
  margin:0px;
}


.embalaje-titulo-news-gen{
  color:#777;
  border-bottom: none;
  padding:14px 0 0 0;
  height:auto;
}

.embalaje-titulo-news-gen h3{
  color:#1e1e1e;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  padding:0px;
  font-size:1.15rem;
  margin:0 0 6px 0;
}

.embalaje-titulo-news-gen h3 a{
  color:#1e1e1e;
  text-decoration:none;
}

.embalaje-titulo-news-gen h3 a:hover{
  color:#f35525;
}

.embalaje-titulo-news-gen .box-subtitle{
  font-size:0.8rem;
  font-weight:normal;
  text-transform:capitalize;
  margin:0 0 8px 0;
}




.embalaje-titulo h4{
  color:red;
  padding:0px;
  margin:5px 0px 0px 0px;
  font-size:0.8rem;
  font-weight:normal;
}


.embalaje-titulo-news h4{
  color:red;
  padding:5px 0px 0px 0px;
  margin:0px;
  font-size:1rem;
  font-weight:normal;
}


.embalaje-titulo h5{
  color:black;
  padding:0px;
  margin:10px 0px 5px 0px;
  font-size:0.9rem;
  font-weight:bold;
}

.embalaje-titulo h6{
  color:gray;
  padding:0px;
  margin:8px 0px 0px 0px;
  font-size:0.8rem;
  margin-bottom:8px;
}


.embalaje-titulo:hover > #horarios{
  display: block;
}


#horarios{
  display: none;
  background-color:white;
  margin:-118px 5px 5px -2px;
  position:relative;
  width:98%;
  padding:2%;
  border-radius:10px;
  border:1px solid gray;
}


.divParrafoAmpliadoClass:hover > #desColegio{
  display: block;
}


#desColegio{
  display: none;
  background-color:#FDEDEC;
  /*margin:-118px 5px 5px -2px;*/
  position:relative;
  width:94%;
  padding:3%;
  border-radius:10px;
  border:1px solid gray;
  font-size:1rem;
}



.label-condition{
	float:left;
	position:absolute;
}


.label-box{
	float:left;
	position:absolute;
	margin-left:0px;
	background-color:#7EC259;
	color:white;
	font-size:11px;
	font-weight:bold;
	padding:4px;
}

.container-producto-class-news .label-box{
	float:none;
	position:static;
	display:inline-block;
	background-color:#35aca8;
	border-radius:20px;
	padding:5px 14px;
	letter-spacing:0.03em;
}


.label-box a{
	text-decoration:none;
	color:white;
}



.label-box-supl{
	float:left;
	position:absolute;
	margin-left:0px;
	background-color:rgba(127,197,54,1);
	color:white;
	font-size:11px;
	font-weight:bold;
	padding:4px;
}


.label-box-supl a{
	text-decoration:none;
	color:white;
}



.label-box-list{
	margin-left:0px;
	background-color:#7EC259;
	color:white;
	font-size:11px;
	font-weight:bold;
	padding:4px;
}


.label-box-list a{
	text-decoration:none;
	color:white;
}




.embalaje-titulo h6 a{
	color:gray;
	text-decoration:none;
}

.embalaje-titulo h3 a{
	text-decoration:none;
	color:black;
}


/* CSS CARD SECTIONS*/

.bd-callout-orange {
    border: 1px solid #F4F6F6;
    border-left-color:#7F8E9A;
    background-color:#f8f8f9;
    color:gray;
}

.bd-callout-blue {
    border: 1px solid #F4F6F6;
    border-left-color:#5bc0de;
    background-color: #D0F1FF;
    color:gray;
}

.bd-callout-green {
    border: 1px solid #F4F6F6;
    border-left-color:#7CC912;
    background-color: #EBFFD0;
    color:gray;
}

.bd-callout-magenta {
    border: 1px solid #F4F6F6;
    border-left-color:red;
    background-color: #feeaea;
    color:gray;
}


.bd-callout {
    padding: 0rem;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-left-width: 2.55rem;
    border-radius: 0.0rem;
}


/* CIERRE CSS CARD SECTIONS*/




/* CSS FOOTER SECTIONS*/
.footerClass {
    width: 100%;
    background-color: #f35525;
    display: table-row;
    font-size:1.3rem;
}

.footLeft {
    color: white;
    width: 8%;
    display: table-cell;
    font-weight: bold;
    border: solid #f35525 0px;
	padding:3% 0px 3% 3%;
	font-size-adjust: 0.40;
}

.footCenter {
    color: white;
    width: 1%;
    display: table-cell;
    border: solid #f35525 0px;
}

.footRight {
    color: white;
    width: 20%;
    display: table-cell;
    border: solid #f35525 0px;
	padding:3% 0px 3% 3%;
	font-size-adjust: 0.40;	
}

.embalaje-afiliado-lineclass{
    font-size:11px; 
    background-color:silver;
    padding:1% 3% 1% 3%;
    
}

.embalaje-privacity-lineclass{
    font-size:11px; 
    background-color:#fdf8be;
    padding:0.5% 3% 0.5% 3%;
}

/*  CSS VIDEOS YOUTUBE SECTIONS*/

.youtube {
  background-color: #000;
  margin-bottom: 0px;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.youtube img {
  width: 100%;
  top: -16.82%;
  left: 0;
  opacity: 0.7;
}
.youtube .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
  cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
  position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}



.celdaPadre {
  padding:0% 13% 1% 13%;
  display: flex; /* Utiliza Flexbox para organizar los div */
  flex-wrap: wrap; /* Permite que los div se envuelvan cuando no quepan en el ancho disponible */
  align-items: center;
  border:0px solid silver;
}

.celda-izquierdo{
  width: 49.5%;
  padding:1%;
  margin:0 0.5% 0 0;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid gray;
}


.celda-derecho {
  width: 49.5%;
  padding: 1%;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid gray;
  margin:0 0 0 0.5%;
}


.celda-izquierdo img {
  border-radius: 7px;
}

.celda-derecho img {
  border-radius: 7px;
}



/*ELEMENTOS PARA EL TOP MENU*/



#top ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 5px 15px 5px 5px;
  overflow: hidden;
  background-color: #F8F9F9;
  border: 0px solid #e7e7e7;
}

#top ul.topnav li {float: left;}

#top ul.topnav li a {
  display: block;
  color: #1e1e1e;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight:bold;
}

#top ul.topnav li a:hover:not(.active) {background-color: #fbd9cf;}

#top ul.topnav li a.active {background-color:#f35525;color:white;}

#top ul.topnav li.right {float: right;}

#topInicio{border-radius: 5px;}
#topInicio:hover{border-radius: 5px;}
#topInicio:hover:not(.active){border-radius: 5px;}
#topInicio.active{border-radius: 5px;}





.celdaPadre {
  display: flex; /* Utiliza Flexbox para organizar los div */
  flex-wrap: wrap; /* Permite que los div se envuelvan cuando no quepan en el ancho disponible */
  border:0px solid silver;
}

.celda-izquierdo{
  width: 49.5%;
  padding:1%;
  margin:0 0.5% 0 0;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid gray;
}


.celda-derecho {
  width: 49.5%;
  padding: 1%;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid gray;
  margin:0 0 0 0.5%;
}


.celda-izquierdo img {
  border-radius: 7px;
}

.celda-derecho img {
  border-radius: 7px;
}


.flexy-continer {
  display: flex;
  flex-direction: row;
  text-align: left;
}

.flexy-item-left {
  padding: 10px;
  flex: 100%;
  text-align: left;
}

.flexy-item-right {
  padding: 3%;
  flex: 0%;
  text-align: left;
  font-size:0.8em;
}




/* CIERRE CSS FOOTER SECTIONS*/


@media (max-width: 767.98px) {
    
    .flexy-continer{
        flex-direction: column;
    }
    
    .divClassImageComplemento{
        display:block;
    	padding:0% 3% 1% 3%;
    	width:94%;    
    	border: solid orange 0px;	
    	margin:0;
    	margin-top:10px;
    }
    
    .classImageComplemento{
        display:block;
    	width: 100%;
    	height: auto;
    	border: solid yellow 0px;
    	padding:0;
    	margin:0;
    }   
    
    .divClassVideoComplemento > object{
         	width:100%;   
         	height:50%;
    }  
    
    .logo-web{
        position: fixed;
        min-height: 70px;
    	/*height:90px;*/
        width: 200px;
        text-align: right;
        word-wrap: break-word;
    	top:0px;
    	margin-top:16px;
    	z-index:2;
    	margin-left:20%;
    }
    
    
    .logo-web-institucion{
    	margin-left:calc(50% + 40px);
    	margin-top:16px;
    }
    
    
    .parent {
        display: block;
    }
    
    .parent-2-col {
        display: block;
        padding:2% 4% 0 2%;
    }
    
    .narrow {
      width: 100%;
      background: rgba(99,172,152,0.2);
      /* Just so it's visible */
    }
    
    .wide {
      width:98%;
      /* Grow to rest of container */
      background: white;
      padding:0% 2% 1% 2%;
      border-right:0px;
      /* Just so it's visible */
    }
    
    .wide_2 {
      width: 100%;
      background: lightblue;
      /* Just so it's visible */
    }
    
    .wide-2-col {
      width: 98%;
      background:#F8F9F9;
      padding-bottom:6%;
      /* Just so it's visible */
    }

    /* Aditiva vía el 8vo parámetro de seccion_dos_col() — no toca .wide-2-col para
       no afectar a los demás layouts que la comparten. Separa la imagen del texto
       que queda arriba en mobile (parent-2-col pasa a display:block). */
    .imagenComplementoAireMobil {
      margin-top: 20px;
    }


    .narrow_2 {
      width:98%;
      /* Grow to rest of container */
      background: white;
      padding:0% 2% 1% 2%;
      border-right:0px;
      /* Just so it's visible */
    }     
    

    .narrow-2-col {
      width:98%;
      /* Grow to rest of container */
      padding:2% 2% 0% 2%;
      border-right:0px;
      background:#F8F9F9;
      /* Just so it's visible */
    }
    
.olGrid{
    margin-right:5%;
    counter-reset: li-counter;
    list-style-type: none; /* Elimina la numeración predeterminada */
    padding-left: 0; /* Opcional: elimina el relleno por defecto del <ol> */    
}    
    

.higtligthBlack{
    width:93%;
}    


.higtligthOrange{
    width:93%;
    
}

.higtligthYellow{
    width:93%;    
}
    
	 .bloqueAds{
		width: 89%;
		align-items: center;
		text-align:center;
		margin:0% 3% 0% 3% !important;
		padding:0% 3% 2% 3% !important;		 
	}   
	
	 .bloqueSocial{
		width: 89%;
		align-items: center;
		text-align:center;
		margin:0% 3% 0% 3% !important;
		padding:0% 3% 2% 3% !important;		 
	}   
	

	.bwtsp-fixed{
	   position: fixed; 
	   height:40px;
	   bottom:100px;
	   right:10%;
	   word-wrap: break-word;
	   border:red solid 0px;
	   padding:15px;
	   background-color:rgba(0,187,45,1);
	   margin-top:20%;
	   width:40px;
	   border-radius: 50%;
	   border:1px solid rgba(39,170,225,1);
	   display: inline-block;  
	   z-index:5;
	}    
 

	.boton-fixed{
	   position: fixed; 
	   height:40px;
	   bottom:25px;
	   right:10%;
	   word-wrap: break-word;
	   border:red solid 0px;
	   padding:15px;
	   background-color:rgba(255,255,255,1);
	   margin-top:20%;
	   width:40px;
	   border-radius: 50%;
	   border:1px solid rgba(39,170,225,1);
	   display: inline-block;  
	   z-index:5;
	}
	
	
    .celda-izquierdo,
    .celda-derecho {
        width: 100%;
        margin:3% 0 0 0;/* Ambos div ocuparán todo el ancho en pantallas pequeñas */
      }

    .container-producto-class{
	    border:pink solid 0px;
	    height:auto;
	    padding:2% 1% 0% 1%;
	    width:98%;
	    margin-right:0%;    	
    }
    
 
    .grid-container-fila-top{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(21rem,1fr));
      grid-gap: 10px;
      background-color:white;
      margin:2% 0% 2% 0%;
    }  
    
    
     .containerImgPerfil{
    	box-sizing: border-box;
    	border-top: solid gray 0px;
        display: block;
        vertical-align: middle;
        width:100%;
    }   
    

    .containerImgPerfil img{
    	border:orange solid 0px;
    	margin:0px 0px 0px 0px;
    	width:99%;
        object-fit: cover;
        object-position: bottom;	
    	bottom:0px;
    	height: 400px;
    	align-items: center;
    	border-radius:30px;
    }


     .clDer{
        padding:1% 3% 1% 3%;
        background-color:#D3FCEF;
        border-radius: 30px 30px 30px 30px;
        }
        
    .clIzq{
        padding:1% 3% 1% 3%;
    }
    
    
    .embalaje-titulo h3{
          white-space:normal;
    }    
    
    
    .divClassFlotante{
    	padding:0% 1% 0% 1%;
    	width:80%;
    	margin-left:8%;
    	text-align: left; 
    	font-size:1.2rem;
    	font-family: 'Poppins', Roboto, verdana, sans-serif;
    	position: fixed;
        word-wrap: break-word;
        background-color:white;
        border:solid silver 1px;
    	top:10%;
    	z-index:3;
    }    
    
    h2.internasTituloClass{
      font-size:1.3rem;
    }
      
      
    #top ul.topnav li.right, 
    #top ul.topnav li {float: none;}
    #topInicio{display:none;}      
    #top ul.topnav {padding: 5px;}
      
 
 .separador-seccion{
	border:0px;
	color:white;
	background:white;
	margin:4%;
}


.classDataUnoPerfil{
    background-color:#E8F8F5;
    padding:5% 6% 5% 6%;
    margin:0;
}

.classDataOne{
    background-color:rgba(0,187,45,1);
    padding:5% 6% 5% 6%;
    margin:0;
    border-radius:20px;
}

.classDataDosPerfil{
    background-color:#F8F9F9;
    padding:5% 6% 5% 6%;
    margin:0;
}

.classDataDosPerfilArbnb{
    background-color:#ff6363;
    padding:5% 6% 5% 6%;
    margin:0 0 3 0;
    border-radius:20px;
}



#colImg{display:none;}
 

.inpsearch{
    margin:2% 1% 1% 2%;
    padding:2% 1% 2.2% 2%;
    width:97%;

}

.card-panel{
     width:80%;
     margin:0 7% 0 7%;
     padding: 0 0 0 0;
     border:solid 1px silver;
     position:absolute;
     z-index:5;   
}

.urlSearch{
    text-decoration:none;
    color:#14b8ce;
    font-size:0.8rem;
    font-weight:bold;
}

.searchResLi{
    font-size:0.8rem; 
    color:silver;
}

.searchItems{
    padding:0 2% 0 2%; 

}


.divClassFijo{
	width:100%;
}


.curveBoton{
    margin: 4% 1% 2% 3%;
    width:350px;
}


.lineMigaPanServ{
    margin:30px 0 0 0;
    font-size:10px;
}

.lineMigaPan{
    margin:50px 0 0 0;
    font-size:10px;
    height:auto;
    min-height:28px;
    padding:6px 4%;
    /* Bug real 2026-09-17: hereda width:99% de la regla de escritorio (arriba en este
       mismo archivo) -- sin box-sizing:border-box, 99% + 8% de padding (4% cada lado)
       = 107% del ancho real, desborda la página en mobile. Reportado en la ficha de
       Casa Malibú: ancho de página > 100% y los botones flotantes (position:fixed,
       right:5%) quedaban pegados/cortados contra el borde derecho -- mismo origen: con
       la página desbordada, el navegador calcula ese right:5% contra un viewport de
       layout más ancho que el visual. Las fichas no cargan templatemo-villa-agency.css
       (que sí trae un reset universal *{box-sizing:border-box}, pero solo en la home),
       así que acá hace falta declararlo explícito.  */
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
}

.lineMigaPan ol{
    display:inline-block;
    white-space:nowrap;
    padding:0;
}

.lineMigaPan ol li{
    float:none !important;
    display:inline-block !important;
    vertical-align:middle;
    white-space:nowrap !important;
}

.lineMigaPan ol li:last-child{
    max-width:110px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    vertical-align:middle;
}

.divClassImageTopPortadaParallax{
    background-attachment:scroll !important;
}


.urlBotonWtRed{
    text-decoration:none;
    color:white !important;
    border:1px rgba(0,187,45,1) solid;
    padding:2% 4% 2% 4%;
    border-radius:18px;
    background:rgba(0,187,45,1);
    text-align:center;
    margin-right:5%;
    margin-left:5%;
}


.urlBotonFcRed{
    text-decoration:none;
    color:white !important;
    border:1px #10439F solid;
    padding:2% 4% 2% 4%;
    border-radius:18px;
    background:#10439F;
    margin-right:5%;
    margin-left:5%;
}


.urlBotonTwRed{
    text-decoration:none;
    color:white !important;
    border:1px #14b8ce solid;
    padding:2% 4% 2% 4%;
    border-radius:18px;
    background:#14b8ce;
}



.urlBotonAirRed{
    text-decoration:none;
    color:white !important;
    border:1px #ff6363 solid;
    padding:2% 4% 2% 4%;
    border-radius:18px;
    background:#ff6363;
}

.urlBotonBanner{
    text-decoration:none;
    color:white !important;
    border:1px #f35525 solid;
    font-size:16px;
    padding:2% 3% 2% 3%;
    border-radius:18px;
    background:#f35525;
}


.urlBotonBannerBig{
    text-decoration:none;
    color:white !important;
    border:1px #14b8ce solid;
    font-size:16px;
    padding:2% 3% 2% 3%;
    border-radius:18px;
    background:#14b8ce;
}



.urlBotonComplemento{
    border:1px rgba(255, 104, 70,1) solid;
    padding:1.5% 5% 1.5% 5%;
    border-radius:16px;
    background:rgba(255, 104, 70,1);
}



.urlBotonItRed{
    width:100%;
    text-decoration:none;
    color:white !important;
    border:1px #d0417e solid;
    padding:2% 4% 2% 4%;
    border-radius:18px;
    background:#d0417e;
    margin-right:5%;
    margin-left:5%;
} 


.urlBotonYtRed{
    text-decoration:none;
    color:white !important;
    border:1px red solid;
    padding:2% 4% 2% 4%;
    border-radius:18px;
    background:red;
}
 
 
.textParallaxClass > div{
    width:70%;
    margin:25% 3% 5% 3% !important;
    font-size:38px;
}

.image-cajita-center{
    display:block;
    width:100px;
    height:100px;
    margin:0 auto 15px auto;
    border-radius:50%;
    object-fit:cover;
}

.wide-image-cajitas{
    display:none;
 }
 
 
.boton-cajita-center{
    display:block;
    width:30%;
}

.wide-boton-cajitas{
    display:none;
 } 
 

 .wide-boton-cajitas-center{
  width:80%;
  background:rgba(127,197,54,1);
  padding:3% 4% 3% 4%;
  border-radius:30px;
  margin:15px 0px 15px 0px;
 }
 
  .wide-boton-cajitas-center > a{
  text-decoration:none;
  color:white;
  font-weight:bold;
  width:100%;
 }

 
.parent-cajitas-defecto{
  padding:1% 2% 1% 2%;
}

.divClassPortadaMarcaTitulo{
	padding:0% 3% 0% 3%;
}
    
.divParrafoPortadaClass{
	padding:0% 3% 1% 3%;
    width:94%;	
}    
    
.categoria-culster-lineclass{
  padding:0% 3% 0% 3%;
}  

.divClassImagePortada{
	height:280px;
}

.divClassPortadaEtiquetaTitulo{
	padding:0% 3% 0% 3%;	
}

.divParrafoPortadaClassRecords{
	padding:0% 3% 0% 3%;
	width:94%;
}

.divClassInternasTitulo{
	padding:0% 3% 0% 3%;
}


.celdaPadre {
  padding:0% 3% 1% 3%;
}


.map-responsive{
    width:90%;
    margin:2% 5% 2% 5%;
}


ins.adsbygoogle > div >iframe{

    width:100% !important;
    padding:3% 6% 3% 6% !important;
    border-width:2px !important;
    box-sizing: border-box;
}

.map-responsive_2{
    padding-bottom:48%;
    margin-top:6%;
}


}

/* Tarjetas de oferta (Ventas/Servicios) en la ficha de Establecimiento — mismo lenguaje
   visual que ya usa la home en "Conoce nuestras propiedades" (templatemo-villa-agency.css:
   .properties .item / .category / .direccion-establecimiento / .main-button), portado acá
   bajo nombres propios para no cargar el framework CSS completo de la home en esta página. */
.institOfertaGrid{
    display: grid;
    /* 3 columnas en desktop, igual que la grilla de la home (col-lg-4). A 4 las cards
       quedan muy angostas para el layout B (precio + CTA en fila, foto legible). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    box-sizing: border-box;
}

@media (max-width: 991px){
    .institOfertaGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
    .institOfertaGrid{ grid-template-columns: 1fr; }
}

.institOfertaItem{
    background-color: #fafafa;
    border-radius: 10px;
    /* variante B (2026-09-08): mismo lenguaje que la card de la home -- categoría
       sobre la foto, ritmo apretado, precio + CTA en fila con hairline. Escala base 4. */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.institOfertaFoto{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.institOfertaItem img{
    border-radius: 10px;
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    margin: 0;
}

.institOfertaCategoria{
    position: absolute;
    top: 16px;
    left: 16px;
    /* z-index 1: sobre la foto pero por DEBAJO del navbar/logo fijos (z-index 2).
       Con 2 el badge se superponía al navbar al hacer scroll. */
    z-index: 1;
    background-color: #fbd9cf;
    font-weight: 500;
    border-radius: 5px;
    font-size: 14px;
    color: #1e1e1e;
    padding: 8px 14px;
    line-height: 1.2;
    display: inline-block;
    margin: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .40);
}

/* Banner "Sin disponibilidad" en la ficha del Establecimiento (campo Ruko, alta
   2026-09-16), debajo del H1. Mismo rojo de aviso que el badge de las cards. */
.fichaSinDisponibilidad{
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #c0392b;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    border-radius: 8px;
    padding: 10px 18px;
    margin: 0 0 16px 0;
}

.fichaSinDisponibilidad i{
    font-size: 18px;
}

/* Badge "Sin disponibilidad" (campo Ruko, alta 2026-09-16). Bug real 2026-09-18:
   estaba arriba-derecha, pero la categoría (arriba-izquierda) en esta card puntual
   incluye " en Arriendo"/" en Venta" (layoutCategoria.php) -- con ambos textos largos
   (ej. "Apartaestudio en Arriendo" + "Sin disponibilidad") suman más ancho que la foto
   y se superponen, confirmado con Citadinno en /apartamentos-en-arriendo-centro-
   internacional-bogota. Movido abajo-derecha: el chip de modalidad (abajo-izquierda,
   ej. "Por días") es mucho más corto, ahí sí entran los dos sin chocar. */
.institOfertaSinDisponibilidad{
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 1;
    background-color: #c0392b;
    color: #fff;
    font-weight: 500;
    border-radius: 5px;
    font-size: 13px;
    padding: 8px 14px;
    line-height: 1.2;
    display: inline-block;
    margin: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .40);
}

/* Chip de modalidad sobre la foto (ej. "Por días" cuando estanciasCortas=true).
   Abajo-izquierda, mismo lenguaje que los chips de specs de la card de la home. */
.institOfertaChip{
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .94);
    color: #1e1e1e;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .30);
}

.institOfertaChip i{
    font-size: 13px;
    opacity: .75;
}

.institOfertaDireccion{
    font-size: 13px;
    color: #4a4a4a;
    margin: 0;
    word-wrap: break-word;
}

.institOfertaTitulo{
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    /* 2 líneas máximo -> la fila de precio queda alineada en toda la grilla */
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.institOfertaTitulo a{
    color: #1e1e1e;
    text-decoration: none;
}

.institOfertaPago{
    /* Precio a la izquierda, CTA a la derecha en la misma fila; si no entran juntos
       el CTA baja solo sin romper. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #eaeaea;
}

.institOfertaPrecio{
    font-size: 19px;
    color: #f35525;
    font-weight: 600;
    margin: 0;
    text-align: left;
    white-space: nowrap;
}

.institOfertaBoton{
    text-align: left;
}

.institOfertaBoton a{
    display: inline-block;
    background-color: #1e1e1e;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    padding: 0 18px;
    border-radius: 25px;
    transition: all .3s;
    text-decoration: none;
    white-space: nowrap;
}

.institOfertaBoton a:hover{
    background-color: #f35525;
    color: #fff;
}

/* Botón de envío de los formularios de contacto (Institución/Nodos/Categoría) — no tenía
   ninguna regla CSS propia, solo el color inline del fondo, sin estado hover. */
.classbutton{
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.classbutton:hover{
    background-color: #f35525 !important;
    border-color: #f35525 !important;
}