/* ===== PALETA GLOBAL ===== */
*{
    box-sizing: border-box;
}

/* QUITAR BARRA DE SCROL VERTICAL */
html{
    scrollbar-width:none;
    -ms-overflow-style:none;
}

html::-webkit-scrollbar{
    display:none;
}
/* END QUITAR BARRA DE SCROL VERTICAL */

:root {

    /* Colores principales */
    --primary: #198754;
    --primary-dark: #145c38;
    --primary-soft: #e8f5ec;
    --primary-soft-dark: #c0c0bd;

    /* Fondos */
    --bg-main: #f7f7f2;
    --bg-card: #ffffff;

    /* Texto */
    --text-main: #2c2c2c;
    --text-muted: #6c757d;

    /* Bordes */
    --border-radius: 1.5rem;

    /* Sombras */
    --shadow-soft: 0 8px 24px rgba(0,0,0,.06);
    --shadow-hover: 0 16px 32px rgba(0,0,0,.10);

    /* Fuente */
    --font-main: system-ui, -apple-system,
                 BlinkMacSystemFont,
                 "Segoe UI",
                 sans-serif;

    --radius: 1.5rem;
    --small-radius: 0.5rem;
}

/* Cuando sea tamaño móvil, el porcentaje pasa al 95%, en ordenador 80% y en muy grandes que no supere el 1400px */
:root {
    --main-width: min(1400px, 80%);
}

@media (max-width: 768px) {
    :root {
        --main-width: 95%;
    }
}

/* quitar decoración de anchors */
a {
    text-decoration: none !important;
    color: inherit;
}

/* ===== BASE ===== */

body{
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-main);
}

/* Misma width y centrados a todos los main */
main {
    width: var(--main-width);
    margin: 0 auto;
}


/* ===== TITULOS ===== */

h1,h2,h3,h4,h5,h6{
    color: var(--primary-dark);
    font-weight:600;
}


/* ===== TEXTO ===== */

.text-soft{
    color: var(--text-muted);
}


/* ===== CARDS ===== */

.soft-card,
.soft-card-no-hover{
    background: var(--bg-card);

    border:none;
    border-radius: var(--border-radius);

    box-shadow: var(--shadow-soft);

    transition:.25s ease;
}

.soft-card:hover{
    transform:translateY(-5px);
    box-shadow: var(--shadow-hover);
}


/* ===== BOTONES ===== */

/* color crema */
.btn-light{

    background: var(--bg-main);

    color: var(--text-main);

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

    border-radius: 999px;

    padding: .7rem 1.5rem;

    box-shadow: var(--shadow-soft);

    transition: .3s;
}

.btn-light:hover{

    background: var(--primary-soft-dark);

    box-shadow: var(--shadow-hover);
}

/* color crema inverso */
.btn-light-outline{

    background: transparent;

    color: var(--primary-soft);

    border: 1px solid var(--primary-soft);

    border-radius: 999px;

    padding: .7rem 1.5rem;

    transition: .3s;
}

.btn-light-outline:hover{

    background: var(--bg-main);

    color: black;

    box-shadow: var(--primary-soft);
}

/* color verde */
.btn-green{

    background:var(--primary);
    border:none;

    color:white;

    border-radius:999px;

    padding:.7rem 1.5rem;

    transition:.3s;
}

.btn-green:hover{

    background:var(--primary-dark);
    color:white;
}

/* color verde inverso */
.btn-green-outline{

    border:1px solid var(--primary);
    color:var(--primary);

    border-radius:999px;

    padding:.7rem 1.5rem;
}

.btn-green-outline:hover{

    background:var(--primary);
    transition: 0.3s;
    color:white;
}


/* ===== BADGES ===== */

.badge-green{

    background:var(--primary-soft);
    color:var(--primary);

    padding:.5rem .9rem;

    border-radius:999px;
}


.badge-light{

    background: var(--bg-main);

    color: var(--text-main);

    padding: .45rem .9rem;

    border-radius:999px;

    border:1px solid rgba(0,0,0,.08);

    font-size:.85rem;

    font-weight:600;

    box-shadow: var(--shadow-soft);

    transition:.25s;
}

/* ===== ICONOS ===== */

.feature-icon{

    width:48px;
    height:48px;

    border-radius:50%;

    background:var(--primary-soft);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.4rem;
}


/* ===== SECCIONES ===== */

.section-label{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:.05em;

    font-size:.85rem;

    font-weight:600;
}