.clsBackground1{
    /*background: linear-gradient(35deg, rgb(41 35 113 / 90%) 1%, rgb(5 153 255 / 90%) 69%, rgb(43 15 255 / 90%) 90%), url(../images/background-medicina-interna1.webp) ;*/
    background: linear-gradient(323deg, rgb(68 61 145 / 90%) 1%, rgb(61 176 255 / 90%) 69%, rgb(25 160 255 / 90%) 90%), url(../images/background-medicina-interna1.webp) repeat;
    /*background-size: cover;*/
    background-position: 0% 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*padding: 2rem;*/
    color: white;
    animation: moveBackground 50s linear infinite;
    -webkit-animation: moveBackground 50s linear infinite; /* Para WebKit */
}

.clsBackground2{
    background: linear-gradient(360deg, rgb(34 45 197 / 90%) 1%, rgb(61 176 255 / 90%) 69%, rgb(25 160 255 / 90%) 90%);
    background-size: cover;
    background-position: 0% 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: white;
    animation: moveBackground 50s linear infinite;
    -webkit-animation: moveBackground 5s linear infinite; /* Para WebKit */
}

@keyframes moveBackground {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}

:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --text-color: #333;
    --light-bg: #f9f9f9;
    --spacing: 1.5rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}

.medicina-interna {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing);
    padding-top:0;

}

header {
    text-align: center;
    /*padding: 3rem 0;*/
    padding-top:0;

    color: #232323;
    border-radius: 8px;
    margin-bottom: 2rem;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: white;
}

h2 {
    color: var(--primary-color);
    font-size: 2rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--secondary-color);
}

h3 {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin: 1.5rem 0 1rem;
}

p {
    margin-bottom: 1.2rem;
    text-align: justify;
}

