/* ─────────────────────────────────────────────────────────────────────────
   CAPA DE COMPONENTES · @donaumorgen/canon

   Extraida de comprora, que era la landing mas cercana al canon de la suite.
   Todo valor de marca es un token: no queda un solo hex literal.

   Carga DESPUES de tokens.css y base.css. Selectores de clase plana, sin
   :where() y sin envolver en [data-*]: el canon anterior seleccionaba con
   body[data-canon-saas="v1"] :where(...) = (0,1,1), que ganaba a global.css
   (0,1,0) y perdia contra el <style> de Astro (0,2,0). Con eso nadie sabia
   quien mandaba y habia reglas escritas que no pintaban un pixel.

   Si una landing necesita pisar algo de aqui, que lo haga con una clase
   propia — no repitiendo el selector con mas peso.
   ───────────────────────────────────────────────────────────────────────── */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px);
  }
  .nav-wrap {
    min-height: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  /* Isotipo-badge de marca (canónico: badge con gradiente + wordmark + descriptor) */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--fg);
  }
  .brand-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border: 1px solid var(--line-strong);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand-600) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .brand-badge svg {
    width: 22px;
    height: 22px;
  }
  .brand-text b {
    display: block;
    color: var(--fg);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
  }
  .brand-text small {
    display: block;
    color: var(--fg-muted);
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 1px;
  }
  .footer-logo {
    margin: 0 0 0.9rem;
  }
  .main-nav {
    display: inline-flex;
    gap: 1.4rem;
    color: var(--fg-muted);
    font-weight: 600;
  }
  .main-nav a:hover {
    color: var(--fg);
  }
  .header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }
  .login-link {
    color: var(--brand-fg);
  }

  /* En oscuro brand-700 es casi negro sobre fondo casi negro: 2.1:1 medido. */
  :root[data-theme="dark"] .login-link {
    color: var(--brand-400);
    font-weight: 700;
    font-size: 0.95rem;
  }
  /* Va DESPUES de .section (que vive en base.css) para que gane por orden.
     En el original estaba antes y con la misma especificidad, asi que el hero
     respiraba igual que un bloque de FAQ: la regla no pintaba nada. */
  .hero {
    padding-top: var(--hero-y);
    padding-bottom: var(--sec-y);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.25fr;
    gap: 1.8rem;
    align-items: center;
  }
  .hero-copy h1 {
    margin: 0.65rem 0 0;
    color: var(--fg);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -0.02em;
  }
  .hero-copy h1 .accent {
    color: var(--brand-fg);
  }
  .hero-copy p {
    margin: 1rem 0 0;
    color: var(--fg-soft);
    max-width: 52ch;
    font-size: 1.08rem;
  }
  .cta-micro {
    margin-top: 0.7rem;
    color: var(--fg-muted);
    font-size: 0.84rem;
  }
  .cta-micro .cta-mail,
  .cta-mail {
    color: var(--brand-fg);
    font-weight: 700;
  }
  .hero-cta {
    margin-top: 1.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
  }
  /* Grid de una columna, NUNCA flex-wrap. Con flex-wrap y tres textos de
     largo desigual en la columna estrecha del hero entran dos y el tercero
     cae solo: es el bloque 2+1 desbalanceado que tenian nueve landings. */
  .hero-proof {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    color: var(--fg-muted);
    font-size: 0.87rem;
  }
  .hero-proof li::before {
    content: "◦";
    color: var(--brand-fg);
    margin-right: 0.35rem;
  }
  .hero-preview {
    position: relative;
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--mock-surface);
    overflow: hidden;
  }
  .preview-shell {
    display: grid;
    grid-template-columns: 145px 1fr;
    min-height: 386px;
  }
  .preview-sidebar {
    background: var(--mock-bg);
    border-right: 1px solid var(--mock-line);
    color: var(--mock-fg);
    padding: 0.95rem 0.7rem;
  }
  .preview-brand {
    margin: 0 0 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mock-fg);
  }
  .preview-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.34rem;
  }
  .preview-sidebar li {
    font-size: 0.73rem;
    color: var(--mock-fg-muted);
    padding: 0.34rem 0.46rem;
    border-radius: 0.42rem;
  }
  .preview-sidebar li.active {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 700;
  }
  .preview-main {
    padding: 0.85rem;
    background: var(--mock-surface);
  }
  .preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
  }
  .preview-title {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--mock-fg);
  }
  .preview-date {
    font-size: 0.68rem;
    color: var(--mock-fg-muted);
    border: 1px solid var(--mock-line);
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    background: var(--mock-surface);
  }
  .preview-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
  }
  .preview-kpis article {
    border: 1px solid var(--mock-line);
    border-radius: 0.52rem;
    background: var(--mock-surface);
    padding: 0.38rem;
  }
  .preview-kpis span {
    display: block;
    font-size: 0.6rem;
    color: var(--mock-fg-muted);
  }
  .preview-kpis strong {
    display: block;
    margin-top: 0.12rem;
    color: var(--mock-fg);
    font-size: 1rem;
    line-height: 1;
  }
  .preview-kpis small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.54rem;
    color: var(--mock-success-fg);
  }
  .preview-kpis .danger {
    color: var(--mock-danger-fg);
  }
  .preview-table {
    margin-top: 0.62rem;
    border: 1px solid var(--mock-line);
    border-radius: 0.62rem;
    overflow: hidden;
    background: var(--mock-surface);
  }
  .preview-row {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.95fr 0.9fr;
    gap: 0.3rem;
    align-items: center;
    border-bottom: 1px solid var(--mock-line);
    padding: 0.42rem 0.5rem;
    font-size: 0.62rem;
    color: var(--mock-fg-soft);
  }
  .preview-row.head {
    background: var(--mock-bg);
    font-weight: 700;
    /* Tinta plena, no la apagada: es la cabecera de una tabla, va en negrita a
       10px y con --mock-fg-muted se quedaba en 2.34:1. Un mock decorativo
       sigue siendo algo que la gente lee. */
    color: var(--mock-fg);
  }
  .preview-row:last-child {
    border-bottom: 0;
  }
  .status {
    justify-self: start;
    border-radius: 999px;
    padding: 0.13rem 0.34rem;
    font-weight: 700;
    font-size: 0.56rem;
  }
  /* Los badges viven DENTRO del mock, que siempre es claro. Con los tokens de
     estado del tema, en una landing oscura saldria verde claro sobre blanco. */
  .status.progress {
    color: var(--mock-info-fg);
    background: var(--mock-info-bg);
  }
  .status.done {
    color: var(--mock-success-fg);
    background: var(--mock-success-bg);
  }
  .status.pending {
    color: var(--mock-warning-fg);
    background: var(--mock-warning-bg);
  }
  .intro-grid {
    margin-top: 0;
  }
  .cards-grid {
    margin-top: 1.35rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.9rem;
  }
  .cases-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .card {
    border: 1px solid var(--line);
    border-radius: 0.86rem;
    background: var(--surface);
    padding: 1rem;
  }
  .card h3 {
    margin: 0;
    color: var(--fg);
    font-size: 1.03rem;
  }
  .card p {
    margin: 0.56rem 0 0;
    color: var(--fg-soft);
    font-size: 0.93rem;
  }
  /* Iconos de sección (Lucide-style) e ic-wrap canónico: 40px / radio 11px / icono acento */
  .ic {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .card .ic-wrap {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--brand-600) 8%, transparent);
    border: 1px solid var(--line);
    color: var(--brand-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
  }
  .cases-grid {
    margin-top: 1rem;
  }
  .case-card {
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--brand-600) 10%, var(--surface)) 100%);
  }
  .plans-grid {
    margin-top: 1.35rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    align-items: stretch;
  }
  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 0.86rem;
    background: var(--surface);
    padding: 1.1rem 1rem;
  }
  .plan-card.featured {
    border-color: var(--brand-400);
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--brand-600) 10%, var(--surface)) 100%);
    box-shadow: 0 14px 32px -20px color-mix(in srgb, var(--brand-600) 35%, transparent);
  }
  .plan-flag {
    position: absolute;
    top: -0.68rem;
    right: 0.9rem;
  }
  /* Linea de encuadre sobre el nombre: a quien va dirigido el plan o que
     edicion es. Opcional — la mayoria de las landings no la necesita, pero dos
     la tenian cada una con su propio CSS. */
  .plan-rol {
    margin: 0 0 0.2rem;
    color: var(--fg-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .plan-name {
    margin: 0;
    color: var(--fg);
    font-size: 1.03rem;
  }
  .plan-price {
    margin: 0.5rem 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .plan-amount {
    color: var(--fg);
    font-size: 1.9rem;
    font-weight: 850;
    letter-spacing: -0.02em;
  }
  .plan-amount.is-contact {
    font-size: 1.32rem;
  }
  .plan-period {
    color: var(--fg-muted);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .plan-body {
    margin: 0.5rem 0 0;
    color: var(--fg-soft);
    font-size: 0.93rem;
  }
  .plan-features {
    margin: 0.85rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    display: grid;
    gap: 0.44rem;
    color: var(--fg-soft);
    font-size: 0.9rem;
  }
  .plan-features li {
    display: grid;
    grid-template-columns: 0.85rem 1fr;
    gap: 0.45rem;
    align-items: start;
  }
  .plan-features li::before {
    content: "✓";
    color: var(--brand-fg);
    font-weight: 800;
  }
  .plan-cta {
    margin-top: auto;
    width: 100%;
  }
  .plan-features + .plan-cta {
    margin-top: 1rem;
  }
  .plan-note {
    margin: 0.5rem 0 0;
    color: var(--fg-muted);
    font-size: 0.76rem;
    text-align: center;
  }
  .plans-includes {
    margin: 1.05rem 0 0;
    color: var(--fg-soft);
    font-size: 0.9rem;
    max-width: 76ch;
  }
  .plans-foot {
    margin: 0.5rem 0 0;
    color: var(--fg-muted);
    font-size: 0.86rem;
  }
  .plans-foot a {
    color: var(--brand-fg);
    font-weight: 700;
    text-decoration: underline;
  }
  .plans-trust {
    margin: 0.66rem 0 0;
    color: var(--fg-muted);
    font-size: 0.86rem;
  }
  .faq-grid {
    margin-top: 1rem;
    display: grid;
    gap: 0.65rem;
  }
  details {
    border: 1px solid var(--line);
    border-radius: 0.82rem;
    background: var(--surface);
    padding: 0.7rem 0.84rem;
  }
  /* Indicador +/- propio (se quita el marcador nativo del navegador) para que
     el summary quede a todo el ancho de la sección con el símbolo alineado
     a la derecha. */
  summary {
    cursor: pointer;
    color: var(--fg);
    font-weight: 700;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  summary::after {
    content: "+";
    flex: none;
    color: var(--brand-fg);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
  }
  details[open] summary::after {
    content: "\2212";
  }
  details p {
    margin: 0.52rem 0 0;
    color: var(--fg-soft);
  }
  .cta-band {
    padding-top: clamp(4rem, 6vw, 6rem);
    border-top: 1px solid var(--line);
  }
  .cta-buttons {
    margin-top: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .site-footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 1.9rem 0 1rem;
    margin-top: 1.4rem;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 1rem;
  }
  .site-footer p,
  .site-footer li {
    color: var(--fg-muted);
  }
  .site-footer h3 {
    margin: 0;
    color: var(--fg);
    font-size: 0.94rem;
  }
  .site-footer ul {
    margin: 0.45rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
  }
  .site-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .legal {
    margin-top: 1.2rem;
    border-top: 1px solid var(--line);
    padding-top: 0.8rem;
    color: var(--fg-muted);
    font-size: 0.82rem;
  }
  /* ── Firma .z-grid / .z-media (zig-zag): mismo patrón en Problema, Solución
     y Cierre, para homogeneizar con el resto de la suite. Una sola atmósfera:
     .section-soft es transparente, sin bandas alternas. ── */
  .z-section {
    padding-top: clamp(4rem, 6vw, 6rem);
    padding-bottom: clamp(4rem, 6vw, 6rem);
  }
  .z-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
  }
  .z-grid > * {
    min-width: 0;
  }
  .z-grid.reverse .z-copy {
    order: 2;
  }
  .z-copy .section-title {
    margin-top: 0.5rem;
  }
  .z-copy .section-subtitle {
    max-width: 46ch;
  }
  .z-points {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.55rem;
  }
  .z-points .item {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 0.7rem;
    padding: 0.6rem 0.75rem;
    color: var(--fg-soft);
    font-size: 0.94rem;
  }
  .z-points-side {
    margin-top: 0;
    align-self: center;
  }
  .z-chip-row {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .z-chip {
    border: 1px solid var(--line);
    background: var(--chip-bg);
    color: var(--eyebrow-fg);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
  }
  /* Marco de media canónico: radio, borde acento, sombra flotante y un tinte
     de marca MUY tenue en el ::after — NUNCA scrim oscuro. */
  .z-media {
    position: relative;
    min-width: 0;
    align-self: center;
    border-radius: 1.2rem;
    border: 1px solid var(--line-strong);
    overflow: hidden;
    box-shadow:
      0 1px 2px rgba(16, 24, 40, 0.06),
      0 24px 48px -28px rgba(16, 24, 40, 0.28);
  }
  .z-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--z-media-tint);
    pointer-events: none;
  }
  .z-media .ui-panel {
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .z-grid.reverse .z-media {
    order: 1;
  }
  /* Chrome de ventana + panel claro shadcn para los mocks en código (ningún dato
     nuevo: reutilizan previewKpis/previewRows, ya declarados como ilustrativos). */
  .ui-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.8rem;
    background: var(--mock-bg);
    border-bottom: 1px solid var(--mock-line);
  }
  .ui-chrome span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--mock-line-strong);
  }
  .ui-chrome span:nth-child(1) { background: var(--mock-dot-rojo); }
  .ui-chrome span:nth-child(2) { background: var(--mock-dot-ambar); }
  .ui-chrome span:nth-child(3) { background: var(--mock-dot-verde); }

  .ui-chrome-title {
    margin-left: 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mock-fg-muted);
  }
  .ui-panel {
    background: var(--mock-surface);
    border: 1px solid var(--mock-line);
    border-radius: 14px;
    overflow: hidden;
    color: var(--mock-fg);
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .ui-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: var(--mock-bg);
    border-bottom: 1px solid var(--mock-line);
  }
  .ui-tabs {
    display: flex;
    gap: 0.9rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mock-fg-soft);
  }
  .ui-tabs .on {
    color: var(--mock-fg);
    position: relative;
  }
  .ui-tabs .on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.67rem;
    height: 2px;
    background: var(--brand-600);
    border-radius: 2px;
  }
  .ui-count {
    font-size: 0.7rem;
    color: var(--mock-fg-soft);
    background: var(--mock-bg);
    border: 1px solid var(--mock-line);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    white-space: nowrap;
  }
  .ui-tl-head,
  .ui-tl-row {
    display: grid;
    grid-template-columns: 1.7fr 0.9fr 0.9fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.9rem;
  }
  .ui-tl-head {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mock-fg-muted);
    background: var(--mock-surface);
    border-bottom: 1px solid var(--mock-line);
  }
  .ui-tl-row {
    border-bottom: 1px solid var(--mock-bg);
  }
  .ui-tl-row:last-child {
    border-bottom: 0;
  }
  .ui-task {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
  }
  .ui-task > div {
    min-width: 0;
  }
  .ui-check {
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--mock-line-strong);
    border-radius: 5px;
    flex: none;
  }
  .ui-task b {
    display: block;
    color: var(--mock-fg);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ui-task small {
    display: block;
    color: var(--mock-fg-muted);
    font-size: 0.66rem;
  }
  .ui-who {
    display: flex;
    align-items: center;
    color: var(--mock-fg-soft);
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 0;
  }
  /* Tira de cumplimiento (badges de estándar de la suite, no logos de terceros). */
  .integ-strip {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
  }
  .integ-label {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eyebrow-fg);
    margin: 0 0 0.95rem;
  }
  .integ-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem 1rem;
  }
  .integ-logos span {
    display: inline-flex;
    align-items: center;
    color: var(--fg-soft);
    font-size: 0.86rem;
    font-weight: 700;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
  }
  @media (max-width: 1024px) {
    .hero-grid {
      grid-template-columns: 1fr;
    }
    .preview-shell {
      grid-template-columns: 120px 1fr;
    }
    .cards-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 1024px) {
    .main-nav {
      display: none;
    }
    .cards-grid,
    .footer-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .plans-grid {
      grid-template-columns: 1fr;
      max-width: 32rem;
    }
    .preview-kpis {
      grid-template-columns: repeat(2, 1fr);
    }
    .preview-row {
      grid-template-columns: 1.2fr 0.9fr 0.9fr 0.9fr;
    }
    .z-grid {
      grid-template-columns: 1fr;
      gap: 1.4rem;
    }
    .z-grid.reverse .z-copy,
    .z-grid.reverse .z-media {
      order: initial;
    }
    .z-copy .section-subtitle {
      max-width: 100%;
    }
  }

  @media (max-width: 680px) {
    .header-actions .login-link {
      display: none;
    }
    .cards-grid,
    .footer-grid {
      grid-template-columns: 1fr;
    }
    .preview-shell {
      grid-template-columns: 1fr;
    }
    .preview-sidebar {
      border-bottom: 1px solid var(--line);
      border-right: none;
    }
    .preview-sidebar ul {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.3rem;
    }
    .preview-sidebar li {
      text-align: center;
      font-size: 0.66rem;
      padding: 0.26rem 0.3rem;
    }
    .preview-row {
      grid-template-columns: 1fr;
      gap: 0.2rem;
    }
    .preview-row.head {
      display: none;
    }
    .brand-text small {
      display: none;
    }
  }

  /* ── Superficie: única capa (light-atmospheric azul cobalto). Solo glows y
     profundidad quedan aquí; los tokens viven en global.css. ── */
  body {
    background:
      radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--brand-600) 8%, transparent), transparent 26%),
      radial-gradient(circle at 88% 6%, rgba(100, 116, 139, 0.1), transparent 24%),
      radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--brand-600) 5%, transparent), transparent 30%),
      var(--page);
  }
  /* Profundidad: sombra en capas + anillo tenue de marca (elevación, no color). */
  .hero-preview,
  .ui-panel {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--brand-600) 6%, transparent),
      0 1px 2px rgba(16, 24, 40, 0.06),
      0 24px 48px -28px rgba(16, 24, 40, 0.28);
  }
  /* Movimiento sutil (respeta prefers-reduced-motion); el estado inicial oculto
     vive DENTRO del media no-preference para que quien pida reduce vea todo. */
  @media (prefers-reduced-motion: no-preference) {
    body.js-reveal main > section:not(.hero) {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    body.js-reveal main > section.in {
      opacity: 1;
      transform: none;
    }
    .btn-primary {
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
    }

    /* Hover-lift de las superficies con contenido. Estaba repetido a mano en
       tres landings y ausente en las otras diez: es comportamiento compartido,
       no decoracion de producto. */
    .card,
    .plan-card,
    .case-card,
    .faq-grid details {
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover,
    .plan-card:hover,
    .case-card:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--brand-600) 35%, var(--line));
    }
    /* Tilt 3D del mock del hero: solo con movimiento permitido y desde 1025px
       para no aplicarlo en touch/mobile. */
    @media (min-width: 1025px) {
      .hero-preview {
        transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
        transform-origin: center left;
        transition: transform 0.45s ease;
      }
      .hero-preview:hover {
        transform: perspective(1600px) rotateY(0deg) rotateX(0deg);
      }
    }
  }

  /* ── Menú móvil ─────────────────────────────────────────────────────────
     La plantilla escondía `.main-nav` bajo 1024px y `.login-link` bajo 680px
     sin sustituto: en teléfono no había navegación ni acceso a la cuenta.
     El botón hamburguesa abre este panel, que lleva ambas cosas. */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    padding: 0;
    margin-left: 0.6rem;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    cursor: pointer;
    transition: 0.2s ease;
  }
  .nav-toggle:hover {
    border-color: var(--brand-500);
    color: var(--brand-fg);
  }
  .nav-toggle-bars {
    display: grid;
    gap: 4px;
    width: 18px;
  }
  .nav-toggle-bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle.is-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .site-menu {
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 22px 34px -26px rgba(15, 23, 42, 0.45);
  }
  .site-menu[hidden] { display: none; }

  .site-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block: 0.6rem 1.1rem;
  }
  .site-menu-inner > a {
    padding: 0.75rem 0.6rem;
    border-radius: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg);
  }
  .site-menu-inner > a:hover {
    background: color-mix(in srgb, var(--brand-500) 10%, transparent);
    color: var(--brand-fg);
  }
  .site-menu-cta {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
  .site-menu-cta > * {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* El acceso, que en la barra se esconde en pantallas chicas, aquí vive
     siempre — y con cuerpo de botón para que se vea como tal. */
  .site-menu-cta .login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.05rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.7rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fg);
  }
  .site-menu-cta .login-link:hover {
    border-color: var(--brand-500);
    color: var(--brand-fg);
  }
  @media (min-width: 1025px) {
    .nav-toggle,
    .site-menu {
      display: none;
    }
  }

  /* Bajo 560px la barra no da para marca + CTA + botón de menú: con el CTA
     dentro, el botón de menú se salía del viewport (desbordamiento horizontal
     de toda la página). Los accesos salen de la barra y viven en el panel,
     que es justo donde faltaban. */
  @media (max-width: 559px) {
    .header-actions {
      display: none;
    }
  }