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

html,body{
width:100%;
overflow-x:hidden;
}

body{
font-family:'Segoe UI',sans-serif;
background:#f4f6f9;
color:#222;
}

/* =========================
   TOPBAR
========================= */

.topbar{
position:sticky;
top:0;
z-index:5000;
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
flex-wrap:wrap;
background:#fff;
padding:10px 15px;
border-bottom:1px solid #ddd;
width:100%;
}

.logos{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
max-width:100%;
}

.logos img{
height:42px;
max-width:100%;
width:auto;
display:block;
}

.redes{
display:flex;
align-items:center;
gap:14px;
}

.redes a{
font-size:20px;
color:#333;
text-decoration:none;
}

/* =========================
   HAMBURGUESA
========================= */

.hamburger{
width:30px;
height:22px;
cursor:pointer;
position:relative;
display:none;
}

.hamburger span{
position:absolute;
left:0;
width:100%;
height:3px;
background:#000;
transition:.3s;
}

.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:9px;}
.hamburger span:nth-child(3){bottom:0;}

.hamburger.active span:nth-child(1){
transform:rotate(45deg);
top:9px;
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:rotate(-45deg);
bottom:10px;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{
position:fixed;
top:0;
left:0;
width:250px;
height:100vh;
background:#1e191d;
color:#fff;
overflow:hidden;
transition:.3s;
z-index:3000;
}

.sidebar.collapsed{
width:70px;
}

.sidebar ul{
list-style:none;
padding:0;
margin-top:60px;
}

.sidebar li{
padding:15px;
}

.sidebar a{
display:flex;
align-items:center;
gap:15px;
color:#fff;
text-decoration:none;
}

.sidebar i{
width:20px;
text-align:center;
}

.sidebar.collapsed span{
display:none;
}


/* =========================
  LISTAS
========================= */

.listas ul {
  list-style-type: circle;
  padding: 20px;
}

.listas li a {
  list-style-type: disc;
  margin: 0;
  padding: 0;
}


/* =========================
   CONTENIDO
========================= */

.main{
margin-left:250px;
width:calc(100% - 250px);
padding:20px;
transition:.3s;
}

.sidebar.collapsed ~ .main{
margin-left:70px;
width:calc(100% - 70px);
}

/* =========================
   MENU MOVIL
   como antes: flotando sobre contenido
========================= */

.mobile-menu{
position:fixed;
top:110px; /* pegado al topbar */
left:0;
width:100%;
background:#000;
color:#fff;
max-height:0;
overflow-y:auto;
transition:max-height .35s ease;
z-index:6000;
box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.mobile-menu.open{
max-height:calc(100vh - 110px);
}

.mobile-menu ul{
list-style:none;
padding:0;
margin:0;
}

.mobile-menu li{
border-bottom:1px solid rgba(255,255,255,.08);
}

.mobile-menu a{
display:flex;
align-items:center;
gap:10px;
padding:15px;
color:#fff;
text-decoration:none;
}

.mobile-menu i{
width:20px;
}

/* =========================
   PLECAS
========================= */

.pleca-container{
width:100%;
text-align:center;
margin-bottom:20px;
}

.pleca-img{
width:100%;
max-width:100%;
height:auto;
display:block;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* =========================
   GENIALLY
========================= */

.genially {
    width: 100%;
    min-height: calc(100vh - 170px); /* asegura altura mínima y espacio para footer */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

/* Iframe Genially principal */
.genially iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =========================
   FORMULARIOS
========================= */

.form-container{
max-width:900px;
margin:auto;
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.10);
}

input,select,textarea{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:6px;
font:inherit;
}

/* =========================
   FOOTER
========================= */

footer{
margin-top:20px;
padding:25px;
text-align:center;
background:#1e191d;
color:#fff;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

.sidebar{
display:none;
}

.main{
margin-left:0;
width:100%;
padding:0;
}

.topbar{
flex-direction:column;
align-items:center;
text-align:center;
gap:8px;
padding:10px;
}

.logos{
justify-content:center;
}

.logos img{
height:34px;
}

.redes{
justify-content:center;
}

.hamburger{
display:block;
margin-top:4px;
}

.mobile-menu{
top:115px;
}

.mobile-menu.open{
max-height:calc(100vh - 115px);
}

.form-container{
margin:15px;
padding:20px;
}

}

@media(max-width:600px){

.topbar{
padding:8px;
}

.logos img{
height:30px;
}

.redes a{
font-size:18px;
}

.mobile-menu{
top:120px;
}

.mobile-menu.open{
max-height:calc(100vh - 120px);
}

}

@media(max-width:430px){

.logos img{
height:26px;
}

.mobile-menu{
top:125px;
}

.mobile-menu.open{
max-height:calc(100vh - 125px);
}

}

/* Responsividad general */
@media (max-width: 768px) {


    .genially {
        margin-top: 10px;
        margin-bottom: 0;
        min-height: auto; /* Elimina el alto fijo */
    }
	



}