/* Estetica 1908: tokens y fuentes copiados de 1908boedo.com.ar. La MARCA 1908 va solo en el panel. */
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/dm-serif-display-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/josefin-sans.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/libre-caslon-text-400.woff2") format("woff2"); }

:root {
  --grana: #4a1418;
  --tinta: #1c2a44;
  --marfil: #efe6d2;
  --arena: #dccfb6;
  --serif-display: "DM Serif Display", Georgia, serif;
  --sans: "Josefin Sans", Futura, "Century Gothic", sans-serif;
  --serif: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--grana); color: var(--marfil); font-family: var(--serif); line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; }

.barra { background: var(--tinta); color: var(--marfil); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 2rem; padding: .7rem 1.1rem .6rem; font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; line-height: 1.4; }
.barra a { color: inherit; text-decoration: none; }
.barra--pie { color: var(--arena); margin-top: auto; }

main { width: 100%; max-width: 38rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
h1 { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 0 0 .6rem; }
.rotulo { font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--arena); }
.recuadro { background: var(--tinta); padding: 1.4rem 1.2rem; margin: 1.4rem 0; }

label { display: block; font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--arena); margin-bottom: .4rem; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { width: 100%; font: inherit; font-size: 1.05rem; padding: .75rem .8rem; background: var(--marfil); color: var(--tinta); border: 2px solid var(--arena); border-radius: 0; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
button, .boton { display: inline-block; margin-top: 1rem; font-family: var(--sans); font-weight: 600; font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; padding: .9rem 1.5rem; background: var(--marfil); color: var(--tinta); border: 0; border-radius: 0; cursor: pointer; text-decoration: none; }
button.secundario { background: transparent; color: var(--marfil); border: 2px solid var(--arena); }
.aviso { border-left: 3px solid var(--arena); padding: .6rem .9rem; background: var(--tinta); margin: 1rem 0; }

/* Panel: misma familia en clave de herramienta, fondo marfil para leer muchas horas. */
body.panel { background: var(--marfil); color: var(--tinta); }
body.panel main { max-width: 64rem; }
body.panel .recuadro { background: #fff8ea; border: 1px solid var(--arena); }
body.panel button { background: var(--grana); color: var(--marfil); }
body.panel .rotulo { color: var(--grana); }
.tabular { font-variant-numeric: tabular-nums; }

.firma { display: inline-flex; align-items: flex-end; gap: .5em; }
.firma .n { font-family: var(--serif-display); font-style: italic; font-size: 1.6em; line-height: .8; letter-spacing: -.01em; text-transform: none; }

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

/* Preinscripcion (web y kiosko) */
.nota { color: var(--arena); font-size: .92rem; }
.contador { font-family: var(--serif-display); font-style: italic; font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1; margin: .2rem 0 .6rem; }
fieldset.sexo { border: 0; padding: 0; margin: 1rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; }
fieldset.sexo legend { margin-bottom: .4rem; }
fieldset.sexo label { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .7rem 1.1rem; border: 2px solid var(--arena); color: var(--marfil); cursor: pointer; font-size: 1rem; }
fieldset.sexo label:has(input:checked) { background: var(--marfil); color: var(--tinta); }
fieldset.sexo input { accent-color: var(--grana); }
.recuadro label + input, .recuadro input + label, .recuadro div + label { margin-top: 1rem; }
label.check { display: flex; gap: .6rem; align-items: flex-start; text-transform: none; letter-spacing: 0; font-family: var(--serif); font-weight: 400; font-size: .95rem; color: var(--marfil); margin-top: 1rem; }
label.check input { width: 1.3rem; height: 1.3rem; flex: none; margin-top: .15rem; accent-color: var(--arena); }
details.terminos { margin-top: 1.2rem; }
details.terminos summary { cursor: pointer; font-family: var(--sans); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--arena); }
details.terminos pre { white-space: pre-wrap; font-family: var(--serif); font-size: .9rem; max-height: 16rem; overflow: auto; background: var(--grana); padding: .8rem; }
section button + button { margin-left: .6rem; }
h2 { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.15; margin: 0 0 .6rem; }

/* Panel */
.panel-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; margin: -1rem 0 1.5rem; padding-bottom: .8rem; border-bottom: 1px solid var(--arena); font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.panel-nav a { color: var(--tinta); text-decoration: none; }
.panel-nav a:hover { color: var(--grana); }
.panel-nav .quien { margin-left: auto; color: #6b5b4a; text-transform: none; letter-spacing: 0; font-weight: 400; }
.panel-nav form { margin: 0; }
body.panel h1 { font-size: 2rem; }
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.grilla .recuadro { margin: 0; }
table { border-collapse: collapse; width: 100%; }
table th, table td { text-align: left; padding: .35rem .5rem; vertical-align: top; border-bottom: 1px solid rgba(28,42,68,.12); }
table.lista { font-size: .9rem; background: #fff8ea; border: 1px solid var(--arena); }
table.lista thead th { font-family: var(--sans); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; background: var(--tinta); color: var(--marfil); }
table.embudo td:not(:first-child) { text-align: right; }
tr.futuro td { color: #8a7c6a; font-style: italic; }
body.panel a { color: var(--grana); }
body.panel input, body.panel select { width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--arena); background: #fff; color: var(--tinta); }
body.panel label { color: var(--tinta); margin-top: .8rem; }
form.inline { display: inline-block; margin: .3rem .3rem 0 0; }
form.inline select { width: auto; }
button.chico { padding: .35rem .7rem; font-size: .7rem; margin-top: 0; }
body.panel button.secundario { background: transparent; color: var(--grana); border: 1px solid var(--grana); }
a.filtro { display: inline-block; padding: .25rem .6rem; border: 1px solid var(--arena); text-decoration: none; font-family: var(--sans); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
a.filtro.activo { background: var(--tinta); color: var(--marfil); }
body.panel .aviso { background: #fff8ea; border-left-color: var(--grana); }
code { font-size: .8rem; word-break: break-all; }

/* Cielo y mapa */
.lienzo-cielo { background: var(--tinta); aspect-ratio: 16 / 9; margin: 1rem 0; }
.lienzo-cielo canvas { width: 100%; height: 100%; display: block; }
body.pantalla { overflow: hidden; }
body.pantalla .espera { cursor: default; }
.mapa-wrap { display: grid; grid-template-columns: 1fr; gap: 1.5rem; background: var(--tinta); padding: 1rem; }
@media (min-width: 52rem) { main:has(.mapa-wrap) { max-width: 60rem; } .mapa-wrap { grid-template-columns: 2fr 1fr; } }
.mapa-wrap svg { width: 100%; height: auto; }
.ranking { padding: 0; list-style: none; margin: 0; }
.ranking li { display: flex; gap: .6rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid rgba(220, 207, 182, .2); }
.ranking .pos { font-family: var(--serif-display); font-style: italic; color: var(--arena); min-width: 1.6rem; }
.ranking strong { margin-left: auto; font-family: var(--serif-display); font-style: italic; font-weight: 400; }
.recuadro .campo + .campo, .recuadro .campo + #sugerencia + .campo, #fecha-wrap + .campo { margin-top: 1rem; }
.campo label { margin-top: 0; }
body.panel textarea { width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--arena); background: #fff; color: var(--tinta); }