/* Marca: colores y letras de la guía de Margarita Studio */
:root {
  --cielo: #BAD6FD;
  --vino: #570301;
  --noche: #143345;
  --mantequilla: #F7E594;
  --papel: #FBFCFF;
  --ciruela: #2D0320;   /* agregados 2026-11: fondo con flor celeste */
  --lino: #EBE9DD;      /* fondo con flor negra */
  --negro: #000000;
  --display: "Rubik", system-ui, sans-serif;
  --texto: "Open Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--cielo);
  color: var(--noche);
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--vino); outline-offset: 3px; border-radius: 6px; }

.logo {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font: 900 22px/1 var(--display); letter-spacing: -0.045em; white-space: nowrap;
}
.logo svg { width: 26px; height: 26px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--display); text-decoration: none; cursor: pointer;
  padding: 13px 20px; border-radius: 999px; border: 0;
  background: var(--noche); color: var(--cielo);
  transition: transform .15s, background .2s, opacity .2s;
}
.boton:hover { transform: translateY(-1px); }
.boton:disabled { opacity: .5; cursor: progress; transform: none; }
.boton.secundario { background: transparent; color: var(--noche); box-shadow: inset 0 0 0 2px var(--noche); }
.boton.peligro { background: var(--vino); color: var(--mantequilla); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}