/* ═══════════════════════════════════════════════════
   BLINQ — Componentes v7 (2026-10-15)
   Piezas compartidas por la portada, las páginas de servicio, precios,
   casos y contacto. Tokens en design-system.css.

   Principios:
   · Secciones con fondo alterno: claro, blanco, tinte y tinta (oscuro).
     .sec--ink redefine los tokens, así que todo lo de adentro se adapta
     solo (textos, líneas, botones secundarios, formularios).
   · Líneas de 1px en vez de sombras. Las únicas sombras son de objetos
     físicos: laptop, celular y capturas enmarcadas.
   · Encabezado de sección en dos columnas: titular a la izquierda y
     texto de apoyo a la derecha, alineado abajo.
   ═══════════════════════════════════════════════════ */

.wrap {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.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;
}

/* Salto al contenido: invisible hasta que se navega con teclado */
.skip-link {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 3000;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 0.9rem;
    font-weight: 600;
    transition: top var(--transition-fast);
}

.skip-link:focus { top: 12px; }

/* Enlaces de acción: morado legible en cada fondo */
:root { --link: var(--brand); }
html.dark-mode { --link: var(--ink-brand); }


/* ─────────────────────────────────────
   SECCIONES
   ───────────────────────────────────── */
.sec {
    position: relative;
    padding: var(--section-y) 0;
    background: var(--bg);
}

.sec--white { background: var(--bg-2); }
.sec--tint { background: var(--bg-3); }
.sec--tight { padding: clamp(56px, 3rem + 3vw, 84px) 0; }

html.dark-mode .sec--white { background: var(--bg); }
html.dark-mode .sec--tint { background: var(--bg-2); }

.sec--ink {
    --bg-2: var(--ink-2);
    --bg-3: rgba(255, 255, 255, 0.05);
    --line: var(--ink-line);
    --line-2: rgba(255, 255, 255, 0.2);
    --text: var(--ink-text);
    --text-2: var(--ink-text-2);
    --text-3: var(--ink-text-3);
    --link: var(--ink-brand);
    --btn-2-bg: transparent;
    --shadow-media: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
    /* Alias heredados que usan los formularios */
    --glass: rgba(255, 255, 255, 0.04);
    --glass-border: var(--ink-line);
    --bg-card: var(--ink-2);
    --text-primary: var(--ink-text);
    --text-secondary: var(--ink-text-2);
    --text-dim: var(--ink-text-3);
    background: var(--ink);
    color: var(--ink-text);
    color-scheme: dark;
}


/* ─────────────────────────────────────
   TIPOGRAFÍA
   ───────────────────────────────────── */
.h1,
.h2,
.h3 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--text);
    text-wrap: balance;
}

.h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.042em;
}

.h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.022em;
}

.lead {
    margin: 0;
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: var(--text-2);
    text-wrap: pretty;
}

.p {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.72;
    color: var(--text-2);
    text-wrap: pretty;
}

.small {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-3);
}

.muted { color: var(--text-3); }

.link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--link);
    text-decoration: none;
}

.link .i { transition: transform var(--transition-fast); }
.link:hover .i--arrow { transform: translateX(3px); }
.link:hover .i--out { transform: translate(2px, -2px); }

.text-link {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-2);
}

.text-link:hover { text-decoration-color: var(--text); }


/* ─────────────────────────────────────
   ENCABEZADO DE SECCIÓN
   ───────────────────────────────────── */
.sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px clamp(32px, 6vw, 96px);
    align-items: end;
    margin-bottom: clamp(40px, 2rem + 2vw, 64px);
}

.sec-head__main {
    display: grid;
    gap: 20px;
    justify-items: start;
}

.sec-head__aside {
    max-width: 440px;
    justify-self: end;
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--text-2);
    text-wrap: pretty;
}

.sec-head--rule {
    padding-bottom: clamp(32px, 4vw, 48px);
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}

.sec-head--solo { grid-template-columns: minmax(0, 760px); }


