/* Basico */
body {
    font-family: 'Lato','Lucida Grande','Lucida Sans Unicode',Tahoma,Sans-Serif;
    background-color: #000;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;

    /* <-- centra el layout */
    padding-inline: 16px;

    /* <-- margen respiración lateral */
}

/* ======= TOP BAR ======= */
.Head-Bar {
    display: flex;
    align-items: center;

    /* <-- alinea verticalmente */
    justify-content: space-between;

    /* <-- separa extremos sin empujar de más */
    gap: 12px;

    /* <-- espacio entre bloques */
    flex-wrap: wrap;

    /* <-- permite que baje a segunda línea si hace falta */
    padding-block: 12px;
}

/* logo */
.Head-Bar > .Logo img {
    height: 40px;

    /* <-- fija altura; el ancho se calcula solo */
    width: auto;
    display: block;
}

/* menú centro */
.Head-Bar > .Menu {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #cbcbcb;
    flex: 1 1 auto;

    /* <-- que ocupe el espacio disponible */
    min-width: 0;

    /* <-- evita desbordes por contenido largo */
}

/* “EXPLORE” */
.Head-Bar > .Menu > .Explore {
    font-weight: 700;
    color: #ceb707;

    /* eliminados: width fijo y paddings raros */
    padding: 6px 0;
}

/* enlaces del menú */
.Head-Bar > .Menu > .Link {
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    padding: 6px 0;
    white-space: nowrap;

    /* <-- cada item no se parte en varias líneas */
}

/* derecha */
.Head-Bar > .Menu-Right {
    display: flex;

    /* <-- importante para que no “flote” raro */
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
}

/* botones derecha */
.Head-Bar > .Menu-Right > .Grey-Button {
    border-radius: 6px;
    padding: 10px 14px;

    /* <-- menos padding para pantallas pequeñas */
    background-color: #444;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.Head-Bar > .Menu-Right > .NO-Grey-Button {
    border-radius: 6px;
    padding: 8px 10px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* ======= HERO / CONTENIDO MEDIO ======= */
.Middle-Content {
    background: radial-gradient(circle at 20% 25px,#5c5c5c 0%,#373737 32%,#000 80%);
    color: #6e6772;
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 24px 0;
    flex-wrap: wrap;

    /* <-- que no se solape en estrecho */
}

.Middle-Content > .Left-Column {
    color: #fff;
    font-size: 30px;
    font-weight: 100;
    padding-inline: clamp(16px, 4vw, 100px);

    /* <-- padding fluido */
    flex: 1 1 380px;

    /* <-- toma mitad/ancho mínimo */
}

.Middle-Content > .Right-Column {
    flex: 1 1 320px;
    padding-inline: 16px;
}

.Middle-Content > .Right-Column img {
    width: 100%;

    /* <-- responsive */
    height: auto;
    box-shadow: 0 8px 8px 0 #000;
}

/* bicolor */
.Right-Column> .bicolor > :nth-child(1),
.Right-Column> .bicolor > :nth-child(3) {
    color: #fff;
    font-size: large;
}

.Right-Column> .bicolor > :nth-child(2) {
    color: #0bb3f6;
    font-size: large;
}

/* textos */
.Middle-Content > .Left-Column {
    line-height: 1.25;
}

.Middle-Content > .Left-Column > .Two-Blocks {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.Middle-Content > .Left-Column > .Two-Blocks > .Green-Block,
.Middle-Content > .Left-Column > .Two-Blocks > .Black-Block {
    border-radius: 4px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 22px;
}

.Green-Block {
    background: #59cf59;
    color: #000;
}

.Black-Block {
    background: #000;
    color: #cfcfcf;
    outline: 1px solid #333;
}

/* ======= FOOTER ======= */
.Footer-Blocks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;

    /* <-- evita solapes */
    justify-content: space-between;
    color: #cfcfcf;
    font-size: 20px;
    padding-block: 16px 28px;
}

.Footer-Blocks > .Block-Unit a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 24px;
    background: #333;
    color: #cfcfcf;
    text-decoration: none;
    outline: 1px solid #6b6b6b;
}

/* ======= MEDIA QUERIES ======= */
/* Tabletas: reduce rellenos y tamaños para que no se pisen */
@media (max-width: 1000px){
    .Head-Bar {
        gap: 8px;
    }

    .Head-Bar > .Menu {
        gap: 12px;
    }

    .Head-Bar > .Menu-Right .Grey-Button {
        padding: 8px 10px;
    }

    .Head-Bar > .Menu-Right .NO-Grey-Button {
        padding: 6px 8px;
    }
}

/* Móviles: la barra se hace en 2 líneas, el centro ocupa 100% */
@media (max-width: 700px){
    .Head-Bar {
        justify-content: center;
    }

    .Head-Bar > .Menu {
        order: 3;

        /* <-- baja el menú al segundo renglón */
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .Head-Bar > .Menu > .Link {
        font-size: 0.95rem;
    }
}