/* tilko.com.ar (TIL-12): los colores y las letras de Tilko, los mismos de la presentación de la app
   (src/launcher/launcher.css). Sin JavaScript: el sitio no tiene ni un script. */
@font-face { font-family: 'Tilko Caslon'; src: url('/fuentes/LibreCaslonText-wght.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Tilko Inter'; src: url('/fuentes/Inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --marfil: #FFFAF2; --tinta: #25231F; --naranja: #F47B43; --manteca: #EFDB91;
  --bg: var(--marfil); --fg: var(--tinta); --sub: rgba(37,35,31,.78); --linea: rgba(37,35,31,.16); --cita: rgba(239,219,145,.35);
  --serif: 'Tilko Caslon', Georgia, 'Times New Roman', serif;
  --sans: 'Tilko Inter', Arial, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--tinta); --fg: var(--marfil); --sub: rgba(255,250,242,.8); --linea: rgba(255,250,242,.18); --cita: rgba(239,219,145,.1); color-scheme: dark; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--naranja); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }

.arriba { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 22px 20px; }
.arriba .logo { display: block; width: 92px; line-height: 0; }
.arriba .logo svg { width: 100%; height: auto; }
.arriba nav { display: flex; gap: 18px; font-size: 15px; font-weight: 500; }

.boton { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 6px; background: var(--naranja); color: var(--tinta); font: 600 16px/1 var(--sans); text-decoration: none; }
.boton:hover { color: var(--tinta); filter: brightness(1.05); }
.boton.otro { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px currentColor; }
.boton.otro:hover { color: var(--naranja); }

/* ---- portada ---- */
.portada { max-width: 1080px; margin: 0 auto; padding: 8vh 20px 12vh; }
.portada h1 { margin: 0; max-width: 16ch; font: 700 clamp(40px, 7vw, 76px)/1 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.portada .bajada { margin: 22px 0 0; max-width: 46ch; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; color: var(--sub); }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.portada .regla { width: 64px; height: 6px; margin-top: 44px; background: var(--naranja); border-radius: 3px; }
.portada .nota { margin: 16px 0 0; font-size: 15px; color: var(--sub); max-width: 52ch; }

/* ---- textos legales ---- */
.legal { max-width: 720px; margin: 0 auto; padding: 24px 20px 72px; }
.legal h1 { margin: 12px 0 6px; font: 700 clamp(34px, 5vw, 48px)/1.05 var(--serif); letter-spacing: -.02em; }
.legal .fecha { margin: 0 0 28px; font-size: 15px; color: var(--sub); }
.legal .resumen { margin: 0 0 36px; padding: 18px 20px; border-left: 6px solid var(--naranja); background: var(--cita); border-radius: 0 6px 6px 0; }
.legal .resumen p { margin: 0; }
.legal .resumen ul { margin: 8px 0 0; padding-left: 20px; }
.legal h2 { margin: 42px 0 10px; font: 700 24px/1.2 var(--serif); letter-spacing: -.01em; scroll-margin-top: 16px; }
.legal h3 { margin: 24px 0 6px; font: 600 17px/1.3 var(--sans); }
.legal p, .legal li { max-width: 68ch; }
.legal ul { padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal .cita { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 6px; font-size: 15.5px; }
.legal .cita p { margin: 0; }
.legal .cita p + p { margin-top: 10px; }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15.5px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); }
.legal th { font-weight: 600; }
.legal .indice { margin: 0 0 8px; padding: 0; list-style: none; columns: 2 240px; font-size: 15.5px; }
.legal .indice li { margin: 0 0 6px; break-inside: avoid; }

/* ---- pie ---- */
.pie { border-top: 1px solid var(--linea); }
.pie div { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 22px 20px 30px; font-size: 14.5px; color: var(--sub); }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .arriba nav { gap: 12px; font-size: 14px; }
  .legal th, .legal td { display: block; padding: 4px 0; border: 0; }
  .legal tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--linea); }
}