@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&family=Rajdhani:wght@300;400;500;600;700&family=Russo+One&display=swap');

/* RESET DE TODO EL BODY */

* {
    box-sizing: border-box;
    /* Incluye padding y bored de todo el body */
    margin: 0;
    /* Eliminamos margenes */
    padding: 0;
    /* El paddig es relleno en forma de contorno o envoltura */
}

html,
body {
    height: 100%;
    /* Ocupamos toda la altura disponible en la pantalla */
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #24323F;
    background: #1C1C25;
    line-height: 1.7;
    /* Agrega un espacio entre lineas */
    position: relative;
}

/* Header (Hero con contraste) */
.hero {
    position: relative;
    /* Permite posicionar elementos hijos */
    min-height: 50vh;
    /* Altura minima */
    background: url("../img/banner-formula.png") bottom/cover no-repeat;
    display: grid;
    /* Usamos una cuadricula para centrar el contenido */
    place-items: center;
    text-align: center;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    /* Se cubre todo el div del contenedor */
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        /* Eso oscurece con degradado lineal */
        radial-gradient(70% 60% at 50% 35%, rgba(0, 0, 0, 0.35), transparent);
    /* Degradado radial con constraste */
}

.hero__content {
    position: relative;
    /* Se mantiene por encima del overlay */
    z-index: 1;
    /* Prioridad de apilamiento */
    padding: 24px;
    /* Espaciado interno */
}

.hero h1 {
    color: #f5f5f5;
    font-size: clamp(2rem, 3vw, 3.2rem);
    /* A traves de la funcion clamp para hacer un ajuste de tamaño adaptable */
    font-weight: 800;
    letter-spacing: .5px;
    /* Espaciado entre letras */
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
    /* Sombra para contraste */
    font-family: 'Orbitron', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.hero p {
    margin-top: 8px;
    /* Espacio sobre el parrafo */
    color: #ffcd00;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    /* Tamaño adaptable */
    font-style: italic;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
    /* Sombra para contraste */
    font-family: 'Audiowide', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;
}

/* SECCION DEL NAV */

.topnav {
    background-color: rgba(0, 0, 0, 0);
    z-index: 2;
    position: fixed;
    top: 0;
    transition: .5s ease-in-out;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    z-index: 1000;
}

.topnav.scrolled {
    background-color: #17171D;
    /* Casi negro sólido */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    /* Sombra más marcada */
    transition: .5s ease-in-out;
    padding: 0;
}

.topnav ul {
    display: flex;
    /* Distribuye los elementos de forma lineal */
    gap: 8px;
    /* Espacio horizontal entre items */
    list-style: none;
    /* Quita las viñetas */
    max-width: 1160px;
    /* Ancho maximo del nav */
    margin: 0 auto;
    /* Centrado hotizontalmente */
    padding: 10px 16px;
    /* Espaciado interno */
}

.topnav a {
    color: #E9F2FB;
    text-decoration: none;
    /* Quitar subrayado */
    padding: 10px 14px;
    /* Formar un boton para hover */
    border-radius: 8px;
    /* Bordes redondeados */
    font-weight: 600;
    /* Texto en semibold */
    display: inline-block;
}


.topnav ul li a::after {
    content: "";
    height: 2px;
    width: 0;
    display: block;
    transition: all .3s;
}

#home::after {
    background-color: #f5f5f5;
}

#redbull::after {
    background-color: #4781D7;
}

#mercedes::after {
    background-color: #00D7B6;
}

#ferrari::after {
    background-color: #ED1131;
}

#mclaren::after {
    background-color: #F47600;
}

#alpine::after {
    background-color: #00A1E8;
}

#rb::after {
    background-color: #6C98FF;
}

#aston::after {
    background-color: #229971;
}

#william::after {
    background-color: #1868DB;
}

#kick::after {
    background-color: #01C00E;
}

#haas::after {
    background-color: #9C9FA2;
}

