:root {
    --ricale-red: #bb1010;
    --ricale-teal: #10bb66;
    --ricale-dark-teal: #1066bb;
    --ricale-white: #ffffff;
    --ricale-gray:#333;
    --bg-gray: #f4f4f4;
    --border-color: #333333 ;
}

* { padding: 0; margin: 0; box-sizing: border-box; }
body{background-color: var(--ricale-red); font-family: 'Calibri', sans-serif; }
h1 { margin:0% ; padding: .1em; text-align: center; color: var(--ricale-white); font-size: 2.5rem; }
h3 { text-align: center; color: var(--ricale-red); margin: 0 0 5px 0; }
h2 { text-align: center; color: var(--ricale-red); margin: 0 0 5px 0; border-bottom: 2px solid var(--ricale-red); padding-bottom: 5px;}
header { padding: 1em; display:flex ; justify-content: space-between; flex-wrap: wrap;align-items: center; }
.header_container { font-size: 1.5rem; color: var(--ricale-white) }
.header_buttons {align-items: center;  }
a {text-decoration: none; color: var(--ricale-white)}
ul { font-size: 1.rem; display:flex; list-style: none; }
li { cursor: pointer; color: var(--ricale-white); padding: 5px 10px; }
a:hover{ color: var(--ricale-dark-teal);font-weight: bolder;}
button { background-color: var(--ricale-white); border-radius: 4px; padding: 12px; font-weight: bold; margin: 0 10px; cursor: pointer; border: none; transition: 0.3s; }
.in_button:hover { background-color:var(--ricale-teal); color: var(--ricale-white) }
.reg_button:hover { background-color:var(--ricale-dark-teal); color: var(--ricale-white) }
.home { display: flex; flex-direction: row; min-height: 80%;}
.menu_izquierdo { min-width: 300px; color: var(--ricale-white); padding: 0px 20px 15px; }
.list_izquierdo { display: flex; flex-direction: column; font-size: 1rem; padding: 8px 0; align-self: center; gap: 2px;}
.logo_container {background-color:var(--bg-gray); border-radius: 4px;padding: 10px; text-align: center; margin-bottom: 10px; }
.logo_academy { width: 80% ;max-width: 150px;}
.panel_derecho { background-color:var(--bg-gray); display:flex; margin-right:20px;border-radius: 4px; }
.panel_derecho_img { margin: 20px;align-content: center ; border-radius: 4px; max-width: 40%;}
.panel_derecho_text {padding: 20px; margin-right: 10px ;text-align:justify; width: 60%;}
.panel_derecho p {font-size: 1rem;color: var(--ricale-gray);}
footer { padding:1.5em; display:flex ; justify-content: space-between; align-items: center; font-size: .6rem; color: var(--ricale-white) }
footer p{text-align: center; }
.logo_ricale { width: 100px; margin-right: 10px;}
/* --- MEDIA QUERIES (Responsividad) --- */
@media (max-width: 992px) { 
    .home { flex-direction: column; align-items: center;}
    .menu_izquierdo {width: 100%; height: auto; }
    .panel_derecho {flex-direction: column;align-items: center; margin: auto;}
    .header_container {font-size: 100%;}
    .header_buttons{margin: auto;}
}
@media (min-width: 1200px) { 
    .header_container {font-size: 100%;}
    .header_buttons{margin:0;}
}