/* ─────────────────────────────────────
   HERO DE PÁGINAS INTERNAS
   ───────────────────────────────────── */
.page-hero {
    padding: clamp(120px, 6rem + 5vw, 168px) 0 clamp(56px, 3rem + 3vw, 88px);
    background: var(--bg);
}

.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 32px clamp(32px, 6vw, 96px);
    align-items: end;
}

.page-hero__main {
    display: grid;
    gap: 24px;
    justify-items: start;
}

.page-hero__aside {
    display: grid;
    gap: 24px;
    justify-items: start;
}

.page-hero .h1 { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.25rem); }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--text-3);
}

.crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--line-2);
}

.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-2); }


/* ─────────────────────────────────────
   FRANJA DE HECHOS (al pie del hero)
   ───────────────────────────────────── */
.strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    margin: clamp(48px, 5vw, 72px) 0 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.strip li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.strip li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    background: var(--brand);
}


/* ─────────────────────────────────────
   COLUMNAS CON LÍNEAS (servicios, ventajas)
   ───────────────────────────────────── */
.cols {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
}

.col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 36px clamp(20px, 2.4vw, 32px) 4px;
    border-left: 1px solid var(--line);
}

.col:first-child { padding-left: 0; border-left: 0; }

.col__icon {
    font-size: 26px;
    color: var(--link);
    margin-bottom: 10px;
}

.col .p { flex: 1; }
.col .link { margin-top: 10px; }

.sec-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: clamp(40px, 4vw, 56px);
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
    color: var(--text-2);
}


/* ─────────────────────────────────────
   CHIPS
   ───────────────────────────────────── */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
}

.chip .i { color: var(--link); }

.chip--brand {
    border-color: transparent;
    background: var(--brand-soft);
    color: var(--text);
}


/* ─────────────────────────────────────
   MARCOS: navegador y celular
   ───────────────────────────────────── */
.frame {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}

.frame--shadow { box-shadow: var(--shadow-media); }

.frame__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-3);
}

.frame__dots { display: inline-flex; gap: 6px; }

.frame__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line-2);
}

.frame__url {
    justify-self: center;
    max-width: 100%;
    padding: 0 14px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg-2);
    font: 500 0.6875rem/20px var(--font-mono);
    color: var(--text-3);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.frame__pad { width: 39px; }

.frame__media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 690;
    object-fit: cover;
    object-position: top;
    background: var(--bg-3);
}

.frame__media--tall { aspect-ratio: 1280 / 1600; }

/* Celular: marco de titanio, bisel delgado, isla dinámica, barra de
   estado y botones laterales. La pantalla es clara siempre (es la app de
   un cliente de ejemplo o la captura de su web). */
.phone {
    position: relative;
    container-type: inline-size;   /* la barra de estado y la isla escalan con el ancho */
    width: min(100%, 300px);
    aspect-ratio: 300 / 620;
    padding: 6px;
    border-radius: 50px;
    background: #0B0A10;
    box-shadow:
        0 0 0 1.5px #4A4753,
        0 0 0 3.5px #1B1A21,
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 50px 90px -40px rgba(14, 11, 23, 0.65),
        0 22px 40px -26px rgba(14, 11, 23, 0.45);
}

.phone__btns i {
    position: absolute;
    left: -5px;
    width: 3px;
    border-radius: 2px 0 0 2px;
    background: linear-gradient(90deg, #2A2930, #4A4753);
}
.phone__btns i:nth-child(1) { top: 17%; height: 4.5%; }
.phone__btns i:nth-child(2) { top: 25%; height: 8.5%; }
.phone__btns i:nth-child(3) { top: 36%; height: 8.5%; }
.phone__btns i:nth-child(4) { left: auto; right: -5px; top: 28%; height: 12.5%; border-radius: 0 2px 2px 0; }

.phone__screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 44px;
    background: #FFFFFF;
    color: #111018;
}

