:root {
    color-scheme: light;
    --arena: #F2EBE1;
    --hueso: #FBF7F1;
    --piedra: #2E2823;
    --piedra-suave: #6E6258;
    --linea: #E2D7C8;
    --salvia: #6F7F63;
    --salvia-honda: #4E5C44;
    --salvia-clara: #E3E8DC;
    --barro: #B0654A;
    --barro-claro: #F3E1D8;
    --error: #A33A2A;

    --serif: "Instrument Serif", Georgia, serif;
    --sans: "Albert Sans", system-ui, sans-serif;

    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px;
    --r-chico: 10px;
    --r: 18px;
    --sombra: 0 1px 2px rgba(46, 40, 35, .05), 0 12px 32px -20px rgba(46, 40, 35, .35);
    --suave: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--arena);
    color: var(--piedra);
    font: 400 17px/1.6 var(--sans);
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 400; margin: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; }

.envoltura { width: min(1120px, 100% - 2 * var(--s2)); margin-inline: auto; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--salvia-honda);
    color: var(--hueso);
    font: 600 16px/1 var(--sans);
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s var(--suave), transform .15s var(--suave);
}
.boton:hover { background: var(--piedra); }
.boton:active { transform: scale(.97); }
.boton:focus-visible, .chip:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--barro); outline-offset: 3px; }
.boton:disabled { background: var(--linea); color: var(--piedra-suave); cursor: default; transform: none; }
.boton.secundario { background: transparent; color: var(--piedra); box-shadow: inset 0 0 0 1.5px var(--piedra); }
.boton.secundario:hover { background: var(--piedra); color: var(--hueso); }
.boton.chico { min-height: 38px; padding: 8px 16px; font-size: 14px; }

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--linea);
    background: var(--hueso);
    cursor: pointer;
    font-size: 15px;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--salvia); }
.chip[aria-pressed="true"] { background: var(--salvia-honda); border-color: var(--salvia-honda); color: var(--hueso); }

label.campo { display: block; font-size: 14px; color: var(--piedra-suave); margin: var(--s2) 0 6px; }
input, select, textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1.5px solid var(--linea);
    border-radius: var(--r-chico);
    background: var(--hueso);
    color: var(--piedra);
    font: 400 16px/1.4 var(--sans);
}
textarea { min-height: 80px; resize: vertical; }

.error { color: var(--error); font-size: 15px; min-height: 1.5em; margin: var(--s1) 0 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}