/* TonoSana – capa de diseño común (cabecera, accesos a herramientas y detalles visuales) */
:root {
  --acento-rosa: #e0457b;
  --acento-violeta: #7c5cff;
  --acento-naranja: #d9701a;
  --sombra: 0 1px 2px rgba(16, 33, 31, .06), 0 8px 24px rgba(16, 33, 31, .08);
  --sombra-alta: 0 2px 4px rgba(16, 33, 31, .08), 0 16px 40px rgba(16, 33, 31, .14);
}
@media (prefers-color-scheme: dark) {
  :root {
    --acento-rosa: #ff6f9f;
    --acento-violeta: #a08bff;
    --acento-naranja: #ffa65c;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .5);
  }
}

/* Fondo con un toque de color arriba */
body {
  background:
    radial-gradient(900px 380px at 10% -120px, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(700px 320px at 95% -100px, color-mix(in srgb, var(--acento-violeta) 12%, transparent), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}

/* Cabecera fija con las tres herramientas siempre a la vista */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
}
.header-in { min-height: 64px; }
.logo { font-size: 1.2rem; letter-spacing: -.01em; }
.logo img { border-radius: 8px; box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 40%, transparent); }
.nav { gap: 6px; }
.nav .nav-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 99px; border: 1px solid transparent;
  color: var(--text); font-weight: 600; font-size: .92rem; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.nav .nav-tool:hover { background: var(--brand-soft); color: var(--brand); }
.nav .nav-tool[aria-current="page"] { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); }
.nav .nav-tool span { font-size: 1.05rem; line-height: 1; }

/* Portada y títulos */
.hero { padding-top: 32px; }
.hero h1 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); letter-spacing: -.02em; }
.lead { font-size: 1.04rem; max-width: 760px; }

/* Accesos a las herramientas */
.hub { margin: 6px auto 22px; }
.hub-titulo { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hub-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none;
  box-shadow: var(--sombra); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--color) 55%, var(--line)); }
.hub-card:focus-visible { outline: 3px solid var(--color); outline-offset: 3px; }
.hub-icono {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.6rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color) 28%, transparent), color-mix(in srgb, var(--color) 10%, transparent));
}
.hub-card strong { display: block; font-size: 1.08rem; line-height: 1.25; }
.hub-card small { display: block; color: var(--muted); font-size: .9rem; line-height: 1.4; margin-top: 2px; }
.hub-ir { margin-top: auto; font-weight: 700; font-size: .92rem; color: var(--color); }
.hub-nuevo {
  position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: 99px;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--color);
}
.hub-convertidor { --color: var(--brand); }
.hub-stickers { --color: var(--acento-rosa); }
.hub-separador { --color: var(--acento-violeta); }
.hub-quitar { --color: var(--acento-naranja); }
.hub-actual { border-color: color-mix(in srgb, var(--color) 55%, var(--line)); }
.hub-compacto .hub-card { flex-direction: row; align-items: center; padding: 14px; }
.hub-compacto .hub-icono { width: 44px; height: 44px; font-size: 1.35rem; flex: none; }
.hub-compacto .hub-ir, .hub-compacto .hub-nuevo { display: none; }

/* Tarjetas y botones con más presencia */
.card { border-radius: 18px; box-shadow: var(--sombra); }
.tool-btn { border-radius: 14px; }
.tool-btn.is-active { box-shadow: inset 0 0 0 1px var(--brand), 0 4px 14px color-mix(in srgb, var(--brand) 20%, transparent); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--acento-violeta)));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(135deg, var(--brand-dark), color-mix(in srgb, var(--brand-dark) 70%, var(--acento-violeta))); }
.drop { border-radius: 16px; background: color-mix(in srgb, var(--brand-soft) 35%, transparent); }
.trust li { background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; }
.content h2 { letter-spacing: -.01em; }
details { border-radius: 14px; }

/* Pie de página */
.site-footer { margin-top: 12px; }
.footer-nav a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.footer-nav a:hover { color: var(--brand); text-decoration: underline; }

/* Celular: las herramientas quedan como botones deslizables bajo el logo */
@media (max-width: 640px) {
  .header-in { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav { gap: 5px; }
  .nav .nav-tool { flex: 1 0 auto; justify-content: center; padding: 6px 9px; font-size: .84rem; gap: 4px; border-color: var(--line); background: var(--surface); }
  .hero { padding-top: 18px; }
  .hub-card { padding: 14px; }
  .trust { justify-content: flex-start; }
}