/* Captura de una web dentro del celular: empieza bajo la barra de estado */
.phone__screen--shot { padding-top: 15.3cqw; }
.phone__screen > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.phone__status {
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 15.3cqw;
    padding: 1.3cqw 8.7cqw 0 10cqw;
    font-family: var(--font-body);
    font-size: 4.7cqw;
    font-weight: 600;
    letter-spacing: -0.01em;
    pointer-events: none;
}

.phone__island {
    position: absolute;
    top: 3.7cqw;
    left: 50%;
    width: 31%;
    height: 9cqw;
    border-radius: 999px;
    background: #000000;
    transform: translateX(-50%);
}

.phone__sys { width: 19.3cqw; height: 3.7cqw; fill: currentColor; }

.phone__home {
    position: absolute;
    bottom: 7px;
    left: 50%;
    z-index: 3;
    width: 36%;
    height: 5px;
    border-radius: 3px;
    background: #111018;
    transform: translateX(-50%);
}

.caption {
    margin: 14px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-3);
}


/* ─────────────────────────────────────
   CASO DESTACADO + MINIATURAS
   ───────────────────────────────────── */
.feature {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.feature__body {
    display: grid;
    gap: 18px;
    justify-items: start;
}

.feature__title {
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: var(--text);
}

.feature__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 6px;
}

.minicases {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: clamp(48px, 5vw, 72px) 0 0;
    padding: 32px 0 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.minicase {
    display: grid;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.minicase__img {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-3);
}

.minicase__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 690;
    object-fit: cover;
    object-position: top;
    transition: transform 0.35s ease;
}

.minicase:hover .minicase__img img { transform: scale(1.03); }

.minicase__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.minicase__name .i { font-size: 0.85em; color: var(--text-3); }
.minicase__cat { margin-top: -6px; font-size: 0.8125rem; color: var(--text-3); }


/* ─────────────────────────────────────
   DOS COLUMNAS + FILAS CON LÍNEAS
   ───────────────────────────────────── */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: start;
}

.split__main {
    display: grid;
    gap: 22px;
    justify-items: start;
}

.split--sticky .split__main {
    position: sticky;
    top: 112px;
}

.rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
    gap: 6px 32px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}

.row__k {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.row__v {
    margin: 0;
    line-height: 1.65;
    color: var(--text-2);
}


/* ─────────────────────────────────────
   LISTA CON CHULOS
   ───────────────────────────────────── */
.checks {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checks li {
    display: flex;
    gap: 12px;
    line-height: 1.55;
    color: var(--text-2);
}

.checks .i {
    margin-top: 0.22em;
    color: var(--link);
}


/* ─────────────────────────────────────
   PROCESO (4 pasos numerados)
   ───────────────────────────────────── */
.process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process li {
    display: grid;
    gap: 12px;
    align-content: start;
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
}

.process__num {
    font: 500 0.8125rem var(--font-mono);
    color: var(--link);
}

.assure {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: clamp(40px, 4vw, 56px) 0 0;
    padding: 20px 24px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}

.assure li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    color: var(--text-2);
}

.assure .i { color: var(--ok); }


/* ─────────────────────────────────────
   PRECIOS
   ───────────────────────────────────── */
.pricing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}

.plan--rec {
    padding: 27px;
    border: 2px solid var(--brand);
}

.plan__badge {
    position: absolute;
    top: -12px;
    left: 26px;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.plan__head { display: grid; gap: 10px; }

.plan__name {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
}

.plan__desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-2);
}

.plan__price {
    display: grid;
    gap: 6px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.plan__from {
    font-size: 0.8125rem;
    color: var(--text-3);
}

.plan__amount {
    font-size: clamp(1.9rem, 1.4rem + 1vw, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Sin cifra publicada: la misma jerarquía, en un tamaño que no compite con el nombre */
.plan__amount--quote {
    font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem);
    letter-spacing: -0.03em;
}

.plan__amount small {
    margin-left: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-3);
}

.plan__monthly {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--text-2);
}

