/* ============ Dindom — shared site styles ============ */
:root {
  /* (09/09/2026) Rebrand: morado profundo + turquesa, igual que la app
     (ver app/src/config/theme.ts) - antes era indigo + dorado. */
  --bg: #FAF9FF;
  --surface: #FFFFFF;
  --surface-alt: #F1EEFC;
  --ink: #1B1730;
  --ink-soft: #625C79;
  --primary: #571673;
  --primary-deep: #3F1053;
  --primary-soft: #F3EFF5;
  --gold: #00827D;
  --gold-soft: #E0FAF9;
  --line: #E4E0F5;
  --shadow: 0 16px 40px -20px rgba(87, 22, 115, 0.35);
}
/* (10/09/2026) Antes el fondo cambiaba solo según el modo claro/oscuro
   del sistema operativo del visitante - eso es lo que causaba que la
   misma página se viera "morada" en una compu (con el sistema en modo
   oscuro) y "blanca" en un celular (con el sistema en modo claro): no
   era ningún error, pero confundía porque parecía que el sitio no
   cargaba bien. Se fija un solo look de marca para todos, sin importar
   el modo del dispositivo. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
.eyebrow {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--primary-deep);
}
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* padding-block (no el shorthand "padding") a propósito: este elemento
   ya es un ".wrap" (padding: 0 24px), y un padding de acá que también
   tocara los costados lo pisaría por completo (misma especificidad,
   este selector va después en la hoja de estilos) - dejaba el logo
   pegado contra el borde de la pantalla en celulares, donde el
   max-width de ".wrap" ya no hace de por sí un margen visual. */
.nav-row { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: "Fraunces", serif; font-weight: 700; font-size: 20px; text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--primary) 70%, transparent);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
nav.links { display: flex; gap: 28px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
nav.links a { text-decoration: none; }
nav.links a:hover { color: var(--primary-deep); }
@media (max-width: 680px) { nav.links { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 12px; font-weight: 700; font-size: 14.5px;
  text-decoration: none; border: 1px solid transparent;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--primary-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-deep); }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); padding: 40px 0 32px; }
.foot-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.foot-brand { max-width: 34ch; }
.foot-brand p { color: var(--ink-soft); font-size: 13.5px; margin-top: 8px; }
.foot-col h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft); margin: 0 0 10px; font-family: "Manrope", sans-serif; font-weight: 700;
}
.foot-col a, .foot-col span { display: block; font-size: 14px; color: var(--ink); text-decoration: none; margin-bottom: 6px; }
.foot-col a:hover { color: var(--primary-deep); }
.fine { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }

/* ---------- cookie banner ---------- */
#cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 20px 44px -18px rgba(20,10,50,0.35);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
#cookie-banner p { margin: 0; font-size: 13.5px; color: var(--ink-soft); flex: 1 1 260px; }
#cookie-banner .actions { display: flex; gap: 8px; }
#cookie-banner button {
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  border-radius: 10px; padding: 9px 16px; border: 1px solid var(--line); background: transparent; color: var(--ink);
}
#cookie-banner button.accept { background: var(--primary); color: #fff; border-color: transparent; }
#cookie-banner a.detail {
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: 13px; text-decoration: none; color: var(--ink);
  border-radius: 10px; padding: 9px 16px; border: 1px solid var(--line);
}
#cookie-banner a.detail:hover { border-color: var(--primary); color: var(--primary-deep); }
#cookie-banner[hidden] { display: none; }

