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(213,32,49,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;
}

/* Rojo de marca 2026-09-11 (antes naranja #f35525). Solo se usa en este botón. */
.urlBotonBanner{
    text-decoration:none;
    color:white !important;
    border:1px rgba(213,32,49,1) solid;
    padding:1.5% 2.5% 1.5% 2.5%;
    border-radius:16px;
    background:rgba(213,32,49,1);
    font-weight:bold;
    transition:background-color .2s, border-color .2s;
}

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


.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 rgba(213,32,49,1) solid;
    padding:1.5% 5% 1.5% 5%;
    border-radius:16px;
    background:rgba(213,32,49,1);
    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:rgba(213,32,49,1);
	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;
}


/* Sin fondo/padding propio 2026-09-11: usaba el mismo verde que .urlBotonWtRed (el botón
   que envuelve), quedaba una tarjeta verde encima de un botón verde -- se veía como una
   barra vacía. Solo se usa acá (el botón de WhatsApp/llamada de la ficha), sin riesgo. */
.classDataOne{
    margin:0;
    padding:2% 3%;
    text-align:left;
    box-sizing:border-box;
}

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

/* Label + valor en la misma fila 2026-09-11 -- antes el <hr style="border:0px">
   (decorativo, invisible por el border:0) que usan las labels de la ficha de
   institución forzaba un salto de línea (hr es block-level), dejando cada campo
   en 2 líneas (label arriba, valor abajo) y duplicando el alto de la sección.
   Se oculta ese hr puntual (scoped a esta ficha, no a los separadores reales
   entre secciones, que son <hr class="separador..."> aparte) y se pone la fila
   en flex para que valor quede al lado de la label, no debajo. */
.divParrafoPortadaClassRecords-ficha .classDataUno,
.divParrafoPortadaClassRecords-ficha .classDataDos{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    column-gap:6px;
    row-gap:2px;
}
.divParrafoPortadaClassRecords-ficha .classDataUno hr,
.divParrafoPortadaClassRecords-ficha .classDataDos hr{
    display:none;
}

/* Ícono a la izquierda de la label 2026-09-11 -- el <i> vive dentro del <b>
   (después del texto de la label), así que se libera el <b> con display:contents
   (el texto y el ícono pasan a ser hijos flex directos del <p>, sin que el <b>
   deje de darles negrita) y se le da order:-1 al ícono para que quede primero,
   sin tocar el PHP. */
.divParrafoPortadaClassRecords-ficha .classDataUno b,
.divParrafoPortadaClassRecords-ficha .classDataDos b{
    display:contents;
}
.divParrafoPortadaClassRecords-ficha .classDataUno i,
.divParrafoPortadaClassRecords-ficha .classDataDos i{
    order:-1;
    margin-right:2px;
}

.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 rgba(213,32,49,1);
    /*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 rgba(213,32,49,1) 0px;	
	padding:0;
	margin:0;
	margin-top:-5px;
}


.divClassImageTopPortadaParallax{

	width: 100%;
	border: solid rgba(213,32,49,1) 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 rgba(213,32,49,1) 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;
	flex-wrap:wrap;
	gap:8px;
	color:rgba(213,32,49,1);
	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:#fde7e9;
}

.kickerIcono i{
	font-size:12px;
	color:rgba(213,32,49,1);
}

.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:rgba(213,32,49,1);
	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:rgba(213,32,49,1);
	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: rgba(213,32,49,1);
	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;
}

/* Rojo de marca 2026-09-11: este div es fixed y cubre todo el ancho del header (90px) por
   encima de .headerClass -- aunque .headerClass ya sea rojo, este fondo blanco lo tapaba. */
.menu-superpuesto{
    position: fixed;
    min-height: 90px;
	height:90px;
    width: 100%;
    text-align: left;
    word-wrap: break-word;
    background-color: rgba(213,32,49,1);
	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;
}

/* Badge "Bilingüe" junto al kicker "Institución Educativa" 2026-09-11 -- vive
   adentro de .kickerModerno (display:flex, gap:8px), mismo color #14b8ce que
   ya usa el ícono de "¿Es bilingüe?" en la ficha. Probado antes superpuesto
   al logo (position:absolute) y se veía peor -- se movió acá.
   line-height:1 explícito -- sin esto hereda el line-height de un ancestro
   (~29px, pensado para el texto grande del título), que infla la caja del
   badge muy por encima de lo que pide el padding declarado (3px). */
