/* minouapp.com. Colores de Taro (claro) y Uva (oscuro), tal cual
   lib/app/theme/themes/lavanda.dart y lavanda_dark.dart. Dos familias de la app:
   Atkinson para leer y Fredoka para todo lo demás, títulos incluidos (Axel,
   2026-11-02; en la app los títulos son Bitter, UI_SYSTEM §1). Sin sombras;
   48 px de objetivo y 14 px de letra como piso. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fuentes/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fuentes/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
/* Fredoka Medium para los títulos de la página (Axel, 2026-11-02: todos los
   títulos en Fredoka, no en Bitter). */
@font-face {
  font-family: "Fredoka";
  src: url("fuentes/Fredoka-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
/* Fredoka Deco: la Fredoka gruesa que la app guarda para identidad
   (UI_SYSTEM §1, "la excepción"); aquí solo la lleva el nombre. */
@font-face {
  font-family: "Fredoka Deco";
  src: url("fuentes/Fredoka-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
/* La app pinta Fredoka con el archivo Light a peso 400 (pubspec.yaml,
   `sectionWeight`); se declara igual para que el navegador no la engorde. */
@font-face {
  font-family: "Fredoka";
  src: url("fuentes/Fredoka-Light.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --display: "Fredoka", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --action: "Fredoka", system-ui, sans-serif;

}

/* La página va siempre oscura (el fondo de abajo es casi negro), así que
   usa las tintas de Uva en claro y en oscuro. */
:root {
  --fondo-arriba: #1C1824;
  --fondo-abajo: #060507;
  --bg: var(--fondo-abajo);
  --surface: #1C1B21;
  --border: rgba(255, 255, 255, 0.13);
  --hair: rgba(237, 237, 239, 0.13);
  --text: #EDEDEF;
  --text-mid: #B0B0B8;
  --text-muted: #909099;
  --accent: #CEACF7;
  --accent-pale: rgba(206, 172, 247, 0.16);
  --accent-hover: rgba(206, 172, 247, 0.24);
  --accent-border: rgba(206, 172, 247, 0.40);
  color-scheme: dark;
}

/* Las cajas (tarjetas, preguntas, Anterior y Siguiente) van en negro con
   orilla de 1 px en el lila claro de la app (accentBright #DDB5F7), en claro
   y en oscuro; al pasar el cursor se tiñen de ciruela #3F244C (Axel,
   2026-11-02). Íconos y acento en lila claro; la descripción, del mismo color
   que el título. Todos los pares pasan AA sobre negro y sobre ciruela. */
.sello, .tarjeta, .preguntas, .paginador a {
  --surface: #000000;
  --surface-hover: #3F244C;
  --border: #DDB5F7;
  --hair: rgba(221, 181, 247, 0.35);
  --text: #F6F0FE;
  --text-mid: #F6F0FE;
  --text-muted: #C9B6DD;
  --accent: #DDB5F7;
  --accent-pale: rgba(221, 181, 247, 0.16);
  --accent-hover: rgba(221, 181, 247, 0.24);
  --accent-border: rgba(221, 181, 247, 0.40);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* El fondo (Axel, 2026-11-02): degradado de casi negro abajo a un poco más
   claro arriba, y rayas de papel tapiz muy tenues de 48 px con un pespunte
   lila dentro de cada raya clara, que se desvanecen hacia abajo. */
html { background: var(--fondo-abajo); }

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background: linear-gradient(to top, var(--fondo-abajo) 0%, #0D0B10 45%, var(--fondo-arriba) 100%) fixed;
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='8'%3E%3Crect width='48' height='8' fill='%23ffffff' fill-opacity='0.018'/%3E%3Crect x='45' width='1' height='2' fill='%23c9b0f2' fill-opacity='0.16'/%3E%3Crect x='2' width='1' height='2' fill='%23c9b0f2' fill-opacity='0.16'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 70%);
  mask-image: linear-gradient(to top, transparent 0%, #000 70%);
}
body > * { position: relative; z-index: 1; }

.pagina {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}
@media (min-width: 720px) {
  .pagina { padding: 56px 24px 64px; }
}

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Cabecera del índice ─────────────────────────────── */

.marca {
  display: flex;
  align-items: center;
  gap: 16px;
}
.marca img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  flex: none;
}
.marca h1 {
  margin: 0;
  font-family: "Fredoka Deco", var(--action);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.05;
}
.marca p {
  margin: 0;
  font-family: var(--action);
  font-size: 16px;
  line-height: 1.2;
  color: var(--accent);
}

.entrada {
  margin: 12px 0 0;
  color: var(--text-mid);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 0;
  border: 1px solid var(--accent-border);
  background: var(--accent-pale);
  color: var(--accent);
  font-family: var(--action);
  font-size: 16px;
  text-decoration: none;
}
.boton:hover { background: var(--accent-hover); }

/* Las insignias de las tiendas: las dos en un renglón, a la misma altura,
   también en el teléfono más angosto (16 px de orilla por lado). */
.insignias {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.insignias a {
  flex: 0 1 auto;
  min-width: 0;
  border-radius: 10px;
}
.insignias img {
  display: block;
  width: auto;
  height: 52px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 380px) {
  .insignias img { height: auto; width: 100%; }
  .insignias a { flex: 1 1 0; }
}

/* ── Rótulo de sección: la única voz en mayúsculas ───── */

.rotulo {
  margin: 40px 0 12px;
  padding-left: 4px;
  font-family: var(--action);
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
}

/* ── El índice: una tarjeta por página ───────────────── */

/* Cada página es una tarjeta con su ícono solo, en lila, sin recuadro
   (Axel, 2026-11-02). Descargar lleva el ícono de la app. */

.indice {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sello {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 20px;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
a.sello:hover { background-color: var(--surface-hover); }

.lamina {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  color: var(--accent);
}
.lamina svg { width: 36px; height: 36px; }
.lamina img.app { width: 40px; height: 40px; border-radius: 10px; }

.texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 0;
}
.texto .t {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  color: var(--text);
}
.texto .d {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-mid);
}

/* ── Páginas interiores ──────────────────────────────── */

.volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 0;
  background: var(--accent-pale);
  color: var(--accent);
  font-family: var(--action);
  font-size: 16px;
  text-decoration: none;
}
.volver:hover { background: var(--accent-hover); }

/* El encabezado es el mismo sello del índice, un poco más grande. */
.encabezado { margin-top: 24px; }
.encabezado .lamina { width: 48px; }
.encabezado .lamina svg { width: 44px; height: 44px; }
.encabezado .texto .t { font-size: 24px; line-height: 1.2; }
.encabezado .texto .d { font-size: 16px; }

.contenido h2 {
  margin: 36px 0 8px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3;
}
.contenido h2:first-child { margin-top: 32px; }
.contenido > p:first-child { margin-top: 24px; }
.contenido p { margin: 0 0 14px; }
.contenido ul, .contenido ol { margin: 0 0 14px; padding-left: 24px; }
.contenido li { margin: 4px 0; }
.contenido li::marker { color: var(--text-muted); }
.contenido strong { font-weight: 700; }

.tarjeta {
  margin: 16px 0;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
}
.tarjeta h2, .contenido .tarjeta h2:first-child { margin-top: 0; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta .boton { margin-top: 4px; }

.dato {
  font-family: var(--action);
  font-size: 15px;
  color: var(--text-muted);
}

/* Preguntas: su propio índice arriba, como un sitio de antes. */
.contenido .preguntas {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.contenido .preguntas li { margin: 0; }
.preguntas li + li { border-top: 1px solid var(--hair); }
.preguntas a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 16px;
  font-family: var(--action);
  font-size: 16px;
  text-decoration: none;
}
.preguntas a:hover { background-color: var(--surface-hover); }

.contenido h2[id] { scroll-margin-top: 16px; }

/* Anterior y siguiente, como hojas de un libro. */
.paginador {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
}
.paginador a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  text-decoration: none;
}
.paginador a:hover { background-color: var(--surface-hover); }
.paginador .siguiente { grid-column: 2; text-align: right; }
.paginador small {
  font-family: var(--action);
  font-size: 14px;
  color: var(--text-muted);
}
.paginador span {
  font-family: var(--action);
  font-size: 17px;
  line-height: 1.35;
}

/* ── Pie ─────────────────────────────────────────────── */

.pie {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-family: var(--action);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}
.pie p { margin: 0 0 8px; }

/* Un toque de Web 2.0 en las cajas (Axel, 2026-11-03): un brillo de vidrio
   en la parte de arriba, con orilla marcada como en los botones de 2008, una
   línea de luz arriba por dentro y el negro que se aclara apenas hacia arriba.
   Todo leve: el brillo no pasa de 9 % de blanco, así que el texto que queda
   debajo conserva su contraste. Sin sombra hacia afuera ni blur. */
.sello, .tarjeta, .contenido .preguntas, .paginador a {
  position: relative;
  background-image: linear-gradient(to bottom, rgba(221, 181, 247, 0.07), rgba(221, 181, 247, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.sello::before, .tarjeta::before, .contenido .preguntas::before, .paginador a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44%;
  max-height: 44px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
  pointer-events: none;
}
.sello > *, .tarjeta > *, .preguntas > li, .paginador a > * { position: relative; }

@media (max-width: 420px) {
  .sello { gap: 14px; padding: 4px 16px; }
  .paginador { grid-template-columns: 1fr; }
  .paginador .siguiente { grid-column: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  a.sello, .boton, .volver, .paginador a, .preguntas a {
    transition: background-color 150ms ease;
  }
}