:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1c1917; background: #fdfcf7; font-synthesis: none; --brand-magenta: #d50057; }
* { box-sizing: border-box; }
body { margin: 0; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(#ffffffb8, #ffffffb8), url('./assets/logo-38grados.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
main { min-height: 100svh; display: grid; place-items: center; padding: 28px 20px; }
.access-card { width: 100%; max-width: 520px; min-width: 0; padding: 30px 46px 34px; background: #fff; border: 1px solid #eae7e4; border-radius: 24px; box-shadow: 0 16px 48px #2925240d, 0 2px 8px #29252404; }
header { text-align: center; }
.brand { min-height: 38px; margin-bottom: 26px; font-size: 23px; font-weight: 800; letter-spacing: 2px; }
/* Present the supplied square asset without its large white margins.
   Preserve the original file and the complete mark, including its tagline. */
.brand--image { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; margin: 0 auto 18px; }
.brand-logo { position: relative; flex: 0 0 72px; width: 72px; height: 78px; overflow: hidden; }
.brand-logo img { position: absolute; display: block; width: 194px; max-width: none; height: auto; left: -62px; top: -59.5px; }
.badge { display: inline-block; padding: 6px 13px; border-radius: 999px; color: var(--brand-magenta); background: #fff0f5; font-size: 10px; font-weight: 750; letter-spacing: 1.1px; }
h1 { margin: 14px 0 10px; font-size: 32px; line-height: 1.15; letter-spacing: -1px; font-weight: 750; text-wrap: balance; }
.description { margin: 0 auto 24px; font-size: 14px; line-height: 1.6; color: #78716c; text-wrap: pretty; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 16px; }
label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 650; }
.required { color: #be123c; }
input { width: 100%; min-width: 0; height: 45px; padding: 0 12px; font: inherit; font-size: 13px; background: #fdfcf7; border: 1px solid #e5e1dc; border-radius: 11px; outline: none; transition: border-color .16s, box-shadow .16s; }
input::placeholder { color: #8a837e; }
input:focus { border-color: var(--brand-magenta); box-shadow: 0 0 0 3px #d500570d; }
input[aria-invalid="true"] { border-color: #be123c; }
.error { margin: 6px 0 0; color: #a6193c; font-size: 12px; line-height: 1.4; }
.error:empty { display: none; }
button { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 25px; width: 100%; min-height: 48px; border: 0; border-radius: 11px; background: #1c1917; color: white; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; transition: background .18s; }
button:hover { background: #3d3531; }
button:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 3px; }
button:disabled { opacity: .65; cursor: wait; }
.spinner { width: 16px; height: 16px; border: 2px solid #ffffff55; border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; }
[hidden] { display: none !important; }
#form-status { font-size: 13px; line-height: 1.5; color: #a6193c; margin-bottom: 0; }
#form-status:empty { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) { main { padding: 20px 16px; } .access-card { padding: 26px 24px 28px; } .fields { grid-template-columns: 1fr; gap: 18px; } h1 { font-size: 30px; } input { font-size: 16px; } }
@media (max-width: 360px) { main { padding: 16px 12px; } .access-card { padding-inline: 20px; } h1 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }