@charset "utf-8";

@import url("font-awesome.min.css");
@import url("custom.flexslider.css");
@import url("framework.css");
  @import url('https://fonts.googleapis.com/css?family=Muli:300,700|Nunito');
 


/* Rows
--------------------------------------------------------------------------- */
.row0, .row0 a{font-family:'Muli'; font-size: 14px; }
.row0 a:hover{font-family:'Muli'; font-size: 14px; color: #a7ebe4!important; }
.row1{border-bottom:1px solid;}
.row2{border-bottom:1px solid;}
.row3, .row3 a{}
.row4, .row4 a{}
.row5{border-top:1px solid;}


/* mios
------------------------------------------------------------------------ */
.textoblanco{ color: white;}
.textoblancochico{ color: white; font-size: 12px; line-height: 13px!important;}
.textonaranja{ color:#ee9f00;}
.textoceleste{ color:#0a9184;}
.textorojo{ color:#E81212;}
.textonegro{ color: black;}
.textoblanco3b{ color:#FFF; line-height: 36px;}
.blanco{ color:#FFF;}
.margenleft{ margin: 0 10px;}
.textoblanco_super_gde{ font-size:18px; color:#FFF;}
.textoblanco_gde{ font-size:16px; color:#FFF;}
.todoanchos { margin:-10px 0 10px 0!important; }
.bordevideos { width:440px; height:320px;} 
.subtitulos { font-size:20px; font-weight: bold; font-family:'Muli';} 
.subtitulos a { font-size:20px; font-weight: bold; font-family:'Muli';} 
.subtitulos a:hover{ font-size:20px; font-weight: bold; font-family:'Muli'; color:#999;} 
.rollimagen {  }
.rollimagen:hover{ opacity: 0.5;}
.sep{background-color: aqua; height: 2px; margin-top: 35px; margin-bottom: 35px;}
.textomuychico{ font-size:12px!important; text-align: right!important;
}
.textomuychicoleft{ font-size:12px!important; text-align: left!important;
}

.subtitulos_home { font-size:20px; font-weight: bold; font-family:'Muli'; color: #24bbaf;} 

#subrayado {border-bottom: solid;  border-bottom-left-radius: 10px; border-bottom-color:#18c3b2 }

#anchotabla  { width: 50%!important; 
margin: 0 auto; /* centra el div horizontalmente */
  text-align: center; /* centra el texto/elementos inline dentro */
}

#divnuevotitulo { height: 70px; 
    background-color: #18c3b2!important;
    padding: 10px 15px; border-radius: 20px 20px 0 0; /* Esquinas superiores redondeadas */
   
}

.redondeoimagen {
   border-radius: 10px; /* Le da bordes suavemente redondeados */
 
}


#divcursosinterior { 
  height: 120px;
    background-color: #ffffff !important;
    padding: 10px 15px;
    border-radius: 0 0 20px 20px; /* Esquinas inferiores redondeadas */
    border: 1px solid #d7d7d7; /* Borde más fino con color */
}

.alejomargenizq { padding-left: 10px;
}

.nuevo_titulo { font-size:14px!important;  font-weight: bold;  color: #ffffff; 
}

.titulo_categoria { font-size:14px!important;  font-weight: bold;  color: #18c3b2; margin-bottom: -15x;
}
.nuevocuadro
{ padding: 5px 35px 35px 35px !important;
  background-color: rgba(0, 0, 0, 0.3); /* Fondo negro con 30% de opacidad */
  border-radius: 8px;
}


/* Definimos la animación */
@keyframes parpadeo {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Aplicamos la animación al texto */
.texto-parpadeo {
  animation: parpadeo 1s infinite;
} 

.fondogrisautoridades{ background-color: #fafafa!important;  border-radius: 20px 20px 0 0; padding: 15px 0px;
}

#divnuevotituloautoridades { height: 80px; 
    background-color: #18c3b2!important;
    padding: 10px 15px; border-radius: 0 0 20px 20px; /* Esquinas superiores redondeadas */
   
}


#recuadro{background-color: #fff; padding: 0 0 0 10px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); width: 30%;}

.similh2{
    color: #353535;
    font-size: 18px;  
	line-height: 34px;
  }


#sinborde{border:none;}
/* recuadro alertas
------------------------------------------------------------------------ */
.textoalertaancha{font-size:21px!important; color:#666; line-height: 35px; align-content: center;}

#alertaancha {background-color: #fafafa; width: 780px;   margin:auto; padding:15px; margin-bottom:40px; margin-top:40px; border-radius: 30px; border: 0.50px solid #18c3b2; }


.margencolumna {border: #001333 1px solid; padding: 15px; margin-bottom: 10px; background-color: #fafafa }

.fubrayado {border-bottom: solid; border-bottom-color: #999; border-bottom-width: thin; } 

.fondogris{background-color:#fafafa!important; padding:20px; } 

#fecha { margin-top:-15px;}
.fecha{ font-size:10px; }

.textos_chicos{ font-size:12px!important;}
#fondologin {background-color: #ACACAC; width: 50%; border-radius: 10px; margin: auto;}

/* Top Bar
------------------------------------------------------------------------ */
#topbar{padding:15px 0; font-size:.8rem;  }

#topbar *{margin:0;}
#topbar ul li{display:inline-block; margin-right:10px; padding-right:15px; border-right:1px solid;}
#topbar ul li:last-child{margin-right:0; padding-right:0; border-right:none;}
#topbar i{margin:0 5px 0 0; line-height:normal;}

#topbar a:hover{color:#18c3b2;}

/* Header
----------------------------------------------------------- */
#header{}

#header #logo{margin:30px 0 30px 0;}
#header #logo h1{margin:0; padding:0; font-size:22px; text-transform:uppercase;}


/* Page Intro
--------------------------------------------------------------- */
#pageintro{padding:150px 0;}

#pageintro li article{display:block; max-width:75%; margin:0 auto; text-align:center;}
#pageintro li article *{margin:0;}
#pageintro li p:first-of-type{margin-bottom:10px; font-style:italic;}
#pageintro li .heading{margin-bottom:30px; font-size:3rem; word-wrap:break-word;}
#pageintro li p:nth-of-type(2){line-height:1.5rem;}
#pageintro li footer{margin-top:40px;}


/* Content Area
----------------------------------------------------------------- */
.container{
	padding-top: 60px;
	padding-right: 0;
	padding-bottom: 40px;
	padding-left: 0;
}

/* Content */
.container .content{}

.sectiontitle{
	display: block;
	max-width: 65%;
	margin: 0 auto 20px;
	text-align: center;
}
.sectiontitle *{margin:0;}

.services li:nth-child(-n+3){margin-bottom:50px;}/* Adds bottom margin to the first three elements only */
.services > li:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
.services article{display:block; text-align:center;}
.services article *{margin:0 0 15px 0;}
.services article > :last-child{margin-bottom:0;}
.services article .heading{font-size:1.2rem;}

.logos li:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
.logos li a{display:inline-block; max-width:100%;}

.excerpt{display:inline-block; width:100%; max-width:320px; padding-bottom:20px;}
.excerpt img{}
.excerpt .excerpttxt{
	display: block;
	position: relative;
	max-width: 84%;
	padding: 20px;
	text-align: center;
	margin-top: -60px;
	margin-right: auto;
	margin-bottom: -60px;
	margin-left: auto;
}
.excerpt .excerpttxt > ul{margin:0 0 15px 0; padding:0; font-size:.8rem;}
.excerpt .excerpttxt > ul li{display:inline-block; margin-right:8px;}
.excerpt .excerpttxt > ul li:first-child::after{margin-left:10px; content:"|";}
.excerpt .excerpttxt > ul li:last-child{margin-right:0;}
.excerpt .heading{margin:0 0 30px 0;}
.excerpt p:last-of-type{margin:0; padding:0;}

.excerptcentros{ margin-top:10px!important; font-size:12px!important; line-height:14px!important; text-align:center;}


/* Comments */
#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
#comments li{margin:0 0 10px 0; padding:15px;}
#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
#comments address{font-weight:bold;}
#comments time{font-size:smaller;}
#comments .comcont{display:block; margin:0; padding:0;}
#comments .comcont p{margin:10px 5px 10px 0; padding:0;}

#comments form{display:block; width:100%;}
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
#comments textarea{overflow:auto;}
#comments div{margin-bottom:15px;}
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}

/* Sidebar */
.container .sidebar{}

.sidebar .sdb_holder{margin-bottom:50px;}
.sidebar .sdb_holder:last-child{margin-bottom:0;}


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{
	padding: 60px 0;
}

#footer .heading{margin-bottom:50px; font-size:1.2rem;}

#footer .linklist li{display:block; margin-bottom:15px; padding:0 0 15px 0; border-bottom:1px solid;}
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
#footer .linklist li, #footer .linklist li::after{clear:both;}

#footer .contact{}
#footer .contact.linklist li, #footer .contact.linklist li:last-child{position:relative; padding-left:40px;}
#footer .contact li *{margin:0; padding:0; line-height:1.6;}
#footer .contact li i{display:block; position:absolute; top:0; left:0; width:30px; font-size:16px; text-align:center;}

#footer input, #footer button{border:1px solid;}
#footer input{display:block; width:100%; padding:8px;}
#footer button{padding:8px 18px 10px; text-transform:uppercase; font-weight:700; cursor:pointer;}


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:20px 0;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .28s ease-in-out;}
#mainav form *{transition:none !important; }

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

#sep{ height:150px;}
.sep_gris{ border-bottom: 0.5px solid #ccc; /* Línea gris muy fina */ margin-bottom: 55px;  }

.margeninferior{ margin-bottom: 55px; }

/* Navigation
--------------------------
----------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none; font-family:"Muli"; font-weight: bold; margin-top:35px; }


#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px; font-weight:bold;}

/* Top Navigation */
#mainav{}
#mainav ul{text-transform:uppercase; }
#mainav ul ul{z-index:9999; position:absolute; width:375px; text-transform:none; margin-top:0;}
#mainav ul ul ul{left:180px; top:0;}
#mainav li{display:inline-block; position:relative; margin:0 15px 0 0; padding:0;}
#mainav li:last-child{margin-right:0;}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding:30px 0;}
#mainav li li a{border:solid; border-width:0 0 1px 0;}
#mainav .drop{padding-left:15px;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}
#mainav .drop::after{top:35px; left:5px;}
#mainav li li .drop::after{top:15px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;}
#mainav ul li:hover > ul{visibility:visible; opacity:1; }

#mainav form{display:none; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:none;}
#mainav form select option{margin:5px; padding:0; border:none;}

/* Breadcrumb */
#breadcrumb{padding:60px 0 75px;}
#breadcrumb ul{margin:0; padding:0; list-style:none; text-transform:uppercase;}
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;}
#breadcrumb li a::after{top:3px; right:0; content:"\f101"; }
#breadcrumb li:last-child a{margin:0; padding:0;}
#breadcrumb li:last-child a::after{display:none;}

/* Sidebar Navigation */
.sidebar nav{display:block; width:100%;}
.sidebar nav li{margin:0 0 3px 0; padding:0;}
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
.sidebar nav a::after{top:9px; left:5px; content:"\f101";}
.sidebar nav ul ul a{padding-left:35px;}
.sidebar nav ul ul a::after{left:25px;}
.sidebar nav ul ul ul a{padding-left:55px;}
.sidebar nav ul ul ul a::after{left:45px;}

/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center;}

.faico a{color:#inherit; background-color:#353535;}
.faico a:hover{color:#FFFFFF;}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-youtube:hover{background-color:#f60002;}
.faicon-instagram:hover{background-color:#a631ac;}



/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#CBCBCB; background-color:#183153;}
a{
	color: #18c3b2;
}
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#e9b32a;}

.borderedbox{margin-top: 45px;}

.borderedbox2{border-color:#D7D7D7; padding: 45px!important;}

.colortitulos { color:#2C1382;}


.overlay{
    color: #FFFFFF;
    background-color: #F9F5F6;
}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:#183153;}

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#e9b32a; border-color:#e9b32a; border-radius: 10px; }
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

.btn2, .btn2.inverse:hover{color:#FFFFFF; background-color:#ee9f00; border-color:#ee9f00; border-radius: 10px; padding: 8px; margin-left: 20px;}
.btn2:hover, .btn2.inverse{color:#ddb158; background-color:#ee9f00; border-color:#ee9f00;}

.btnancho { padding: 20px; 10px; }

.btn5, .btn5.inverse:hover{
    color:#FFFFFF; background-color:#24bbaf; border-color:#24bbaf; border-radius: 10px; font-size: 14px;  padding: 8px;
}
.btn5:hover, .btn5.inverse{
    color:inherit; background-color:transparent; border-color:inherit;
}


blockquote::before{color:rgba(255,255,255,.2);}

.icon{color:#e9b32a; border-color:#224574;}
a > .icon:hover, .services article:hover .icon{color:#FFFFFF; background-color:#224574; border-color:#224574;}


/* Rows */
.row0, .row0 a{color:#ffffff; background-color:#18c3b2;}
.row1{color:#474747; background-color:#FFFFFF;  }
.row2{color:#474747; background-color:#EFEFEF; border-color:#D7D7D7;}
.row3{color:#474747; background-color:#FFFFFF;}
.row4{
	color: #CBCBCB;
	background-color: #0b1d36;  
}
.row5, .row5 a{
	color: #CBCBCB;
	background-color: #021125;
}
.row5{border-color:rgba(255,255,255,.1);}

.iconoblanco{
	color: #ffffff!important;
	  
}
/* Top Bar */
#topbar ul li{border-color:rgba(0,0,0,.1);}
#topbar > div:last-of-type li:first-child a{color:#e9b32a;}


/* Header */
#header #logo a{color:inherit;}


/* Content Area */
.excerpt .excerpttxt{color:inherit; background-color:#FFFFFF;}


/* Footer */
#footer .heading{color:#FFFFFF;}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(255,255,255,.1); }

#footer input, #footer button{border-color:transparent;}
#footer input{color:#FFFFFF; background-color:#353535;}
#footer input:focus{border-color:#e9b32a;}
#footer button{color:#FFFFFF; background-color:#e9b32a;}


/* Navigation */
#mainav li a{color:inherit;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#18c3b2; background-color:inherit;}
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.6);}
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#18c3b2;}
#mainav form select{color:#FFFFFF; background-color:#000000;}

#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color:#e9b32a;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#e9b32a;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#e9b32a;}

#backtotop{color:#FFFFFF; background-color:#e9b32a;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
#comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:#e9b32a;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}


/* ------------------------------- --------------------------- */
/* ------------------------------- ------------------------------------ */
/* -------------------------------- ------------------------------------- */
/* ---------------------------------------- ---------------------- 
/* Full Width Homepage Slider
--------------------------------- -------------------------------------------------------*/
#slider{position:relative; }
#slider, #slider ul{
	display: block;
	width: 100%;
	min-width: 978px;
	height: 380px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}
#slider ul, #slider li{position:absolute;}
#slider img{max-width:none;}
#slider #slidewrap{position:absolute; top:250px; left:0; width:100%; padding:20px 0; color:#FFFFFF;}
#slider #slidewrap div{width:978px; max-width:none; margin:0 auto; padding:0; text-align:center;}
#slider #slidewrap div span{display:inline-block; margin:0; padding:0; text-transform:none; font-size:42px;}

/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1148px){
	.hoc{max-width:1148px;}
}
 

/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:900px){
	.hoc{max-width:90%;}

	#topbar{}

	#header{padding:30px 0 15px;}
	#header #logo{margin:0;}

	#mainav{}
	#mainav ul{display:none; width: 80%;}
	#mainav form{display:block;}

	#breadcrumb{}

	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}


@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 50px 0; padding:0;}

	#topbar{padding-top:15px; text-align:center;}
	#topbar ul{margin:0 0 15px 0; line-height:normal;}

	#header{text-align:center;}
	#header #logo{margin-bottom:15px;}

	.sectiontitle{max-width:none; text-align:left;}
}


@media screen and (max-width:450px){
	#topbar ul li{margin-bottom:2px; padding-right:0; border-right:none;  }
	 #alertaancha { font-size: 10px!important; background-color: #fafafa; width: 80%!important;   margin:auto; padding:15px; margin-bottom:40px; margin-top:40px;  border-radius: 30px; border: 0.50px solid #18c3b2; }
	 
 #recuadro{ background-color: #fff; padding: 0 0 0 10px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); width: 90%;}
	
	 }

	 

/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}

	#pageintro li article{max-width:none; width:100%;}
	#pageintro li .heading{font-size:1.6rem;}
	
}

/* ====== NUEVO LOOK CURSOS (PEGAR AL FINAL DE TU CSS) ====== */

/* grid helper (no pisa tu framework) */
.courses-grid{margin-top:25px;}
.courses-grid > li{margin-bottom:30px;}

/* tarjeta */
.course-card{
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  transform:translateY(0);
}
.course-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(0,0,0,.09);
  border-color:#dcdcdc;
}

/* header: menos “celeste bloque” y más detalle */
.course-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px 16px 12px;
  background:linear-gradient(180deg, rgba(24,195,178,.12), rgba(24,195,178,0));
  border-bottom:1px solid rgba(0,0,0,.06);
}
.course-ico{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#183153;           /* azul del sitio */
  color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.course-ico i{font-size:18px; line-height:1;}

.course-headtxt{flex:1;}
.course-title{
  margin:6px 0 0 0;
  font-family:'Muli';
  font-size:15px;
  line-height:1.25em;
  color:#1f2a37;
  font-weight:700;
}

/* pill (acento suave, no “mar de celeste”) */
.course-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(43,85,124,.10);
  color:#2b557c;
}
.course-badge i{margin-right:6px;}

.course-badge--new{
  background:rgba(233,179,42,.18);
  color:#8a5b00;
}

/* contenido */
.course-meta{
  padding:12px 16px 4px;
  color:#4b5563;
  font-size:13px;
}
.course-meta p{margin:0 0 8px 0;}
.course-meta i{color:#18c3b2; margin-right:8px;}

.course-note{
  font-size:12px;
  color:#6b7280;
}
.course-note i{color:#2b557c;}

.course-subnote{
  margin-top:-4px;
  font-size:12px;
  color:#374151;
}

/* acciones */
.course-actions{
  padding:10px 16px 16px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

/* que tu .btn2 no se vaya a la derecha con margen fijo (solo dentro de cursos) */
.course-actions .btn2{
  margin-left:0 !important;
}

/* destacado “nuevo” */
.course-card--new{
  border-color:rgba(233,179,42,.45);
}
.course-card--new .course-ico{
  background:#e9b32a;
  color:#183153;
}

/* responsive fine-tuning */
@media screen and (max-width:750px){
  .courses-grid > li{margin-bottom:20px;}
  .course-title{font-size:14px;}
}
/* ===============================
   FORMULARIO SOCIOS – LOOK MODERNO
================================ */

.form-socios{
  max-width: 900px;
  margin: 0 auto;
}

.form-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}

.form-row label{
  width:260px;
  text-align:right;
  font-family:'Muli';
  font-weight:700;
  color:#353535;
}

.form-row input,
.form-row select{
  flex:1;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid #d7d7d7;
  font-size:14px;
  background:#fff;
}

.form-row input::placeholder{
  color:#9ca3af;
}

.form-row input:focus,
.form-row select:focus{
  border-color:#24bbaf;
  outline:none;
  box-shadow:0 0 0 2px rgba(36,187,175,.15);
}

.form-row.checkbox{
  align-items:flex-start;
}

.form-row.checkbox label{
  width:auto;
  text-align:left;
  font-weight:400;
}

.form-actions{
  text-align:center;
  margin-top:30px;
}

/* Responsive */
@media screen and (max-width:750px){
  .form-row{
    flex-direction:column;
    align-items:stretch;
  }
  .form-row label{
    width:100%;
    text-align:left;
  }
}

/* ===============================
   FORM SOCIOS – FONDO GRIS
   (PEGAR AL FINAL DEL CSS)
================================ */

/* A) Gris SOLO dentro del bloque del formulario */
.form-socios-wrap{
  background:#f3f4f6;            /* gris clarito */
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:28px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* inputs “sobre” gris */
.form-row input,
.form-row select{
  background:#ffffff;            /* blanco para que se lean bien */
}

 
 

/* Responsive: padding más chico */
@media screen and (max-width:750px){
  .form-socios-wrap{ padding:18px; border-radius:16px; }
}

@media print {
  @page { size: A4; margin: 0; }   /* margen cero */
  html, body { margin: 0 !important; padding: 0 !important; height: auto !important; }

  /* Ocultar todo */
  body * { visibility: hidden !important; }

  /* Mostrar solo el área imprimible */
  #print-area, #print-area * { visibility: visible !important; }

  /* 🔥 Forzar arriba (sin espacios raros) */
  #print-area{
    position: fixed !important;   /* en vez de absolute */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 6mm !important;      /* margen “manual” dentro */
    width: auto !important;
    transform: none !important;
    min-height: 0 !important;
  }

  /* No imprimir título */
  #print-area h1{ display:none !important; }

  /* Sacar “aire” del card */
  #print-area .card{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Tabla compacta */
  #print-area table{ width: 100% !important; border-collapse: collapse !important; }
  #print-area td{ padding: 2px 6px !important; border-bottom: 1px solid #ccc !important; }

  /* Evitar cortes raros */
  #print-area tr{ break-inside: avoid; page-break-inside: avoid; }
}

/* =========================
   BOTONES ADMIN (UNIFICAR)
   PEGAR AL FINAL
========================= */

/* todos iguales en peso/altura */
.btn{
  font-weight: 700 !important;
  padding: 12px 18px !important;
  line-height: 1 !important;
  border-width: 2px !important;
}

/* el button (Imprimir) que no es <a> */
button.btn{
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Imprimir: si usás class="btn btn-info", que se vea igual que los demás */
.btn-info{
  color:#FFFFFF !important;
  background-color:#e9b32a !important;
  border-color:#e9b32a !important;
}

/* Eliminar: rojo pero con mismo “cuerpo” que los demás */
.btn-danger,
button.btn[style*="#b00020"],
a.btn[style*="#b00020"]{
  font-weight:700 !important;
  padding:12px 18px !important;
  border-width:2px !important;
}

.testimonio {
  position: relative;
  width: 100%;
  background-color: #fafafa;
  padding: 45px 55px;
 margin-top: -4px!important;
  border-radius: 12px;
}

/* ====== TESTIMONIO: fondo full-width + contenido centrado ====== */

/* Wrapper (fondo de punta a punta, pegado arriba, corte abajo más marcado) */
.testimonio-wrap{
  width: 100%;
  margin: 0;                 /* pegado arriba */
  background: #fafafa;
  border-bottom: 2px solid #d6d6d6;  /* más oscuro para “corte” */
  border-radius: 0 0 14px 14px;      /* redondeado SOLO abajo */
}

/* Caja interna (solo para limitar ancho y dar padding) */
.testimonio{
  max-width: 900px;
  margin: 0 auto;            /* centrado */
  padding: 40px 50px;
  position: relative;
  background: transparent;   /* el fondo lo maneja el wrapper */
  border-radius: 0;          /* no redondear acá */
}

/* Texto */
.testimonio p{
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #666;
  position: relative;
  padding: 10px 18px; /* espacio para comillas si las usás */
}

/* Firma */
.testimonio cite{
  display: block;
  margin-top: 18px;
  text-align: right;
  font-size: 14px;
  color: #666;
  font-style: normal;
}

/* Mobile */
@media (max-width: 600px){
  .testimonio{ padding: 28px 22px; }
  .testimonio p{ padding: 8px 10px; }
}