/* quieroMiHipoteca.com - estilos custom (dark theme + componentes) */

:root {
  --ink-950: #070A14;
  --ink-900: #0B0F1E;
  --ink-800: #0F152A;
  --line:    #1F2A48;
  --brand-500: #6366F1;
  --accent-500: #10B981;
  --sun-400: #FACC15;
}

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

/* ===== Logo (quieroMiHipoteca.com) =====
   El logo viene con fondo blanco; el contenedor (.rsf-logo-box) le da
   el "card" claro que enmarca todo. */
.rsf-logo {
  display: block;
  object-fit: contain;
  max-width: 100%;
}

/* Contenedor claro para el logo: hace que el bloque entero sea blanco
   (no solo la imagen), así destaca sobre el dark mode. */
.rsf-logo-box {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.rsf-logo-box.md\:hidden {
  /* Respetamos el md:hidden de Tailwind: oculto en >=768px */
}
@media (min-width: 768px) {
  .rsf-logo-box.md\:hidden { display: none !important; }
}
.rsf-logo-box .rsf-logo {
  background: transparent !important;
}

/* ============================================================
   Cabecera del sidebar (desktop) · logo MUY claramente enmarcado
   con aire alrededor — evita que se pegue a las paredes del nav.
   ============================================================ */
.rsf-sidebar-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.75rem 1.25rem !important; /* 28px arriba/abajo, 20px lateral */
  border-bottom: 1px solid var(--line) !important;
  background: transparent;
}
.rsf-logo-sidebar {
  /* Logo box del sidebar desktop: tamaño compacto y centrado */
  max-width: calc(100% - 1.5rem) !important; /* 12px de aire a cada lado interno */
  padding: 0.35rem 0.65rem !important;       /* proporcionado al logo h-5 */
  margin: 0 auto !important;
}
.rsf-logo-sidebar .rsf-logo,
.rsf-logo-sidebar img.rsf-logo,
.rsf-logo-sidebar > img {
  height: 56px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

/* ============================================================
   Hero de la home · ocupa toda la primera pantalla.
   Descontamos la altura del header (h-16 = 64px) del viewport.
   Usamos dvh donde sea posible para que iOS Safari no recorte
   el contenido con la barra dinámica del navegador.
   ============================================================ */
.rsf-hero {
  min-height: calc(100vh - 4rem);  /* fallback amplio */
  min-height: calc(100svh - 4rem); /* viewport "small" estable */
}
@supports (height: 100dvh) {
  .rsf-hero {
    min-height: calc(100dvh - 4rem);
  }
}
@media (max-width: 640px) {
  /* En móvil aseguramos que el contenido no quede cortado por
     barras dinámicas y se vea el indicador "Sigue bajando" */
  .rsf-hero {
    padding-bottom: 2rem;
  }
}

/* ===== Fondos / patrones ===== */
.hero-glow {
  background:
    radial-gradient(60rem 30rem at 50% -10%, rgba(99,102,241,0.35), transparent 70%),
    radial-gradient(40rem 20rem at 90% 10%, rgba(16,185,129,0.20), transparent 70%),
    radial-gradient(35rem 18rem at 5% 30%, rgba(250,204,21,0.12), transparent 70%);
}
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.gradient-text {
  background: linear-gradient(120deg, #fff 30%, #7AB3FF 60%, #34D399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-border {
  position: relative;
  background: linear-gradient(var(--ink-900), var(--ink-900)) padding-box,
              linear-gradient(135deg, rgba(47,123,240,0.6), rgba(16,185,129,0.5)) border-box;
  border: 1px solid transparent;
}

/* ===== Inputs ===== */
.input, .input-dark {
  width: 100%;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(11,15,30,0.85);
  color: #f1f5f9;
  font-size: 0.95rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #64748b; }
.input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.label { display:block; font-size:0.85rem; font-weight:600; color:#cbd5e1; margin-bottom:0.4rem; }

/* ===== Formulario sobre fondo CLARO (cards blancas dentro del panel) =====
   El .input / .label están pensados para fondo oscuro (text claro sobre fondo
   azul). Cuando un formulario vive dentro de una tarjeta blanca (ej. "Editar
   datos del cliente" o "Intereses del cliente" en la ficha), las letras se
   ven casi blancas → ilegibles en TEMA CLARO. Esta clase de scope
   ('rsf-form-light') las recolorea SOLO en tema claro; en tema oscuro deja
   el comportamiento por defecto del panel (inputs y texto claros sobre la
   card blanca, que es como funcionaba antes). */
html.theme-light .rsf-form-light { color: #1F2937; }                /* slate-800 */
html.theme-light .rsf-form-light .label { color: #334155; }         /* slate-700 */
html.theme-light .rsf-form-light .input,
html.theme-light .rsf-form-light .input-dark {
  background: #FFFFFF;
  color: #0F172A;                                                    /* slate-900 */
  border-color: #CBD5E1;                                             /* slate-300 */
}
html.theme-light .rsf-form-light .input::placeholder { color: #94A3B8; }
html.theme-light .rsf-form-light .input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
html.theme-light .rsf-form-light .help { color: #64748B; }
/* Tiles de checkbox/radio (Tipo vivienda, Tipología, Habitaciones…) */
html.theme-light .rsf-form-light label.cursor-pointer,
html.theme-light .rsf-form-light label.cursor-pointer span { color: #1F2937; }
html.theme-light .rsf-form-light textarea {
  background: #FFFFFF; color: #0F172A; border-color: #CBD5E1;
}
html.theme-light .rsf-form-light textarea::placeholder { color: #94A3B8; }

/* ===== Cards de "Interesados" en la ficha de propiedad =====
   Hover sin contraste en tema oscuro → forzamos colores explícitos para
   que letras y fondo siempre se diferencien bien, en cualquier modo. */
.rsf-interesado-card { background-color: #F8FAFC; transition: background-color .15s; }
.rsf-interesado-card > summary:hover { background-color: #E0E7FF !important; }   /* brand-50 → contraste claro */
.rsf-interesado-card .rsf-int-nombre,
.rsf-interesado-card .rsf-int-nombre a { color: #0F172A !important; }            /* nombre: slate-900 */
.rsf-interesado-card .rsf-int-meta    { color: #475569 !important; }            /* código/tel/email: slate-600 */
.rsf-interesado-card .rsf-int-notas   { color: #334155 !important; }            /* notas: slate-700 */
/* En HOVER reforzamos aún más el contraste sobre el fondo indigo-50 */
.rsf-interesado-card > summary:hover .rsf-int-nombre,
.rsf-interesado-card > summary:hover .rsf-int-nombre a { color: #000000 !important; }
.rsf-interesado-card > summary:hover .rsf-int-meta     { color: #1E293B !important; }   /* slate-800 */
.rsf-interesado-card > summary:hover .rsf-int-notas    { color: #0F172A !important; }   /* slate-900 */
.help  { font-size:0.82rem; color:#94a3b8; margin-top:0.25rem; }

/* Textos muy pequeños un poco más grandes para mejor legibilidad (solo panel AGENTE) */
.rsf-area-agente .text-\[9px\]  { font-size: 11px !important;   line-height: 1.4 !important; }
.rsf-area-agente .text-\[10px\] { font-size: 12.5px !important; line-height: 1.45 !important; }
.rsf-area-agente .text-\[11px\] { font-size: 12.5px !important; line-height: 1.45 !important; }

/* Buscador superior (panel agente y admin): doble de ancho */
.rsf-topsearch { min-width: 340px; justify-content: space-between; }

/* Escalado individual de logos de bancos (página /bancos).
   Algunos SVG vienen con mucho padding interno y se ven pequeños al
   normalizar el alto; aquí los ampliamos visualmente para igualar el
   peso visual con los apaisados (Santander, Sabadell, etc.). */
/* Tamaño de cada logo por separado. Muchos SVG traen mucho margen en blanco
   alrededor, así que al mismo alto unos se ven grandes y otros diminutos.
   La escala se aplica sobre el tamaño natural dentro de su tarjeta.
   Para retocar cualquiera, cambia SOLO su número. */
.rsf-bank-logo { transform-origin: center center; transition: transform .15s; }

.rsf-bank-logo[data-slug="deutsche-bank"]  { transform: scale(2.25); }
.rsf-bank-logo[data-slug="unicaja"]        { transform: scale(2.25); }
.rsf-bank-logo[data-slug="ibercaja"]       { transform: scale(1.95); }
.rsf-bank-logo[data-slug="kutxabank"]      { transform: scale(1.95); }
.rsf-bank-logo[data-slug="caja-rural-sur"] { transform: scale(1.25); }
.rsf-bank-logo[data-slug="eurocaja-rural"] { transform: scale(1.25); }
.rsf-bank-logo[data-slug="caixabank"]      { transform: scale(1.25); }
.rsf-bank-logo[data-slug="uci"]            { transform: scale(1.25); }
.rsf-bank-logo[data-slug="bankinter"]      { transform: scale(1.05); }
.rsf-bank-logo[data-slug="bbva"]           { transform: scale(0.9); }
.rsf-bank-logo[data-slug="ing"]            { transform: scale(0.9); }

/* ===== Badges "Días en estado" y "Score" (admin · listado de leads) =====
   Tema oscuro: fondo translúcido + texto saturado claro (visible sobre panel). */
.rsf-tag-dias, .rsf-tag-score { border: 1px solid transparent; }
.rsf-tag-dias--alto  { background: rgba(220,38,38,0.18);   color:#FCA5A5; border-color: rgba(220,38,38,0.45); }
.rsf-tag-dias--medio { background: rgba(249,115,22,0.18);  color:#FDBA74; border-color: rgba(249,115,22,0.45); }
.rsf-tag-dias--bajo  { background: rgba(148,163,184,0.18); color:#CBD5E1; border-color: rgba(148,163,184,0.35); }
.rsf-tag-score--alto  { background: rgba(5,150,105,0.18);  color:#6EE7B7; border-color: rgba(5,150,105,0.45); }
.rsf-tag-score--medio { background: rgba(245,158,11,0.18); color:#FCD34D; border-color: rgba(245,158,11,0.45); }
.rsf-tag-score--bajo  { background: rgba(220,38,38,0.18);  color:#FCA5A5; border-color: rgba(220,38,38,0.45); }

/* ===== Filtros del Match inmobiliario: altura unificada para inputs y selects ===== */
.rsf-filter-field {
  height: 34px !important;
  min-height: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}
/* Choices.js esconde el <select> original y dibuja una capa visible (.choices__inner).
   Forzamos el mismo alto/padding que los inputs para alinearlos exactamente. */
.rsf-match-filters .choices { margin-bottom: 0 !important; }
.rsf-match-filters .choices__inner {
  min-height: 34px !important;
  height: 34px !important;
  padding: 5px 26px 5px 10px !important;
  line-height: 1.25 !important;
  font-size: 0.875rem !important;
  display: flex !important;
  align-items: center !important;
}
.rsf-match-filters .choices__list--single { padding: 0 !important; }
.rsf-match-filters .choices[data-type*="select-one"]::after { margin-top: -3px !important; }

/* ===== Pills de filtro multi-check (Match inmobiliario · características) ===== */
/* Estilo base (tema oscuro): fondo claro suave para que destaquen sobre el panel */
.rsf-pref-tile {
  background-color: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.30);
  color: #e5e7eb;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.rsf-pref-tile:hover { border-color: rgba(16, 185, 129, 0.55); }
.rsf-pref-tile input[type="checkbox"] { accent-color: #10B981; }
/* Seleccionado: borde y tinte verde */
.rsf-pref-tile:has(input[type="checkbox"]:checked) {
  border-color: #10B981 !important;
  background-color: rgba(16, 185, 129, 0.16);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.55);
  color: #ffffff;
}
/* Tema claro: fondo blanco-grisáceo legible, mismo verde al seleccionar */
html.theme-light .rsf-pref-tile {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #1f2937;
}
html.theme-light .rsf-pref-tile:hover { border-color: #10B981; }
html.theme-light .rsf-pref-tile:has(input[type="checkbox"]:checked) {
  background-color: rgba(16, 185, 129, 0.10);
  border-color: #10B981 !important;
  color: #065f46;
}

/* Subsecciones de los formularios: borde un poco más claro que el resto */
.rsf-subsec { border: 1px solid #e5e7eb; }
.dark-form .rsf-subsec { border-color: #34406b; }

/* =====================================================
   FORMULARIO PÚBLICO sobre fondo dark · overrides
   Las clases Tailwind text-gray-XXX / border-gray-XXX / bg-gray-XXX están
   pensadas para fondos blancos. En .dark-form quedarían invisibles.
   Aquí las reescribimos al equivalente oscuro coherente.
   ===================================================== */
.dark-form .input { background: rgba(15,21,42,0.7); }

/* --- Texto: claros legibles sobre fondo oscuro --- */
.dark-form .text-brand-900 { color: #ffffff !important; }
.dark-form .text-gray-900  { color: #f1f5f9 !important; }
.dark-form .text-gray-800  { color: #e2e8f0 !important; }
.dark-form .text-gray-700  { color: #cbd5e1 !important; }
.dark-form .text-gray-600  { color: #94a3b8 !important; }
.dark-form .text-gray-500  { color: #94a3b8 !important; }
.dark-form .text-gray-400  { color: #64748b !important; }
.dark-form .text-brand-700 { color: #A5B4FC !important; }

/* --- Bordes: usar el azul-noche del tema --- */
.dark-form .border-gray-100,
.dark-form .border-gray-200,
.dark-form .border-gray-300 { border-color: var(--line) !important; }
.dark-form .border-brand-100 { border-color: rgba(99,102,241,0.35) !important; }

/* --- Fondos: oscurecer los light-mode --- */
.dark-form .bg-white   { background: rgba(11,15,30,0.55) !important; }
.dark-form .bg-gray-50 { background: rgba(15,21,42,0.55) !important; }
.dark-form .bg-brand-50 { background: rgba(99,102,241,0.10) !important; }

/* --- Radio buttons con peer-checked (Sí/No · tipo vivienda · etc.) --- */
.dark-form .peer:checked ~ .peer-checked\:bg-brand-50,
.dark-form input[type="radio"]:checked ~ div { background: rgba(99,102,241,0.20) !important; }
.dark-form .peer:checked ~ .peer-checked\:border-brand-700 { border-color: #6366F1 !important; }
.dark-form .peer:checked ~ .peer-checked\:text-brand-900 { color: #ffffff !important; }

/* --- Details/summary (acordeón "¿Hay más titulares?") --- */
.dark-form details summary { color: #ffffff; }
.dark-form details[open] summary { color: #A5B4FC; }

/* --- Checkbox tint (RGPD) --- */
.dark-form input[type="checkbox"] { accent-color: #6366F1; }

/* --- Anchor en el bloque RGPD --- */
.dark-form a.text-brand-700 { color: #A5B4FC !important; }

/* --- Card del wizard: fondo más sólido para destacar sobre el hero-glow --- */
.dark-form .card {
  background: rgba(15,21,42,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(45, 58, 92, 0.6);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
}

/* --- Mejorar contraste del progress bar / paso indicador --- */
.dark-form .text-slate-400 { color: #cbd5e1; }

/* --- Padding interior generoso del card en dark-form --- */
.dark-form .card { padding: 1.75rem 1.5rem; }
@media (min-width: 768px) {
  .dark-form .card { padding: 2rem 2.25rem; }
}

/* ===== Botones (con estado de carga) ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; border-radius: 9999px;
  padding: 0.7rem 1.2rem;
  transition: all .18s;
  cursor: pointer; white-space: nowrap;
  position: relative;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0;
  display: inline-block; margin: auto;
  width: 1rem; height: 1rem; border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  color: #fff;
}
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Estado de error en inputs */
.input.is-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}
.rsf-radio-invalid {
  border: 1px solid #dc2626 !important;
  border-radius: 0.6rem;
  padding: 0.35rem;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.field-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #dc2626;
  font-weight: 500;
}

/* Flash animado */
.flash-msg {
  animation: slideDown 0.3s ease-out;
}
.flash-msg.flash-out {
  animation: slideUp 0.3s ease-in forwards;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
.btn-primary {
  background: linear-gradient(135deg, #2F7BF0, #1E40AF);
  color: #fff;
  box-shadow: 0 8px 30px -10px rgba(47,123,240,0.55);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 32px -8px rgba(47,123,240,0.7); }
.btn-accent { background: linear-gradient(135deg, #34D399, #10B981); color: #052e21; }
.btn-accent:hover { transform: translateY(-1px); }
.btn-white { background:#fff; color: var(--ink-950); }
.btn-white:hover { background:#e2e8f0; }
.btn-ghost { background: rgba(255,255,255,0.05); color:#e2e8f0; border:1px solid var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color:#2A3760; }
.btn-outline { border:1px solid var(--line); background:transparent; color:#e2e8f0; }
.btn-outline:hover { background: rgba(255,255,255,0.05); }
.btn-danger { background:#dc2626; color:#fff; }
.btn-danger:hover { background:#b91c1c; }

/* ===== Tarjetas ===== */
.card {
  background: rgba(15,21,42,0.6);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover { border-color: #2A3760; }
.card-glow:hover { box-shadow: 0 10px 50px -20px rgba(99,102,241,0.45); transform: translateY(-2px); }

/* ===== Pills / tags ===== */
.pill {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:9999px;
  background:rgba(99,102,241,0.12); color:#A5B4FC;
  border:1px solid rgba(99,102,241,0.25);
}
.pill-accent { background:rgba(16,185,129,0.12); color:#6EE7B7; border-color:rgba(16,185,129,0.3); }
.pill-sun { background:rgba(250,204,21,0.12); color:#FDE68A; border-color:rgba(250,204,21,0.3); }

/* ===== Numbered list (Hormozi steps) ===== */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 0.85rem;
  background: linear-gradient(135deg, #2F7BF0, #1E40AF);
  color: #ffffff; font-weight: 800; font-size: 1.35rem;
  border: 1px solid rgba(47,123,240,0.5);
  box-shadow: 0 6px 16px -4px rgba(47,123,240,0.45);
}

/* ===== Comparativa "sin/con" ===== */
.cmp-row { display:flex; align-items:flex-start; gap:.75rem; padding:.6rem 0; border-bottom:1px solid rgba(31,42,72,0.6); font-size:.95rem; }
.cmp-row:last-child { border-bottom:none; }
.cmp-bad  { color:#fca5a5; }
.cmp-good { color:#86efac; }
.cmp-icon { flex:0 0 auto; width:1.25rem; height:1.25rem; }

/* ===== Prose (blog/legales) en dark ===== */
.prose { color: #cbd5e1; line-height: 1.7; font-size: 1.05rem; }
.prose h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; font-size: 1.6rem; margin: 2rem 0 0.7rem; }
.prose h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: #fff; font-size: 1.25rem; margin: 1.6rem 0 0.5rem; }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0.6rem 0 1.2rem; }
.prose li { margin: 0.3rem 0; }
.prose a { color: #A5B4FC; text-decoration: underline; }
.prose a:hover { color: #C7D2FE; }
.prose strong { font-weight: 700; color: #fff; }
.prose blockquote { border-left: 4px solid #10B981; padding: 0.4rem 1rem; color: #94a3b8; background: rgba(15,21,42,0.6); border-radius: 0 12px 12px 0; margin: 1rem 0; }
.prose img { border-radius: 12px; margin: 1rem 0; max-width: 100%; height: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.5rem 0.7rem; text-align: left; }
.prose th { background: rgba(31,42,72,0.4); font-weight: 600; color:#fff; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose code { background: rgba(99,102,241,0.12); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.92em; color:#C7D2FE; }

.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== Mockup Kanban (decorativo en hero) ===== */
.mock-shell {
  background: linear-gradient(160deg, rgba(31,42,72,0.6), rgba(15,21,42,0.7));
  border: 1px solid #2A3760;
  border-radius: 1.25rem;
  padding: 0.9rem;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 60px -20px rgba(99,102,241,0.25);
}
.mock-col {
  background: rgba(7,10,20,0.6);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.7rem;
}
.mock-card {
  background: rgba(7,10,20,0.7);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.7rem;
  transition: border-color .15s, box-shadow .15s;
}
.mock-card:hover { border-color: #2A3760; box-shadow: 0 6px 20px -10px rgba(99,102,241,0.35); }

/* Pills de la cabecera del mockup (botones "+ Nueva operación" y "⤓ CSV") */
.rsf-mock-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(15,21,42,0.7);
  color: #cbd5e1;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.rsf-mock-pill--primary {
  background: linear-gradient(135deg, #6366F1, #10B981);
  color: #ffffff;
  border-color: transparent;
}

/* ===== Tarjetas Kanban (paneles) ===== */
.kanban-col {
  background:rgba(15,21,42,0.5); border-radius: 0.85rem; padding: 0.75rem;
  min-width: 280px; max-width: 280px; flex-shrink: 0;
  border:1px solid var(--line);
}

/* En el panel admin/agente (fondo claro), el kanban es light */
.panel-bg .kanban-col {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

/* Kanban del ADMIN: columnas 50px más anchas (280 → 330) para que las fichas de
   cliente quepan mejor. En móvil sigue mandando el override full-width de abajo
   (.kanban-mobile-wrap .kanban-col, con !important). */
.kanban-admin .kanban-col {
  min-width: 330px;
  max-width: 330px;
}

/* Móvil: convertimos columnas a acordeón vertical full-width */
@media (max-width: 768px) {
  .kanban-mobile-wrap {
    flex-direction: column;
    min-width: 0 !important;
  }
  .kanban-mobile-wrap .kanban-col {
    min-width: 0 !important;
    max-width: none !important;
    width: 100%;
  }
  .kanban-mobile-wrap .kanban-col .kanban-list {
    display: none;
  }
  .kanban-mobile-wrap .kanban-col.open .kanban-list {
    display: block;
  }
  .kanban-mobile-wrap .kanban-col-header {
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    user-select: none;
  }
  .kanban-mobile-wrap .kanban-col-header::after {
    content: '▾';
    margin-left: 0.5rem;
    transition: transform .15s;
  }
  .kanban-mobile-wrap .kanban-col.open .kanban-col-header::after {
    transform: rotate(180deg);
  }
}
.kanban-card {
  background: rgba(7,10,20,0.7);
  border-radius: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  cursor: grab;
  color: #e2e8f0;
  user-select: none;
  -webkit-user-select: none;
}
.kanban-card:not(.sortable-chosen):not(.sortable-drag) {
  transition: border-color .12s, box-shadow .12s;
}
.kanban-card:hover:not(.sortable-chosen):not(.sortable-drag) {
  border-color: #2A3760;
  box-shadow: 0 8px 24px -12px rgba(99,102,241,0.4);
}
.kanban-card:active { cursor: grabbing; }

/* Agente: tarjetas envueltas en <a> → no hay drag, cursor pointer */
a > .kanban-card,
a .kanban-card,
a > .kanban-card:active,
a .kanban-card:active {
  cursor: pointer !important;
}

/* Card "fantasma" (placeholder en el origen mientras se arrastra) */
.kanban-card.sortable-ghost {
  opacity: 0.25;
  background: rgba(99,102,241,0.10) !important;
  border: 1px dashed rgba(99,102,241,0.6) !important;
  box-shadow: none !important;
}
/* Card "chosen" / "drag": SIN transiciones para evitar lag durante el arrastre */
.kanban-card.sortable-chosen,
.kanban-card.sortable-drag {
  transition: none !important;
  cursor: grabbing !important;
}
.kanban-card.sortable-drag {
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,102,241,0.35);
  opacity: 0.95;
}

/* Durante el drag: deshabilita transiciones de hover en otras cards (más fluido) */
body.kanban-dragging .kanban-card { transition: none !important; }
body.kanban-dragging .kanban-card:hover { box-shadow: none; border-color: var(--line); }

/* ===== Marquee bancos ===== */
.marquee {
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
/* width:max-content es IMPRESCINDIBLE: sin él la caja del track mide lo que el
   contenedor (p.ej. 1088px) mientras el contenido ocupa 3536px, así que el
   translateX(-50%) desplazaba 544px en vez de los 1768px del punto de
   repetición y la tira DABA UN SALTO hacia atrás a media vuelta. */
.marquee-track { display:flex; width:max-content; gap: 3rem; animation: scroll 28s linear infinite; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* En móvil aceleramos el carrusel: la mitad del tiempo = velocidad x2 */
@media (max-width: 768px) {
  .marquee-track { animation-duration: 14s; gap: 2rem; }
}

/* ===== Helper: cierra otros details cuando se abre uno (acordeón exclusivo) =====
   Activar con el atributo data-acc-exclusive en el contenedor.
   El comportamiento real lo gestiona Alpine en la home/faq.
*/

/* ===== Accordion (animado) ===== */
details.acc { border:1px solid var(--line); border-radius:0.85rem; padding:1rem 1.15rem; background:rgba(15,21,42,0.5); overflow:hidden; }
details.acc + details.acc { margin-top: 0.6rem; }
details.acc summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:700; color:#fff; }
details.acc summary::-webkit-details-marker { display:none; }
details.acc[open] summary { color:#A5B4FC; }
details.acc summary .acc-icon { transition: transform .5s cubic-bezier(.4,.0,.2,1); color:#A5B4FC; }
details.acc[open] summary .acc-icon { transform: rotate(45deg); }
/* Animación del contenido del acordeón (transición suave de altura + opacidad · 0,5 s) */
details.acc > *:not(summary) {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.4,.0,.2,1), opacity .5s ease, margin-top .5s ease;
  margin-top: 0;
}
details.acc[open] > *:not(summary) {
  max-height: 1500px;
  opacity: 1;
  margin-top: 0.7rem;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  details.acc > *:not(summary) { transition: none; }
}

/* ===== Headers -25% (tipografía global más compacta) ===== */
h1.font-display, .h1-display { line-height: 1.1; }
.font-display.text-5xl  { font-size: 2.625rem; }   /* 42px (era 48px) */
.font-display.text-4xl  { font-size: 1.875rem; }   /* 30px (era 36px) */
.font-display.text-3xl  { font-size: 1.5rem;   }   /* 24px (era 30px) */
.font-display.text-2xl  { font-size: 1.25rem;  }   /* 20px (era 24px) */
@media (min-width: 768px) {
  .md\:text-5xl.font-display  { font-size: 2.625rem; }
  .md\:text-6xl.font-display  { font-size: 3.375rem; } /* 54px (era 60px) */
  .md\:text-7xl.font-display  { font-size: 4rem;     } /* 64px (era 72px) */
  .md\:text-4xl.font-display  { font-size: 2.25rem;  } /* 36px (era 48px) */
  .md\:text-3xl.font-display  { font-size: 1.75rem;  }
}

/* ===== Choices.js · TEMA CLARO (legible sobre cards blancas del panel admin) ===== */
/* Uso !important para ganar a la hoja CDN que carga después en algunas vistas */

.choices { width: 100%; margin-bottom: 0 !important; font-family: inherit; }

/* ----- Input visible (caja del select cerrado) ----- */
.choices__inner {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.75rem !important;
  min-height: 2.6rem !important;
  padding: 0.5rem 2.2rem 0.5rem 0.95rem !important;
  color: #111827 !important;
  font-size: 0.95rem !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
}
.choices__list--single { padding: 0 1.4rem 0 0 !important; max-width: 100%; }
/* El valor seleccionado nunca ensancha el control: se trunca con "…" */
.choices__list--single .choices__item {
  color: #111827 !important;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.choices__placeholder { color: #9ca3af !important; opacity: 1 !important; }

/* ----- Filtros uniformes (.rsf-filtros): misma altura, alineados y contenido centrado vertical ----- */
.rsf-filtros { align-items: flex-end; }
.rsf-filtros .input { height: 2.6rem; line-height: normal; }
.rsf-filtros .choices__inner { height: 2.6rem !important; min-height: 2.6rem !important; display: flex; align-items: center; }
.rsf-filtros .btn { height: 2.6rem; display: inline-flex; align-items: center; }

/* ----- Flecha del select ----- */
.choices[data-type*="select-one"]::after {
  border-color: #6b7280 transparent transparent !important;
  right: 14px !important;
}
.choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent #6b7280 !important;
  margin-top: -7.5px !important;
}

/* ----- Dropdown desplegable ----- */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.75rem !important;
  margin-top: 4px !important;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.18) !important;
  z-index: 50 !important;
  /* Que el dropdown sea siempre mínimo tan ancho como el input, y crezca si la opción es más larga */
  min-width: 100% !important;
  width: max-content !important;
  max-width: 420px !important;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  white-space: nowrap !important;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  color: #374151 !important;
  padding: 0.55rem 0.95rem !important;
  font-size: 0.92rem !important;
  background: transparent !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: #EEF2FF !important;
  color: #4338CA !important;
  font-weight: 600 !important;
}
.choices__list--dropdown .choices__item--selectable[aria-selected="true"],
.choices__list[aria-expanded] .choices__item--selectable[aria-selected="true"] {
  color: #4338CA !important;
  font-weight: 600 !important;
}

/* ----- Grupos (optgroup) ----- */
.choices__group .choices__heading {
  color: #6b7280 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 0.7rem 0.95rem 0.3rem !important;
  border-bottom: none !important;
  background: #f9fafb !important;
}

/* ----- Input de búsqueda dentro del dropdown ----- */
.choices__input {
  background: #f9fafb !important;
  color: #111827 !important;
  border-radius: 0.5rem !important;
  border: 1px solid #e5e7eb !important;
  padding: 0.4rem 0.6rem !important;
  margin: 0.4rem 0.5rem !important;
  width: calc(100% - 1rem) !important;
}
.choices__input::placeholder { color: #9ca3af !important; }

/* =====================================================
   PÁGINAS PÚBLICAS (.dark / fondo oscuro): variante dark
   ===================================================== */
.dark .choices__inner,
body.bg-ink-950 .choices__inner {
  background: var(--ink-800) !important;
  border-color: var(--line) !important;
  color: #fff !important;
}
.dark .choices__list--single .choices__item,
body.bg-ink-950 .choices__list--single .choices__item {
  color: #fff !important;
}
.dark .choices__list--dropdown,
.dark .choices__list[aria-expanded],
body.bg-ink-950 .choices__list--dropdown,
body.bg-ink-950 .choices__list[aria-expanded] {
  background: var(--ink-900) !important;
  border-color: var(--line) !important;
}
.dark .choices__list--dropdown .choices__item,
.dark .choices__list[aria-expanded] .choices__item,
body.bg-ink-950 .choices__list--dropdown .choices__item,
body.bg-ink-950 .choices__list[aria-expanded] .choices__item {
  color: #cbd5e1 !important;
}
.dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
.dark .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
body.bg-ink-950 .choices__list--dropdown .choices__item--selectable.is-highlighted,
body.bg-ink-950 .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: rgba(99,102,241,0.25) !important;
  color: #fff !important;
}
.dark .choices__group .choices__heading,
body.bg-ink-950 .choices__group .choices__heading {
  background: rgba(15, 21, 42, 0.6) !important;
  color: #94a3b8 !important;
}
.dark .choices__placeholder,
body.bg-ink-950 .choices__placeholder { color: #64748b !important; }
.dark .choices__input,
body.bg-ink-950 .choices__input {
  background: rgba(11,15,30,0.6) !important;
  color: #f1f5f9 !important;
  border-color: var(--line) !important;
}

/* =====================================================
   PANEL ADMIN (.panel-dark): selects DARK porque están dentro
   de cards blancas pero el aire general es oscuro y los .input
   nativos del admin también son oscuros — coherencia visual.
   ===================================================== */
.panel-dark .choices__inner {
  background: rgba(11, 15, 30, 0.85) !important;
  border-color: #1F2A48 !important;
  color: #f1f5f9 !important;
}
.panel-dark .choices.is-focused .choices__inner,
.panel-dark .choices.is-open .choices__inner {
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.25) !important;
}
.panel-dark .choices__list--single .choices__item { color: #f1f5f9 !important; }
.panel-dark .choices__placeholder { color: #64748b !important; }
.panel-dark .choices[data-type*="select-one"]::after {
  border-color: #94a3b8 transparent transparent !important;
}
.panel-dark .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent #94a3b8 !important;
}
.panel-dark .choices__list--dropdown,
.panel-dark .choices__list[aria-expanded] {
  background: #0B0F1E !important;
  border-color: #1F2A48 !important;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.6) !important;
}
.panel-dark .choices__list--dropdown .choices__item,
.panel-dark .choices__list[aria-expanded] .choices__item {
  color: #cbd5e1 !important;
}
.panel-dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
.panel-dark .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: rgba(99,102,241,0.25) !important;
  color: #fff !important;
}
.panel-dark .choices__list--dropdown .choices__item--selectable[aria-selected="true"],
.panel-dark .choices__list[aria-expanded] .choices__item--selectable[aria-selected="true"] {
  color: #A5B4FC !important;
}
.panel-dark .choices__group .choices__heading {
  background: rgba(20, 28, 54, 0.6) !important;
  color: #94a3b8 !important;
}
.panel-dark .choices__input {
  background: rgba(11,15,30,0.6) !important;
  color: #f1f5f9 !important;
  border-color: #1F2A48 !important;
}
.panel-dark .choices__input::placeholder { color: #64748b !important; }

/* ============================================================
   Badges del IBAN (panel admin · ficha de agente).
   - Tema OSCURO (default): fondos saturados + texto claro vivo.
   - Tema CLARO: paleta pastel suave habitual.
   ============================================================ */
.rsf-iban-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 11px;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
/* Tema OSCURO (default, sin .theme-light) — más contraste */
.rsf-iban-badge--ok {
  background: rgba(16, 185, 129, 0.22);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.55);
}
.rsf-iban-badge--bad {
  background: rgba(239, 68, 68, 0.22);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.55);
}
.rsf-iban-badge--warn {
  background: rgba(245, 158, 11, 0.22);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.55);
}
/* Tema CLARO — paleta pastel original (buena legibilidad sobre fondo blanco) */
html.theme-light .rsf-iban-badge--ok {
  background: #D1FAE5;
  color: #065F46;
  border-color: #6EE7B7;
}
html.theme-light .rsf-iban-badge--bad {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FCA5A5;
}
html.theme-light .rsf-iban-badge--warn {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FCD34D;
}

/* ============================================================
   Badges de estadística reutilizables (dashboard, listados...)
   Dark mode: fondos translúcidos vivos + texto saturado.
   Light mode: paleta pastel.
   ============================================================ */
.rsf-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 10px;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}
/* Tema OSCURO (default) */
.rsf-stat-badge--emerald { background: rgba(16,185,129,0.22); color: #6EE7B7; border-color: rgba(16,185,129,0.55); }
.rsf-stat-badge--blue    { background: rgba(59,130,246,0.22); color: #93C5FD; border-color: rgba(59,130,246,0.55); }
.rsf-stat-badge--purple  { background: rgba(168,85,247,0.22); color: #D8B4FE; border-color: rgba(168,85,247,0.55); }
.rsf-stat-badge--orange  { background: rgba(249,115,22,0.22); color: #FDBA74; border-color: rgba(249,115,22,0.55); }
.rsf-stat-badge--indigo  { background: rgba(99,102,241,0.25); color: #A5B4FC; border-color: rgba(99,102,241,0.55); }
.rsf-stat-badge--pink    { background: rgba(236,72,153,0.22); color: #F9A8D4; border-color: rgba(236,72,153,0.55); }
.rsf-stat-badge--gray    { background: rgba(148,163,184,0.22); color: #CBD5E1; border-color: rgba(148,163,184,0.45); }
/* Tema CLARO — paleta pastel */
html.theme-light .rsf-stat-badge--emerald { background: #D1FAE5; color: #065F46; border-color: transparent; }
html.theme-light .rsf-stat-badge--blue    { background: #DBEAFE; color: #1E40AF; border-color: transparent; }
html.theme-light .rsf-stat-badge--purple  { background: #F3E8FF; color: #6B21A8; border-color: transparent; }
html.theme-light .rsf-stat-badge--orange  { background: #FFEDD5; color: #9A3412; border-color: transparent; }
html.theme-light .rsf-stat-badge--indigo  { background: #E0E7FF; color: #3730A3; border-color: transparent; }
html.theme-light .rsf-stat-badge--pink    { background: #FCE7F3; color: #9D174D; border-color: transparent; }
html.theme-light .rsf-stat-badge--gray    { background: #F1F5F9; color: #1F2937; border-color: transparent; }

/* ============================================================
   📱 FORMULARIO de captación (#formLead) · adaptación móvil
   Hace que el wizard de nueva operación se vea cómodo en mobile
   (padding, tamaños, pills, navegación, etc.).
   ============================================================ */
@media (max-width: 640px) {
  /* Wrapper interno: menos padding lateral y altura cómoda */
  #formLead {
    padding: 1rem !important;
    border-radius: 0.875rem !important;
  }
  /* Cabecera del paso "1 · Compraventa", "2 · Titular 1…" */
  #formLead h2.font-display {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }
  /* Subsecciones · padding compacto y separación clara */
  #formLead .rsf-subsec {
    padding: 0.85rem !important;
    border-radius: 0.75rem !important;
  }
  #formLead .rsf-subsec + .rsf-subsec,
  #formLead > div > .rsf-subsec + .rsf-subsec {
    margin-top: 1rem !important;
  }
  /* Inputs/selects: alto cómodo para tocar */
  #formLead .input {
    padding: 0.75rem 0.85rem !important;
    font-size: 0.95rem !important;
    min-height: 44px !important;
  }
  #formLead textarea.input {
    min-height: 90px !important;
  }
  /* Labels más visibles */
  #formLead .label {
    font-size: 0.8rem !important;
    margin-bottom: 0.3rem !important;
  }
  /* Help text más pequeño */
  #formLead .help {
    font-size: 0.7rem !important;
    margin-top: 0.25rem !important;
  }
  /* Subsección de "tipo vivienda" — tarjetas más grandes para tocar */
  #formLead label.cursor-pointer > div {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    font-size: 0.85rem !important;
  }
  /* Pills tipo "Habitaciones" / "Características adicionales" */
  #formLead label.inline-flex,
  #formLead label.flex.items-center {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    font-size: 0.85rem !important;
    min-height: 42px;
  }
  /* "Característica" grids van a 2 cols en mobile (ya tiene grid-cols-2) */
  #formLead .grid.grid-cols-2 {
    gap: 0.5rem !important;
  }
  /* Espaciado entre los grupos de campos */
  #formLead .space-y-5 > * + * { margin-top: 1rem !important; }
  #formLead .space-y-4 > * + * { margin-top: 0.85rem !important; }
  /* Card hueco entre items "Sí / No" para tener buena pulsación */
  #formLead label > input[type="radio"].peer.sr-only + div {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.9rem !important;
  }
  /* Cabecera del modo agente/admin */
  body main h1.font-display.text-xl.md\:text-2xl {
    font-size: 1.2rem !important;
  }
  /* Barra de navegación entre pasos: que botones se vean bien */
  #formLead + div,
  #formLead .mt-8.flex.items-center.justify-between {
    margin-top: 1.5rem !important;
    gap: 0.5rem !important;
  }
  #formLead .mt-8.flex.items-center.justify-between .btn {
    padding: 0.6rem 0.85rem !important;
    font-size: 0.85rem !important;
  }
  /* Progreso del wizard arriba */
  .mb-6 + form#formLead { margin-top: 0.5rem; }
  /* Bloque RGPD del paso final */
  #formLead .bg-brand-50 {
    padding: 0.85rem !important;
  }
  #formLead .bg-brand-50 .rsf-legal {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }
}

/* Móviles muy pequeños (iPhone SE) — extra compacto */
@media (max-width: 380px) {
  #formLead { padding: 0.85rem !important; }
  #formLead .rsf-subsec { padding: 0.7rem !important; }
  #formLead h2.font-display { font-size: 1rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA CLARO PARA LA WEB PÚBLICA (body.public-light)
   Scope: solo páginas públicas (home, legal, contacto, etc.).
   NO afecta a panel admin/agente (esos llevan su propio tema dark/light).
   ═══════════════════════════════════════════════════════════════════════ */

/* Fondo base — anula bg-ink-950 del body */
body.public-light {
  background: #ffffff !important;
  color: #0F172A !important;
}

/* Backgrounds oscuros → claros */
body.public-light .bg-ink-950 { background-color: #ffffff !important; }
body.public-light .bg-ink-900,
body.public-light [class*="bg-ink-900\\/"]:not(.cookie-banner) { background-color: #F8FAFC !important; }
body.public-light .bg-ink-800,
body.public-light [class*="bg-ink-800\\/"] { background-color: #F1F5F9 !important; }
body.public-light .bg-ink-950\/85 { background-color: rgba(255,255,255,0.95) !important; backdrop-filter: blur(8px); }
body.public-light .bg-ink-900\/80 { background-color: rgba(255,255,255,0.95) !important; }
body.public-light .bg-ink-900\/60 { background-color: #ffffff !important; }
body.public-light .bg-ink-900\/40 { background-color: #F8FAFC !important; }
body.public-light .bg-ink-800\/60 { background-color: #F1F5F9 !important; }
body.public-light .bg-ink-800\/40 { background-color: #F1F5F9 !important; }
body.public-light .bg-white\/5  { background-color: #F1F5F9 !important; }
body.public-light .bg-white\/10 { background-color: #E2E8F0 !important; }

/* Textos */
body.public-light .text-white { color: #0F172A !important; }
body.public-light .text-slate-100 { color: #0F172A !important; }
body.public-light .text-slate-200 { color: #1E293B !important; }
body.public-light .text-slate-300 { color: #334155 !important; }
body.public-light .text-slate-400 { color: #64748B !important; }
body.public-light .text-slate-500 { color: #64748B !important; }
body.public-light .text-brand-300 { color: #2F7BF0 !important; }
body.public-light .text-brand-400 { color: #2F7BF0 !important; }
body.public-light .text-accent-400 { color: #059669 !important; }
body.public-light .text-red-300 { color: #DC2626 !important; }
body.public-light .text-red-400 { color: #DC2626 !important; }

/* Notificaciones flash en tema claro · fondo SÓLIDO oscuro + texto blanco
   para máximo contraste (login/registro/recuperar y formularios públicos). */
body.public-light .flash-msg.bg-emerald-500\/10    { background-color:#047857 !important; }
body.public-light .flash-msg.text-emerald-200      { color:#ffffff !important; }
body.public-light .flash-msg.border-emerald-500\/30{ border-color:#065F46 !important; }
body.public-light .flash-msg.bg-red-500\/10        { background-color:#B91C1C !important; }
body.public-light .flash-msg.text-red-200          { color:#ffffff !important; }
body.public-light .flash-msg.border-red-500\/30    { border-color:#991B1B !important; }
body.public-light .flash-msg.bg-yellow-500\/10     { background-color:#B45309 !important; }
body.public-light .flash-msg.text-yellow-200       { color:#ffffff !important; }
body.public-light .flash-msg.border-yellow-500\/30 { border-color:#92400E !important; }
body.public-light .flash-msg.bg-indigo-500\/10     { background-color:#4338CA !important; }
body.public-light .flash-msg.text-indigo-200       { color:#ffffff !important; }
body.public-light .flash-msg.border-indigo-500\/30 { border-color:#3730A3 !important; }
body.public-light .flash-msg a                     { color:#ffffff !important; text-decoration:underline; }

/* =====================================================================
   BLOG · chips de categoría + tipografía del artículo (tema claro)
   ===================================================================== */
.rsf-blog-chip { display:inline-block; padding:.4rem .95rem; border-radius:9999px; font-size:.85rem; font-weight:600; border:1px solid #D6E2F5; color:#475569; background:#fff; transition:border-color .15s, color .15s, background .15s; text-decoration:none; }
.rsf-blog-chip:hover { border-color:#2F7BF0; color:#2F7BF0; }
.rsf-blog-chip--on, .rsf-blog-chip--on:hover { background:#2F7BF0; border-color:#2F7BF0; color:#fff; }

.rsf-prose { color:#334155; font-size:1.0625rem; line-height:1.8; }
.rsf-prose > * + * { margin-top:1.15rem; }
.rsf-prose h2 { color:#0E2148; font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif; font-weight:800; font-size:1.7rem; line-height:1.25; margin-top:2.4rem; margin-bottom:.1rem; scroll-margin-top:6rem; }
.rsf-prose h3 { color:#0E2148; font-weight:700; font-size:1.3rem; margin-top:1.8rem; margin-bottom:.05rem; scroll-margin-top:6rem; }
.rsf-prose h4 { color:#0E2148; font-weight:700; font-size:1.1rem; margin-top:1.4rem; }
.rsf-prose p { margin:0; }
.rsf-prose a { color:#2F7BF0; text-decoration:underline; text-underline-offset:2px; }
.rsf-prose a:hover { color:#1D4ED8; }
.rsf-prose strong { color:#0E2148; font-weight:700; }
.rsf-prose em { font-style:italic; }
.rsf-prose ul, .rsf-prose ol { padding-left:1.4rem; }
.rsf-prose ul { list-style:disc; }
.rsf-prose ol { list-style:decimal; }
.rsf-prose li { margin:.35rem 0; }
.rsf-prose ol li[data-list="bullet"] { list-style-type:disc; }   /* compat. listas de Quill */
.rsf-prose blockquote { border-left:4px solid #2F7BF0; background:#F4F8FF; padding:.8rem 1.1rem; border-radius:0 .5rem .5rem 0; color:#475569; font-style:italic; }
.rsf-prose img { border-radius:.9rem; margin:1.6rem 0; max-width:100%; height:auto; border:1px solid #E2E8F0; }
.rsf-prose figure { margin:1.6rem 0; }
.rsf-prose code { background:#EEF2FF; color:#3730A3; padding:.12em .4em; border-radius:.35rem; font-size:.9em; }
.rsf-prose pre { background:#0F172A; color:#E2E8F0; padding:1rem 1.2rem; border-radius:.75rem; overflow-x:auto; }
.rsf-prose pre code { background:none; color:inherit; padding:0; }
.rsf-prose hr { border:0; border-top:1px solid #E2E8F0; margin:2rem 0; }

/* Botones con fondo color que SÍ deben llevar texto blanco — restaurar */
body.public-light .btn-primary,
body.public-light .btn-primary *,
body.public-light .btn-danger,
body.public-light .btn-danger * { color: #ffffff !important; }
body.public-light .bg-brand-600 .text-white,
body.public-light .bg-brand-700 .text-white,
body.public-light .bg-emerald-500 .text-white,
body.public-light a.bg-brand-700,
body.public-light a.bg-brand-600 { color: #ffffff !important; }

/* Elemento que combina fondo de color sólido + text-white → mantener blanco
   (ej. día seleccionado en el calendario, badges, chips de color). */
body.public-light .bg-brand-500.text-white,
body.public-light .bg-brand-600.text-white,
body.public-light .bg-brand-700.text-white,
body.public-light .bg-accent-500.text-white,
body.public-light .bg-emerald-500.text-white,
body.public-light .bg-emerald-600.text-white,
body.public-light .bg-red-500.text-white,
body.public-light .bg-red-600.text-white { color: #ffffff !important; }

/* Bordes */
body.public-light .border-line { border-color: #E2E8F0 !important; }
body.public-light .border-white\/5 { border-color: #E2E8F0 !important; }
body.public-light .border-white\/10 { border-color: #E2E8F0 !important; }

/* Hovers */
body.public-light .hover\:bg-white\/5:hover  { background-color: #F1F5F9 !important; }
body.public-light .hover\:bg-white\/10:hover { background-color: #E2E8F0 !important; }
body.public-light .hover\:text-white:hover   { color: #2F7BF0 !important; }
body.public-light .hover\:text-brand-300:hover { color: #1E40AF !important; }

/* Card genérica del hero/secciones */
body.public-light .card {
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 12px -2px rgba(15,23,42,0.05);
}
body.public-light .card h3,
body.public-light .card .font-display { color: #0F172A !important; }

/* Pills */
body.public-light .pill {
  background: rgba(47,123,240,0.10) !important;
  color: #2F7BF0 !important;
  border-color: rgba(47,123,240,0.30) !important;
}
body.public-light .pill-accent {
  background: rgba(16,185,129,0.10) !important;
  color: #047857 !important;
  border-color: rgba(16,185,129,0.30) !important;
}
body.public-light .pill-sun {
  background: rgba(250,204,21,0.18) !important;
  color: #92400E !important;
  border-color: rgba(250,204,21,0.40) !important;
}

/* Prose (legales y artículos) */
body.public-light .prose { color: #334155 !important; }
body.public-light .prose h2,
body.public-light .prose h3,
body.public-light .prose strong,
body.public-light .prose th { color: #0F172A !important; }
body.public-light .prose a { color: #2F7BF0 !important; }
body.public-light .prose a:hover { color: #1E40AF !important; }
body.public-light .prose blockquote {
  background: #F8FAFC !important;
  color: #475569 !important;
  border-left-color: #10B981 !important;
}
body.public-light .prose th { background: #F1F5F9 !important; }
body.public-light .prose th, body.public-light .prose td { border-color: #E2E8F0 !important; }
body.public-light .prose code {
  background: rgba(47,123,240,0.10) !important;
  color: #1E40AF !important;
}
body.public-light .prose hr { border-top-color: #E2E8F0 !important; }

/* Mockup del kanban (página inmobiliarias) */
body.public-light .mock-shell {
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 50px -10px rgba(15,23,42,0.10);
}
body.public-light .mock-col {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
body.public-light .mock-card {
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
body.public-light .mock-card:hover { border-color: #CBD5E1 !important; }

/* Hero — glow azul limpio sobre blanco (en vez del multicolor del tema oscuro) */
body.public-light .hero-glow {
  background:
    radial-gradient(55rem 28rem at 50% -10%, rgba(47,123,240,0.14), transparent 70%),
    radial-gradient(38rem 20rem at 88% 8%, rgba(16,185,129,0.08), transparent 70%) !important;
  opacity: 1;
}
body.public-light .grid-bg {
  background-image:
    linear-gradient(rgba(47,123,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,123,240,0.05) 1px, transparent 1px) !important;
  opacity: 1;
}

/* Gradient-text — tono azul de marca para fondo claro */
body.public-light .gradient-text {
  background: linear-gradient(120deg, #2F7BF0 0%, #1E40AF 50%, #047857 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
body.public-light .gradient-border {
  background: linear-gradient(#ffffff,#ffffff) padding-box,
              linear-gradient(135deg,#2F7BF0,#10B981) border-box !important;
  border: 1px solid transparent !important;
}

/* Inputs / selects sobre tema claro */
body.public-light input:not([type=radio]):not([type=checkbox]),
body.public-light textarea,
body.public-light select {
  background: #ffffff !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
body.public-light .input {
  background: #ffffff !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
body.public-light .label { color: #1E293B !important; }
body.public-light .help { color: #64748B !important; }

/* Menú móvil slide-over · TEMA CLARO completo */
body.public-light aside.bg-ink-900 { background: #ffffff !important; color: #0F172A !important; }
body.public-light aside.bg-ink-900 .bg-ink-900 { background: #ffffff !important; }
body.public-light aside.bg-ink-900 .bg-ink-800\/40 { background: #F1F5F9 !important; }
body.public-light aside.bg-ink-900 .text-white { color: #0F172A !important; }
body.public-light aside.bg-ink-900 .text-slate-200 { color: #1E293B !important; }
body.public-light aside.bg-ink-900 .text-slate-300 { color: #334155 !important; }
body.public-light aside.bg-ink-900 .text-slate-400 { color: #64748B !important; }
body.public-light aside.bg-ink-900 .border-line,
body.public-light aside.bg-ink-900 .border-line\/60 { border-color: #E2E8F0 !important; }
body.public-light aside.bg-ink-900 a:hover { color: #1E40AF !important; }
body.public-light aside.bg-ink-900 .hover\:bg-white\/5:hover { background: #F1F5F9 !important; }
/* Cápsula de acceso (registro/login) en claro */
body.public-light aside.bg-ink-900 .border-brand-500\/40 {
  border-color: rgba(47,123,240,0.40) !important;
  background: linear-gradient(to bottom right, #EFF6FF, #ffffff) !important;
}
body.public-light aside.bg-ink-900 .text-brand-300 { color: #1E40AF !important; }
body.public-light aside.bg-ink-900 .bg-white.text-ink-950 { background: #1E40AF !important; color: #ffffff !important; }
body.public-light aside.bg-ink-900 a.border-brand-500\/40 { background: #ffffff !important; }

/* Glow/halo decorativos — desactivar o atenuar */
body.public-light [class*="shadow-glow"] { box-shadow: 0 12px 28px -8px rgba(47,123,240,0.30) !important; }

/* Botón fantasma con más contraste (era casi invisible en claro) */
body.public-light .btn-ghost {
  background: #ffffff !important;
  color: #1E40AF !important;
  border: 2px solid #2F7BF0 !important;
}
body.public-light .btn-ghost:hover {
  background: #2F7BF0 !important;
  color: #ffffff !important;
  border-color: #2F7BF0 !important;
}

/* Toggle tema en nav */
body.public-light .rsf-theme-toggle {
  background: #ffffff;
  border-color: #CBD5E1;
  color: #0F172A;
}
body.public-light .rsf-theme-toggle:hover {
  background: #F1F5F9;
}

/* Cualquier morado/índigo/violeta de Tailwind → azul de marca
   (acentos, bordes, fondos) */
body.public-light .text-purple-300,
body.public-light .text-purple-400,
body.public-light .text-purple-500,
body.public-light .text-purple-600,
body.public-light .text-purple-700,
body.public-light .text-indigo-300,
body.public-light .text-indigo-400,
body.public-light .text-indigo-500,
body.public-light .text-indigo-600,
body.public-light .text-indigo-700,
body.public-light .text-violet-300,
body.public-light .text-violet-400,
body.public-light .text-violet-500,
body.public-light .text-violet-600,
body.public-light .text-violet-700 { color: #2F7BF0 !important; }

body.public-light .bg-purple-50,
body.public-light .bg-indigo-50,
body.public-light .bg-violet-50 { background-color: #EFF6FF !important; }

body.public-light .bg-purple-100,
body.public-light .bg-indigo-100,
body.public-light .bg-violet-100 { background-color: #DBEAFE !important; }

body.public-light .bg-purple-500,
body.public-light .bg-purple-600,
body.public-light .bg-purple-700,
body.public-light .bg-indigo-500,
body.public-light .bg-indigo-600,
body.public-light .bg-indigo-700,
body.public-light .bg-violet-500,
body.public-light .bg-violet-600,
body.public-light .bg-violet-700 { background-color: #2F7BF0 !important; }

body.public-light .border-purple-200,
body.public-light .border-purple-300,
body.public-light .border-indigo-200,
body.public-light .border-indigo-300,
body.public-light .border-violet-200,
body.public-light .border-violet-300 { border-color: #93C5FD !important; }

body.public-light .border-purple-500,
body.public-light .border-purple-600,
body.public-light .border-indigo-500,
body.public-light .border-indigo-600,
body.public-light .border-violet-500,
body.public-light .border-violet-600 { border-color: #2F7BF0 !important; }

body.public-light [class*="from-purple-"],
body.public-light [class*="to-purple-"],
body.public-light [class*="from-indigo-"],
body.public-light [class*="to-indigo-"],
body.public-light [class*="from-violet-"],
body.public-light [class*="to-violet-"] {
  --tw-gradient-from: #2F7BF0 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #1E40AF var(--tw-gradient-to-position) !important;
}

/* Cifras grandes/contadores dentro de cards · más contraste y peso azul
   (se excluyen las cifras con color propio: ahorro y stats) */
body.public-light .card .font-display.font-extrabold:not(.qmh-savings-amount):not(.qmh-stat-num),
body.public-light .card .font-display.text-2xl:not(.qmh-savings-amount):not(.qmh-stat-num),
body.public-light .card .font-display.text-3xl:not(.qmh-savings-amount):not(.qmh-stat-num),
body.public-light .card .font-mono { color: #0F172A !important; }
body.public-light .card .font-mono.text-accent-400 { color: #047857 !important; }
body.public-light .card .text-accent-400 { color: #047857 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   NAV PÚBLICO · estilos compartidos (light/dark) con transiciones
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- TEMA OSCURO (default, sin .public-light) ---- */
.rsf-pubnav-link { color: #cbd5e1; transition: background-color .15s, color .15s; }
.rsf-pubnav-link:hover { color: #ffffff; background: rgba(255,255,255,0.06); }
.rsf-pubnav-link--open { color: #ffffff; background: rgba(255,255,255,0.06); }
.rsf-pubnav-dropdown { background: #0B0F1E; border: 1px solid #1F2A48; }
.rsf-pubnav-dropitem { color: #e2e8f0; transition: background-color .15s, color .15s; }
.rsf-pubnav-dropitem:hover { background: rgba(255,255,255,0.06); color: #ffffff; }

.rsf-pubnav-cta {
  border-color: rgba(47,123,240,0.40);
  background: linear-gradient(to bottom right, rgba(30,64,175,0.20), rgba(15,21,42,0.50));
  box-shadow: 0 0 20px -6px rgba(47,123,240,0.40);
}
.rsf-pubnav-cta-label { color: #93C5FD; }
.rsf-pubnav-cta-sep { background: rgba(47,123,240,0.30); }

/* Botón Acceder · TEMA OSCURO (default) — texto claro destacado */
.rsf-btn-acceder {
  color: #93C5FD;
  border-color: rgba(47,123,240,0.45);
  background: transparent;
}
.rsf-btn-acceder:hover {
  color: #ffffff;
  background: rgba(47,123,240,0.15);
  border-color: #2F7BF0;
}

/* Botón Empezar gratis · TEMA OSCURO */
.rsf-btn-empezar { background: #ffffff; color: #0F172A; }
.rsf-btn-empezar:hover { background: #e2e8f0; }

/* Toggle tema (oscuro default) */
.rsf-theme-toggle { background: transparent; border-color: rgba(255,255,255,0.15); color: #ffffff; }
.rsf-theme-toggle:hover { background: rgba(255,255,255,0.08); }

/* ---- TEMA CLARO (.public-light) ---- */
body.public-light header {
  background: rgba(255,255,255,0.95) !important;
  border-bottom-color: #E2E8F0 !important;
}
body.public-light .rsf-pubnav {
  color: #1E293B !important;
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}
body.public-light .rsf-pubnav-link { color: #334155 !important; }
body.public-light .rsf-pubnav-link:hover { color: #1E40AF !important; background: #ffffff !important; }
body.public-light .rsf-pubnav-link--open { color: #1E40AF !important; background: #ffffff !important; }
body.public-light .rsf-pubnav-dropdown { background: #ffffff !important; border-color: #E2E8F0 !important; }
body.public-light .rsf-pubnav-dropitem { color: #334155 !important; }
body.public-light .rsf-pubnav-dropitem:hover { background: #F1F5F9 !important; color: #1E40AF !important; }

body.public-light .rsf-pubnav-cta {
  border-color: rgba(47,123,240,0.35) !important;
  background: linear-gradient(to bottom right, #EFF6FF, #ffffff) !important;
  box-shadow: 0 0 20px -6px rgba(47,123,240,0.25) !important;
}
body.public-light .rsf-pubnav-cta-label { color: #1E40AF !important; }
body.public-light .rsf-pubnav-cta-sep { background: rgba(47,123,240,0.25) !important; }

/* Botón Acceder · TEMA CLARO — alto contraste con hover inverso */
body.public-light .rsf-btn-acceder {
  color: #1E40AF !important;
  border-color: #1E40AF !important;
  background: transparent !important;
}
body.public-light .rsf-btn-acceder:hover {
  color: #ffffff !important;
  background: #1E40AF !important;
  border-color: #1E40AF !important;
}

/* Botón Empezar gratis · TEMA CLARO */
body.public-light .rsf-btn-empezar { background: #1E40AF !important; color: #ffffff !important; }
body.public-light .rsf-btn-empezar:hover { background: #1E3A8A !important; }

/* Toggle tema · TEMA CLARO */
body.public-light .rsf-theme-toggle { background: #ffffff !important; border-color: #CBD5E1 !important; color: #0F172A !important; }
body.public-light .rsf-theme-toggle:hover { background: #F1F5F9 !important; }

/* Botón hamburguesa */
.rsf-pubnav-burger { color: #ffffff; transition: background-color .15s; }
.rsf-pubnav-burger:hover { background: rgba(255,255,255,0.08); }
body.public-light .rsf-pubnav-burger { color: #0F172A !important; }
body.public-light .rsf-pubnav-burger:hover { background: #F1F5F9 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Sección destacada · fondo azul + texto blanco (TEMA CLARO)
   En tema oscuro queda igual que ahora — la clase es transparente.
   ═══════════════════════════════════════════════════════════════════════ */
body.public-light .qmh-blue-section {
  background: linear-gradient(135deg, #2F7BF0, #1E40AF) !important;
  color: #ffffff !important;
  border-top-color: #1E40AF !important;
  border-bottom-color: #1E40AF !important;
}
body.public-light .qmh-blue-section h1,
body.public-light .qmh-blue-section h2,
body.public-light .qmh-blue-section h3,
body.public-light .qmh-blue-section h4,
body.public-light .qmh-blue-section strong,
body.public-light .qmh-blue-section .font-display { color: #ffffff !important; }
/* Enlaces/textos sueltos con text-white directos de la sección azul (no en tarjeta) → blancos.
   Las tarjetas blancas tienen reglas más específicas, así que su texto sigue oscuro. */
body.public-light .qmh-blue-section > div > .text-white,
body.public-light .qmh-blue-section a.text-white { color: #ffffff !important; }
body.public-light .qmh-blue-section p,
body.public-light .qmh-blue-section li { color: #E0EAFF !important; }
body.public-light .qmh-blue-section .text-slate-300,
body.public-light .qmh-blue-section .text-slate-400,
body.public-light .qmh-blue-section .text-slate-500 { color: #DBEAFE !important; }
body.public-light .qmh-blue-section .pill {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.30) !important;
}
body.public-light .qmh-blue-section .pill-accent {
  background: rgba(255,255,255,0.18) !important;
  color: #BBF7D0 !important;
  border-color: rgba(255,255,255,0.30) !important;
}
/* Tarjetas dentro de sección azul · BLANCAS sólidas con texto oscuro (alto contraste) */
body.public-light .qmh-blue-section .card {
  background: #ffffff !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: #0F172A !important;
  box-shadow: 0 10px 30px -12px rgba(15,23,42,0.35) !important;
}
body.public-light .qmh-blue-section .card h3,
body.public-light .qmh-blue-section .card .font-display,
body.public-light .qmh-blue-section .card strong { color: #0F172A !important; }
body.public-light .qmh-blue-section .card p,
body.public-light .qmh-blue-section .card li,
body.public-light .qmh-blue-section .card .text-slate-300,
body.public-light .qmh-blue-section .card .text-slate-400,
body.public-light .qmh-blue-section .card .text-slate-500,
body.public-light .qmh-blue-section .card .text-slate-700 { color: #475569 !important; }
/* Checks/cruces dentro de tarjetas blancas */
body.public-light .qmh-blue-section .card .text-accent-400 { color: #047857 !important; }
body.public-light .qmh-blue-section .card .text-red-400,
body.public-light .qmh-blue-section .card .text-red-300 { color: #DC2626 !important; }
/* Logo blanco → vuelve a su color real dentro de tarjeta blanca */
body.public-light .qmh-blue-section .card .qmh-logo-white { filter: none !important; }
/* gradient-text dentro de tarjeta blanca → azul de marca (no amarillo) */
body.public-light .qmh-blue-section .card .gradient-text {
  background: linear-gradient(120deg, #2F7BF0, #1E40AF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Botones dentro de bloque azul */
body.public-light .qmh-blue-section .btn-primary {
  background: #ffffff !important;
  color: #1E40AF !important;
}
body.public-light .qmh-blue-section .btn-primary:hover { background: #F1F5F9 !important; }
body.public-light .qmh-blue-section .btn-ghost {
  background: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
body.public-light .qmh-blue-section .btn-ghost:hover {
  background: rgba(255,255,255,0.15) !important;
}

/* Logo forzado a blanco (para usar sobre fondo azul) — ambos temas */
.qmh-logo-white { filter: brightness(0) invert(1); }

/* gradient-text dentro de sección azul · amarillo sólido brillante para contraste */
body.public-light .qmh-blue-section .gradient-text {
  background: none !important;
  -webkit-text-fill-color: #FCD34D !important;
  color: #FCD34D !important;
}
/* En tema oscuro la sección azul es transparente; el gradient-text normal ya contrasta */

/* Caja "Te ahorras" · azul sólido en ambos temas */
.qmh-savings-box {
  background: linear-gradient(135deg, #2F7BF0, #1E40AF);
  border: 1px solid #1E40AF;
  box-shadow: 0 8px 22px -8px rgba(47,123,240,0.45);
}
.qmh-savings-label { color: #BFDBFE; }
.qmh-savings-amount { color: #ffffff; }
.qmh-savings-sub { color: #DBEAFE; }
body.public-light .qmh-savings-box {
  background: linear-gradient(135deg, #2F7BF0, #1E40AF) !important;
  border-color: #1E40AF !important;
}
body.public-light .qmh-savings-label { color: #BFDBFE !important; }
/* Alta especificidad para ganar a la regla de "cifras grandes dentro de cards" */
body.public-light .card .font-display.qmh-savings-amount,
body.public-light .qmh-savings-amount { color: #ffffff !important; }
body.public-light .qmh-savings-sub { color: #DBEAFE !important; }

/* Cifras "+15 / 48-72h / 100 %" · azul de marca claro y nítido */
.qmh-stat-num { color: #60A5FA; }
body.public-light .card .font-display.qmh-stat-num,
body.public-light .qmh-stat-num { color: #2F7BF0 !important; }

/* step-num dentro de sección azul · las tarjetas son blancas → número azul sólido */
body.public-light .qmh-blue-section .step-num {
  background: linear-gradient(135deg, #2F7BF0, #1E40AF) !important;
  color: #ffffff !important;
  border-color: #1E40AF !important;
  box-shadow: 0 6px 16px -4px rgba(47,123,240,0.45) !important;
}

/* Iconos emoji de los pasos en como_funciona — tamaño contenido */
body.public-light .qmh-blue-section ol > li .text-4xl {
  font-size: 2.1rem !important;
  opacity: 1 !important;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.22));
}

/* FAQ acordeón DENTRO de sección azul · fondo blanco con letras azules */
body.public-light .qmh-blue-section details.acc {
  background: #ffffff !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: #0F172A !important;
  box-shadow: 0 4px 14px -4px rgba(15,23,42,0.20);
}
body.public-light .qmh-blue-section details.acc summary { color: #1E40AF !important; }
body.public-light .qmh-blue-section details.acc[open] summary { color: #2F7BF0 !important; }
body.public-light .qmh-blue-section details.acc summary .acc-icon,
body.public-light .qmh-blue-section details.acc[open] summary .acc-icon { color: #2F7BF0 !important; }
body.public-light .qmh-blue-section details.acc p,
body.public-light .qmh-blue-section details.acc > *:not(summary) { color: #334155 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   FAQ acordeón · TEMA CLARO con fondo azul más claro y texto blanco
   ═══════════════════════════════════════════════════════════════════════ */
body.public-light details.acc {
  background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
  border-color: #2563EB !important;
  color: #ffffff !important;
}
body.public-light details.acc summary { color: #ffffff !important; }
body.public-light details.acc[open] summary { color: #FEF3C7 !important; }
body.public-light details.acc summary .acc-icon,
body.public-light details.acc[open] summary .acc-icon { color: #ffffff !important; }
body.public-light details.acc p,
body.public-light details.acc > *:not(summary) { color: #F1F5F9 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MORADOS → AZUL DE MARCA (GLOBAL, no solo public-light)
   Aplica también al panel admin/agente.
   ═══════════════════════════════════════════════════════════════════════ */
.text-purple-100, .text-indigo-100, .text-violet-100 { color: #DBEAFE !important; }
.text-purple-200, .text-indigo-200, .text-violet-200 { color: #BFDBFE !important; }
.text-purple-300, .text-indigo-300, .text-violet-300 { color: #93C5FD !important; }
.text-purple-400, .text-indigo-400, .text-violet-400 { color: #60A5FA !important; }
.text-purple-500, .text-indigo-500, .text-violet-500 { color: #2F7BF0 !important; }
.text-purple-600, .text-indigo-600, .text-violet-600 { color: #1E40AF !important; }
.text-purple-700, .text-indigo-700, .text-violet-700 { color: #1E3A8A !important; }
.text-purple-800, .text-indigo-800, .text-violet-800 { color: #1E3A8A !important; }
.text-purple-900, .text-indigo-900, .text-violet-900 { color: #172554 !important; }

.bg-purple-50, .bg-indigo-50, .bg-violet-50 { background-color: #EFF6FF !important; }
.bg-purple-100, .bg-indigo-100, .bg-violet-100 { background-color: #DBEAFE !important; }
.bg-purple-200, .bg-indigo-200, .bg-violet-200 { background-color: #BFDBFE !important; }
.bg-purple-300, .bg-indigo-300, .bg-violet-300 { background-color: #93C5FD !important; }
.bg-purple-400, .bg-indigo-400, .bg-violet-400 { background-color: #60A5FA !important; }
.bg-purple-500, .bg-indigo-500, .bg-violet-500 { background-color: #2F7BF0 !important; }
.bg-purple-600, .bg-indigo-600, .bg-violet-600 { background-color: #1E40AF !important; }
.bg-purple-700, .bg-indigo-700, .bg-violet-700 { background-color: #1E3A8A !important; }

.border-purple-100, .border-indigo-100, .border-violet-100 { border-color: #DBEAFE !important; }
.border-purple-200, .border-indigo-200, .border-violet-200 { border-color: #BFDBFE !important; }
.border-purple-300, .border-indigo-300, .border-violet-300 { border-color: #93C5FD !important; }
.border-purple-400, .border-indigo-400, .border-violet-400 { border-color: #60A5FA !important; }
.border-purple-500, .border-indigo-500, .border-violet-500 { border-color: #2F7BF0 !important; }
.border-purple-600, .border-indigo-600, .border-violet-600 { border-color: #1E40AF !important; }

[class*="from-purple-"],
[class*="from-indigo-"],
[class*="from-violet-"] {
  --tw-gradient-from: #2F7BF0 var(--tw-gradient-from-position) !important;
}
[class*="to-purple-"],
[class*="to-indigo-"],
[class*="to-violet-"] {
  --tw-gradient-to: #1E40AF var(--tw-gradient-to-position) !important;
}
[class*="via-purple-"],
[class*="via-indigo-"],
[class*="via-violet-"] {
  --tw-gradient-via: #3B82F6 var(--tw-gradient-via-position) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FORMULARIOS .dark-form EN TEMA CLARO (contacto, captación, agendar)
   El .dark-form fuerza texto blanco para fondo oscuro; en tema claro
   hay que revertirlo a oscuro sobre blanco.
   ═══════════════════════════════════════════════════════════════════════ */
body.public-light .dark-form .card {
  background: #ffffff !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 40px -16px rgba(15,23,42,0.18) !important;
  backdrop-filter: none !important;
}
body.public-light .dark-form .input,
body.public-light .dark-form input:not([type=radio]):not([type=checkbox]),
body.public-light .dark-form textarea,
body.public-light .dark-form select {
  background: #ffffff !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
body.public-light .dark-form .text-brand-900,
body.public-light .dark-form .text-gray-900 { color: #0F172A !important; }
body.public-light .dark-form .text-gray-800 { color: #1E293B !important; }
body.public-light .dark-form .text-gray-700 { color: #334155 !important; }
body.public-light .dark-form .text-gray-600,
body.public-light .dark-form .text-gray-500 { color: #64748B !important; }
body.public-light .dark-form .text-gray-400 { color: #94A3B8 !important; }
body.public-light .dark-form .text-slate-400 { color: #64748B !important; }
body.public-light .dark-form .text-brand-700,
body.public-light .dark-form a.text-brand-700 { color: #1E40AF !important; }
body.public-light .dark-form .rsf-subsec { border-color: #E2E8F0 !important; }
body.public-light .dark-form .border-gray-100,
body.public-light .dark-form .border-gray-200,
body.public-light .dark-form .border-gray-300 { border-color: #E2E8F0 !important; }
body.public-light .dark-form .border-brand-100 { border-color: #BFDBFE !important; }
body.public-light .dark-form .bg-white { background: #ffffff !important; }
body.public-light .dark-form .bg-gray-50 { background: #F8FAFC !important; }
body.public-light .dark-form .bg-brand-50 { background: #EFF6FF !important; }
body.public-light .dark-form .peer:checked ~ .peer-checked\:bg-brand-50,
body.public-light .dark-form input[type="radio"]:checked ~ div { background: #EFF6FF !important; }
body.public-light .dark-form .peer:checked ~ .peer-checked\:border-brand-700 { border-color: #2F7BF0 !important; }
body.public-light .dark-form .peer:checked ~ .peer-checked\:text-brand-900 { color: #1E40AF !important; }
body.public-light .dark-form details summary { color: #0F172A !important; }
body.public-light .dark-form details[open] summary { color: #1E40AF !important; }
body.public-light .dark-form a.text-brand-300 { color: #1E40AF !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   HOME · PARTICULARES  ·  sistema de componentes propio
   Julio 2026.

   Criterio: NO usar .card genérica para todo. Cada bloque tiene el peso visual
   que le toca según su papel en la Ecuación del Valor: el reencuadre del precio
   y la cronología mandan; el resto acompaña.
   Prefijo qmh-h- (home) para no chocar con nada existente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Ritmo de sección ───────────────────────────────────────────────────── */
.qmh-h-sec { padding: 5rem 0; }
@media (min-width: 768px) { .qmh-h-sec { padding: 7rem 0; } }
.qmh-h-alt { background: rgba(11,18,32,0.5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Cabecera de sección: eyebrow → h2 → lead. Siempre igual = ritmo. */
.qmh-h-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #818CF8;
}
.qmh-h-eyebrow::before {
  content: ""; width: 1.5rem; height: 1px;
  background: linear-gradient(90deg, transparent, #818CF8);
}
.qmh-h-eyebrow::after {
  content: ""; width: 1.5rem; height: 1px;
  background: linear-gradient(90deg, #818CF8, transparent);
}
.qmh-h-h2 {
  margin-top: 1.25rem;
  font-size: clamp(1.85rem, 4.5vw, 3.1rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: #fff;
}
.qmh-h-lead {
  margin-top: 1.35rem; font-size: 1.05rem; line-height: 1.7; color: #94A3B8;
}
@media (min-width: 768px) { .qmh-h-lead { font-size: 1.15rem; } }

/* ─── Barra de certeza (bajo el hero) ────────────────────────────────────── */
.qmh-h-bar {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(99,102,241,0.05), transparent);
}
.qmh-h-bar-item { padding: 1.15rem .5rem; text-align: center; position: relative; }
@media (min-width: 640px) {
  .qmh-h-bar-item + .qmh-h-bar-item::before {
    content: ""; position: absolute; left: 0; top: 25%; bottom: 25%;
    width: 1px; background: var(--line);
  }
}
.qmh-h-bar-n { font-weight: 800; font-size: 1.15rem; color: #60A5FA; letter-spacing: -0.01em; }
.qmh-h-bar-t { margin-top: .15rem; font-size: .7rem; color: #64748B; letter-spacing: .02em; }

/* ─── Comparativa (ellos / nosotros) ─────────────────────────────────────── */
.qmh-h-vs {
  position: relative; border-radius: 1.25rem; padding: 1.75rem;
  border: 1px solid var(--line); background: rgba(15,21,42,0.55);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
@media (min-width: 768px) { .qmh-h-vs { padding: 2rem; } }
.qmh-h-vs--them {
  border-color: rgba(244,63,94,0.2);
  background: linear-gradient(165deg, rgba(244,63,94,0.055), rgba(15,21,42,0.55) 60%);
}
.qmh-h-vs--them:hover { border-color: rgba(244,63,94,0.34); }
.qmh-h-vs--us {
  border-color: rgba(52,211,153,0.28);
  background: linear-gradient(165deg, rgba(52,211,153,0.075), rgba(15,21,42,0.55) 60%);
  box-shadow: 0 24px 60px -34px rgba(16,185,129,0.55);
}
.qmh-h-vs--us:hover { border-color: rgba(52,211,153,0.5); box-shadow: 0 28px 70px -32px rgba(16,185,129,0.68); transform: translateY(-2px); }
.qmh-h-vs-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: 9999px;
}
.qmh-h-vs--them .qmh-h-vs-tag { background: rgba(244,63,94,0.12); color: #FDA4AF; border: 1px solid rgba(244,63,94,0.25); }
.qmh-h-vs--us   .qmh-h-vs-tag { background: rgba(52,211,153,0.12); color: #6EE7B7; border: 1px solid rgba(52,211,153,0.3); }
/* Variante neutra (la columna "Tú"). Va como clase y NO en línea: los estilos
   en línea ganan al tema claro y dejaban el texto gris sobre tarjeta blanca. */
.qmh-h-vs-tag--neutro { background: rgba(148,163,184,0.1); color: #94A3B8; border: 1px solid rgba(148,163,184,0.22); }
.qmh-h-vs-t { margin-top: 1rem; font-weight: 800; font-size: 1.15rem; color: #fff; line-height: 1.3; }
.qmh-h-vs-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.qmh-h-vs-li { display: flex; gap: .7rem; font-size: .9rem; line-height: 1.65; color: #CBD5E1; }
.qmh-h-vs-ico { flex-shrink: 0; margin-top: .15rem; font-weight: 800; font-size: .8rem; }
.qmh-h-vs--them .qmh-h-vs-ico { color: #FB7185; }
.qmh-h-vs--us   .qmh-h-vs-ico { color: #34D399; }

/* ─── Remate (la frase que se tiene que quedar) ──────────────────────────── */
.qmh-h-punch {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  padding: 2.25rem 1.5rem; text-align: center;
  border: 1px solid rgba(99,102,241,0.28);
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(99,102,241,0.18), transparent 62%),
    rgba(11,18,32,0.85);
}
@media (min-width: 768px) { .qmh-h-punch { padding: 3rem 2.5rem; } }
.qmh-h-punch-q {
  font-family: 'DejaVu Serif', Georgia, serif; font-style: italic;
  font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.45;
}
@media (min-width: 768px) { .qmh-h-punch-q { font-size: 1.55rem; } }
.qmh-h-punch-p { margin: 1.1rem auto 0; max-width: 44rem; color: #94A3B8; line-height: 1.7; font-size: .98rem; }
.qmh-h-punch-key {
  margin: 1.6rem auto 0; max-width: 44rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 1.05rem; font-weight: 800; color: #6EE7B7; line-height: 1.5;
}
@media (min-width: 768px) { .qmh-h-punch-key { font-size: 1.25rem; } }

/* ─── CRONOLOGÍA · el componente estrella ────────────────────────────────── */
.qmh-h-time { position: relative; }
/* Móvil: vertical, con línea a la izquierda */
.qmh-h-time-l { position: relative; padding-left: 3rem; padding-bottom: 2.25rem; }
.qmh-h-time-l:last-child { padding-bottom: 0; }
.qmh-h-time-l::before {
  content: ""; position: absolute; left: 1.06rem; top: 2.1rem; bottom: -0.15rem;
  width: 2px; background: linear-gradient(180deg, rgba(99,102,241,0.5), rgba(99,102,241,0.12));
}
.qmh-h-time-l:last-child::before { display: none; }
.qmh-h-time-dot {
  position: absolute; left: 0; top: .1rem;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800;
  background: rgba(99,102,241,0.14); color: #A5B4FC;
  border: 1px solid rgba(99,102,241,0.35);
}
.qmh-h-time-l--key .qmh-h-time-dot {
  background: rgba(52,211,153,0.16); color: #6EE7B7; border-color: rgba(52,211,153,0.45);
  box-shadow: 0 0 0 4px rgba(52,211,153,0.07);
}
.qmh-h-time-when {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #818CF8;
}
.qmh-h-time-l--key .qmh-h-time-when { color: #34D399; }
.qmh-h-time-t { margin-top: .3rem; font-weight: 800; color: #fff; font-size: 1.02rem; line-height: 1.35; }
.qmh-h-time-p { margin-top: .4rem; font-size: .875rem; color: #94A3B8; line-height: 1.65; }
.qmh-h-time-badge {
  display: inline-block; margin-top: .6rem;
  font-size: .7rem; font-weight: 700; padding: .22rem .6rem; border-radius: 9999px;
  background: rgba(52,211,153,0.12); color: #6EE7B7; border: 1px solid rgba(52,211,153,0.28);
}
/* Variante de CONTRASTE: no es una ventaja nuestra, es el dato con el que
   comparar. En gris a propósito: el verde está reservado a lo que ganamos. */
.qmh-h-time-badge--comp {
  background: rgba(148,163,184,0.1); color: #94A3B8; border-color: rgba(148,163,184,0.22);
  text-decoration: line-through; text-decoration-color: rgba(148,163,184,0.5);
}
/* Escritorio: horizontal, con línea que cruza */
@media (min-width: 900px) {
  .qmh-h-time { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  /* Variantes de 5 y 6 pasos (la de /inmobiliarias). Sin esto, los pasos de
     más caían a una segunda fila. La home sigue con 4 columnas. */
  .qmh-h-time--5 { grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
  .qmh-h-time--6 { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
  .qmh-h-time-l { padding-left: 0; padding-top: 3.35rem; padding-bottom: 0; }
  .qmh-h-time-l::before {
    left: 1.12rem; right: -1.5rem; top: 1.12rem; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, rgba(99,102,241,0.5), rgba(99,102,241,0.12));
  }
  .qmh-h-time-dot { top: 0; }
}

/* ─── Quién hace qué ─────────────────────────────────────────────────────── */
.qmh-h-do-n {
  flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: .55rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  background: rgba(148,163,184,0.1); color: #94A3B8;
  border: 1px solid rgba(148,163,184,0.2);
}

/* ─── Garantías ──────────────────────────────────────────────────────────── */
.qmh-h-gar {
  position: relative; height: 100%;
  border-radius: 1.25rem; padding: 1.65rem 1.5rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(15,21,42,0.55) 55%);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.qmh-h-gar:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,0.42);
  box-shadow: 0 26px 60px -32px rgba(99,102,241,0.7);
}
.qmh-h-gar-ico {
  width: 2.9rem; height: 2.9rem; border-radius: .95rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: rgba(99,102,241,0.13); border: 1px solid rgba(99,102,241,0.26);
}
.qmh-h-gar-t { margin-top: 1.1rem; font-weight: 800; color: #fff; font-size: 1.05rem; }
.qmh-h-gar-p { margin-top: .55rem; font-size: .865rem; color: #94A3B8; line-height: 1.65; }

/* Padding del hero · en clase propia por lo mismo: pb-14, md:pt-24 y md:pb-20
   no están en el Tailwind compilado de las páginas públicas.
   Top generoso para separar la pill del nav; bottom holgado bajo el RGPD. */
.qmh-h-hero { padding-top: 5.5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .qmh-h-hero { padding-top: 7.5rem; padding-bottom: 7rem; } }

/* ─── Perfiles ───────────────────────────────────────────────────────────── */
.qmh-h-perfil {
  border-radius: .95rem; padding: 1.35rem 1rem; text-align: center;
  border: 1px solid var(--line); background: rgba(15,21,42,0.5);
  transition: transform .25s, border-color .25s, background .25s;
}
.qmh-h-perfil:hover { transform: translateY(-3px); border-color: rgba(99,102,241,0.4); background: rgba(15,21,42,0.8); }
.qmh-h-perfil-t { margin-top: .7rem; font-weight: 700; color: #fff; font-size: .85rem; }
.qmh-h-perfil-p { margin-top: .3rem; font-size: .74rem; color: #64748B; line-height: 1.5; }

/* ─── Entidades ──────────────────────────────────────────────────────────── */
.qmh-h-banco {
  font-size: .8rem; font-weight: 600; color: #94A3B8;
  padding: .4rem .8rem; border-radius: .5rem;
  border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s;
}
.qmh-h-banco:hover { color: #E2E8F0; border-color: var(--line); background: rgba(15,21,42,0.6); }

/* ═══ TEMA CLARO ═════════════════════════════════════════════════════════ */
body.public-light .qmh-h-alt { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
body.public-light .qmh-h-h2 { color: #0F172A !important; }
body.public-light .qmh-h-lead { color: #475569 !important; }
body.public-light .qmh-h-eyebrow { color: #4338CA !important; }
body.public-light .qmh-h-bar { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
body.public-light .qmh-h-bar-item + .qmh-h-bar-item::before { background: #E2E8F0 !important; }
body.public-light .qmh-h-bar-n { color: #1E40AF !important; }
body.public-light .qmh-h-bar-t { color: #64748B !important; }
body.public-light .qmh-h-vs { background: #fff !important; border-color: #E2E8F0 !important; }
body.public-light .qmh-h-vs--them { background: linear-gradient(165deg, #FFF1F2, #fff 60%) !important; border-color: #FECDD3 !important; }
body.public-light .qmh-h-vs--us { background: linear-gradient(165deg, #ECFDF5, #fff 60%) !important; border-color: #A7F3D0 !important; }
body.public-light .qmh-h-vs--them .qmh-h-vs-tag { background: #FFE4E6 !important; color: #BE123C !important; border-color: #FECDD3 !important; }
body.public-light .qmh-h-vs--us .qmh-h-vs-tag { background: #D1FAE5 !important; color: #047857 !important; border-color: #A7F3D0 !important; }
body.public-light .qmh-h-vs-tag--neutro { background: #F1F5F9 !important; color: #475569 !important; border-color: #E2E8F0 !important; }
body.public-light .qmh-h-vs-t { color: #0F172A !important; }
body.public-light .qmh-h-vs-li { color: #334155 !important; }
body.public-light .qmh-h-vs--them .qmh-h-vs-ico { color: #BE123C !important; } /* #E11D48 daba 3,77:1 sobre la tarjeta rosa */
body.public-light .qmh-h-vs--us .qmh-h-vs-ico { color: #047857 !important; } /* #059669 daba 4,49:1 */
body.public-light .qmh-h-punch { background: #F8FAFC !important; border-color: #C7D2FE !important; }
body.public-light .qmh-h-punch-q { color: #0F172A !important; }
body.public-light .qmh-h-punch-p { color: #475569 !important; }
body.public-light .qmh-h-punch-key { color: #047857 !important; border-top-color: #E2E8F0 !important; }
body.public-light .qmh-h-time-dot { background: #EEF2FF !important; color: #4338CA !important; border-color: #C7D2FE !important; }
body.public-light .qmh-h-time-l--key .qmh-h-time-dot { background: #D1FAE5 !important; color: #047857 !important; border-color: #A7F3D0 !important; }
body.public-light .qmh-h-time-when { color: #4338CA !important; }
body.public-light .qmh-h-time-l--key .qmh-h-time-when { color: #047857 !important; } /* #059669 daba 3,60:1 */
body.public-light .qmh-h-time-t { color: #0F172A !important; }
body.public-light .qmh-h-time-p { color: #475569 !important; }
body.public-light .qmh-h-time-badge { background: #D1FAE5 !important; color: #047857 !important; border-color: #A7F3D0 !important; }
/* #64748B sobre #F1F5F9 se quedaba en 4,34:1 (mínimo AA: 4,5). A #475569. */
body.public-light .qmh-h-time-badge--comp { background: #F1F5F9 !important; color: #475569 !important; border-color: #E2E8F0 !important; }
body.public-light .qmh-h-gar { background: #fff !important; border-color: #E2E8F0 !important; }
body.public-light .qmh-h-gar-ico { background: #EEF2FF !important; border-color: #C7D2FE !important; }
body.public-light .qmh-h-gar-t { color: #0F172A !important; }
body.public-light .qmh-h-gar-p { color: #475569 !important; }
body.public-light .qmh-h-do-n { background: #F1F5F9 !important; color: #475569 !important; border-color: #E2E8F0 !important; } /* #64748B daba 4,34:1 */
body.public-light .qmh-h-perfil { background: #fff !important; border-color: #E2E8F0 !important; }
body.public-light .qmh-h-perfil-t { color: #0F172A !important; }
body.public-light .qmh-h-perfil-p { color: #64748B !important; }
body.public-light .qmh-h-banco { color: #475569 !important; }
body.public-light .qmh-h-banco:hover { color: #0F172A !important; background: #F1F5F9 !important; border-color: #E2E8F0 !important; }