/* ===========================
   ENCUENTRA IA
   STYLE.CSS
=========================== */

/* RESET */

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:#20194d;

    color:#f8fcf8;

    line-height:1.6;

}


/* VARIABLES */

:root{

    --fondo:#0f172a;
    --fondo2:#1e293b;
    --fondo3:#334155;

    --texto:#f8fafc;
    --texto2:#94a3b8;

    --principal:#4f46e5;
    --principalHover:#6366f1;

    --verde:#22c55e;
    --rojo:#ef4444;

    --borde:16px;

    --sombra:0 10px 30px rgba(0,0,0,.25);

    --transicion:.25s;

}


/* CONTENEDOR */

.contenedor{

    width:min(1200px,90%);
    margin:auto;

}


/* HEADER */

header{

    position:sticky;

    top:0;

    z-index:100;

    background:rgba(15,23,42,.92);

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(255,255,255,.05);

}


header .contenedor{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

}


/* LOGO */

.logo{

    font-size:1.7rem;

    font-weight:700;

    color:white;

}


/* BOTÓN TEMA */

#btnTema{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:var(--fondo2);

    color:white;

    font-size:1.2rem;

    transition:var(--transicion);

}

#btnTema:hover{

    background:var(--principal);

    transform:rotate(15deg);

}


/* MAIN */

main{

    width:min(1200px,90%);

    margin:auto;

}


/* HERO */

.hero{

    text-align:center;

    padding:70px 0 40px;

}


.hero h1{

    font-size:3rem;

    font-weight:700;

    margin-bottom:20px;

}


.hero p{

    color:var(--texto2);

    font-size:1.1rem;

    margin-bottom:40px;

}


/* BUSCADOR */

.buscador{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}


#busqueda{

    width:min(700px,100%);

    padding:18px 22px;

    border:none;

    outline:none;

    border-radius:999px;

    background:var(--fondo2);

    color:white;

    font-size:1rem;

    transition:var(--transicion);

    box-shadow:var(--sombra);

}


#busqueda::placeholder{

    color:var(--texto2);

}


#busqueda:focus{

    background:var(--fondo3);

    transform:translateY(-2px);

}


#btnBuscar{

    border:none;

    cursor:pointer;

    border-radius:999px;

    padding:18px 34px;

    background:var(--principal);

    color:white;

    font-size:1rem;

    font-weight:600;

    transition:var(--transicion);

}


#btnBuscar:hover{

    background:var(--principalHover);

    transform:translateY(-2px);

}


/* TÍTULOS */

section{

    margin-top:55px;

}


section h2{

    margin-bottom:20px;

    font-size:1.8rem;

}


/* FOOTER */

footer{

    margin-top:80px;

    padding:35px;

    text-align:center;

    color:var(--texto2);

    border-top:1px solid rgba(255,255,255,.08);

}/* ===================================
   ESTADÍSTICAS
=================================== */

.estadisticas{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-top:20px;

}

.stat{

    background:var(--fondo2);

    border-radius:var(--borde);

    padding:30px;

    text-align:center;

    transition:var(--transicion);

    box-shadow:var(--sombra);

    border:1px solid rgba(255,255,255,.05);

}

.stat:hover{

    transform:translateY(-6px);

    background:var(--fondo3);

}

.stat span{

    display:block;

    font-size:2rem;

    font-weight:700;

    color:white;

}

.stat p{

    margin-top:8px;

    color:var(--texto2);

}


/* ===================================
   FILTROS
=================================== */

.filtros{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:45px;

}

.filtros button{

    border:none;

    cursor:pointer;

    background:var(--fondo2);

    color:white;

    padding:12px 22px;

    border-radius:999px;

    transition:var(--transicion);

    font-weight:500;

}

.filtros button:hover{

    background:var(--principal);

    transform:translateY(-2px);

}

.filtros .activo{

    background:var(--principal);

}


/* ===================================
   TENDENCIAS
=================================== */

#sugerencias{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-top:25px;

}

.sugerencia{

    background:var(--fondo2);

    border-radius:var(--borde);

    padding:22px;

    cursor:pointer;

    transition:var(--transicion);

    display:flex;

    align-items:center;

    gap:14px;

    font-size:1rem;

    font-weight:500;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:var(--sombra);

}

