/* ==========================================================
   LAIREN AI
   COMMON.CSS (LIMPIEZA V1)
   Componentes reutilizables.
   ========================================================== */

/* CONTENEDOR ESTÁNDAR */
.container{
    width:min(calc(100% - 40px),1500px);
    margin:0 auto;
    padding:0;
}

/* TÍTULOS DE SECCIÓN */
.section-header{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:24px;
    margin-bottom:28px;
}

.section-title{
    font-size:2rem;
    font-weight:800;
    color:var(--color-text);
}

.section-description{
    color:var(--color-muted);
    margin-top:8px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(66,179,255,.10);
    color:var(--color-primary);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* TARJETAS */
.card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:18px;
    box-shadow:var(--shadow-md);
}

/* BOTONES */
.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 24px;
    border-radius:12px;
    font-weight:700;
    transition:var(--transition);
}

.btn-primary{
    background:var(--color-primary);
    color:#fff;
}

.btn-primary:hover{
    background:var(--color-primary-hover);
    transform:translateY(-2px);
}

.btn-secondary{
    background:transparent;
    color:#fff;
    border:1px solid var(--color-border);
}

.btn-secondary:hover{
    background:rgba(255,255,255,.05);
}

.section-footer{
    display:flex;
    justify-content:center;
    margin-top:28px;
}

@media(max-width:900px){
    .container{
        width:calc(100% - 24px);
    }

    .section-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .section-title{
        font-size:1.75rem;
    }
}
/* ==========================================================
   LINKS
========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    opacity:.90;

}

/* ==========================================================
   IMAGES
========================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}

/* ==========================================================
   LISTS
========================================================== */

ul,
ol{

    list-style:none;

    margin:0;

    padding:0;

}

/* ==========================================================
   GRID HELPERS
========================================================== */

.grid{

    display:grid;

    gap:24px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

/* ==========================================================
   FLEX HELPERS
========================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* ==========================================================
   SECTION SPACING
========================================================== */

.section{

    padding-block:8px;

}

/* ==========================================================
   VISIBILITY
========================================================== */

.hidden{

    display:none !important;

}