/* ---------- legal document pages ---------- */
.legal-hero { padding-block: 56px 8px; } /* padding-block: ver nota en .nav-row */
.legal-hero .eyebrow { display: block; margin-bottom: 10px; }
.legal-hero h1 { font-size: clamp(28px, 4vw, 40px); }
.legal-hero .meta { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.legal-hero .meta strong { color: var(--ink); }
.legal-body { padding-block: 24px 72px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; } /* padding-block: ver nota en .nav-row */
.toc { position: sticky; top: 90px; display: grid; gap: 4px; font-size: 13.5px; }
.toc a {
  text-decoration: none; color: var(--ink-soft); padding: 6px 8px;
  border-radius: 9px;
  transition: color .2s ease, background-color .2s ease, font-weight .1s;
}
.toc a:hover { color: var(--primary-deep); }
/* (17/09/2026) "que se quede tipo marcado, esa animación" - la sección
   que se está leyendo (o la que se tocó en el índice) queda resaltada,
   tanto en la barra lateral de PC como en el menú de celular de abajo -
   son los mismos links, el resaltado los sigue a donde sea que la hoja
   de estilos los esté mostrando. El JS que le agrega/saca esta clase
   está en site.js. */
.toc a.active { color: var(--primary-deep); background: var(--primary-soft); font-weight: 700; }

/* ---------- índice en celular: botón hamburguesa ---------- */
/* (17/09/2026) "no me gustó como quedó el índice, mejor un menú
   hamburguesa" - reemplaza la barra horizontal con scroll propio del
   16/09/2026 (esa fue la primera solución al problema de que el índice
   chocaba con el texto en Android). Ahora en celular el índice entero se
   esconde detrás de un botón de 3 rayas pegado debajo del header; al
   tocarlo se despliega hacia abajo la misma lista de siempre, y al elegir
   una sección el menú se cierra solo. En PC no cambia nada - ahí el botón
   queda oculto y el índice sigue siendo la barra lateral de siempre. */
.toc-toggle {
  display: none; /* Solo aparece en celular, ver media query de abajo. */
  width: 100%; align-items: center; gap: 12px;
  border: none; background: transparent; color: var(--ink);
  font: inherit; font-weight: 700; font-size: 14.5px;
  padding: 14px 0; cursor: pointer; text-align: left;
}
.toc-toggle-icon { position: relative; width: 20px; height: 14px; flex-shrink: 0; }
.toc-toggle-icon span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--primary);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.toc-toggle-icon span:nth-child(1) { top: 0; }
.toc-toggle-icon span:nth-child(2) { top: 6px; }
.toc-toggle-icon span:nth-child(3) { top: 12px; }
/* Animación de "3 rayas" a "X" cuando el menú está abierto. */
.toc-toggle[aria-expanded="true"] .toc-toggle-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.toc-toggle[aria-expanded="true"] .toc-toggle-icon span:nth-child(2) { opacity: 0; }
.toc-toggle[aria-expanded="true"] .toc-toggle-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.toc-toggle-label { flex: 1; }
.toc-toggle-chevron { font-size: 18px; color: var(--ink-soft); transition: transform .25s ease; }
.toc-toggle[aria-expanded="true"] .toc-toggle-chevron { transform: rotate(90deg); }

@media (max-width: 860px) {
  .legal-body { display: block; }
  .toc-toggle {
    display: flex; position: sticky; top: 0; z-index: 5;
    margin: 0 -24px; padding: 14px 24px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .toc {
    position: static;
    display: grid;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0 -24px 0;
    padding: 0 24px;
    border-bottom: 1px solid transparent;
    transition: max-height .3s ease, opacity .25s ease, padding-block .3s ease, border-color .3s ease;
  }
  .toc.open {
    max-height: 70vh;
    overflow-y: auto;
    opacity: 1;
    padding-block: 10px 18px;
    border-bottom-color: var(--line);
    margin-bottom: 24px;
  }
}
.legal-content { max-width: 68ch; }
.legal-content section { margin-bottom: 34px; scroll-margin-top: 90px; }
.legal-content h2 { font-size: 19px; margin-bottom: 10px; }
.legal-content h3 { font-size: 15.5px; font-family: "Manrope", sans-serif; font-weight: 800; margin: 18px 0 6px; }
.legal-content p { color: var(--ink-soft); font-size: 15px; margin: 0 0 12px; }
.legal-content ul, .legal-content ol { color: var(--ink-soft); font-size: 15px; padding-left: 20px; margin: 0 0 12px; }
.legal-content li { margin-bottom: 6px; }
.legal-content strong { color: var(--ink); }
.callout {
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; font-size: 13.5px; color: var(--ink-soft); margin: 0 0 28px;
}
.callout strong { color: var(--ink); }
.law-tag {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; background: var(--gold-soft); color: var(--gold); margin: 0 4px 4px 0;
}

/* (10/10/2026) Botón para pasar el documento legal a inglés / español. */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--primary); color: var(--primary-deep); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.lang-switch::before { content: "\21C4"; font-size: 14px; }
.lang-switch:hover { background: var(--primary-soft); }
.lang-switch:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.lang-note { margin-top: 28px; font-size: 13px; color: var(--ink-soft); font-style: italic; }