/* =========================================================================
   NOGOPAINT — Estilos DESKTOP (complementa app.css)
   Layouts de varias columnas. Consume los mismos tokens.
   ========================================================================= */

.dt-root { font-family: var(--font-body); color: var(--text-default); background: var(--bg-base); min-height: 100%; }
.dt-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.dt-screen { min-height: 100%; }

/* ---- Header ---- */
.dt-shipbar { background: var(--color-success-600); color: #fff; font-size: var(--text-sm); font-weight: var(--weight-semibold); text-align: center; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.dt-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.dt-headbar { display: flex; align-items: center; gap: 28px; height: 72px; }
.dt-nav { display: flex; gap: 6px; }
.dt-nav button { background: none; border: none; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-default); padding: 8px 14px; border-radius: var(--radius-md); cursor: pointer; min-height: 40px; }
.dt-nav button:hover { background: var(--bg-surface-alt); color: var(--text-strong); }
.dt-nav button.active { color: var(--accent); background: var(--accent-soft); }
.dt-search { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 420px; background: var(--bg-surface-alt); border-radius: var(--radius-full); padding: 0 18px; min-height: 46px; color: var(--text-muted); border: 1.5px solid transparent; transition: border-color .15s, background .15s; }
.dt-search:focus-within { background: var(--bg-surface); border-color: var(--focus-ring); }
.dt-search input { border: none; background: none; outline: none; flex: 1; font-size: var(--text-base); color: var(--text-strong); }
.dt-headicons { display: flex; gap: 6px; margin-left: auto; }
.dt-iconbtn { width: 46px; height: 46px; border-radius: var(--radius-md); background: none; border: none; display: grid; place-items: center; color: var(--text-default); cursor: pointer; position: relative; }
.dt-iconbtn:hover { background: var(--bg-surface-alt); }

/* ---- Footer ---- */
.dt-footer { background: var(--color-neutral-900); color: var(--color-neutral-300); margin-top: 64px; }
.dt-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 40px; }
.dt-footer h4 { color: #fff; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; font-family: var(--font-body); font-weight: var(--weight-bold); }
.dt-footer a, .dt-footer p { color: var(--color-neutral-400); font-size: var(--text-sm); text-decoration: none; display: block; margin-bottom: 10px; line-height: var(--leading-snug); }
.dt-footer a:hover { color: #fff; }
.dt-footer-bottom { border-top: 1px solid var(--color-neutral-800); padding: 24px 0; display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-neutral-500); }

/* ---- Generic section ---- */
.dt-section { padding: 56px 0; }
.dt-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.dt-section-head h2 { font-size: var(--text-3xl); }
.dt-h1 { font-size: var(--text-5xl); line-height: 1.05; }

/* ---- Home hero ---- */
/* .paint-hero vive en app.css (mobile-first, es lo que renderiza Nogopaint.html
   sin este archivo). Acá sólo van los ajustes de escritorio, envueltos en el
   MISMO breakpoint que usa deploy-root.jsx — así no se filtran al árbol mobile
   cuando index.html monta <MobileApp/> (que igual carga este CSS). */
@media (min-width: 860px) {
  .paint-hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    padding: 0;
    margin-top: 32px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
  }
  .paint-hero__copy { padding: 64px 56px; gap: var(--space-4); justify-content: center; }
  .paint-hero__copy h1 { font-size: 44px; line-height: 1.06; }
  .paint-hero__copy p { font-size: var(--text-lg); max-width: 440px; }

  .paint-hero__visual { height: auto; min-height: 440px; border-radius: 0; }
  .paint-hero__paint { height: 40px; margin-top: -20px; }
  .paint-hero__roller { width: 84px; height: 52px; margin-top: -26px; }

  .paint-hero__can { left: var(--space-6); bottom: var(--space-6); width: 138px; height: 178px; }
  .paint-hero__chips { top: var(--space-5); right: var(--space-5); gap: var(--space-2); max-width: 70%; }
  .paint-hero__chip { font-size: var(--text-sm); padding: 6px var(--space-4); }
  .paint-hero__advisor { right: var(--space-6); bottom: var(--space-6); max-width: 220px; padding: var(--space-4); }
  .paint-hero__advisor-calc { font-size: var(--text-base); }

  .paint-hero__picker-label { font-size: var(--text-sm); }
  .paint-hero__pick { width: 34px; height: 34px; }
}

/* ---- Category cards ---- */
.dt-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dt-cat { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); cursor: pointer; transition: box-shadow .15s, transform .15s; text-align: left; }
.dt-cat:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.dt-cat__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--text-strong); }

/* ---- Product grid ---- */
.dt-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dt-pgrid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---- Catalog layout ---- */
.dt-catalog { display: grid; grid-template-columns: 264px 1fr; gap: 40px; align-items: start; padding: 40px 0 0; }
.dt-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 28px; }
.dt-filter-group { display: flex; flex-direction: column; gap: 12px; }
.dt-filter-group > h4 { font-size: var(--text-base); color: var(--text-strong); font-family: var(--font-body); font-weight: var(--weight-semibold); }
.dt-check-list { display: flex; flex-direction: column; gap: 4px; }

/* ---- Product detail ---- */
.dt-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 40px 0; align-items: start; }
.dt-pdp__media { position: sticky; top: 96px; background: var(--bg-surface-alt); border-radius: var(--radius-xl); aspect-ratio: 1/1; overflow: hidden; border: 1px solid var(--border-subtle); }
.dt-pdp__col { display: flex; flex-direction: column; gap: 24px; }
.dt-breadcrumb { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--text-muted); padding: 24px 0 0; }
.dt-breadcrumb button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: inherit; padding: 0; }
.dt-breadcrumb button:hover { color: var(--accent); }
.dt-tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.dt-tech-cell { background: var(--bg-surface); padding: 18px 20px; }

/* ---- Cart / Checkout 2-col ---- */
.dt-twocol { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; padding: 40px 0; }
.dt-summary { position: sticky; top: 96px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.dt-cart-row { display: flex; gap: 20px; padding: 20px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.dt-cart-row__sw { width: 84px; height: 84px; border-radius: var(--radius-md); flex: none; border: 1px solid rgba(18,21,27,.12); display: grid; place-items: center; color: var(--text-muted); }

/* ---- Modal (bot / generic) ---- */
.dt-modal-overlay { position: fixed; inset: 0; background: rgba(18,21,27,0.55); z-index: var(--z-modal); display: grid; place-items: center; padding: 32px; animation: fade .2s both; }
.dt-modal { width: 460px; max-width: 100%; height: 640px; max-height: 90%; background: var(--bg-surface); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }

/* ---- Forms page ---- */
.dt-form-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; gap: 20px; }
.dt-services-hero { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }

/* hover lift on product cards within desktop (reusa .pcard) */
.dt-root .pcard__media { aspect-ratio: 1/1; }