:root {
    --teal: #1DC1A5;
    --orange: #FF9500;
    --dark: #333333;
    --gray: #666666;
    --light: #F5F5F5;
    --white: #FFFFFF;
    --container: 1200px;
    --radius: 16px;
    --shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    font-family: Roboto, system-ui, -apple-system, Segoe UI, sans-serif;
    color: var(--dark);
    background: #fff;
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    max-width: var(--container);
    margin: auto;
    padding: 0 20px
}

.mt8 {
    margin-top: 8px
}

.mt10 {
    margin-top: 10px
}

/* Botones genéricos */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 700;
    cursor: pointer
}

.btn-orange {
    background: var(--orange);
    color: #fff;
    box-shadow: var(--shadow)
}

.btn-orange:hover {
    filter: brightness(.95)
}