.plan__monthly strong {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.plan .checks { gap: 10px; font-size: 0.925rem; }
.plan .btn { margin-top: auto; }

.pricing-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 28px;
    font-size: 0.875rem;
    color: var(--text-3);
}

.pricing-foot p { margin: 0; max-width: 640px; line-height: 1.6; }


/* ─────────────────────────────────────
   TABLA COMPARATIVA (página de precios)
   ───────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}

.compare {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.925rem;
}

.compare th,
.compare td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.compare thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-3);
}

.compare tbody th {
    font-weight: 500;
    color: var(--text);
    width: 34%;
}

.compare td { color: var(--text-2); }
.compare tr:last-child th,
.compare tr:last-child td { border-bottom: 0; }

.compare .i--yes { color: var(--link); }
.compare .i--no { color: var(--text-3); }


/* ─────────────────────────────────────
   PREGUNTAS FRECUENTES (details/summary, sin JS)
   ───────────────────────────────────── */
.faq {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    list-style: none;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.012em;
    color: var(--text);
    cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary .i {
    margin-top: 0.2em;
    font-size: 1.1em;
    color: var(--text-3);
    transition: transform 0.2s ease;
}

.faq details[open] summary .i { transform: rotate(45deg); }

.faq__a {
    margin: 0;
    padding: 0 48px 24px 0;
    line-height: 1.72;
    color: var(--text-2);
}


/* ─────────────────────────────────────
   BANDA DE LLAMADO FINAL
   ───────────────────────────────────── */
.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 48px;
}

.cta-band__text {
    display: grid;
    gap: 14px;
    max-width: 680px;
}


/* ─────────────────────────────────────
   CONTACTO (formulario en sección de tinta o en /contacto)
   ───────────────────────────────────── */
.contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.contact__info {
    display: grid;
    gap: 24px;
    justify-items: start;
}

.contact__alt {
    display: grid;
    gap: 6px;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
    color: var(--text-2);
}

.form7.contact-form {
    gap: 18px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}

.form7 .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form7 .form-group label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}

.form7 .form-group input,
.form7 .form-group select,
.form7 .form-group textarea {
    border-radius: var(--radius-md);
    background: var(--bg);
    border-color: var(--line-2);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.sec--ink .form7 .form-group input,
.sec--ink .form7 .form-group select,
.sec--ink .form7 .form-group textarea {
    background: rgba(255, 255, 255, 0.04);
}

.form7 .form-group select option { background: var(--bg-2); color: var(--text); }

.form7 .form-privacy label,
.form7 .form-check label { font-size: 0.8125rem; line-height: 1.5; color: var(--text-2); }

.form7 .form-privacy a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.form7 .form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: var(--brand-ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.form7 .form-submit:hover { background: var(--brand-hover); }

.form7 .form-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-3);
}

.contact .contact-success {
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    border-color: var(--line);
}

.contact .contact-success-icon {
    background: var(--brand);
    font-size: 1.75rem;
}

.contact .contact-success-wa {
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--radius-md);
}


/* ─────────────────────────────────────
   ASISTENTE DE IA: demo de conversación en un celular
   Colores fijos (es la pantalla de un cliente de ejemplo).
   ───────────────────────────────────── */
.ai-stage {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(56px, 6vw, 84px) 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 50% 42%, rgba(157, 0, 255, 0.24), transparent 60%),
        var(--bg-2);
}

/* Conversación: cabecera de app de mensajería, mensajes con hora y
   chulos, y la barra de escribir. Los mensajes se apilan desde abajo,
   como en un chat real: no queda hueco entre el último y la barra. */
.chat-demo {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #EFEDF4;
    color: #16141D;
    font-family: var(--font-body);
}

.chat-demo__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(15.3cqw + 4px) 12px 10px 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 0 #E6E3EC;
}

