/*
  LCG Solutions · app.css · 2026-10
  Portada 2026-10-12: catálogo de aplicativos arriba, TIMES como producto destacado, productos y servicios en tarjetas.
  - @layer: base / componentes / utilidades (la capa utilities mantiene [hidden] por encima de los display de componentes).
  - Secciones oscuras con la paleta de TIMES; secciones claras con la paleta del logo.
  - Animaciones de entrada solo con JavaScript activo y sin prefers-reduced-motion (progresivas, sin CLS: solo opacity/transform).
  - Sin declaraciones de prioridad forzada.
*/

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
    background: var(--color-bg);
  }

  body {
    margin: 0;
    min-width: 20rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  :where(h1, h2, h3, p, ul, ol, figure) { margin-block-start: 0; }
  :where(h1, h2, h3) {
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); letter-spacing: -0.015em; }
  p { max-width: 68ch; }

  :where(ul, ol) { padding-inline-start: 1.25rem; }
  :where(img, svg, video) { display: block; max-width: 100%; }
  :where(button, input) { font: inherit; }
  :where(button, a, input, summary) { -webkit-tap-highlight-color: transparent; }

  a {
    color: var(--color-link);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.09em;
  }

  :where(a, button, input, summary, video):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  ::selection { background: var(--color-primary-100); color: var(--color-primary-900); }

  .skip-link {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 1000;
    translate: 0 -180%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-950);
    color: #fff;
    font-weight: 700;
    text-decoration: none;

    &:focus { translate: 0 0; }
  }
}