.fichaKickerBadgeBilingue{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:#14b8ce;
    color:#fff;
    font-size:0.7rem;
    line-height:1;
    font-weight:700;
    letter-spacing:normal;
    text-transform:none;
    padding:3px 10px;
    border-radius:10px;
    white-space:nowrap;
}

.fichaKickerBadgeBilingue i{
    font-size:0.8rem;
}

/* Badge "Categoría ICFES" junto al kicker 2026-09-12 -- mismo box-model que
   .fichaKickerBadgeBilingue (mismo contenedor flex), pero color/fondo vienen
   inline por PHP (varían por categoría A+/A/B/C/D, ver $coloresIcfes en
   layoutInstitucion.php) en vez de fijos acá. Inspirado en el sello/cinta que
   usan varios colegios para promocionar su categoría ICFES, pero como badge
   chico consistente con el resto de la ficha en vez de una imagen aparte. */
.fichaKickerBadgeIcfes{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:0.7rem;
    line-height:1;
    font-weight:700;
    letter-spacing:normal;
    text-transform:none;
    padding:3px 10px;
    border-radius:10px;
    white-space:nowrap;
}

.fichaKickerBadgeIcfes i{
    font-size:0.8rem;
}


.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;
    /* Bug real encontrado 2026-09-16: el fix a 65% del commit c04b2a6 quedó adentro del
       @media (max-width: 767.98px) más abajo, así que en desktop seguía con el valor viejo
       (26%) y el mapa se veía bajito. Mismo valor acá para que quede parejo en ambos. */
    padding-bottom:65%;
    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:rgba(213,32,49,1);
}

.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%;
  /* Bug real encontrado 2026-09-16: sin este tope, una imagen portrait (ej. la
     de la categoria "Jardines Infantiles", 1200x1800) mide más que el texto
     vecino y por el stretch de .parent-2-col termina estirando TODA la fila
     a su alto natural -- el texto corto queda forzado a esa misma altura y
     deja un hueco vacío enorme debajo. Con el tope, object-fit:cover recorta
     la imagen en vez de mandar el alto de la fila. */
  max-height:450px;
  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:rgba(213,32,49,1);
 }
 
 .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;
}

/* Rojo de marca 2026-09-11 -- sin esto el fondo era blanco y el logo (texto blanco,
   pensado para el nav rojo del home) quedaba invisible, solo se veían el ícono y las
   estrellas doradas. */
.headerClass{
	height:auto;
	min-height:80px;
	overflow:visible;
	background-color:rgba(213,32,49,1);
}


.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:rgba(213,32,49,1);
}


.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:rgba(213,32,49,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;
}

/* Aditiva, solo Artículos: el rojo de marca ya es el color dominante de la página
   (kickers/badges), el botón flotante se pierde contra tanto rojo 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 rgba(213,32,49,1);
   box-shadow: 0 1px 6px rgba(0,0,0,0.25);
   z-index:5;
}

.btop-fixed-perfil .icon-fixed-perfil{
   color:rgba(213,32,49,1);
}

.btop-fixed-perfil:hover{
   background-color:rgba(213,32,49,1);
}

.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:rgba(213,32,49,1);
}

.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*/

/* Rojo de marca 2026-09-11: --primOrange (fondo del botón hamburguesa) y --secoColor
   (texto de los enlaces del panel desplegable, antes gris) pasan a rojo. --primColor
   (fondo del panel) queda blanco -- mismo criterio que los dropdown del home (texto
   rojo sobre blanco, no panel sólido). */
:root {
  --primColor: white;
  --secoColor: rgba(213,32,49,1);
  --cornerRad: 10px;
  --white:white;
  --black:#14b8ce;
  --navMenu:white;
  --summary:white;
  --primOrange: rgba(213,32,49,1);
  --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:rgba(213,32,49,1) 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:rgba(213,32,49,1) 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:rgba(213,32,49,1) 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:rgba(213,32,49,1);
}

