@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee+Outline&display=swap');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-brands/css/uicons-brands.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css');




* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 200;
    height: 100vh;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 60px 1fr 400px;
    grid-template-areas: 
    "top-bar"
    "menu"
    "content"
    "footer";
}

/* Top Bar */

.top-bar {
    grid-area: top-bar;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 48px;
    padding-right: 48px;
    background: #313131;
}

.link-bar {
    color: #ffff;
    text-decoration: none;
}

/* Menu */

.menu {
    grid-area: menu;
    padding-right: 300px;
    padding-left: 300px;
    background: #ff6600;  
}

.main-menu {
    display: flex;
    list-style: none;
    justify-content: flex-end;
}

.link {
    text-decoration: none;
    color: #ffff;
    padding-right: 24px;
}

.hamburger {
    display: none; 
}

/* Contenido */

.content {
    grid-area: content;
}

/* Pie de Pagina */

.footer {
    grid-area: footer;
    background: #04265a;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    padding: 24px;
}

.footer h3 {
    color: #ffff;
}

.logo-footer {
    background: url("../img/nuevo_logo_oc.svg");
    width: 30%;
    height: 30%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
}

.menu-footer {
    color: #ffff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.menu-footer a {
    text-decoration: none;
    color: #ffff;
}

/* Whatsapp */

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}


@media (max-width: 768px) {
     
    .container {
        display: flex;
        flex-direction: column;
    }

    /* Barra Superior */
    .top-bar {
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 8px;
        font-size: 1rem;
    }

    .content {
        max-width: 768px;
    }

    /* Menú */
    .menu {
        padding: 10px 20px;
        justify-content: space-between;
        min-height: 50px;
        position: relative; 
    }
 
    .hamburger {
        display: block; 
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 20; 
    }

    .hamburger span {       
        display: block; 
        width: 25px;
        height: 3px;
        background-color: #ffff; 
        margin: 5px 0; 
        transition: all 0.3s ease;
    }
  
    .main-menu {
        display: none; 
        flex-direction: column;
        position: absolute; 
        top: 50%;
        right: 0;
        width: 100%;
        max-height: 80vh; 
        overflow-y: auto;
        background: #ff6600; 
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        z-index: 10;
        padding: 10px 0;
        list-style: none;
        margin: 0;
    }

   
    .main-menu.active {
        display: flex;
    }

    .main-menu li {
        text-align: center;
        width: 100%;
    }
    
    .link {
        padding: 15px 20px;
        display: block;
        width: 100%;
        color: #fff;
    }

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

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

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

    /* Pie de Página */
    .footer {
        grid-template-columns: 1fr; 
        grid-template-rows: auto;
        padding: 16px;
        gap: 20px;
    }

    .logo-footer {
        width: 60%;
        height: 60px;
    }

    /* Botón Flotante de WhatsApp */
    .float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 24px;
    }

    .my-float {
        margin-top: 13px;
    }
}