.chat-demo__back { display: grid; place-items: center; color: #9D00FF; font-size: 20px; }

.chat-demo__avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2F6B4F;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

.chat-demo__avatar i {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #22C55E;
}

.chat-demo__who { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.chat-demo__who span { font-size: 10.5px; font-weight: 500; color: #15803D; }
.chat-demo__tools { display: inline-flex; gap: 14px; color: #6B6878; font-size: 17px; }

.chat-demo__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    flex: 1;
    min-height: 0;
    padding: 12px 10px 8px;
    overflow: hidden;
}

.chat-demo__day {
    align-self: center;
    margin: 0 0 4px;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: #6B6878;
    font-size: 10.5px;
    font-weight: 600;
}

.msg {
    position: relative;
    max-width: 84%;
    margin: 0;
    padding: 7px 10px 6px;
    border-radius: 15px;
    font-size: 12.5px;
    line-height: 1.4;
}

.msg__meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    float: right;
    margin: 6px 0 -2px 10px;
    font-size: 9.5px;
    line-height: 1;
    opacity: 0.6;
}

.msg__meta .i { font-size: 12px; stroke-width: 2.2; }

.msg--bot {
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    background: #FFFFFF;
    box-shadow: 0 1px 1px rgba(16, 14, 24, 0.06);
}

.msg--user {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: #9D00FF;
    color: #FFFFFF;
}

.msg--user .msg__meta { opacity: 0.85; }
.msg--user .msg__meta .i { color: #D9F99D; }

.msg--event {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: none;
    margin-top: 4px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #E3F5E9;
    color: #166534;
    font-size: 11px;
    font-weight: 600;
}

.chat-demo__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 24px;
    background: #FFFFFF;
    box-shadow: 0 -1px 0 #E6E3EC;
}

.chat-demo__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: #F1EFF5;
    color: #8B8799;
    font-size: 12px;
}

.chat-demo__field span { flex: 1; white-space: nowrap; }
.chat-demo__field .i { font-size: 15px; }

.chat-demo__send {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #9D00FF;
    color: #FFFFFF;
    font-size: 15px;
}

/* Tarjetas del resultado: el lead que llega y la cita agendada. Se
   apoyan sobre el borde de arriba y el de abajo del celular (barra de
   estado e indicador de inicio), donde no tapan la conversación. */
.ai-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 260px;
    padding: 10px 12px 10px 10px;
    border-radius: 14px;
    background: #FFFFFF;
    color: #16141D;
    box-shadow: 0 0 0 1px rgba(16, 14, 24, 0.06), 0 26px 48px -24px rgba(14, 11, 23, 0.55);
    font-size: 12.5px;
    line-height: 1.3;
}

.ai-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #E7F8EE;
    color: #16A34A;
    font-size: 18px;
}