.introduccion {
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.especialidades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.especialidad {
    background-color: var(--light-bg);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.especialidad:hover {
    transform: translateY(-5px);
}

.caracteristicas, .rol-hospitalario, .desafios, .investigacion-educacion, .habilidades {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

ul {
    list-style-position: inside;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.8rem;
    position: relative;
}

.prevencion {
    background-color: #e3f2fd;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
}

footer {
    background-color: var(--primary-color);
    color: white;
    padding: 2rem;
    border-radius: 8px;
    margin-top: 3rem;
}

footer h2 {
    color: white;
    border-bottom-color: white;
}

@media (max-width: 768px) {
    .medicina-interna {
        padding: 1rem;
    }

    .especialidades {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

/* Animaciones */
.especialidad {
    animation: fadeIn 0.5s ease-in;
}

/*@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}*/

.header-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.9));
    background: linear-gradient(rgb(31 80 128 / 80%), rgb(122 165 208 / 90%));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.header-content {
    text-align: center;
    color: white;
    max-width: 800px;
}

.header-content h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header-content p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .header-container {
        height: 300px;
    }

    .header-content h1 {
        font-size: 2rem;
    }

    .header-content p {
        font-size: 1rem;
    }
}

.flex-col{
    border: 0px solid #eaeaea;
    /*border-radius: 10px;*/
    text-align: left;
}

/*--------------------*/

/*

#Header{
	background-image:url(../images/BgHeader.png);
	background-repeat:repeat-x;
	height:85px;
	width:100%;
	position:relative;
	left:0px;
}

#Menu{
	background-image:url(../images/BgMenu.png);
	background-repeat:repeat-x;
	height:38px;
	width:1000px;
	position:relative;
	margin-left:auto; margin-right:auto;
	left:0px;
	box-shadow:1px 1px 10px #999;
	text-align:left;
}
.ulMenu{
	width:1000px; 
	position:relative; 
	margin-left:auto; 
	margin-right:auto;
}
#CenterHome{
	background-color:#325d8f;
	height:290px;
	width:100%;
	position:relative;
	left:0px;
	z-index:2;
}

#BodyHome{
	background-color:#fff;
	width:1000px;
	box-shadow:3px 2px 7px #CCC;
	margin:0 auto;
	border-radius:7px;
}

#Footer{
	margin-top:10px;
	background-color:#144378;
	height:120px;
	color:#FFF;
	width:100%;
	position:relative;
	bottom:0px;
	left:0px;
}
#Footer2{
	background-color:#103365;
	color:#FFF;
	height:60px;
	width:100%;
	position:relative;
	bottom:0px;
	left:0px;
	border-top:1px solid #666;
}

#ImgShadow{
	position:relative;
	margin:0 auto;
	width:930px;
	height:30px;
	padding-top:10px;
}
#FontStyle_1{
	font-size:11px;
	color:#ffffff;
	position:relative;
	right:-370px;
}

#TableLen {
	color:#8396a5;
	position:relative;
	bottom:-70px;
	right:-650px;
	font-size:12px;
}

#TableLen a{
	color:#8396a5;
	text-decoration:none;
}

#TableLen a:hover{
	color:#b6d4eb;
}

#TableLen a:active{
	color:#8396a5;
}

#FontFooter{
	color:#cbcbcb;
	font-size:11px;
}
#FontFooter2{
	font-family:Arial, Helvetica, sans-serif;
	color:#ffffff;
	font-size:12px;
	letter-spacing:1px;
}
#Menu ul {
	padding:0px;
	margin:0px;
}

#Menu ul li {
	float:left;
	list-style:none;
	padding:11px;
}

#Menu ul li a{
	color:#4179b2;
	text-decoration:none;
	font-size:12px;
}

#Menu ul li:hover{
	background-color:#f0f0f0;
	border-bottom:3px solid  #42a2aa;
	padding-top:8px;
}
*/

.SectionActive{
	background-color:#fff;
	box-shadow:1px 4px 10px #CCC;
}


#ImgCenter{
	width:928px;
	height:274px;
	background-image:url(../images/mobileC2.png);
	position:relative;
	z-index:2;
	margin:0 auto;
	top:26px;
	border:1px solid #E1E1E1;
}

.StyleFormat h1{
	color:#535353;
	font-size:24px;
	border-bottom:1px solid #e9ebec;
}

.StyleFormat label{
	color:#a7a7a7;
	font-size:12px;
	font-weight:600;
}

.StyleFormat p{
	color:#807f7f;
	font-size:12px;
}
.StyleFormat a{
	color:#999999;
	font-size:12px;
	text-decoration:none;
	background-color:#e5e5e5;
	padding:3px 15px;
	border-radius:3px;
	border-bottom:1px solid #cecece;
	box-shadow:1px 1px 4px #CCC;
	font-weight:bold;
}
.StyleFormat a:hover{
	box-shadow:1px 1px 6px #CCC inset;
}

.ImgStyles{
	background-color:#ebebeb;
	border:solid 1px #bfc0bf;
	padding:4px;
	box-shadow:5px 1px 10px #CCC ;
}

.TitleFirst{
	background-color:#1b95c6;
	color:#FFF;
	font-style:italic;
	font-weight:100;
	margin:0px 10px 10px 10px;
	padding:10px;
	position:relative;
	top:10px;
	font-size:25px;
}

.BigBlue{
	width:250px;
	height:600px;
	position:relative;
	left:10px;
	top:10px;
	background-color:#1b95c6;
	background-image:url(../images/search.png);
	background-repeat:no-repeat;
	background-position:160px 515px;
	padding:5px 0px 0px 10px;
}

.BigBlue h1{
	color:#fff;
	font-size:24px;
	font-weight:100;
}

.BigBlue label{
	color:#fff;
	font-size:12px;
	font-weight:600;
}

.BigBlue p{
	color:#fff;
	font-size:12px;
}
.BigBlue a{
	color:#fff;
	font-size:12px;
	text-decoration:none;
}
.BigBlue a:hover{
	text-decoration:underline;
}
.Input-Contacto{
	background-color:#f2f0f0;
	border:solid 1px #aaaaaa;
	border-radius:2px;
	padding:6px;
	
	color:#414b52;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bolder;
}
.Input-Contacto:focus{
	background-color:#fff;
	outline:none;
	box-shadow:#CFCDCD 1px 0px 9px;
	border:solid 1px #aaaaaa;
}

/*#Contacto p{
	color:#414b52;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bolder;
	margin:15px 0px 3px 0px;
}*/
.button_Generico{
	background-color:#11b4ce;
	width:100px;
	height:35px;
	border:none;
	color:#FFFFFF;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	border-radius:5px;
	cursor:pointer;
	margin:10px 0px 0px 5px;
}

#TitleMedicina{
	color:#fff;
	background-color:#325d8f;
	width:100%;
	height:30px;
	text-align:center;
	padding-top:10px;
}

.button_Generico:hover{background-color:#30353a;}
.button_Generico:active{background-color:#191a1c;}

#tblEnfermedades td{
	width:15%;
	font-weight:bold;
	color: #666;
	text-align:center;
}

.tdInferior{
	padding-bottom:28px;
}

#ulEnfermedades li {
	font-size:12px;
	color:#999;
	
}
#ulDietas li {
	font-size:14px;
	color:#999;
	height:30px;
}

#tdDieta li {
	font-size:12px;
	color:#333;
	padding-bottom:4px;
}
.h3preferir{

	font-size:12px;
	color: #096;
	font-weight:bold;
}
.h3evitar{
	font-size:12px;
	color: #F00;
	font-weight:bold;
}
#ulRecomendacion li {
	font-size:14px;
	color:#333;
	padding-bottom:10px;
}
.clsTblListaFrutas{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	border-collapse:collapse;
}
.clsTblListaFrutas table{
	width:100%;
	border:1px solid #999;
	border-collapse:collapse;
}
.clsTblListaFrutas td{
    padding:6px;
}
.clsTrTitulo{
	background-color:#093;
	font-weight:bold;
	height:25px;
}
.tdBorder{
	border-color:#DFFCDC;
	border:0px;
	
	border-collapse:collapse;
}
.clsTr1{
	background-color:#DFFCDC;
}
.clsTr2{
	background-color:#A0DC8F;
}
.clsAnchorArticle{
    color:red;
    text-decoration:underline;
}

@media (max-width: 768px) {
  .text-sm {
    font-size: 14px;
  }
  .text-center {
    text-align: center;
  }
}