.topnav ul li a:hover::after {
    width: 100%;
}

/* SECCION Y ASIDE */

.layout {
    max-width: 1160px;
    margin: 28px auto 40px;
    /* Centrado y con margenes superior e inferior */
    padding: 0 16px;
    /* Espaciado lateral */
    display: grid;
    /* Cuadricula ajustada */
    grid-template-columns: 5fr;
    /* Una sola columna en mobiles */
    gap: 26px;
    /* Espaciado entre columnas */
}

/* SECCCION Y ARTICULOS */

.content {
    display: flex;
    flex-wrap: wrap;
    /* permite que bajen de línea */
    justify-content: center;
    /* centra horizontalmente */
    gap: 10px;
    max-width: 1160px;
    margin: 0 auto;
}

.content h2 {
    text-align: center;
    color: white;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    /* Tamaño adaptable */
    margin-bottom: 18px;
    font-family: 'Audiowide', sans-serif;
    font-weight: 400;
    display: block;
    width: 100%;
}

.card {
    background: #2c2c2c;
    border-radius: 10px;
    color: #fff;
    width: 200px;
    overflow: hidden;
    position: relative;
    transition: .5s;
    height: 150px;
}

.card:hover {
    transform: scale(1.04);
    transform: translateY(-6px);
}

.card h3 {
    color: #f5f5f5;
    margin-bottom: 8px;
    position: absolute;
    bottom: 5px;
    left: 20px;
    font-size: 16px;
    z-index: 2;
    font-family: 'Audiowide';
    font-weight: 400;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 1);
}

.card p {
    color: #394B59;
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.85;
    /* Espaciado entre lineas */
    position: absolute;
}

.card img {
    width: 100%;
    height: 100%;
    transition: .5s;
    object-fit: cover;
}

.card img:hover {
    transform: scale(1.1);
}

.card.ferrari {
    border-left: 4px solid #ED1131;
}

.card.redbull {
    border-left: 4px solid #4781D7;
}

.card.mercedes {
    border-left: 4px solid #00D7B6;
}

.card.mclaren {
    border-left: 4px solid #F47600;
}

.card.astonmartin {
    border-left: 4px solid #229971;
}

.card.racingbulls {
    border-left: 4px solid #6C98FF;
}

.card.kick {
    border-left: 4px solid #01C00E;
}

.card.alpine {
    border-left: 4px solid #00A1E8;
}

.card.haas {
    border-left: 4px solid #9C9FA2;
}

.card.williams {
    border-left: 4px solid #1868DB;
}

.card-equipo {
    background: #34343D;
    border-radius: 10px;
    color: #fff;
    width: 100%;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: 0.5s all;
}

.card-equipo:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    transition: .3s ease-in-out;
}

.card-equipo .texto-cardequipo {
    width: 53%;
}

.card-equipo img {
    width: 44%;
    border-radius: 20px;
    height: 250px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
    transition: transform .4s ease;
}

.card-equipo img:hover {
     transform: scale(1.02);
}

.card-equipo h3 {
    font-family: 'Orbitron', sans-serif;
    display: block;
    width: 100%;
}

.card-equipo p {
    font-family: 'Rajdhani', sans-serif;
    text-align: justify
}

/* SECCION DEL ASIDE */

.sidebar {
    background: #B8ECF6;
    border-radius: 14px;
    padding: clamp(18px, 2.5vw, 24px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.sidebar h2 {
    color: #0A3A63;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    margin-bottom: 12px;
}

.sidebar ul {
    list-style: square inside;
}

.sidebar li {
    margin: 10px 0;
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    color: #284657;
}

/* SECCION DEL FOOTER */

.site-footer {
    background: #17171D;
    color: #f5f5f5;
    text-align: center;
    padding: 18px 12px;
    font-size: .98rem;
}

/* Dos columnas en aside */

@media (min-width: 900px) {
    .layout {
        grid-template-columns: minmax(0, 2fr) 1fr;
        align-items: start;
    }
}