/* ==========================================================
   Trabajo Rápido — v39 Propuesta C · FASE 1: colores y fuentes
   Capa de tema que se monta ENCIMA de styles.css + copilot.css.
   No modifica ningún archivo existente: si se quita el <link>
   de esta hoja, la página vuelve exactamente a los colores v38.
   Fuente de verdad: docs/diseno-propuesta-c/ (guía + plan).
   Regla: los hex viven SOLO en el bloque :root de abajo.
   ========================================================== */
:root {
  /* Marca */
  --azul-noche: #0E2A5C;
  --amarillo: #FFC94A;
  --azul-acento: #1D4ED8;
  --tinta: #0E1A33;

  /* Neutros */
  --fondo: #F4F6FA;
  --superficie: #FFFFFF;
  --linea: #E3E8F0;
  --borde-input: #CBD5E3;
  --texto-sec: #3B4A63;
  --texto-apagado: #4A5568;
  --texto-sobre-azul: #D3DDF2;
  --nav-sobre-azul: #DCE6FA;

  /* Estados */
  --exito: #166A3E;
  --exito-fondo: #DDF3E6;
  --exito-oscuro: #0F4F2D;

  /* Pilares (fondo / texto) */
  --pilar-buscar-bg: #DCE7FD;    --pilar-buscar-tx: #0E2A5C;
  --pilar-encontrar-bg: #DDF3E6; --pilar-encontrar-tx: #0F4F2D;
  --pilar-aplicar-bg: #FFF1CC;   --pilar-aplicar-tx: #4A3000;
  --pilar-control-bg: #EDE4FB;   --pilar-control-tx: #45207A;

  /* Fuentes */
  --font-titulo: "Sora", "Manrope", system-ui, sans-serif;
  --font-texto: "Manrope", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* Sombras de la guía */
  --sombra-flotante: 0 24px 48px -24px rgba(14,26,51,0.2);
  --sombra-sobre-azul: 0 30px 60px -24px rgba(0,0,0,0.55);

  /* ---- Puente: los tokens v38 (--li-*) apuntan a la paleta C ---- */
  --li-blue: var(--azul-acento);
  --li-blue-dark: var(--azul-noche);
  --li-blue-light: var(--pilar-buscar-bg);
  --li-blue-soft: var(--fondo);
  --li-bg: var(--fondo);
  --li-card: var(--superficie);
  --li-text: var(--tinta);
  --li-text-secondary: var(--texto-sec);
  --li-border: var(--linea);
  --li-border-strong: var(--borde-input);
  --li-green: var(--exito);
  --li-green-bg: var(--exito-fondo);
  --li-amber-bg: var(--pilar-aplicar-bg);
  --li-amber: var(--pilar-aplicar-tx);
  --radius-lg: 22px;
  --font-sans: var(--font-texto);
  --ring-focus: 0 0 0 6px rgba(29,78,216,0.18);
  --shadow-btn: none;
  --shadow-btn-hover: 0 8px 20px -10px rgba(14,42,92,0.45);
}

/* ---------- Base y tipografía ---------- */
body { background: var(--fondo); color: var(--tinta); letter-spacing: 0; }
h1, h2, h3, .hero__title, .section__title, .cta__info h2, .price, .stat__value,
.metrics__value, .brand, .footer__brand { font-family: var(--font-titulo); }
.hero__title, .section__title, .cta__info h2 { font-weight: 800; letter-spacing: -0.02em; }
:focus-visible { outline-color: var(--azul-acento); }

/* ---------- Botones ---------- */
.btn { border-radius: 14px; font-weight: 700; }
.btn--primary,
.btn--primary:hover { background: var(--amarillo); color: var(--azul-noche); font-weight: 800; }
.btn--primary:hover { filter: brightness(0.96); }
.btn--secondary { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde-input); border-radius: 12px; box-shadow: none; }
.btn--secondary:hover { background: var(--fondo); }
.btn:focus-visible { outline: 3px solid var(--azul-acento); }