.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 -- rojo de marca 2026-09-11 (antes naranja #f35525) */
.footerClass {
    width: 100%;
    background-color: rgba(213,32,49,1);
    display: table-row;
    font-size:1.3rem;
}

.footLeft {
    color: white;
    width: 8%;
    display: table-cell;
    font-weight: bold;
    border: solid rgba(213,32,49,1) 0px;
	padding:3% 0px 3% 3%;
	font-size-adjust: 0.40;
}

.footCenter {
    color: white;
    width: 1%;
    display: table-cell;
    border: solid rgba(213,32,49,1) 0px;
}

.footRight {
    color: white;
    width: 20%;
    display: table-cell;
    border: solid rgba(213,32,49,1) 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: #fde7e9;}

#top ul.topnav li a.active {background-color:rgba(213,32,49,1);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 rgba(213,32,49,1) 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:rgba(213,32,49,1) 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;
}

/* mismo fix que la definición de arriba (2026-09-11) -- variante mobile */
.classDataOne{
    margin:0;
    padding:2% 3%;
    text-align:left;
    box-sizing:border-box;
}

.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%;
    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 rgba(213,32,49,1) solid;
    font-size:16px;
    padding:2% 3% 2% 3%;
    border-radius:18px;
    background:rgba(213,32,49,1);
}


.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%;
}

/* Contraparte mobile de .fichaSeccionSueltaAlineada (owncss.css, ~línea 3844)
   -- acá el padding base de .divParrafoPortadaClassRecords es 3%, no 13%.
   width ajustado 2026-09-12: .divParrafoPortadaClassRecords es content-box
   (width:94% define el ancho del CONTENIDO, no de la caja completa), así
   que agregar padding-right NO angosta el hijo (el acordeón) -- confirmado
   con Playwright, el borde derecho del acordeón no se movió un solo
   píxel tras probarlo. "Datos institucionales" y compañía viven además
   DENTRO de .tabcontent (padding fijo 16px a cada lado, tabs.css), que le
   resta 32px de ancho a su contenido respecto de este wrapper. Para
   igualar el ancho real del acordeón (no solo el margen izquierdo) hay
   que restar esos mismos 32px acá con width, no con padding. */
.fichaSeccionSueltaAlineada{
	padding-left:calc(3% + 16px);
	width:calc(94% - 32px);
}

.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:65%;
    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: #fde7e9;
    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);
}

/* 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: rgba(213,32,49,1);
    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: rgba(213,32,49,1);
    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: rgba(213,32,49,1) !important;
    border-color: rgba(213,32,49,1) !important;
}

/* Barra de contacto fija (sidebar) 2026-09-11 -- WhatsApp/"quiero ser
   contactado"/asesor siempre visibles mientras se lee el tab de Información,
   en vez de solo aparecer si se entra al tab Contacto. Una sola columna en
   mobile (el sidebar cae debajo del contenido, sin sticky -- position:sticky
   sobre una columna que ya ocupa el 100% del ancho no aporta nada y solo
   empuja contenido); dos columnas con sidebar pegajoso desde 900px. */
.fichaGridConTabs{
    display:grid;
    grid-template-columns: 1fr;
    gap:20px;
    align-items:start;
    width:94%;
    margin:0 auto;
}

.fichaGridPrincipal{
    min-width:0;
}

/* Bug real 2026-09-12: los <div> genéricos con los que se envuelven Videos/
   Destacados/Galería/Formulario en .fichaGridConTabs (fuera del bloque de
   pestañas propiamente dicho, que ya tiene .fichaGridPrincipal con su propio
   min-width:0 arriba) no tenían este reset -- un grid item con
   min-width:auto (default) no se achica por debajo del ancho intrínseco de
   su contenido. Con el slider de fotos (varias fotos de 200px en una sola
   fila flex sin wrap), eso hacía desbordar el grid entero de la página
   (2654px de sección en un viewport de 1440px, confirmado con Playwright).
   Selector por hijo directo para no afectar divs anidados sin relación. */
.fichaGridConTabs > div{
    min-width:0;
}

/* Secciones "sueltas" (no dentro de una pestaña real -- hoy solo la Galería
   de fotos, ver layoutInstitucion.php) que necesitan el mismo margen
   izquierdo que "Datos institucionales" y compañía. Esas viven dentro de
   .tabcontent (tabs.css, padding fijo 16px, igual en todos los tamaños) Y
   .divParrafoPortadaClassRecords (13% en desktop, 3% en mobile -- ver el
   @media (max-width:767.98px) más arriba, línea ~3610). El 16px es fijo;
   el porcentaje SÍ cambia por breakpoint. Bug real encontrado 2026-09-12:
   esta regla debe ir DENTRO de un @media (min-width:768px) -- sin eso,
   por no tener condición propia, ganaba SIEMPRE (a cualquier ancho) sobre
   la versión mobile de arriba, sin importar cuál esté más abajo en el
   archivo (una regla sin @media no es "la de desktop" solo por estar
   escrita pensando en desktop). */
