* {
	    box-sizing: border-box;
	}

	p {
	    font-size: 13px;

	}

	p1 {
	    font-size: 11px;

	}

	p2 {
	    font-size: 10px;

	}

	p3 {
	    font-size: 14px;
	    color: rgb(255, 255, 255);
	    font-weight: bold;

	}

	p4 {
	    font-size: 12px;
	    color: rgb(63, 133, 164);
	    font-weight: bold;

	}

	p5 {
	    font-size: 15px;
	    color: rgb(44, 121, 141);
	    font-weight: bold;

	}


	a {
	    text-decoration: none;
	    color: rgb(15, 124, 124);
	    font-weight: bold;
	}







	.icon-bar {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 5;
	    max-width: 400px;
	    margin: 0 auto;
	    display: flex;
	    justify-content: space-between;
	    background-color: #ffffff;
	    padding: env(safe-area-inset-bottom) 0;
	    /* notch-safe en iOS */
	    
	    z-index: 1000;
	}


	.icon-bar .nav-link {
	    flex: 1;
	    text-align: center;
	    padding: 0.1em 0;
	    border-bottom: 4px solid transparent;
	    transition: background-color 0.3s, border-color 0.3s;
	}

	.icon-bar .nav-link img {
	    width: 80px;
	    /* usa píxeles o rem para consistencia */
	    height: auto;
	}

	.icon-bar .nav-link:hover {
	    background-color: #a0e1f5;
	}

	.icon-bar .nav-link.active {
	    background-color: #60c6d8;
	    border-bottom-color: #00a1ba;
	}







	/* Add a gray background color with some padding */
	body {
	    font-family: Arial;
	    padding: 0px;
	    background: #ffffff;
	}




	.content {
	    max-width: 1080px;
	    margin: 0px;
	    background: white;
	    padding: 0px;
	    font-size: 11px;
	    font-family: Arial, Helvetica, sans-serif;
	}


	/* Header/logo Title */
	.row1 {
	    padding: 0px;
	    max-width: 1080px;
	    margin: auto;
	}

	/* Header/Blog Title */
	.header {
	    padding: 0px;
	    text-align: center;
	    background: white;
	}

	/* Create two unequal columns that floats next to each other */
	/* Left column */
	.leftcolumn {
	    float: left;
	    width: 65%;
	}

	/* Right column */
	.rightcolumn {
	    float: left;
	    width: 35%;
	    padding-left: 3px;
	}






	/* Fake image */
	.fakeimg {
	    background-color: white;
	    width: 100%;
	    padding: 0px;
	}


	.fakeimg2 {
	    background-color: #ffffff;
	    width: 100%;
	    padding: 0px;

	}


	.fakeimg22 {

	    display: flex;
	    align-items: baseline;



	    @keyframes pulse {
	        0% {
	            transform: scale(1);
	        }

	        50% {
	            transform: scale(1.07);
	        }

	        100% {
	            transform: scale(1);
	        }
	    }

	    .heart.animate {
	        animation: pulse 0.3s ease;
	    }
	}

	.fakeimg23 {

	    padding: 0;


	}



	.contador {
	    font-size: 0.8rem;
	    color: lab(0% 0 0);
	}





	.fakeimg21 {
	    background-color: #ffffff;
	    width: 100%;
	    padding: 0px;
	    height: 15vh;
	}

	.fakeimg3 {
	    background-color: white;
	    width: 100%;
	    padding: 6px;


	}


	.fakeimg4 {
	    background-color: white;
	    width: 100%;
	    margin-top: 150px;
	}

	.fakeimg5 {
	    background-color: rgb(255, 255, 255);
	    width: 100%;
	    padding: 15px;

	}

	.fakeimg6 {
	    background-color: white;
	    width: 100%;
	    margin-top: 1px;
	    padding: 3px;

	}



	/* Add a card effect for articles */
	.card {
	    background-color: white;
	    padding: 0px;
	    margin-top: 2px;
	    font-size: 15px;
	}


	.card2 {
	    background-color: white;
	    padding: 0px;
	    margin-top: 2px;
	    width: 100%;
	    height: 68vh;
	    align: center;
	    border-radius: 3px;

	}


	.card3 {
	    background-color: rgb(128, 206, 223);
	    padding: 0px;
	    margin-top: 2px;
	    width: 100%;
	    height: 55vh;
	    align: center;


	}




	/* Clear floats after the columns */
	.row:after {
	    content: "";
	    display: table;
	    clear: both;
	}

	/* Footer */
	.footer {
	    padding: 20px;
	    text-align: right;
	    background: white;
	    font-size: 13px;
	    margin-top: 20px;
	}

	hr.rounded {
	    border-top: 1x solid rgb(0, 140, 153);
	    border-radius: 1px;
	}



	/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 1090px) {

	    .leftcolumn,
	    .rightcolumn {
	        width: 100%;
	        padding: 0;
	    }
	}


	/* Popup container - can be anything you want */
	.popup {
	    position: relative;
	    display: inline-block;
	    cursor: pointer;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    width: 100%;
	}

	/* The actual popup */
	.popup .popuptext {
	    visibility: hidden;
	    width: 250px;
	    background-color: #555;
	    color: #fff;
	    text-align: center;
	    border-radius: 6px;
	    padding: 8px 0;
	    position: absolute;
	    z-index: 1;
	    bottom: 20%;
	    left: 50%;
	    margin-left: -80px;
	}

	/* Popup arrow */
	.popup .popuptext::after {
	    content: "";
	    position: absolute;
	    top: 100%;
	    left: 50%;
	    margin-left: -5px;
	    border-width: 5px;
	    border-style: solid;
	    border-color: #555 transparent transparent transparent;
	}

	/* Toggle this class - hide and show the popup */
	.popup .show {
	    visibility: visible;
	    -webkit-animation: fadeIn 1s;
	    animation: fadeIn 1s;
	}

	/* Add animation (fade in the popup) */
	@-webkit-keyframes fadeIn {
	    from {
	        opacity: 0;
	    }

	    to {
	        opacity: 1;
	    }
	}

	@keyframes fadeIn {
	    from {
	        opacity: 0;
	    }

	    to {
	        opacity: 1;
	    }
	}


	.heart {
	    font-size: 20px;
	    color: green;
	    cursor: pointer;
	    transition: transform 0.2s;




	}

	.heart:hover {
	    | transform: scale(1.2);
	}

	.heart.animate {
	    transform: scale(1.3);
	}

	.btn-share {
	    background-color: #ffffff;
	    border: 0px;
	    cursor: pointer;
	    position: relative;
	    bottom: -7px;


	}