.ai-card__text { display: grid; gap: 2px; min-width: 0; }
.ai-card__text b { font-weight: 600; white-space: nowrap; }
.ai-card__text span { color: #6B6878; font-size: 11.5px; }

.ai-card__tag {
    padding: 3px 8px;
    border-radius: 6px;
    background: #F1E6FF;
    color: #7A00C7;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ai-card__date {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    overflow: hidden;
    border-radius: 9px;
    box-shadow: 0 0 0 1px #E6E3EC;
    text-align: center;
}

.ai-card__date small { display: block; width: 100%; padding: 2px 0; background: #EF4444; color: #FFFFFF; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
.ai-card__date b { padding: 3px 0 4px; font-size: 17px; font-weight: 700; line-height: 1; }

.ai-card--lead { top: clamp(14px, 2vw, 28px); left: max(8px, calc(50% - 230px)); }
.ai-card--cal { bottom: clamp(14px, 2vw, 28px); right: max(8px, calc(50% - 230px)); }

@media (prefers-reduced-motion: no-preference) {
    .js .chat-demo .msg,
    .js .ai-stage .ai-card { opacity: 0; transform: translateY(6px); }
    .chat-demo.is-playing .msg { animation: msg-in 0.35s ease forwards; animation-delay: var(--d, 0s); }
    .ai-stage.is-playing .ai-card--lead { animation: msg-in 0.45s ease forwards; animation-delay: var(--end, 6s); }
    .ai-stage.is-playing .ai-card--cal { animation: msg-in 0.45s ease forwards; animation-delay: calc(var(--end, 6s) + 0.5s); }
}

@keyframes msg-in { to { opacity: 1; transform: none; } }

/* En pantallas angostas las tarjetas se apoyan en zonas sin texto:
   la barra de estado arriba y la de escribir abajo. */
@media (max-width: 599px) {
    .ai-stage { padding: 56px 12px 60px; }
    .ai-card { max-width: 230px; padding: 8px 10px 8px 8px; font-size: 11.5px; }
    .ai-card__icon { width: 30px; height: 30px; font-size: 15px; }
    .ai-card__tag { display: none; }
    .ai-card--lead { top: 14px; left: 8px; }
    .ai-card--cal { bottom: 16px; right: 8px; }
}


/* ─────────────────────────────────────
   CASOS (página de caso y listado)
   ───────────────────────────────────── */
.case-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.case-meta div {
    padding: 20px 24px 20px 0;
}

.case-meta div + div {
    padding-left: 24px;
    border-left: 1px solid var(--line);
}

.case-meta dt {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}

.case-meta dd {
    margin: 8px 0 0;
    font-weight: 500;
    color: var(--text);
}

.case-gallery {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: end;
}

.case-gallery .phone { justify-self: center; width: min(100%, 260px); }

.case-block {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
    gap: 16px clamp(32px, 6vw, 96px);
    padding: clamp(36px, 4vw, 56px) 0;
    border-top: 1px solid var(--line);
}

.case-block:last-child { border-bottom: 1px solid var(--line); }

.case-block__label {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

.case-block__body {
    display: grid;
    gap: 18px;
    max-width: 720px;
}

.case-block__body .h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.03em; }

.cases-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 4vw, 56px) clamp(24px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pcard {
    display: grid;
    gap: 16px;
    color: inherit;
    text-decoration: none;
}

.pcard .frame { transition: border-color var(--transition-fast); }

/* Etiqueta sobre la captura de un producto que aún no está terminado */
.pcard .frame { position: relative; }
.pcard__beta {
    position: absolute;
    z-index: 1;
    top: 48px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #14131B;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 8px 20px -10px rgba(14, 11, 23, 0.6);
}
.pcard__beta .i { color: #D9A6FF; }
.pcard:hover .frame { border-color: var(--line-2); }

.pcard__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.pcard__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
}

.pcard .p { max-width: 560px; }

.pcard__tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.more-projects {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ─────────────────────────────────────
   NOTA DESTACADA
   ───────────────────────────────────── */
.note {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-md);
    background: var(--bg-2);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-2);
}

.note .i { margin-top: 0.2em; color: var(--link); font-size: 1.1em; }
.note strong { color: var(--text); }


/* ─────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────── */
@media (max-width: 1099px) {
    .minicases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .minicases li:nth-child(n + 4) { display: none; }
}

@media (max-width: 999px) {
    .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .col { padding: 32px 24px 28px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
    .col:nth-child(odd) { padding-left: 0; border-left: 0; }
    .col:nth-child(-n + 2) { border-top: 0; }
    .col:first-child { padding-left: 0; }

    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
    .pricing { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .feature { grid-template-columns: minmax(0, 1fr); }
    .split { grid-template-columns: minmax(0, 1fr); }
    .split--sticky .split__main { position: static; }
    .contact { grid-template-columns: minmax(0, 1fr); }
    .case-gallery { grid-template-columns: minmax(0, 1fr); }
    .case-gallery .phone { display: none; }
    .more-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .sec-head,
    .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .sec-head__aside { justify-self: start; }

    .row { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
    .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .case-meta div:nth-child(3) { padding-left: 0; border-left: 0; }
    .case-meta div:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .case-block { grid-template-columns: minmax(0, 1fr); }
    .cases-list { grid-template-columns: minmax(0, 1fr); }
    .form7 .form-row { grid-template-columns: minmax(0, 1fr); }
    .faq__a { padding-right: 0; }
}

@media (max-width: 599px) {
    .cols { grid-template-columns: minmax(0, 1fr); }
    .cols > .col { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); }
    .cols > .col:first-child { border-top: 0; padding-top: 8px; }

    .process { grid-template-columns: minmax(0, 1fr); }
    .minicases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .minicases li:nth-child(n + 3) { display: none; }
    .more-projects { grid-template-columns: minmax(0, 1fr); }
    .strip { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .actions .btn { flex: 1 1 100%; }
    .cta-band .btn { width: 100%; }
}

/* Variantes de dos columnas */
.split--center { align-items: center; }
.ai-figure { margin: 0; }

/* Lista de chulos dentro de una tarjeta enlazada (spans en vez de li) */
.pcard .checks { gap: 8px; }

.checks__i {
    display: flex;
    gap: 10px;
    font-size: 0.925rem;
    line-height: 1.5;
    color: var(--text-2);
}

.checks__i .i { margin-top: 0.22em; color: var(--link); }

/* Laptop con la captura de un proyecto (heros de servicio). Mismo
   aluminio que la laptop de la portada, sin el giro 3D. La pantalla
   tiene la proporción de la captura (1280×728) más la barra del
   navegador: no se recorta nada. */
.laptop {
    position: relative;
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    color: inherit;
    text-decoration: none;
}

.laptop__lid {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 2px;
    border-radius: 18px 18px 5px 5px;
    background: linear-gradient(180deg, #DADBDD, #B4B5B9);
    box-shadow: 0 50px 90px -46px rgba(16, 16, 24, 0.5);
}

.laptop__bezel {
    position: relative;
    display: block;
    padding: 18px 11px 11px;
    border-radius: 16px 16px 3px 3px;
    background: #0C0C0F;
}

.laptop__cam {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: #1C1C22;
    box-shadow: inset 0 0 0 1.5px #2B2B34;
}

.laptop__screen {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    background: #FFFFFF;
}

.laptop__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    height: 26px;
    padding: 0 10px;
    border-bottom: 1px solid #DCDCE2;
    background: #EEEEF1;
}

.laptop__bar .frame__dots { gap: 5px; }
.laptop__bar .frame__dots i { width: 8px; height: 8px; background: #C9C9D1; }
.laptop__bar::after { content: ""; width: 34px; }   /* equilibra los puntos: la URL queda centrada */

.laptop__url {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 17px;
    padding: 0 12px;
    overflow: hidden;
    border-radius: 5px;
    background: #FFFFFF;
    color: #55546A;
    font-family: var(--font-mono);
    font-size: 10px;
    white-space: nowrap;
}

.laptop__url .i { flex: none; font-size: 9px; color: #8B8A97; }

.laptop__screen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 728;
    object-fit: cover;
    object-position: top;
}

.laptop__base {
    position: relative;
    display: block;
    height: clamp(10px, 1.3vw, 16px);
    border-radius: 3px 3px 16px 16px / 3px 3px 10px 10px;
    background: linear-gradient(180deg, #E8E9EB 0%, #CFD0D3 40%, #A6A7AB 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.laptop__base span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 13%;
    height: 45%;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #B3B4B8, #D4D5D8);
}

.laptop::after {
    content: "";
    position: absolute;
    right: 4%;
    bottom: -14px;
    left: 4%;
    z-index: -1;
    height: 24px;
    background: radial-gradient(closest-side, rgba(10, 10, 20, 0.3), transparent);
}

.laptop:hover .laptop__lid { box-shadow: 0 56px 96px -46px rgba(16, 16, 24, 0.58); }

html.dark-mode .laptop__lid { background: linear-gradient(180deg, #4C4C54, #2A2A31); box-shadow: 0 50px 90px -46px rgba(0, 0, 0, 0.9); }
html.dark-mode .laptop__base { background: linear-gradient(180deg, #5A5A62 0%, #3B3B42 40%, #232328 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
html.dark-mode .laptop__base span { background: linear-gradient(180deg, #26262B, #46464D); }
html.dark-mode .laptop::after { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent); }

@media (max-width: 599px) {
    .laptop__bezel { padding: 12px 7px 7px; border-radius: 12px 12px 3px 3px; }
    .laptop__lid { border-radius: 14px 14px 4px 4px; }
    .laptop__cam { top: 4px; width: 5px; height: 5px; margin-left: -2.5px; }
    .laptop__bar { height: 20px; padding: 0 7px; }
    .laptop__bar .frame__dots i { width: 6px; height: 6px; }
    .laptop__bar::after { width: 24px; }
    .laptop__url { height: 13px; font-size: 8px; padding: 0 8px; }
}

/* ─────────────────────────────────────
   PÁGINAS DE SERVICIO
   ───────────────────────────────────── */
.page-hero__grid--visual { align-items: center; }
.page-hero__visual { margin: 0; }
.page-hero__visual .phone { margin: 0 auto; }

.ai-stage--light {
    background:
        radial-gradient(circle at 50% 40%, rgba(157, 0, 255, 0.12), transparent 62%),
        var(--bg-2);
}


.pricing--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    width: 100%;
    justify-self: end;
}

.minicases--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 0;
}

.svc-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.svc-links a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    color: var(--text);
    transition: border-color var(--transition-fast);
}

.svc-links a:hover { border-color: var(--line-2); }
.svc-links a > .i:first-child { font-size: 20px; color: var(--link); }
.svc-links a > .i--arrow { margin-top: 3px; color: var(--text-3); }
.svc-links a:hover > .i--arrow { transform: translateX(3px); color: var(--text); }
.svc-links span { display: grid; gap: 4px; }
.svc-links strong { font-size: 0.95rem; font-weight: 600; }
.svc-links small { font-size: 0.8125rem; line-height: 1.5; color: var(--text-3); }

@media (max-width: 999px) {
    .page-hero__grid--visual { grid-template-columns: minmax(0, 1fr); }
    .pricing--solo { justify-self: start; }
    .svc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
    .minicases--3 { grid-template-columns: minmax(0, 1fr); }
    .minicases--3 li:nth-child(n) { display: block; }
    .svc-links { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────────────────
   PRECIOS, CASOS Y CONTACTO
   ───────────────────────────────────── */
.pricing--page { margin-top: clamp(40px, 5vw, 64px); }

.compare--plans th[scope="col"]:not(:first-child),
.compare--plans td { width: 22%; }
.compare--plans tbody tr:nth-last-child(-n + 2) th,
.compare--plans tbody tr:nth-last-child(-n + 2) td { background: var(--bg-3); }
.compare--plans strong { color: var(--text); font-weight: 600; }

.cases-list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(40px, 5vw, 64px);
}

.more-projects .minicase__img img { aspect-ratio: 1280 / 690; }

/* Captura alta de un caso: muestra el inicio y, al pasar el mouse,
   recorre la página completa como si se hiciera scroll. */
.frame__media--case {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .frame__media--case { transition: object-position 7s ease-in-out; }
    .frame:hover .frame__media--case { object-position: bottom; }
}

.page-hero--contact .contact { align-items: start; }
.page-hero--contact .contact__info { gap: 22px; }

.process--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    margin-top: 8px;
}

.process--stack li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.process--stack .process__num { grid-row: span 2; padding-top: 4px; }
.process--stack .h3 { font-size: 1.05rem; }

.contact__direct { margin-top: 4px; }

@media (max-width: 999px) {
    .cases-list--3 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}

.page-hero--case .h1 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.5rem); }
.page-hero--case .case-meta { margin-top: clamp(40px, 5vw, 56px); }