@layer components {
  /* ---------- Estructura ---------- */
  .shell {
    width: min(calc(100% - 2rem), var(--content-wide));
    margin-inline: auto;

    &.shell--narrow { max-width: var(--content-narrow); }
  }

  .section {
    position: relative;
    padding-block: clamp(4rem, 7vw, 7rem);

    &.section--muted { background: var(--color-surface-muted); }
    &.section--dark,
    &.section--brand,
    &.section--cta {
      background: var(--gradient-dark);
      color: var(--color-on-dark);

      :is(h1, h2, h3) { color: var(--color-on-dark); }
      :is(p, li) { color: var(--color-on-dark-muted); }
      .eyebrow { color: var(--color-teal-300); }
      a:not(.btn) { color: var(--color-primary-300); }
    }
    &.section--brand { background: radial-gradient(700px 500px at 100% 0%, rgb(15 164 139 / 0.25), transparent 60%), var(--color-primary-900); }
  }

  .grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 72%);
  }

  .section-heading {
    display: grid;
    gap: var(--space-3);
    margin-block-end: clamp(2rem, 4vw, 3.25rem);
    max-width: 50rem;

    h2, p { margin: 0; }
    p { color: var(--color-text-muted); font-size: var(--step-1); line-height: 1.5; }

    &.section-heading--center { margin-inline: auto; text-align: center; justify-items: center; }
    &.section-heading--split {
      max-width: none;
      grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
      align-items: end;
      gap: var(--space-6);
    }
  }

  .eyebrow {
    color: var(--color-primary-700);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-100);
    color: var(--color-primary-900);
    font-size: var(--step--1);
    font-weight: 700;

    &.badge--light { background: rgb(255 255 255 / 0.12); color: #fff; border: 1px solid var(--color-on-dark-line); }
    &.badge--new {
      background: rgb(94 220 196 / 0.14);
      color: var(--color-teal-300);
      border: 1px solid rgb(94 220 196 / 0.35);
    }
    .badge__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgb(34 197 94 / 0.22); }
  }

  .pill {
    display: inline-flex;
    width: fit-content;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-size: 0.78rem;
    font-weight: 700;
  }

  .icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

  /* ---------- Botones ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 3rem;
    padding: 0.8rem 1.35rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;

    &:hover { transform: translateY(-2px); }
    &:active { transform: translateY(0); }

    &.btn--primary {
      background: var(--color-accent-500);
      color: #fff;
      box-shadow: 0 10px 26px rgb(172 89 0 / 0.32);
      &:hover { background: var(--color-accent-600); }
    }
    &.btn--secondary {
      border-color: var(--color-primary-700);
      background: transparent;
      color: var(--color-primary-700);
      &:hover { background: var(--color-primary-50); }
    }
    &.btn--outline-light {
      border-color: rgb(255 255 255 / 0.4);
      background: rgb(255 255 255 / 0.04);
      color: #fff;
      &:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }
    }
    &.btn--light {
      background: #fff;
      color: var(--color-ink-950);
      &:hover { background: var(--color-primary-50); }
    }
    &.btn--compact { min-height: 2.6rem; padding: 0.55rem 1rem; font-size: 0.95rem; }
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    text-decoration: none;

    span { transition: translate 160ms ease; }
    &:hover span { translate: 4px 0; }
  }

  /* ---------- Cabecera ---------- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: rgb(6 18 25 / 0.96);
    backdrop-filter: blur(14px) saturate(140%);
    border-block-end: 1px solid var(--color-on-dark-line);
    color: #fff;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-height);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: #fff;
    text-decoration: none;

    .brand__media img { width: auto; height: 2.6rem; }
    .brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.6rem);
    margin: 0;
    padding: 0;
    list-style: none;

    a {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding-block: 0.4rem;
      color: #e6eef2;
      font-weight: 600;
      font-size: 0.95rem;
      text-decoration: none;
      &:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--color-teal-300); }
    }
  }

  .nav-new {
    padding: 0.08rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--color-teal-500);
    color: #04201b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .nav-toggle {
    display: none;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: var(--radius-pill);
    background: transparent;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
  }

  /* ---------- Portada TIMES ---------- */
  .times-hero {
    overflow: hidden;
    padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 6vw, 5.5rem);
  }

  .times-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }

  .times-hero__copy {
    display: grid;
    gap: var(--space-5, 1.25rem);

    :is(h1, h2) { margin: 0; font-size: clamp(2.3rem, 1.5rem + 2.5vw, 3.7rem); }
    :is(h1, h2) em { font-style: normal; background: linear-gradient(100deg, #fff 0%, var(--color-teal-300) 55%, var(--color-primary-300) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }

  .times-hero__lead { margin: 0; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.22rem); line-height: 1.55; max-width: 34rem; }

  .times-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0;

    .times-price__amount { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -0.03em; }
    .times-price__amount small { font-size: 0.55em; color: var(--color-teal-300); vertical-align: 0.55em; margin-inline-end: 0.08em; }
    .times-price__per { font-size: var(--step-1); font-weight: 700; color: var(--color-on-dark-muted); }
  }

  .hero__actions,
  .cta-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .times-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;

    li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; font-weight: 600; }
    li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-teal-300); }
  }

  /* Reproductor */
  .times-player {
    position: relative;
    margin: 0;
  }

  .times-player__frame {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #050d14;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgb(255 255 255 / 0.14);
    aspect-ratio: 16 / 9;

    &::before {
      content: "";
      position: absolute;
      inset: -40%;
      z-index: -1;
      background: radial-gradient(circle, rgb(15 164 139 / 0.35), transparent 60%);
    }
  }

  .times-player[data-orientation="vertical"] .times-player__frame {
    aspect-ratio: 9 / 16;
    max-height: 78svh;
    margin-inline: auto;
  }

  .times-player__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #050d14;

    &::cue {
      background: rgb(0 0 0 / 0.72);
      color: #fff;
      font-family: var(--font-sans);
      font-size: 1.05em;
      line-height: 1.35;
    }
  }

  .times-player__controls {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-3);
    pointer-events: none;

    button { pointer-events: auto; }
  }

  .player-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: var(--radius-pill);
    background: rgb(6 18 25 / 0.72);
    backdrop-filter: blur(8px);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;

    &:hover { background: rgb(6 18 25 / 0.92); transform: translateY(-1px); }
    &.player-btn--sound { background: var(--color-accent-500); border-color: transparent; box-shadow: 0 10px 24px rgb(0 0 0 / 0.35); }
    &.player-btn--sound:hover { background: var(--color-accent-600); }
    &.player-btn--icon { width: 2.75rem; padding: 0; justify-content: center; }
    svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
  }

  .times-player__caption {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
    color: var(--color-on-dark-muted);
    font-size: 0.88rem;
  }

  /* Estados */
  .state-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      --c: var(--state-disponible);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 0.9rem;
      border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
      border-radius: var(--radius-pill);
      background: color-mix(in srgb, var(--c) 18%, transparent);
      color: #fff;
      font-weight: 700;
      font-size: 0.92rem;
    }
    li::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c); }
    .s-almuerzo { --c: var(--state-almuerzo); }
    .s-bano { --c: var(--state-bano); }
    .s-reunion { --c: var(--state-reunion); }
    .s-permiso { --c: var(--state-permiso); }
    .s-capacitacion { --c: var(--state-capacitacion); }
    .s-desconectado { --c: var(--state-desconectado); }
  }

  /* Funciones de TIMES */
  .times-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-12);
    padding: 0;
    list-style: none;
  }

  .feature-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
    border: 1px solid var(--color-on-dark-line);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02));
    transition: transform 200ms ease, border-color 200ms ease;

    &:hover { transform: translateY(-4px); border-color: rgb(94 220 196 / 0.45); }
    h3 { margin: 0; font-size: var(--step-1); }
    p { margin: 0; font-size: 0.98rem; line-height: 1.55; }
  }

  .feature-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: rgb(94 220 196 / 0.14);
    color: var(--color-teal-300);
    .icon { width: 1.5rem; height: 1.5rem; }
  }

  .times-states {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-6);
    align-items: center;
    margin-block-end: var(--space-12);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--color-on-dark-line);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 0.03);

    h3 { margin: 0 0 var(--space-2); }
    p { margin: 0; }
  }

  /* Galería */
  .gallery__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
  }

  .gallery__tab {
    min-height: 2.75rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--color-on-dark-line);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.04);
    color: var(--color-on-dark-muted);
    font-weight: 700;
    cursor: pointer;

    &[aria-selected="true"] { background: var(--color-teal-500); border-color: var(--color-teal-500); color: #032019; }
    &:hover:not([aria-selected="true"]) { color: #fff; border-color: rgb(255 255 255 / 0.35); }
  }

  .gallery__panel { margin: 0; }

  .browser {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #1a2738;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgb(255 255 255 / 0.12);

    .browser__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; }
    .browser__bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #ff5f57; }
    .browser__bar i:nth-child(2) { background: #febc2e; }
    .browser__bar i:nth-child(3) { background: #28c840; }
    .browser__bar span { margin-inline-start: 0.75rem; padding: 0.2rem 0.75rem; border-radius: 0.5rem; background: #0e1a29; color: #9db0c4; font-size: 0.8rem; }
    img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #f4f7fb; }
  }

  .gallery__caption { margin-block-start: var(--space-3); color: var(--color-on-dark-muted); font-size: 0.9rem; }

  /* Precio */
  .times-offer {
    background:
      radial-gradient(600px 400px at 90% 10%, rgb(255 255 255 / 0.18), transparent 60%),
      var(--gradient-brand);
    color: #fff;
  }

  .offer {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;

    h2 { margin: 0 0 var(--space-3); color: #fff; }
    p { margin: 0; color: rgb(255 255 255 / 0.88); }
  }

  .offer__price {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    font-size: clamp(3.2rem, 2.4rem + 3.5vw, 5.2rem);
    letter-spacing: -0.04em;
    color: #fff;
    margin-block: var(--space-3) var(--space-6);

    small { font-size: 0.42em; letter-spacing: 0; font-weight: 700; color: rgb(255 255 255 / 0.9); margin-inline-start: 0.2em; }
  }

  .offer__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; }
    li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgb(255 255 255 / 0.2); font-size: 0.85rem; font-weight: 800; }
  }

  .offer__qr {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--color-ink-950);
    box-shadow: var(--shadow-md);

    img { width: 9.5rem; height: 9.5rem; }
    figcaption { font-size: 0.85rem; font-weight: 700; text-align: center; }
  }

  /* ---------- Tarjetas generales ---------- */
  .featured-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .card,
  .service-card,
  .benefit-card,
  .process-step {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;

    &:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-primary-500) 35%, var(--color-border)); }
  }

  .card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-3);
    padding: var(--space-6);

    h3, p { margin: 0; }
    p { color: var(--color-text-muted); font-size: 0.98rem; }

    &.card--featured::before {
      content: "";
      position: absolute;
      inset-inline: 1.25rem;
      inset-block-start: -1px;
      height: 3px;
      border-radius: 0 0 4px 4px;
      background: var(--gradient-brand);
    }
  }

  .card__icon,
  .service-card__icon,
  .benefit-card__icon,
  .service-summary__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, var(--color-primary-50), #e3f7f3);
    color: var(--color-primary-700);
    .icon { width: 1.5rem; height: 1.5rem; }
  }

  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .benefit-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-6);
    h3, p { margin: 0; }
    p { color: var(--color-text-muted); font-size: 0.98rem; }
  }

  .service-search {
    display: grid;
    gap: var(--space-2);

    form { display: grid; gap: var(--space-2); }
    label { font-weight: 700; font-size: 0.95rem; }
    input {
      min-height: 3rem;
      padding: 0.7rem 1.1rem;
      border: 1px solid var(--color-neutral-300);
      border-radius: var(--radius-pill);
      background: #fff;
      color: var(--color-text);
      &:focus { border-color: var(--color-primary-500); }
    }
  }

  .search-status { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: 0.95rem; }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: var(--space-4);
  }

  .service-card {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: var(--space-3);
    padding: var(--space-6);
    h3, p { margin: 0; }
    h3 { font-size: 1.12rem; }
    p { color: var(--color-text-muted); font-size: 0.95rem; }
  }

  .process-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }

  .process-step {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-6);
    h3, p { margin: 0; }
    p { color: var(--color-text-muted); }
  }

  .process-step__number {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .case-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;

    h2 { margin-block: var(--space-4); }
  }

  .case-demo__flow {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: grid;
      gap: 0.2rem;
      padding: var(--space-4) var(--space-6);
      border: 1px solid var(--color-on-dark-line);
      border-radius: var(--radius-md);
      background: rgb(255 255 255 / 0.06);
    }
    strong { color: #fff; }
  }

  .faq {
    display: grid;
    gap: var(--space-3);
  }

  .faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);

    summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-4) var(--space-6);
      font-weight: 700;
      cursor: pointer;
      list-style: none;
      &::-webkit-details-marker { display: none; }
      &::after { content: "+"; display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--color-primary-50); color: var(--color-primary-700); font-size: 1.2rem; transition: rotate 200ms ease; }
    }
    &[open] summary::after { rotate: 45deg; }
    &:has(> summary:focus-visible) { border-color: var(--color-focus); }
    p { margin: 0; padding: 0 var(--space-6) var(--space-6); color: var(--color-text-muted); }
    &.faq__item--times { border-color: color-mix(in srgb, var(--color-teal-500) 45%, var(--color-border)); }
  }

  .cta-panel {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    max-width: 58rem;

    h2, p { margin: 0; }
  }

  /* ---------- Páginas de servicio y 404 ---------- */
  .service-hero,
  .error-hero {
    background: var(--gradient-dark);
    color: var(--color-on-dark);

    h1 { color: #fff; font-size: var(--step-4); }
    .hero__lead, p { color: var(--color-on-dark-muted); }
    .badge { background: rgb(94 220 196 / 0.14); color: var(--color-teal-300); }
    .btn--secondary { border-color: rgb(255 255 255 / 0.45); color: #fff; }
    .btn--secondary:hover { background: rgb(255 255 255 / 0.1); }
    .text-link { color: var(--color-primary-300); }
  }

  .service-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .service-hero__copy { display: grid; gap: var(--space-4); h1, p { margin: 0; } }
  .hero__lead { font-size: var(--step-1); line-height: 1.5; margin: 0; }

  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--color-on-dark-muted);

    li + li::before { content: "/"; margin-inline-end: 0.4rem; opacity: 0.6; }
    a { color: var(--color-primary-300); }
  }

  .service-summary {
    display: grid;
    gap: var(--space-4);
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--color-on-dark-line);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 0.06);
    backdrop-filter: blur(6px);

    h2 { margin: 0; font-size: var(--step-2); color: #fff; }
    .service-summary__icon { background: rgb(94 220 196 / 0.14); color: var(--color-teal-300); }
  }

  .check-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;

    li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--color-on-dark-muted); }
    li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 1.45rem; height: 1.45rem; margin-block-start: 0.12rem; border-radius: 50%; background: var(--color-primary-500); color: #fff; font-size: 0.8rem; font-weight: 800; }
  }

  .error-hero__inner { display: grid; gap: var(--space-4); justify-items: start; h1, p { margin: 0; } }
  .error-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }

  /* ---------- Pie de página ---------- */
  .site-footer {
    padding-block: var(--space-16) var(--space-6);
    background: var(--color-ink-950);
    color: var(--color-on-dark-muted);

    h2 { margin: 0 0 var(--space-3); color: #fff; font-size: 1.05rem; }
    p { margin: 0 0 var(--space-4); }
    a { color: #e6eef2; text-decoration: none; }
    a:hover { color: #fff; text-decoration: underline; }
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .site-footer__brand img { width: 9rem; height: auto; margin-block-end: var(--space-4); }

  .footer-links,
  .social-links {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    a, span { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.75rem; }
  }

  .footer-times {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: var(--space-3);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    background: rgb(94 220 196 / 0.12);
    color: var(--color-teal-300);
    font-weight: 700;
    font-size: 0.9rem;
  }

  .site-footer .site-footer__bottom {
    margin-inline: auto;
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-on-dark-line);
    font-size: 0.88rem;
    max-width: none;
  }

  /* ---------- Animación de entrada (solo con JS y sin reducir movimiento) ---------- */
  .js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-motion [data-reveal].is-visible { opacity: 1; transform: none; }
}

@layer utilities {
  [hidden] { display: none; }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (max-width: 72rem) {
    .times-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .featured-grid, .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .offer__qr { grid-column: 1 / -1; justify-self: start; grid-template-columns: auto auto; align-items: center; }
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 62rem) {
    .times-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .times-states { grid-template-columns: minmax(0, 1fr); }
    .case-demo, .service-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .section-heading.section-heading--split { grid-template-columns: minmax(0, 1fr); }

    .nav-toggle { display: inline-flex; }
    .site-nav {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-4);
      padding: var(--space-4) 1rem var(--space-6);
      background: var(--color-ink-950);
      border-block-end: 1px solid var(--color-on-dark-line);
    }
    .site-nav[data-open] { display: flex; }
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav__list a { padding-block: 0.8rem; border-block-end: 1px solid var(--color-on-dark-line); font-size: 1.05rem; }
  }

  @media (max-width: 48rem) {
    .times-features, .featured-grid, .benefits-grid, .process-list { grid-template-columns: minmax(0, 1fr); }
    .offer { grid-template-columns: minmax(0, 1fr); }
    .offer__qr { grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__actions .btn, .cta-panel__actions .btn { width: 100%; }
    .brand .brand__name { font-size: 1rem; }
    .times-player__caption { flex-direction: column; align-items: center; gap: 0.2rem; }
  }

  @media (prefers-contrast: more) {
    .feature-card, .times-states, .case-demo__flow li { border-color: rgb(255 255 255 / 0.5); }
    .card, .service-card, .benefit-card, .process-step, .faq__item { border-color: var(--color-neutral-600); }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; }
  }
}

/* ===================== Catálogo de aplicativos · 2026-10-12 (v2) ===================== */
@layer components {
  .badge.badge--brand { background: var(--color-primary-50); color: var(--color-primary-700); border: 1px solid color-mix(in srgb, var(--color-primary-500) 30%, transparent); }

  .catalog {
    padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 6vw, 5.5rem);
    background:
      radial-gradient(900px 480px at 85% -5%, rgb(15 164 139 / 0.12), transparent 65%),
      radial-gradient(700px 420px at 0% 10%, rgb(18 160 47 / 0.08), transparent 60%),
      linear-gradient(180deg, #f3f8f5 0%, #fff 70%);
  }

  .catalog__head {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    max-width: 56rem;
    margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;

    h1 { margin: 0; font-size: clamp(2.3rem, 1.35rem + 2.9vw, 4rem); }
    h1 em { font-style: normal; background: linear-gradient(100deg, var(--color-primary-700), var(--color-teal-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .hero__actions { justify-content: center; }
  }

  .catalog__lead { margin: 0; max-width: 46rem; color: var(--color-text-muted); font-size: var(--step-1); line-height: 1.5; }

  .catalog__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    li { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-text); font-weight: 700; font-size: 0.95rem; }
    .icon { width: 1.1rem; height: 1.1rem; color: var(--color-primary-600); }
  }

  .catalog__filters {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-block-end: var(--space-6);

    button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      min-height: 2.75rem;
      padding: 0.5rem 1rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: #fff;
      color: var(--color-text);
      font-weight: 700;
      font-size: 0.93rem;
      cursor: pointer;
      transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
    }
    button span { padding: 0.05rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-neutral-100); color: var(--color-text-muted); font-size: 0.78rem; }
    button:hover { border-color: var(--color-primary-500); }
    button[aria-pressed="true"] { background: var(--color-ink-950); border-color: var(--color-ink-950); color: #fff; }
    button[aria-pressed="true"] span { background: rgb(255 255 255 / 0.16); color: #fff; }
  }

  .app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  /* Tarjeta: cada aplicativo con su color (--app) */
  .app-card {
    --app: var(--color-teal-500);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;

    &:hover { transform: translateY(-4px); box-shadow: 0 22px 50px color-mix(in srgb, var(--app) 22%, transparent); border-color: color-mix(in srgb, var(--app) 45%, var(--color-border)); }
  }

  .app-card__media {
    position: relative;
    display: block;
    width: 100%;
    padding: 1rem 1rem 0;
    border: 0;
    background:
      radial-gradient(380px 200px at 100% 0%, color-mix(in srgb, var(--app) 70%, #fff 0%), transparent 70%),
      linear-gradient(150deg, color-mix(in srgb, var(--app) 88%, #000) 0%, color-mix(in srgb, var(--app) 35%, #061219) 100%);
    cursor: pointer;
    overflow: hidden;

    &::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 28px solid rgb(255 255 255 / 0.08); pointer-events: none; }
    &:focus-visible { outline-offset: -4px; }
  }

  .app-card__video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #eef2f6;
    box-shadow: 0 -8px 30px rgb(0 0 0 / 0.35);
    transition: transform 400ms cubic-bezier(.2,.7,.2,1);
  }
  .app-card:hover .app-card__video { transform: translateY(-4px) scale(1.015); }

  .app-card__badge {
    position: absolute;
    z-index: 2;
    inset-block-start: 1.45rem;
    inset-inline-end: 1.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.95);
    color: color-mix(in srgb, var(--app) 80%, #000);
    font-size: 0.74rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.2);
    .icon { width: 0.95rem; height: 0.95rem; }
  }

  .app-card__play {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    inset-block-end: 1rem;
    width: fit-content;
    margin-inline: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink-950);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    box-shadow: 0 10px 26px rgb(0 0 0 / 0.35);
    opacity: 0;
    translate: 0 8px;
    transition: opacity 200ms ease, translate 200ms ease;
    .icon { width: 1.05rem; height: 1.05rem; }
  }
  .app-card__media:is(:hover, :focus-visible) .app-card__play { opacity: 1; translate: 0 0; }

  .app-card__body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-2);
    padding: 1.1rem 1.25rem 1.2rem;

    h3 { margin: 0; font-size: 1.14rem; line-height: 1.2; }
    h3 a { color: var(--color-text); text-decoration: none; }
    h3 a:hover { color: color-mix(in srgb, var(--app) 80%, #000); text-decoration: underline; }
    p { margin: 0; color: var(--color-text-muted); font-size: 0.94rem; line-height: 1.5; }
  }

  .app-card__top { display: flex; align-items: center; gap: 0.6rem; }
  .app-card__icon {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--app) 12%, #fff);
    color: color-mix(in srgb, var(--app) 85%, #000);
    .icon { width: 1.15rem; height: 1.15rem; }
  }
  .app-card__cat { color: color-mix(in srgb, var(--app) 75%, #000); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

  .app-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
  }

  .app-card__quote {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.95rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    &:hover { background: var(--color-primary-100); }
  }

  .app-card__more {
    min-height: 2.5rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--app) 35%, var(--color-border));
    border-radius: var(--radius-pill);
    background: #fff;
    color: color-mix(in srgb, var(--app) 80%, #000);
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    span { display: inline-block; transition: translate 160ms ease; }
    &:hover { background: color-mix(in srgb, var(--app) 8%, #fff); }
    &:hover span { translate: 4px 0; }
  }

  .catalog__dash { margin-block-start: clamp(2.5rem, 5vw, 3.75rem); }
  .catalog__dash-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin-block-end: var(--space-6);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
    h2 { margin: 0; font-size: var(--step-2); }
    p { margin: 0; color: var(--color-text-muted); }
  }

  .catalog__note { margin: var(--space-8) auto 0; text-align: center; color: var(--color-text-muted); font-size: 0.88rem; }

  /* ---------- Productos y servicios ---------- */
  .products { background: #fff; }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fff, var(--color-neutral-50));
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;

    &:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-primary-500) 35%, var(--color-border)); }
    h3 { margin: 0; font-size: 1.12rem; }
    h3 a { color: var(--color-text); text-decoration: none; }
    h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.5; }
  }

  .product-card__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: 0 10px 24px rgb(8 121 105 / 0.25);
    .icon { width: 1.6rem; height: 1.6rem; }
  }

  .product-card__more {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    a { padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); background: var(--color-primary-50); color: var(--color-primary-700); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
    a:hover { background: var(--color-primary-100); }
  }

  .product-card__cta { color: var(--color-primary-700); font-size: 0.92rem; }

  .steps-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    list-style: none;
    li { display: flex; align-items: center; gap: var(--space-4); }
    b { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
    span { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.4; }
    strong { display: block; color: var(--color-text); font-size: 1.05rem; }
  }

  .cta-panel.cta-panel--center { justify-items: center; text-align: center; margin-inline: auto; .cta-panel__actions { justify-content: center; } }

  /* ---------- Modal del aplicativo ---------- */
  .app-modal {
    --app: var(--color-teal-500);
    --app-ink: color-mix(in srgb, var(--app) 78%, #000);
    --app-soft: color-mix(in srgb, var(--app) 9%, #fff);
    width: min(86rem, calc(100vw - 2rem));
    max-width: none;
    height: calc(100dvh - 2rem);
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 1.5rem;
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 40px 120px rgb(0 0 0 / 0.5);
    overflow: hidden;

    &::backdrop { background: rgb(6 18 25 / 0.78); backdrop-filter: blur(4px); }
    &[open] { animation: modal-in 260ms cubic-bezier(.2,.7,.2,1); }
  }
  @keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

  .app-modal__inner {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100%;
  }

  .app-modal__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: 1rem 1.25rem 0.75rem 1.5rem;
    background: linear-gradient(90deg, var(--app-soft), #fff 60%);
    border-block-start: 4px solid var(--app);

    h2 { margin: 0.1rem 0 0; font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem); }
  }
  .app-modal__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--app), var(--app-ink));
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--app) 35%, transparent);
    .icon { width: 1.6rem; height: 1.6rem; }
  }
  .app-modal__title { display: grid; min-width: 0; }
  .app-modal__cat { color: var(--app-ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .app-modal__tagline { color: var(--color-text-muted); font-size: 0.98rem; }
  .app-modal__actions { display: flex; align-items: center; gap: var(--space-2); }
  .app-modal__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    &:hover { background: var(--color-neutral-100); }
  }

  .app-modal__tabs {
    display: flex;
    gap: var(--space-2);
    padding: 0.6rem 1.5rem 0.75rem;
    border-block-end: 1px solid var(--color-border);
    overflow-x: auto;

    button { flex: none; min-height: 2.6rem; padding: 0.45rem 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; color: var(--color-text-muted); font-weight: 700; cursor: pointer; }
    button:hover { color: var(--color-text); }
    button[aria-selected="true"] { background: var(--app); border-color: var(--app); color: #fff; }
  }

  .app-modal__panel { padding: 1.25rem 1.5rem 1.5rem; overflow: auto; overscroll-behavior: contain; }
  .app-modal__panel--screens { padding-block: 1rem; overflow: hidden; }
  .app-modal__note { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; }
  .app-modal__foot { display: none; }

  /* Lupa */
  .zoomable { position: relative; display: block; padding: 0; border: 0; cursor: zoom-in; }
  .zoomable__area { position: relative; display: block; overflow: hidden; }
  .zoomable img { display: block; width: 100%; height: auto; transition: transform 160ms ease-out; will-change: transform; }
  .zoomable.is-zoom img { transform: scale(2.3); }
  .zoomable.is-zoom { cursor: crosshair; touch-action: none; }

  /* Vista general */
  .ov-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
  .ov-shot { margin: 0; display: grid; gap: var(--space-3); }
  .ov-shot .browser { width: 100%; box-shadow: 0 24px 60px color-mix(in srgb, var(--app) 25%, rgb(0 0 0 / 0.25)), 0 0 0 1px rgb(0 0 0 / 0.08); }
  .ov-shot .browser img { aspect-ratio: 16 / 10; }
  .ov-thumbs, .viewer__thumbs {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    button { display: grid; gap: 0.35rem; width: 100%; padding: 0.35rem; border: 2px solid var(--color-border); border-radius: 0.8rem; background: #fff; text-align: start; cursor: pointer; transition: border-color 160ms ease, transform 160ms ease; }
    button:hover { border-color: var(--app); transform: translateY(-2px); }
    button[aria-current="true"] { border-color: var(--app); background: var(--app-soft); }
    img { width: 100%; height: 4.6rem; object-fit: cover; object-position: top left; border-radius: 0.5rem; background: var(--color-neutral-100); }
    img.is-mobile { object-position: top center; }
    span { color: var(--color-text); font-size: 0.78rem; font-weight: 700; line-height: 1.25; }
  }
  .ov-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ov-pitch { display: grid; gap: var(--space-4); align-content: start; }
  .ov-lead { margin: 0; font-size: var(--step-1); line-height: 1.5; color: var(--color-text); }
  .ov-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none;
    li { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem 0.3rem 0.5rem; border-radius: var(--radius-pill); background: var(--app-soft); color: var(--app-ink); font-weight: 800; font-size: 0.82rem; }
    .icon { width: 1rem; height: 1rem; } }
  .ov-benefits { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none;
    li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
    li > .icon { width: 1.6rem; height: 1.6rem; padding: 0.3rem; border-radius: 50%; background: var(--app); color: #fff; }
    strong { display: block; font-size: 1.02rem; margin-block-end: 0.15rem; }
    span { color: var(--color-text-muted); font-size: 0.93rem; line-height: 1.45; } }
  .ov-for { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; strong { color: var(--color-text); } }

  .ov-block { margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
    h3 { margin: 0 0 var(--space-4); font-size: var(--step-1); }
    .ov-sub { margin-block-start: var(--space-6); } }
  .ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); }
  .ov-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none;
    li { display: grid; gap: 0.2rem; padding: var(--space-4); border-radius: var(--radius-md); background: var(--app-soft); border: 1px solid color-mix(in srgb, var(--app) 18%, transparent); }
    b { font-family: var(--font-display); font-size: 1.15rem; color: var(--app); line-height: 1; margin-block-end: 0.35rem; }
    strong { font-size: 1rem; }
    span { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.4; } }
  .ov-roles { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none;
    li { display: grid; gap: 0.1rem; padding: 0.8rem 1rem; border-inline-start: 4px solid var(--app); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-neutral-50); }
    span { color: var(--color-text-muted); font-size: 0.92rem; } }
  .ov-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none;
    li { padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: #fff; font-weight: 700; font-size: 0.86rem; } }
  .ov-block--includes { padding: var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-ink-950), color-mix(in srgb, var(--app) 45%, var(--color-ink-950))); color: #fff;
    h3 { color: #fff; } }
  .ov-includes { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none;
    li { display: flex; gap: 0.6rem; align-items: flex-start; color: #e6eef2; font-weight: 600; }
    .icon { width: 1.4rem; height: 1.4rem; flex: none; padding: 0.2rem; border-radius: 50%; background: var(--app); color: #fff; } }
  .ov-faq { display: grid; gap: var(--space-2);
    details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
    summary { display: flex; justify-content: space-between; gap: var(--space-4); padding: 0.9rem 1.1rem; font-weight: 700; cursor: pointer; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--app-soft); color: var(--app-ink); }
    details[open] summary::after { content: "–"; }
    p { margin: 0; padding: 0 1.1rem 1rem; color: var(--color-text-muted); } }
  .ov-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-start: clamp(1.5rem, 3vw, 2.25rem); padding: var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--app-ink), var(--app)); color: #fff;
    span { max-width: 44rem; color: rgb(255 255 255 / 0.9); }
    strong { display: block; color: #fff; font-size: var(--step-1); font-family: var(--font-display); } }

  /* Pantallas: visor grande */
  .viewer { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--space-4); height: 100%; min-height: 0; }
  .viewer__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    border-radius: var(--radius-md);
    background: radial-gradient(700px 360px at 85% 0%, color-mix(in srgb, var(--app) 40%, transparent), transparent 60%), linear-gradient(160deg, var(--color-ink-950), color-mix(in srgb, var(--app) 30%, var(--color-ink-950)));
    container-type: size;
    touch-action: pan-y;
  }
  .viewer__frame { width: min(100%, calc((100cqh - 2.6rem) * 1.6)); box-shadow: 0 30px 70px rgb(0 0 0 / 0.5); }
  .viewer__frame img { aspect-ratio: 16 / 10; }
  .viewer__phone {
    width: min(100%, calc((100cqh - 1.2rem) * 0.462));
    padding: 0.55rem;
    border-radius: 2.2rem;
    background: #0b0f14;
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.5), 0 0 0 2px #2a3644;
    .zoomable__area { border-radius: 1.75rem; }
  }
  .viewer__nav {
    position: absolute;
    z-index: 2;
    inset-block-start: calc(50% - 1.5rem);
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-ink-950);
    box-shadow: 0 10px 26px rgb(0 0 0 / 0.35);
    cursor: pointer;
    &.viewer__nav--prev { inset-inline-start: 0.75rem; }
    &.viewer__nav--next { inset-inline-end: 0.75rem; }
    &:hover { background: var(--app-soft); }
  }
  .viewer__hint {
    position: absolute;
    z-index: 2;
    inset-block-end: 0.75rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    background: rgb(6 18 25 / 0.7);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
    .icon { width: 1rem; height: 1rem; }
  }
  .viewer__stage:has(.is-zoom) .viewer__hint { opacity: 0; }
  .viewer__side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-3); min-height: 0; }
  .viewer__caption { margin: 0; display: grid; gap: 0.15rem; strong { font-size: 1.05rem; } span { color: var(--color-text-muted); font-size: 0.88rem; } }
  .viewer__thumbs { overflow-y: auto; align-content: start; padding-inline-end: 0.25rem;
    img { height: 6.2rem; } }

  /* Presentación */
  .deck {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 100%;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    padding-block-end: 5rem;
    border-radius: var(--radius-md);
    background: radial-gradient(800px 420px at 90% 0%, color-mix(in srgb, var(--app) 45%, transparent), transparent 60%), linear-gradient(160deg, var(--color-ink-950), color-mix(in srgb, var(--app) 25%, var(--color-ink-950)));
    color: #fff;
    overflow: hidden;
  }
  .deck__progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
    margin-block-end: var(--space-8);
    i { height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.18); overflow: hidden; position: relative; }
    i::after { content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: color-mix(in srgb, var(--app) 60%, #fff); }
  }
  .deck__slide {
    display: grid;
    align-content: start;
    gap: var(--space-6);
    animation: slide-in 420ms cubic-bezier(.2,.7,.2,1);
    h3 { margin: 0; color: #fff; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.9rem); max-width: 38ch; }
    p { margin: 0; color: var(--color-on-dark-muted); font-size: var(--step-1); }
    strong { color: #fff; }
    &.deck__slide--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
  }
  @keyframes slide-in { from { opacity: 0; transform: translateX(24px); } }
  .deck__kicker { color: color-mix(in srgb, var(--app) 55%, #fff); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
  .deck__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: paso;
    li { counter-increment: paso; display: grid; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--color-on-dark-line); border-radius: var(--radius-md); background: rgb(255 255 255 / 0.06); color: #e6eef2; font-weight: 600; font-size: 1.05rem; line-height: 1.45; }
    li::before { content: counter(paso, decimal-leading-zero); font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: color-mix(in srgb, var(--app) 55%, #fff); line-height: 1; } }
  .deck__copy { display: grid; gap: var(--space-4); }
  .deck__features { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none;
    li { display: flex; gap: 0.6rem; align-items: flex-start; color: #e6eef2; font-weight: 600; font-size: 1.05rem; }
    li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--app); color: #fff; font-size: 0.8rem; font-weight: 800; margin-block-start: 0.1rem; }
    &.deck__features--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .deck__shot { box-shadow: 0 30px 70px rgb(0 0 0 / 0.5); img { aspect-ratio: 16 / 10; } }
  .deck__slide--hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); h3 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); } }
  .deck__phone { justify-self: center; width: min(15rem, 100%); padding: 0.5rem; border-radius: 2rem; background: #0b0f14; box-shadow: 0 30px 70px rgb(0 0 0 / 0.5), 0 0 0 2px #2a3644; rotate: 4deg;
    img { display: block; width: 100%; height: auto; border-radius: 1.6rem; } }
  .deck__slide--hero .deck__shot { rotate: 2deg; }
  .deck__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none;
    li { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-md); background: rgb(255 255 255 / 0.07); border: 1px solid var(--color-on-dark-line); }
    li > .icon { width: 2.2rem; height: 2.2rem; padding: 0.45rem; border-radius: 50%; background: var(--app); color: #fff; }
    strong { display: block; font-size: 1.15rem; margin-block-end: 0.3rem; }
    span { color: var(--color-on-dark-muted); line-height: 1.5; } }
  .deck__brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
    figure { margin: 0; display: grid; gap: var(--space-2); }
    img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 0.75rem; box-shadow: 0 16px 40px rgb(0 0 0 / 0.4); }
    figcaption { color: var(--color-on-dark-muted); font-size: 0.9rem; font-weight: 700; text-align: center; }
    &:has(.deck__features) { grid-template-columns: 1fr; } }
  .deck__controls { position: absolute; inset-inline-end: 1.25rem; inset-block-end: 1.1rem; display: flex; gap: var(--space-2);
    button { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.9rem; border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.08); color: #fff; font-weight: 700; cursor: pointer; }
    button:hover { background: rgb(255 255 255 / 0.16); } }

  body.has-modal { overflow: hidden; }

  /* ---------- Página de aplicativo ---------- */
  .app-page main { --app-ink: color-mix(in srgb, var(--app, #0fa48b) 78%, #000); --app-soft: color-mix(in srgb, var(--app, #0fa48b) 9%, #fff); }
  .ov-benefits.ov-benefits--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-hero { background: radial-gradient(900px 500px at 90% 0%, color-mix(in srgb, var(--app) 45%, transparent), transparent 60%), linear-gradient(160deg, var(--color-ink-950), color-mix(in srgb, var(--app) 28%, var(--color-ink-950))); }
  .app-hero .service-hero__grid { align-items: center; }
  .app-hero .badge { background: rgb(255 255 255 / 0.12); color: #fff; }
  .app-hero__icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--app); color: #fff; box-shadow: 0 12px 30px color-mix(in srgb, var(--app) 40%, transparent); .icon { width: 1.75rem; height: 1.75rem; } }
  .app-hero__media { margin: 0; }
  .app-hero__media .browser { padding: 0; border: 0; width: 100%; cursor: zoom-in; }
  .app-hero__media .browser img { aspect-ratio: 16 / 10; }
  .app-hero .ov-badges li { background: rgb(255 255 255 / 0.1); color: #fff; }

  .app-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.5fr);
    gap: var(--space-4);
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
    figure { margin: 0; display: grid; gap: var(--space-2); }
    figcaption { color: var(--color-text-muted); font-size: 0.88rem; font-weight: 600; }
    button { display: block; width: 100%; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-sm); transition: transform 200ms ease, box-shadow 200ms ease; }
    button:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    img { width: 100%; height: auto; }
    .is-mobile button { border-radius: 1.2rem; border: 5px solid #0b0f14; }
  }
  .app-page .ov-block h3 { font-size: var(--step-2); }
  .app-page .process-step__number { background: linear-gradient(120deg, var(--app-ink), var(--app)); -webkit-background-clip: text; background-clip: text; }

  .brand-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none;
    figure { margin: 0; display: grid; gap: var(--space-2); }
    img { width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
    figcaption { color: var(--color-on-dark-muted); font-weight: 700; text-align: center; } }

  @media (max-width: 72rem) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .viewer { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .viewer__side { grid-template-rows: auto auto; }
    .viewer__thumbs { grid-auto-flow: column; grid-auto-columns: 8.5rem; overflow-x: auto; overflow-y: hidden; img { height: 4.6rem; } }
    .viewer__side .app-modal__note { display: none; }
  }

  @media (max-width: 62rem) {
    .ov-hero, .ov-grid, .ov-benefits.ov-benefits--row { grid-template-columns: minmax(0, 1fr); }
    .app-modal__page { display: none; }
    .deck__benefits { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 48rem) {
    .catalog__filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
    .catalog__filters button { flex: none; }
    .product-grid, .steps-strip, .brand-strip, .ov-modules { grid-template-columns: minmax(0, 1fr); }
    .app-modal { width: 100vw; height: 100dvh; border-radius: 0; }
    .app-modal__head { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0.75rem 0.75rem 0.6rem 1rem; gap: 0.75rem; }
    .app-modal__icon { width: 2.6rem; height: 2.6rem; }
    .app-modal__tagline { display: none; }
    .app-modal__actions .btn { display: none; }
    .app-modal__tabs { padding-inline: 1rem; gap: 0.35rem; button { padding-inline: 0.8rem; font-size: 0.9rem; } }
    .app-modal__panel { padding: 1rem; }
    .app-modal__foot { display: flex; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--color-border); background: #fff; .btn { flex: 1; } }
    .ov-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); img { height: 3.6rem; } span { display: none; } }
    .deck { min-height: 0; }
    .deck__slide.deck__slide--split, .deck__flow, .deck__features.deck__features--wide { grid-template-columns: minmax(0, 1fr); }
    .deck__slide--hero .deck__phone { display: none; }
    .deck__brands { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .viewer__nav { width: 2.5rem; height: 2.5rem; }
    .app-card__play { opacity: 1; translate: 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-modal[open], .deck__slide { animation: none; }
    .zoomable img { transition: none; }
  }
}