:root {
  /* Paleta: negro cálido, blanco y amarillo Ferrari; formas redondeadas */
  --noche: #121212; --amarillo: #ffd800; --acento: #b89600;
  --tinta: #141414; --texto: #222; --suave: #6b6b6b; --linea: #ebe8e1;
  --fondo: #ffffff; --panel: #f6f4ef;
  --sol: var(--amarillo); --sol-oscuro: #e6c200;
  --verde: #0a7d5a; --verde-fondo: #dcf3ea; --ambar: #8a5a00; --ambar-fondo: #fff3c2;
  --rojo: #9b2226; --rojo-fondo: #fbe4e4; --gris-fondo: #eeece7;
  --wa: #efeae2; --wa-burbuja: #ffffff;
  --radio: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --acento: #ffd800; --tinta: #f3f3f1; --texto: #e2e2df; --suave: #a3a3a0; --linea: #2a2a2a;
    --fondo: #121212; --panel: #1c1c1c;
    --verde: #6fd3a8; --verde-fondo: #143528; --ambar: #f0c35a; --ambar-fondo: #3a2e12;
    --rojo: #f19a9a; --rojo-fondo: #3b1818; --gris-fondo: #222;
    --wa: #0b141a; --wa-burbuja: #202c33;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 64px; }
body { margin: 0; font: 16px/1.55 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--texto); background: var(--fondo); }
h1, h2, h3 { font-family: "Figtree", system-ui, sans-serif; font-weight: 500; letter-spacing: -.015em; color: var(--tinta); line-height: 1.15; margin: 0 0 .5em; }
.serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
a { color: inherit; }
.contenedor { width: min(1120px, 100% - 32px); margin: 0 auto; }

/* Encabezado */
.barra { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.barra .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 22px; color: var(--tinta); text-decoration: none; }
.marca .sol { width: 12px; height: 12px; border-radius: 50%; background: var(--amarillo); }
.menu { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.menu a { text-decoration: none; color: var(--suave); }
.menu a:hover { color: var(--tinta); }

/* Botones y formularios */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; border-radius: 999px; padding: 11px 24px; border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); text-decoration: none; cursor: pointer; }
.boton:hover { border-color: var(--suave); }
.boton.principal { background: var(--amarillo); border-color: var(--amarillo); color: #111; }
.boton.principal:hover { background: var(--sol-oscuro); border-color: var(--sol-oscuro); color: #111; }
.boton.peligro { color: var(--rojo); }
.boton.chico { padding: 7px 14px; font-size: 14px; }
.boton:disabled { opacity: .55; cursor: default; }
input, select, textarea { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 12px; width: 100%; }
label { display: grid; gap: 6px; font-size: 14px; color: var(--suave); }
.tarjeta { background: var(--panel); border: 0; border-radius: 28px; padding: 28px; }
.muted { color: var(--suave); font-size: 14px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.chip.activo { color: var(--verde); background: var(--verde-fondo); }
.chip.pausado, .chip.pendiente { color: var(--ambar); background: var(--ambar-fondo); }
.chip.baja { color: var(--rojo); background: var(--rojo-fondo); }
.aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: var(--fondo); padding: 10px 18px; border-radius: 10px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 20; }
.aviso.visible { opacity: 1; }
.pie { border-top: 1px solid var(--linea); padding: 28px 0 40px; color: var(--suave); font-size: 14px; }
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

@media (max-width: 720px) {
  .menu a:not(.boton) { display: none; }
}