/* ---------- Header sobre azul noche ---------- */
.topbar { background: var(--azul-noche); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar { background: rgba(14,42,92,0.94); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: none; }
}
.brand { color: #fff; }
.brand__mark { background: var(--amarillo); color: var(--azul-noche); border-radius: 11px; font-family: var(--font-titulo); }
.brand__accent { color: var(--amarillo); }
.topbar__nav a { color: var(--nav-sobre-azul); }
.topbar__nav a:hover { color: #fff; border-bottom-color: var(--amarillo); }
.topbar .btn--ghost { color: #fff; }
.topbar .btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.topbar #menuBtn { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); }
#mobileMenu, #mobileMenu a { color: var(--nav-sobre-azul); }

/* ---------- Hero con patrón y círculos ---------- */
.hero {
  background-color: var(--azul-noche);
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  border-bottom: 0;
  overflow: hidden;
}
.hero__media { display: none; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.hero::before { width: 700px; height: 700px; background: var(--azul-acento); opacity: 0.5; top: -320px; right: -260px; }
.hero::after { width: 220px; height: 220px; background: var(--amarillo); bottom: -110px; left: -90px; }
.hero__copy, .hero .feed-card { border: 0; border-radius: 24px; box-shadow: var(--sombra-sobre-azul); }
.hero .card:hover { box-shadow: var(--sombra-sobre-azul); }
.hero .eyebrow { background: var(--pilar-buscar-bg); border-color: transparent; color: var(--azul-noche); }
.hero .stat, .hero .job, .hero .kanban-tab:not(.is-active) { background: var(--superficie); }
.hero .stat:first-child { background: var(--fondo); border-color: var(--linea); }
.hero .progress__bar { background: var(--linea); }
.hero .social-proof, .hero .feed-card__header, .hero .feed-card__stats, .hero .feed-card__footer { border-color: var(--linea); }
.hero .file-drop { background: var(--fondo); border-color: var(--borde-input); }
.hero__form { border-top-color: var(--linea); }

/* ---------- Formularios ---------- */
.field__label { font-weight: 800; font-size: 14px; color: var(--tinta); }
.input { border-color: var(--borde-input); border-radius: 12px; padding: 14px; }
.file-drop { background: var(--fondo); border-color: var(--borde-input); }

/* ---------- Tabs, chips, barras y estados ---------- */
.kanban-tab.is-active, .chip.is-active { background: var(--azul-noche); border-color: var(--azul-noche); color: #fff; box-shadow: none; }
.kanban-tab:focus-visible, .chip:focus-visible { outline-color: var(--azul-acento); }
.progress__fill { background: var(--azul-acento); }
.feed-card .progress__fill { background: var(--exito); }
.stat__value, .progress__pct, .profile-progress__pct { color: var(--azul-noche); }
.job__logo { background: var(--fondo); color: var(--azul-noche); border-radius: 10px; }
.job__logo--blue { background: var(--azul-noche); color: #fff; }
.pill--success, .pill--warning { border-color: transparent; }
.pill--success { color: var(--exito-oscuro); }
.pill--muted { background: var(--fondo); }

/* ---------- Secciones ---------- */
.section:nth-of-type(even) { background: var(--superficie); border-top: 1px solid var(--linea); }
.section__kicker { color: var(--azul-acento); font-size: 14px; letter-spacing: 0.06em; }
.promise-strip__item { background: var(--superficie); border-color: var(--linea); }
.promise-strip__item strong { color: var(--azul-noche); }
.logos { background: var(--superficie); border-color: var(--linea); }
.step-card__num { color: var(--azul-acento); }
.feature-card__icon { background: var(--pilar-buscar-bg); color: var(--pilar-buscar-tx); }
.mini-stat { background: var(--fondo); }
.mini-stat strong { color: var(--azul-noche); }
.metrics { background: var(--azul-noche); border-radius: 22px; }
.metrics__label { color: var(--texto-sobre-azul); }
.phone__header { background: var(--azul-noche); }
.phone__avatar { background: var(--amarillo); color: var(--azul-noche); }

/* ---------- Precios: Pro destacado en azul noche ---------- */
.price { font-weight: 800; }
.price-card--featured { background: var(--azul-noche); color: #fff; border-color: var(--azul-noche); box-shadow: var(--sombra-flotante); }
.price-card--featured h3, .price-card--featured .price small, .price-card--featured .check-list li { color: var(--texto-sobre-azul); }
.price-card--featured .price, .price-card--featured strong { color: #fff; }
.price-card--featured .check-list li::before { color: var(--amarillo); }
.price-card__tag { background: var(--amarillo); color: var(--azul-noche); }
.billing-toggle { border-color: var(--linea); }

/* ---------- FAQ ---------- */
.faq__item { border-radius: 14px; box-shadow: none; }
.faq__btn { border-radius: 14px; font-size: 17px; padding: 20px 24px; }
.faq__btn:hover { background: var(--fondo); }
.faq__panel p { font-size: 15px; padding: 0 24px 20px; color: var(--texto-sec); }

/* ---------- CTA final ---------- */
.cta__info {
  background-color: var(--azul-noche);
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.cta__info p, .cta__info ul { color: var(--texto-sobre-azul); }

/* ---------- Footer claro ---------- */
.footer { background: var(--superficie); color: var(--texto-apagado); border-top: 1px solid var(--linea); }
.footer h3, .footer__brand { color: var(--tinta); }
.footer a { color: var(--texto-sec); }
.footer a:hover { color: var(--azul-acento); }
.footer__muted, .footer__tag, .footer__heart { color: var(--texto-apagado); }
.footer__bar { border-top-color: var(--linea); color: var(--texto-apagado); }
.footer__dot { color: var(--azul-acento); }

/* ---------- Toast, copiloto y avisos temporales ---------- */
.toast { background: var(--tinta); }
.copilot-btn { box-shadow: 0 8px 22px rgba(14,42,92,0.24), 0 1px 3px rgba(0,0,0,0.1); }
.copilot-btn:hover { box-shadow: 0 14px 30px rgba(14,42,92,0.3), 0 1px 3px rgba(0,0,0,0.12); }
.wip-banner { background: var(--azul-noche); border-bottom-color: rgba(255,255,255,0.08); }
.wip-banner__dot { background: var(--amarillo); }
.wip-note { background: var(--pilar-buscar-bg); color: var(--azul-noche); border-color: var(--azul-acento); }

/* ---------- Móvil (< 900 px): header compacto, sin scroll horizontal ---------- */
/* "Entrar" se oculta en móvil; sigue en el footer ("Iniciar sesión"). La fase 2 lo pasa al menú ☰. */
@media (max-width: 899px) {
  .topbar .btn--ghost { display: none; }
  .topbar__actions { gap: 6px; }
  .topbar .btn { padding: 10px 14px; font-size: 14px; }
  .brand { font-size: 18px; }
  .kanban-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .kanban-tab { white-space: nowrap; flex: none; }
  .job { min-width: 0; }
  .job .pill { flex: none; }
  .hero::before { width: 420px; height: 420px; top: -200px; right: -220px; }
}