/* Estilos de la portada de TODOEN1.
   La portada es neutra (papel y tinta, con un toque lima) para que cada
   herramienta se distinga por el color de su categoría. */

:root {
  --bg: #111210;
  --fg: #f1efe8;
  --muted: #a8a69d;
  --line: rgba(241, 239, 232, 0.16);
  --lima: #d4f04a;
  --accent: var(--lima);
  --accent-fg: #14150f;
  --f-display: 'Bricolage Grotesque', 'Outfit', 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f0e8;
    --fg: #14150f;
    --muted: #5d5c54;
    --line: rgba(20, 21, 15, 0.18);
    --accent: #14150f;
    --accent-fg: #f2f0e8;
  }
}

/* el color de cada categoría: --tinte es el fondo de la tarjeta, --tono el acento */
[data-cat="comer"] { --tinte: #3a2611; --tono: #f0a23a; }
[data-cat="cuentas"] { --tinte: #15301f; --tono: #7fd69a; }
[data-cat="juegos"] { --tinte: #3b1614; --tono: #ff7b6e; }
[data-cat="cuando"] { --tinte: #14283f; --tono: #7dbdf0; }
@media (prefers-color-scheme: light) {
  [data-cat="comer"] { --tinte: #fadfbd; --tono: #b4500d; }
  [data-cat="cuentas"] { --tinte: #d5edd6; --tono: #1c7038; }
  [data-cat="juegos"] { --tinte: #f8d6d1; --tono: #b3261e; }
  [data-cat="cuando"] { --tinte: #d3e6f7; --tono: #1a66a8; }
}

main.portada { max-width: 980px; }
.marca { font-family: 'Outfit', 'Segoe UI', sans-serif; font-size: 1.15rem; }
.marca span { background: var(--lima); color: #14150f; padding: 0 0.28em; margin-left: 0.12em; border-radius: 4px; }

.portada h1 { font-size: clamp(2.5rem, 9.5vw, 5.2rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; max-width: 14ch; text-wrap: balance; }
.portada h1 em { font-style: normal; color: inherit; background: linear-gradient(transparent 62%, var(--lima) 62%, var(--lima) 92%, transparent 92%); }
@media (prefers-color-scheme: dark) { .portada h1 em { background: none; color: var(--lima); } }
.portada .subtitulo { font-size: 1.15rem; max-width: 30rem; }

/* ---------- las categorías: una barra que queda arriba al bajar ---------- */
.categorias {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: clamp(28px, 7vw, 48px) -16px 0;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }
.categoria {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: none;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.categoria::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tono, var(--muted)); }
.categoria[data-filtro="todas"]::before { display: none; }
.categoria[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: transparent; }
@media (hover: hover) { .categoria:hover { border-color: var(--fg); } }

/* ---------- las herramientas ---------- */
.grilla-herramientas { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .grilla-herramientas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grilla-herramientas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tarjeta[hidden] { display: none; }
.tarjeta > a, .tarjeta > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 210px;
  padding: 18px;
  border-radius: 22px;
  background: var(--tinte);
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s;
}
.tarjeta .cat { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tono); }
.tarjeta strong { font: 700 1.55rem/1.1 var(--f-display); letter-spacing: -0.02em; margin-top: 4px; max-width: 12ch; }
.tarjeta .desc { font-size: 0.95rem; margin-top: 6px; opacity: 0.85; max-width: 26ch; }
.tarjeta > a::after { content: "→"; position: absolute; right: 18px; bottom: 16px; font: 500 1.5rem var(--f-display); color: var(--tono); transition: transform 0.25s; }
.tarjeta > a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (hover: hover) {
  .tarjeta > a:hover { transform: translateY(-4px); }
  .tarjeta > a:hover::after { transform: translateX(5px); }
  .tarjeta > a:hover .objeto { transform: rotate(3deg) scale(1.06); }
}

/* las que todavía no existen: mismo formato, apagadas y sin enlace */
.tarjeta.pronto > div { background: none; border: 1.5px dashed var(--line); min-height: 150px; }
.tarjeta.pronto strong { color: var(--muted); }
.tarjeta.pronto .desc { color: var(--muted); }

/* ---------- el objeto de cada herramienta, dibujado en chiquito ---------- */
.objeto { position: absolute; top: 16px; right: 18px; width: 62px; height: 78px; transform: rotate(-6deg); transition: transform 0.3s; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, 0.45); }
.objeto i { display: block; height: 0; border-top: 3px dotted currentColor; margin: 9px 9px 0; opacity: 0.55; }
.objeto i:first-child { margin-top: 16px; }

/* el ticket de Dividir gastos */
.ticketito {
  background: #f6efdf;
  color: #2a2018;
  box-shadow: none;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
}
/* la pizarra de la Calculadora de asado */
.pizarrita { background: #1d2924; color: #f3f0e7; border: 4px solid #7c5029; border-radius: 5px; }
.pizarrita i { border-top-style: solid; border-top-width: 2px; margin-inline: 7px; opacity: 0.8; }
.pizarrita i:nth-child(2) { width: 55%; }
/* la hoja de almanaque de Próximo feriado */
.hojita { background: #fffdf6; color: #14233a; border-radius: 4px 4px 8px 8px; border-top: 16px solid #74acdf; display: grid; place-items: center; font: 700 2.4rem/1 'Fraunces', Georgia, serif; }

/* la carta de la Mafia */
.cartita {
  border-radius: 8px;
  border: 4px solid #f4ecdc;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px),
    #b3261e;
  display: grid;
  place-items: center;
  color: #f4ecdc;
  font: 700 1.7rem/1 Georgia, serif;
}

/* ---------- pie ---------- */
.pie .refran { font-family: 'Outfit', 'Segoe UI', sans-serif; }