:root{
	--cafe : #be614d;
	--cafe2: #80320c;
	--background : "../imgs/fondos/fondo_tutus.jpg"; 
    --back_color : rgba(20,20,20,0.3);
    --button    : #acd1c0;
    --button_h  : #f08383;
	--titles    : #f08383;
    --hover     : rgba(255,195,65,0.2);
    --focus	    : #f08383;
    --boton_1   : #acd1c0;
    --boton_2   : #acd1c0;
    --principal : #acd1c0;
    --secundario: #f08383;
}

body, html { font-family: 'Roboto', sans-serif; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; color: #777; font-weight: 300; width: 100% !important; height: 100% !important;}
/*h2 { font-weight: 500; font-size: 34px; color: #333; text-transform: uppercase;}
h3 { font-size: 22px; font-weight: 500; color: #333;}
h4 { font-size: 24px; text-transform: uppercase; font-weight: 400; color: #333;}
h5 { text-transform: uppercase; font-weight: 700; line-height: 20px;}
hr { height: 4px; width: 70px; text-align: center;	position: relative;	background: var(--verde); margin: 0 auto; margin-bottom: 20px;	border: none;}*/



.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: transparent;}
.navbar-toggle { border-radius: 0;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: var(--cafe);	border-color: var(--cafe);}
.navbar-default .navbar-toggle:hover>.icon-bar { background-color: #FFF;}
.navbar-default{ background: none; border:none}
.navbar-default .navbar-nav > li > a{ font-size: 2rem;}
.navbar-default .navbar-nav > li > a:hover{ color:orange}

.on { background-color: rgba(246,241,238,0.9) !important; padding: 20px 0 !important;}
.on a{ color:var(--cafe) !important}
.in{ background:#555 !important}

.intro {	width: 100%; height:100%; padding: 0; background: url(../inicio/imgs/fondos/imagen.jpg) no-repeat center bottom; background-size:cover;}
.overlay {	background: rgba(255,255,255,0.20); width: 100%; height: 100%; padding:0 10rem; box-sizing:border-box;}
.intro h1 { color: #fff; font-size: 68px; font-weight: 400; margin-top: 0; margin-bottom: 10px; letter-spacing: -1px;}

#planes{ padding:5% 0; background:#e9deda; background-size: auto;}
#footer { background: #f6f1ee; padding: 50px 0 20px 0;}
#footer .social { margin-bottom: 50px;}
#footer .social ul li { display: inline-block;	margin: 0 20px;}
#footer .social i.fa { font-size: 26px; padding: 4px; color: #159543; transition: all 0.3s;}
#footer .social i.fa:hover { color: #eee;}
#footer p {	font-size: 15px;}
#footer a {	color: #999;}

.canales{ display:grid; grid-template-columns:repeat(4, 1fr); gap:30px}
.ficha_canal{ background:#f6f1ee; color:#333; text-align: center; transition: all 0.5s linear;}
.ficha_canal img { width:100%; height:300px; object-fit:cover}
.ficha_canal h3{ color:var(--cafe); font-weight: normal;}
.ficha_canal a{color:var(--cafe); display: inline-block; border:1px solid #be614d; border-radius:10px; padding:8px 20px; margin:20px 0}
.ficha_canal:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.20); transition: all 0.5s linear;}


.div_canal{ width: 100%; position: relative;}
.div_canal img{ width: 100%}
.div_canal__par{ position:absolute; bottom:0px; width:50%; background:rgba(125,56,15,0.8); text-align: center; color:white; box-sizing: border-box; padding: 20px; right:0}
.div_canal__impar{ position:absolute; bottom:0px; width:50%; background:rgba(125,56,15,0.8); text-align: center; color:white; box-sizing: border-box; padding: 20px;}

.contenedor{ width: 80%; margin-left: 10%;}
.cafe{ color:var(--cafe) !important}
.link_tutu{ border:1px solid var(--cafe); border-radius:10px; color:var(--cafe) !important; padding: 10px 20px;  display:inline-block !important; text-align: center;}

#presentacion{ font-family: tutu4; font-size: 3rem;}
#presentacion div{ margin:50px 0}
#presentacion .titulo{ letter-spacing: 20px; font-size: 10rem; text-shadow: 1px 1px 5px rgba(0,0,0,0.20);}
#contenedor{ z-index: 20;}

.button{ margin: 20px 0;}
.contenido{ background: white;}