@media (min-width:768px){
    .fichaSeccionSueltaAlineada{
        padding-left:calc(13% + 16px);
        width:calc(74% - 32px);
    }
}

/* Contenedor de los cuadros del sidebar ("Contáctanos" + "Agendar cita",
   cada uno un .fichaGridSidebar aparte) -- el sticky va acá, en el conjunto,
   no en cada cuadro por separado (si no, los dos quedarían pegados uno
   encima del otro al mismo top). */
.fichaGridSidebarCol{
    display:flex;
    flex-direction:column;
    gap:20px;
    min-width:0;
}

.fichaGridSidebar{
    background:#fff;
    border:1px solid #f1f1f1;
    border-radius:12px;
    padding:20px;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.fichaGridSidebarCita p{
    margin:0 0 14px 0;
    font-size:.85rem;
    color:#7f8e9a;
}

/* $reserva es un link de texto plano (.urlNormalRed, reusado en toda la
   ficha) -- acá es el único CTA de su propio cuadro, se estira a botón
   completo para tener el mismo peso visual que "Quiero ser contactado". */
.fichaGridSidebarCita a.urlNormalRed{
    display:block;
    text-align:center;
    background:#dd051d;
    color:#fff !important;
    font-weight:700;
    padding:12px;
    border-radius:8px;
}

.fichaGridSidebarCita a.urlNormalRed:hover{
    background:#b60417;
}

.fichaGridSidebar h3{
    margin:0 0 14px 0;
    font-size:1rem;
    font-weight:700;
    color:#dd051d;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.fichaSidebarWhatsapp{
    text-align:center;
}

/* .urlBotonWtRed es un botón "pill" angosto pensado para ir en línea junto a
   otros botones de redes -- acá es el único CTA del sidebar cuando aparece,
   se estira a lo ancho para que se vea consistente con "Quiero ser
   contactado" (mismo bloque, mismo peso visual) en vez de quedar angosto. */
.fichaSidebarWhatsapp a.urlBotonWtRed{
    display:block;
    padding:12px;
    border-radius:8px;
    margin:0 0 14px 0;
}

.fichaSidebarDato{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-size:.9rem;
    color:#1e1e1e;
    word-break:break-word;
}

.fichaSidebarDato i{
    color:#14b8ce;
    font-size:1.1rem;
    flex-shrink:0;
}

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

.fichaSidebarDato a:hover{
    text-decoration:underline;
}

.fichaSidebarBtn{
    display:block;
    text-align:center;
    background:#f5b02b;
    color:#111315;
    font-weight:700;
    padding:12px;
    border-radius:8px;
    text-decoration:none;
    margin:14px 0;
}

.fichaSidebarBtn:hover{
    background:#e0a025;
    text-decoration:none;
    color:#111315;
}

.fichaSidebarAsesor{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #f1f1f1;
    font-size:.9rem;
    color:#1e1e1e;
}

.fichaSidebarAsesor i{
    color:#14b8ce;
    font-size:1.2rem;
    margin-top:2px;
}

.fichaSidebarAsesorTexto{
    min-width:0;
}

.fichaSidebarAsesorTexto span{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.fichaSidebarRedes{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #f1f1f1;
}

.fichaSidebarRedes h4{
    margin:0 0 10px 0;
    font-size:.8rem;
    font-weight:700;
    color:#7f8e9a;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.fichaSidebarRedesIconos{
    display:flex;
    gap:10px;
}

.fichaSidebarRedesIconos a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    color:#fff;
    font-size:1.1rem;
    text-decoration:none;
}

@media (min-width: 900px){
    .fichaGridConTabs{
        grid-template-columns: 1fr 320px;
        /* Sidebar corrida un poco a la izquierda 2026-09-12 -- la columna del
           sidebar (320px) es la última del grid, queda pegada al borde
           derecho por definición. Angostar el grid (94%->88%) sin tocar el
           margen izquierdo corre el borde derecho hacia adentro, y con él la
           columna del sidebar -- el contenido principal (1fr) no cambia su
           borde izquierdo, solo se angosta un poco. */
        width:88%;
        margin:0 auto 0 3%;
    }
    .fichaGridSidebarCol{
        position:sticky;
        top:20px;
    }
}

/* Colapsable de Niveles educativos / Grados académicos 2026-09-11 -- mismo
   truco checkbox+label que ya usa el popup "¿Qué significa esto?" (sin JS
   nuevo): label siempre visible arriba, contenido oculto hasta hacer click.
   Corregido el mismo día: el label NO lleva classDataUno/classDataDos --
   esas clases traen ".. b{display:contents}" y ".. i{order:-1}" (para poner
   el ícono a la izquierda en las filas label+valor normales), y acá el
   label tiene DOS <i> (ícono del campo + chevron); con esas reglas ambos
   íconos terminaban con order:-1 y el texto quedaba empujado a la derecha
   por el justify-content:space-between. Fondo/paleta propios, sin heredar. */
.fichaCollapseCheckbox{
    display:none;
}

.fichaCollapseTrigger{
    display:flex !important;
    align-items:center;
    gap:8px;
    cursor:pointer;
    margin:0;
    background:#F8F9F9;
    padding:10px 3%;
}

.fichaCollapseTrigger:hover{
    background:#F1F3F3;
}

.fichaCollapseTrigger b{
    flex:1;
    font-weight:700;
}

.fichaCollapseChevron{
    color:#7f8e9a !important;
    font-size:1rem !important;
    transition:transform .2s;
    flex:0 0 auto;
}

.fichaCollapseContent{
    display:none;
    padding:10px 3% 14px 3%;
    background:#F8F9F9;
}

.fichaCollapseCheckbox:checked ~ .fichaCollapseContent{
    display:block;
}

.fichaCollapseCheckbox:checked ~ .fichaCollapseTrigger .fichaCollapseChevron{
    transform:rotate(180deg);
}

/* Acordeón de sección completa (ej. "Oferta académica") 2026-09-12 -- a
   diferencia de .fichaCollapse* (colapsables chicos DENTRO de una sección,
   ej. Niveles/Grados) esto envuelve la sección entera con <details> nativo,
   con tarjeta propia (borde+sombra suave) para que se note como un bloque
   aparte del resto de la columna, no solo una fila más. Mismo mecanismo que
   ya usa complementosInstitucion() (details()), pero con estilo real en vez
   del <details> sin CSS que usan los Complementos hoy. */
.fichaAcordeonSeccion{
    display:block;
    margin:18px 0;
    border:1px solid #EEE0E1;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 2px 10px rgba(221,5,29,0.06);
}

.fichaAcordeonSeccion > summary{
    display:flex;
    align-items:center;
    gap:10px;
    list-style:none;
    cursor:pointer;
    padding:14px 5%;
    background:linear-gradient(0deg,#FFF7F7,#FFF7F7);
    color:#dd051d;
    font-weight:700;
    font-size:0.95rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    transition:background .15s;
}

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

.fichaAcordeonSeccion > summary:hover{
    background:#FCEBEC;
}

.fichaAcordeonSeccion > summary i:first-child{
    font-size:1.2rem;
}

.fichaAcordeonSeccion > summary span{
    flex:1;
}

.fichaAcordeonChevron{
    font-size:1.1rem !important;
    transition:transform .2s;
}

.fichaAcordeonSeccion[open] > summary .fichaAcordeonChevron{
    transform:rotate(180deg);
}

.fichaAcordeonContenido{
    padding:16px 5% 20px 5%;
}

/* Bug real 2026-09-12: un <details class="fichaAcordeonSeccion"> CERRADO
   (sin "open") oculta su contenido con el mecanismo nativo del navegador
   (content-visibility, no display:none) -- pero con la galería de fotos
   adentro (slider flex sin wrap, varias fotos de ancho fijo en una sola
   fila), ese contenido seguía empujando el document.body.scrollWidth de
   TODA la página aunque no se viera (confirmado: mismo overflow con JS
   completamente deshabilitado, o sea no es un tema de GLightbox). Forzar
   display:none explícito acá sí saca el contenido del cálculo de overflow
   por completo. */
.fichaAcordeonSeccion:not([open]) > .fichaAcordeonContenido{
    display:none;
}

/* Mapa dentro del acordeón "Ubicación" 2026-09-12 -- .map-responsive (compartida
   por Producto/Venta/Servicio/Genero/Categoria/Institución, NO se toca la regla
   base) trae width:74%+margin:13% pensado para el flujo suelto de página
   completa que tenía antes acá. Mismo ancho efectivo que las filas de datos que
   lo anteceden (.divParrafoPortadaClassRecords-ficha: width:94% + padding 3%),
   solo dentro de este contenedor -- ahí sí se ve alineado con el resto. */
.fichaAcordeonContenido .map-responsive{
    width:94%;
    margin:2% 3% 2% 3%;
}

/* Galería de fotos dentro del acordeón "Galería de fotos" 2026-09-12 -- mismo
   criterio que el mapa de arriba: .galeriaEstablecimientoSliderWrap trae un
   padding:0 34px fijo (espacio para los botones prev/next del slider) que,
   sumado al 5% de .fichaAcordeonContenido, dejaba las fotos más adentro que
   el título del acordeón. Margen negativo para cancelar ese padding extra y
   que las fotos queden al mismo margen que el resto de la ficha. */
.fichaAcordeonContenido .galeriaEstablecimientoSliderWrap{
    margin:0 -34px;
}

/* Pestaña "Rendimiento académico" 2026-09-12 -- el <canvas> de Chart.js trae
   width/height fijos como atributos (requisito de Chart.js para el aspect
   ratio interno), por eso el max-width acá en vez de tocar los atributos.
   Movida de acordeón a pestaña propia (mismo día) para poder sumar varios
   gráficos (evolución/desglose/matriculación) sin amontonar "Información".
   .fichaIcfesContenido envuelve TODO (resumen/tendencia/subtítulos/gráficos)
   con el MISMO padding horizontal que .divParrafoPortadaClassRecordsPerfil
   (el <p> que arma tabsLineEstablecimientos alrededor del contenido de la
   pestaña) -- ese <p> no puede contener bloques (regla HTML5) y el navegador
   lo auto-cierra apenas encuentra el primer <div>/<h4> de acá adentro, así que
   nada de esto queda realmente anidado dentro de ese padding. Un único
   contenedor con el mismo valor (en vez de padding suelto por elemento) es lo
   que garantiza que TODO -- texto y gráficos -- quede al mismo margen. */
.fichaIcfesContenido{
    padding:0% 3%;
    box-sizing:border-box;
}
.fichaIcfesResumen{
    margin:0 0 8px 0;
}
.fichaIcfesSubtitulo{
    margin:20px 0 8px 0;
}
/* Línea de tendencia -- propia fila (antes iba pegada como texto inline dentro
   del resumen y era fácil no notarla). Ícono/color SIEMPRE visibles, incluso
   en "estable" -- no solo cuando sube o baja. */
.fichaIcfesTendencia{
    margin:0 0 16px 0;
    font-weight:600;
    font-size:0.9rem;
}
.fichaIcfesTendenciaSube{
    color:#2e7d32;
}
.fichaIcfesTendenciaBaja{
    color:#c62828;
}
.fichaIcfesTendenciaEstable{
    color:#555;
}
.fichaIcfesGraficoContenedor{
    width:100%;
    margin:0 0 24px 0;
}
.fichaIcfesGraficoContenedor canvas{
    max-width:100%;
    height:auto;
}
.fichaIcfesError{
    margin:0;
    color:#666;
}

/* Badge de "Características especiales" 2026-09-11 -- antes mostraba el
   corchete crudo del dato ("[campestre]") como texto plano; ahora es un pill
   con ícono, color de texto/borde y fondo propios por categoría (los 3 vienen
   inline por PHP -- 6 valores reales confirmados + fallback verde genérico). */
.fichaBadgeCaracteristica{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-weight:600;
    font-size:0.85rem;
    padding:4px 12px;
    border-radius:14px;
    border:1.5px solid currentColor;
}

/* Badge "Estado del colegio" 2026-09-12 -- mismo estilo que fichaBadgeCaracteristica,
   color/fondo vienen inline por PHP según el estado (verde=Activo, gris=cualquier
   otro valor real que aparezca a futuro). */
.fichaBadgeEstado{
    display:inline-block;
    font-weight:600;
    font-size:0.85rem;
    padding:4px 12px;
    border-radius:14px;
    border:1.5px solid currentColor;
}

.fichaBadgeCaracteristica i{
    font-size:1rem;
}