/* Branding de Luum Holdings encima de la estructura de la página: marino, oro, hielo y Merriweather Sans. */
:root {
  --noche: #011E41; --noche-2: #011E41; --morado: #011E41;
  --lima: #C9A44C; --tinta: #011E41; --blanco: #F4F9FD;
  --suave: #DEF4FD; --tenue: #9FACAB;
  --caja: #0B2B52; --borde: rgba(222, 244, 253, 0.14);
  --rojo: #C9A44C; --verde: #DEF4FD;
  --oro: #C9A44C; --oro-hondo: #A37400; --hielo: #DEF4FD; --marino: #011E41; --superficie: #0B2B52;
}
body { font-family: "Merriweather Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--marino); background-image: none; color: var(--blanco); }
b, strong { color: var(--blanco); }

/* Barra: campo hielo con el logo, como la página de tax liens */
.top { background: var(--hielo); border-bottom: 0; backdrop-filter: none; }
.top-fila { padding: 12px 16px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--marino); font-weight: 700; font-size: 13px; line-height: 1.15; }
.marca img { width: clamp(120px, 34vw, 170px); height: auto; display: block; }
.marca span { padding-left: 12px; border-left: 2px solid rgba(1, 30, 65, 0.18); }
@media (max-width: 400px) { .marca span { display: none; } }
.top-btn { background: var(--marino); color: var(--hielo); border-radius: 999px; padding: 10px 14px; font-weight: 800; }

.chip { color: var(--oro); border-color: rgba(201, 164, 76, 0.5); background: rgba(201, 164, 76, 0.1); }
.portada h1 span { color: var(--oro); }
.orden-mini i { color: var(--oro); }
.etq { color: var(--oro); }
a { color: var(--oro); }

/* Pasos: los tres círculos en oro, el número en marino */
.n.azul, .n.ambar, .n.verde { background: var(--oro); color: var(--marino); }
.recurso .ir { color: var(--oro); }
.barra.destacada { border-color: rgba(201, 164, 76, 0.6); }
.barra.destacada .pct { color: var(--oro); }
.resta li { border-left-color: var(--oro-hondo); }
.resta li span { color: var(--oro); }
.resta li.queda { border-left-color: var(--hielo); background: rgba(222, 244, 253, 0.08); }
.resta li.queda span { color: var(--hielo); }
.ejemplo { border-left-color: var(--oro); }

/* Botones de contacto con el estilo de Luum: oro sólido y hielo */
.btn-grande { background: var(--oro); color: var(--marino); font-weight: 800; box-shadow: 0 10px 30px rgba(201, 164, 76, 0.22); }
.btn-wa { background: var(--hielo); color: var(--marino); font-weight: 800; }

/* Pie con el logo sobre hielo */
.duo { display: grid; gap: 16px; align-items: center; grid-template-columns: auto 1fr; margin-top: 20px; }
.luum { background: var(--hielo); border-radius: 16px; padding: 14px 18px; display: block; }
.luum img { width: 160px; height: auto; display: block; }
.duo p { font-size: 15px; color: var(--suave); }
@media (max-width: 420px) { .duo { grid-template-columns: 1fr; } .luum { justify-self: start; } }
.aviso p { color: var(--suave); }

/* Escritorio: misma columna legible, portada sin hueco y botones a su medida */
@media (min-width: 900px) {
  .portada { min-height: auto; padding: 96px 0 24px; }
  .portada .btn-grande { max-width: 360px; }
  .contacto { justify-items: center; }
  .contacto .btn-grande { width: 100%; max-width: 420px; }
  .top-fila, .pagina { max-width: 720px; }
}