.sugerencia:hover{

    background:var(--principal);

    transform:translateY(-5px);

}

.sugerencia span:first-child{

    font-size:1.5rem;

}/* ===================================
   RESULTADOS
=================================== */

#resultados{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

    margin-top:30px;

}


/* ===================================
   TARJETA
=================================== */

.tarjeta{

    background:var(--fondo2);

    border-radius:var(--borde);

    padding:26px;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:var(--sombra);

    transition:var(--transicion);

    display:flex;

    flex-direction:column;

    gap:18px;

}

.tarjeta:hover{

    transform:translateY(-8px);

    background:var(--fondo3);

}


/* ===================================
   CABECERA
=================================== */

.cabeceraTarjeta{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}

.cabeceraTarjeta h2{

    margin:0;

    font-size:1.35rem;

    color:white;

}

.cabeceraTarjeta p{

    margin-top:5px;

    color:var(--texto2);

    font-size:.95rem;

}


/* ===================================
   NOTA
=================================== */

.nota{

    background:#f59e0b;

    color:white;

    font-weight:700;

    padding:8px 12px;

    border-radius:999px;

    white-space:nowrap;

}


/* ===================================
   DESCRIPCIÓN
=================================== */

.descripcion{

    color:var(--texto2);

    line-height:1.7;

}


/* ===================================
   CATEGORÍAS
=================================== */

.categorias{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.categoria{

    background:rgba(79,70,229,.15);

    color:#a5b4fc;

    padding:7px 14px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}


/* ===================================
   PRECIO
=================================== */

.tarjeta strong{

    color:white;

}


/* ===================================
   BOTÓN
=================================== */

.tarjeta a{

    margin-top:auto;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:var(--principal);

    color:white;

    padding:14px;

    border-radius:12px;

    font-weight:600;

    transition:var(--transicion);

}

.tarjeta a:hover{

    background:var(--principalHover);

    transform:translateY(-2px);

}


/* ===================================
   MENSAJE SIN RESULTADOS
=================================== */

.sinResultados{

    grid-column:1/-1;

    background:var(--fondo2);

    border-radius:var(--borde);

    padding:40px;

    text-align:center;

    box-shadow:var(--sombra);

}

.sinResultados h2{

    margin-bottom:15px;

}

.sinResultados p{

    color:var(--texto2);

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

@media (max-width:1024px){

    .estadisticas{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    header .contenedor{

        flex-direction:column;

        gap:20px;

    }

    .hero{

        padding:50px 0 30px;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .buscador{

        flex-direction:column;

        align-items:stretch;

    }

    #busqueda{

        width:100%;

    }

    #btnBuscar{

        width:100%;

    }

    .estadisticas{

        grid-template-columns:1fr;

    }

    #resultados{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .hero h1{

        font-size:1.8rem;

    }

    section h2{

        font-size:1.4rem;

    }

}


/* ===================================
   ANIMACIONES
=================================== */

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.tarjeta,
.sugerencia,
.stat{

    animation:aparecer .45s ease;

}


/* ===================================
   SCROLLBAR
=================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--fondo);

}

::-webkit-scrollbar-thumb{

    background:var(--principal);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--principalHover);

}


/* ===================================
   SELECCIÓN DE TEXTO
=================================== */

::selection{

    background:var(--principal);

    color:white;

}


/* ===================================
   UTILIDADES
=================================== */

.oculto{

    display:none !important;

}

.centrado{

    text-align:center;

}


/* ===================================
   PREPARADO PARA TEMA CLARO
=================================== */

body.light{

    --fondo:#f8fafc;
    --fondo2:#ffffff;
    --fondo3:#e2e8f0;

    --texto:#0f172a;
    --texto2:#475569;

    background:var(--fondo);

    color:var(--texto);

}

body.light .logo,
body.light h1,
body.light h2,
body.light strong,
body.light .cabeceraTarjeta h2{

    color:var(--texto);

}

body.light #busqueda{

    color:var(--texto);

}

body.light .tarjeta{

    border:1px solid #e2e8f0;

}