/* Página provisoria de bravissima.club. Marca tomada del sitio anterior: logo oficial,
   tipografías Rufina (títulos) y Rosario (texto), tinta #150303 y acento #FFAC4D. */
@font-face { font-family: "Rufina"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/rufina-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Rosario"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/rosario-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Rosario"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/rosario-latin-600-normal.woff2") format("woff2"); }

:root {
  --tinta: #150303;
  --acento: #FFAC4D;
  --fondo: #FBF6F1;
  --suave: #5B4A45;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 32px;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Rosario", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
}

main { width: 100%; max-width: 560px; }

.logo { display: block; width: min(300px, 78vw); height: auto; margin: 0 auto 40px; }

.kicker { margin: 0 0 14px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }

h1 { margin: 0 0 16px; font-family: "Rufina", Georgia, serif; font-weight: 400; font-size: clamp(32px, 6vw, 46px); line-height: 1.12; }

.lead { margin: 0 0 32px; color: var(--suave); }

.acciones { display: flex; flex-direction: column; gap: 12px; max-width: 340px; margin: 0 auto 36px; }

.btn {
  display: block;
  padding: 15px 22px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  color: var(--tinta);
  background: transparent;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-principal { background: var(--acento); border-color: var(--acento); }
.btn:hover { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.btn:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

.servicios { margin: 0; font-family: "Rufina", Georgia, serif; font-size: 18px; }

footer { margin-top: 48px; font-size: 13px; color: var(--suave); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }