/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT · Streaming Go — blanco profesional
   Requiere vimedia-kit.css. Una compra, dos métodos, cero fricción.
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    min-width: 320px;
    min-height: 100vh;
    background: var(--k-blanco);
    color: var(--k-tinta);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

.co-page {
    width: min(980px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.co-topbar {
    min-height: 62px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--k-g100);
}

/* ═══ EL BUSCADOR — el componente vive en el kit; acá solo su lugar ═════ */
.co-topbar .top-buscar { width: min(300px, 32vw); }
.co-topbar .top-buscar-wrap { flex: 0 1 auto; }
.co-topbar .k-btn-ico { color: var(--k-acento); }
.co-topbar .k-btn-ico:hover { color: var(--k-acento); }

.co-brand { display: flex; align-items: center; gap: 10px; }

.co-main { flex: 1; padding: 30px 0 40px; }

.co-titulo {
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 600;
    letter-spacing: -.6px;
    margin-bottom: 16px;
}

.co-main .k-aviso { margin-bottom: 16px; }

/* ═══ RESUMEN + FORMULARIO ══════════════════════════════════════════════ */
.co-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 26px;
    align-items: start;
}
/* ═══ EL CHECKOUT GUIADO — una cosa por vez ═══════════════════════════════
   Orden del dueño (21/08/26): «mientras más largo, más complicado es comprar,
   más se van los clientes». Con el JS puesto, el formulario deja de ser dos
   columnas apiladas y pasa a UNA columna angosta con un paso a la vista.
   Las reglas de dos columnas de más abajo siguen intactas: son las que se ven
   si el JS no corre. */
.co-guiado {
    grid-template-columns: minmax(0, 1fr);
    max-width: 660px;
    margin-inline: auto;
    gap: 18px;
}
/* ⚠ EL `order` DE DOS COLUMNAS SEGUIA MANDANDO. Las reglas de más abajo
   (`.co-layout > .co-form {order:1}` y `.co-carrito {order:2}`) tienen la
   MISMA especificidad que estas y van después en el archivo, así que ganaban:
   la barra de navegación quedaba ARRIBA DE TODO y el carrito al final.
   Por eso acá va `form.co-guiado` —un elemento más de peso— y el orden se
   declara entero, sin dejar ninguno en su valor por defecto. */
form.co-guiado > .co-carrito { order: 1; position: static; }
form.co-guiado > .co-form { order: 2; }
form.co-guiado > .co-nav { order: 3; }

/* ⚠ `hidden` NO ALCANZA. El atributo trae `display:none` de la hoja del
   navegador, y CUALQUIER regla propia con `display` le gana: `.co-alta` es
   `display:grid`, así que la etapa «Tus datos» seguía midiendo 384px y
   ocupando pantalla estando «oculta». Medido: la página no bajaba de 1136px.
   Un paso que se esconde a medias no esconde nada. */
.co-guiado [hidden] { display: none !important; }

/* ⚠ La banda de confianza es HERMANA del formulario dentro de <main>, así que
   con el modo guiado puesto queda a 980px mientras el formulario mide 660: dos
   anchos distintos uno encima del otro se leen como un error de armado. Se
   ata al mismo ancho SOLO cuando el guiado está activo — sin JS el formulario
   ocupa las dos columnas y la banda debe acompañarlo. */
.co-guiado ~ .k-confianza {
    max-width: 660px;
    margin-inline: auto;
}

/* ═══ LA BARRA DE NAVEGACION ═════════════════════════════════════════════ */
.co-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
/* con «Atrás» oculto, «Continuar» no se va al centro: queda donde siempre */
.co-nav [data-ir="atras"][hidden] + [data-ir="siguiente"] { margin-left: auto; }

/* ═══ EL RESUMEN CHIQUITO ════════════════════════════════════════════════
   En el paso de pago el carrito no ocupa media pantalla: esta línea dice qué
   llevás y cuánto, y devuelve al carrito con un toque. */
.co-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--k-linea);
    border-radius: var(--k-radio-caja);
    background: var(--k-g50, #f7f7f9);
}
.co-mini-que { font-size: 12px; font-weight: 400; color: var(--k-g600); }
.co-mini b { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-mini-ver {
    border: 0;
    background: none;
    padding: 0 0 0 4px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--k-acento);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* el hilo de arriba navega hacia atrás: solo lo YA HECHO se puede volver a
   mirar, y solo eso se ofrece con el dedo. Adelantarse saltándose el alta
   dejaría una compra sin dueño. */
#coPasos li.hecho { cursor: pointer; }

/* ⚠ EL REPARTO ESTABA AL REVES. Medido en 1440: el CARRITO —que solo se lee—
   se quedaba con 614px y todo lo que el cliente ESCRIBE (nombre, celular,
   correo, clave, método, cuentas del banco, boleta) se apretaba en 340, con
   campos de 306px y los dos métodos de pago a 150 cada uno.
   Ahora manda el trabajo: el formulario toma la columna ancha y el carrito
   queda de referencia al costado, siguiendo el scroll. Se hace con `order` y
   no moviendo el marcado, para no tocar un solo id ni selector de JS. */
.co-layout > .co-form { order: 1; }
.co-layout > .co-carrito { order: 2; position: sticky; top: 18px; }

/* lo que compras: la marca por delante */
.co-resumen {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--k-g100);
    border-radius: 16px;
    background: var(--k-blanco);
    box-shadow: var(--k-sombra);
}

.co-resumen-arte {
    width: 100%;
    aspect-ratio: 5 / 3;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--marca, #5e2ced);
}

.co-resumen-arte img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .38));
}

.co-resumen-arte i { font-size: 26px; color: #fff; }

.co-resumen-datos { display: grid; gap: 2px; }
.co-resumen-datos strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.co-resumen-datos small { font-size: 12px; color: var(--k-g600); }

.co-precio {
    display: grid;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--k-g100);
}

.co-precio strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-precio small { font-size: 11.5px; color: var(--k-g600); }

/* ═══ EL FORMULARIO ═════════════════════════════════════════════════════ */
.co-form { display: grid; gap: 16px; }

.co-metodos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border: none;
}

.co-metodos legend { margin-bottom: 10px; }

.co-metodo { position: relative; cursor: pointer; }
.co-metodo input { position: absolute; opacity: 0; }

.co-metodo-cara {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--k-linea);
    border-radius: var(--k-radio-caja);
    background: var(--k-blanco);
    transition: border-color var(--k-t), background var(--k-t), box-shadow var(--k-t);
}

.co-metodo-cara i { font-size: 16px; color: var(--k-g600); transition: color var(--k-t); }
.co-metodo-cara span { display: grid; gap: 1px; min-width: 0; }
.co-metodo-cara strong { font-size: var(--k-f-md); font-weight: var(--k-peso-fuerte); }
.co-metodo-cara small { font-size: var(--k-f-xs); color: var(--k-g600); }

.co-metodo input:checked + .co-metodo-cara {
    border-color: var(--k-acento);
    background: var(--k-acento-tinte);
    box-shadow: 0 0 0 1px var(--k-acento);
}

.co-metodo input:checked + .co-metodo-cara i { color: var(--k-acento); }
.co-metodo input:focus-visible + .co-metodo-cara { outline: 2px solid var(--k-acento); outline-offset: 2px; }

.co-paso { display: grid; gap: 14px; }
.co-paso[hidden] { display: none; }

/* las cuentas del negocio: pastillas que copian, nunca texto para leer */
.co-cuentas { display: grid; gap: 6px; justify-items: start; }

.co-cuenta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid var(--k-g200);
    border-radius: 999px;
    background: var(--k-g50);
    color: var(--k-tinta);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--k-t);
}

.co-cuenta:hover { border-color: var(--k-g400); }
.co-cuenta i { flex: 0 0 auto; font-size: 11px; color: var(--k-g600); }

.co-campo { display: grid; gap: 5px; }
.co-opcional { font-weight: 400; color: var(--k-g400); }

/* subir la boleta: una zona franca, no un input crudo */
.co-subir {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--k-g200); /* sólido: el punteado está prohibido en todo el sistema */
    border-radius: var(--k-radio-caja);
    background: var(--k-g50);
    cursor: pointer;
    transition: border-color var(--k-t), background var(--k-t);
}

.co-subir:hover { border-color: var(--k-acento-borde); }
.co-subir.con-archivo { border-style: solid; border-color: var(--k-acento); background: var(--k-acento-tinte); }
.co-subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.co-subir i { font-size: 17px; color: var(--k-g600); }
.co-subir span { font-size: 12.5px; color: var(--k-g600); line-height: 1.45; overflow-wrap: anywhere; }
.co-subir strong { font-weight: 600; color: var(--k-tinta); }

.co-tarjeta-flujo { display: grid; gap: 8px; justify-items: start; }

/* ═══ LA PASARELA ════════════════════════════════════════════════════════
   Lo único que el cliente necesita saber antes de irse a pagar. Superficie
   plana con hairline, como toda pantalla de trabajo: no es un aviso ni una
   alerta, es información. Sin degradado y sin sólido de color.
   Las marcas de tarjeta van A COLOR a propósito: son CONTENIDO —el sello de
   confianza que dice qué se acepta—, no cromo. Es la misma excepción que
   permite los sólidos de marca en las fichas de las apps. */
.co-pasarela {
    display: grid;
    gap: 4px;
    justify-items: start;
    /* ⚠ `max-width` SOLO no alcanza: dentro de una retícula con
       `justify-items:start` la caja crece a su contenido y NO se encoge, así
       que en 375 el panel pedía 393px y se salía 45 del borde. `width:100%` lo
       ata al ancho disponible y el tope de medida sigue mandando en escritorio.
       Es el mismo descuido que estiró Diagnóstico 119px. */
    width: 100%;
    max-width: 52ch;
    padding: 14px 16px;
    border: 1px solid var(--k-linea);
    border-radius: var(--k-radio-caja);
    background: var(--k-blanco, #fff);
}
.co-pasarela-marcas { display: flex; gap: 8px; align-items: center; font-size: 24px; line-height: 1; }
.co-pasarela-marcas .fa-cc-visa { color: #1a1f71; }
.co-pasarela-marcas .fa-cc-mastercard { color: #eb001b; }
.co-pasarela b { margin-top: 4px; font-size: 13px; font-weight: 600; }
.co-pasarela p {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--k-g600);
}
.co-linkpago i { color: var(--k-g600); }

.co-pista {
    max-width: 52ch;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--k-g600);
}

.co-enviar { justify-self: start; }

/* ═══ GRACIAS ═══════════════════════════════════════════════════════════ */
.co-gracias {
    max-width: 480px;
    margin: 8vh auto 0;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.co-gracias-ico {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--k-ok-f);
    color: var(--k-ok-t);
    font-size: 22px;
    margin-bottom: 4px;
}

.co-gracias h1 { font-size: 22px; font-weight: 600; letter-spacing: -.4px; }

.co-gracias p {
    max-width: 46ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--k-g600);
}

.co-folio {
    margin: 6px 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--k-g600);
    font-variant-numeric: tabular-nums;
}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    /* búsqueda: la lupa despliega el modo dentro de la barra */
    .top-lupa { display: inline-flex; width: 40px; height: 40px; }
    .co-topbar .top-buscar { display: none; }
    .co-topbar.buscando > :not(.top-buscar-wrap) { display: none; }
    .co-topbar.buscando .top-lupa { display: none; }
    .co-topbar.buscando .top-buscar-wrap { flex: 1; }
    .co-topbar.buscando .top-buscar { display: inline-flex; flex: 1; width: auto; gap: 2px; }
    .co-topbar.buscando .top-cerrar { display: inline-flex; width: 40px; height: 40px; flex: 0 0 auto; }
    .co-topbar.buscando .top-buscar input { height: 36px; }
    .buscar-panel { width: calc(100vw - 20px); }

    /* ⚠ LA BARRA NO CABE — el mismo fallo que ya tuvo la promo. Marca escrita
       (144) + lupa (40) + «Seguir comprando» (176) + huecos (32) = 392 en una
       pantalla de 355 útiles, en una flex sin wrap: se salía 27px por la
       derecha. La respuesta ya está decidida en este proyecto: queda el
       ISOTIPO, que es marca igual, y el volver se queda en su flecha. Las dos
       piezas recuperan su texto en cuanto hay sitio. */
    .co-brand .k-marca { display: none; }
    .co-volver-txt { display: none; }
    .co-volver { padding-left: 11px; padding-right: 11px; }

    .co-page { width: min(100% - 20px, 880px); }
    /* ⚠ `1fr` A SECAS NO ES CERO: su mínimo automático es el min-content de lo
       que lleva dentro. La fila del carrito (logo + nombre + los dos ± + precio
       + borrar, en una flex sin wrap) pedía 417px, así que la columna se plantó
       en 417 dentro de una pantalla de 375 y el checkout entero salía 52px del
       borde — con depósito y con tarjeta por igual. `minmax(0, 1fr)` la deja
       encoger; es el mismo `min-width:0` que ya estiró Diagnóstico 119px. */
    .co-layout { grid-template-columns: minmax(0, 1fr); }
    /* el bloque de texto es el que cede: el logo no se puede encoger y el
       precio tampoco debe apretarse */
    .co-item-datos { flex: 1 1 auto; min-width: 0; }
    .co-resumen { position: static; }
    .co-metodos { grid-template-columns: 1fr; }
}

/* ═══ EL CARRITO — filas densas con el sólido de cada marca ═════════════ */
.co-carrito { display: grid; gap: 10px; align-content: start; }

.co-item {
    display: flex;
    /* ⚠ ACA HABIA `flex-wrap: wrap` Y ERA PEOR QUE EL PROBLEMA. Dejaba que la
       fila entera se partiera y en 375 salía una ESCALERA: el logo en un
       renglón, el nombre en otro, el precio suelto a media altura y la ✕ más
       abajo todavía. La fila se lee de izquierda a derecha —logo · qué es ·
       cuánto— y ese orden no se puede romper.
       Lo que de verdad no cabía eran los DOS steppers, y son ellos los que
       bajan de renglón (ver .co-item-controles). */
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--k-g100);
    border-radius: 14px;
    background: var(--k-blanco);
    box-shadow: var(--k-sombra);
}

.co-item-arte {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--marca, var(--k-acento));
}

.co-item-arte img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(0,0,0,.35)); }
.co-item-arte i { color: #fff; font-size: 17px; }

.co-item-datos { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.co-item-datos strong { font-size: var(--k-f-md); font-weight: var(--k-peso-fuerte); line-height: 1.25; }
.co-item-datos small { font-size: 11.5px; color: var(--k-g600); }
.co-oferta s { color: var(--k-g400); margin-right: 4px; }

/* los dos steppers —Cuentas y Meses— son lo único que no cabe en la columna
   angosta ni en 375: bajan ellos y la fila conserva su forma */
.co-item-controles { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 5px; }
.co-item-controles label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--k-g600);
}
.co-item-controles select {
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--k-g200);
    border-radius: 8px;
    background: var(--k-blanco);
    color: var(--k-tinta);
    font-size: 12px;
    cursor: pointer;
}

.co-item-cola { flex: 0 0 auto; display: grid; justify-items: end; gap: 2px; }
.co-item-linea { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-item-cola .k-btn-ico { width: 30px; height: 30px; }

.co-totales {
    display: grid;
    gap: 3px;
    padding: 12px 4px 0;
    border-top: 1px solid var(--k-g100);
}
.co-total-linea { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--k-g600); }
.co-total-grande { font-size: var(--k-f-md); color: var(--k-tinta); font-weight: var(--k-peso-fuerte); }
/* la cifra que el cliente vino a ver: el escalón más alto de la pantalla */
.co-total-grande b {
    font-size: var(--k-f-2xl);
    font-weight: var(--k-peso-destaque);
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}
.co-totales small { font-size: 11px; color: var(--k-g600); }

/* ═══ LA EXPERIENCIA CORTA (orden del dueño 19/08): comprar sin scroll eterno ═══ */
.co-metodo-cara { padding: 11px 13px; }
.co-metodo-cara i { font-size: 14px; }
.co-campo { margin-bottom: 12px; }
.co-item { padding: 11px 12px; }
.co-mas { margin: 2px 0 12px; }
.co-mas summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--k-acento);
}
.co-mas summary::-webkit-details-marker { display: none; }
.co-mas summary::after {
    content: "";
    width: 10px; height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9z'/></svg>") center/contain no-repeat;
    transition: transform var(--k-t);
}
.co-mas[open] summary::after { transform: rotate(180deg); }
.co-mas .co-campo { margin-top: 10px; margin-bottom: 0; }

/* ═══ EL RIEL DEL CLIENTE corre el contenido (kit: EL RIEL LATERAL) ══════ */
@media (min-width: 901px) {
    /* Anclado a la izquierda dejaba 806px muertos a la derecha en 1920: la
       página de pago se veía tirada a un lado con media pantalla vacía. El ancho
       angosto SÍ es correcto —una página de pago de trabajo no debe medir 2400px—, lo
       que estaba mal era dónde se apoyaba.
       `max()` la centra en la pantalla cuando hay sitio y, cuando no lo hay,
       vuelve sola a apoyarse después del riel. */
    .co-page {
        width: auto;
        max-width: 980px;
        margin-left: max(134px, calc((100vw - 980px) / 2));
        margin-right: clamp(24px, 3vw, 80px);
    }
}
@media (max-width: 900px) {
    .co-page { padding-bottom: 96px; }
}

/* ═══ EL CHECKOUT PROFESIONAL (referencia del dueño 19/08) ══════════════
   Pasos arriba · tarjetas balanceadas · cantidad con ± · resumen limpio.
   La columna de pago sigue siendo depósito/boleta o link seguro: acá
   JAMÁS se piden números de tarjeta. */
.co-pasos {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 2px 0 18px;
    padding: 0;
}

.co-pasos li {
    position: relative;
    width: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--k-g600);
}

.co-pasos li i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--k-blanco);
    border: 2px solid var(--k-g200);
    z-index: 1;
    transition: background var(--k-t), border-color var(--k-t);
}

.co-pasos li::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--k-g200);
}

.co-pasos li:first-child::before { display: none; }
.co-pasos li.hecho i, .co-pasos li.activo i { background: var(--k-acento); border-color: var(--k-acento); }
.co-pasos li.hecho::before, .co-pasos li.activo::before { background: var(--k-acento); }
.co-pasos li.activo { color: var(--k-tinta); font-weight: 600; }

.co-tarjeta {
    border: 1px solid var(--k-g200);
    border-radius: 14px;
    background: var(--k-blanco);
    padding: 14px 16px;
}

.co-tarjeta-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* ⚠ EL TITULO DE CADA PASO ESTABA A 14px — el mismo tamaño que el cuerpo, y
   el paso entero se leía como un párrafo más. Ahora es el escalón `xl` del
   kit con el peso de destaque: es lo primero que se ve al entrar al paso.
   Palabras del dueño: «no hay letras que resalten, que se vean pro». */
.co-tarjeta-cab h2,
.co-form > .co-bloque > .co-metodos > legend.k-titulo,
.co-form > .co-alta > legend.k-titulo {
    font-size: var(--k-f-xl);
    font-weight: var(--k-peso-destaque);
    letter-spacing: -.6px;
    line-height: 1.15;
    color: var(--k-tinta);
    margin: 0 0 4px;
}

.co-items-n {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--k-g100);
    color: var(--k-g600);
    font-size: 11px;
    font-weight: 600;
}

/* dentro de la tarjeta, los ítems son filas densas con hairline */
.co-tarjeta .co-item {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--k-g100);
}

.co-tarjeta .co-item:last-of-type { border-bottom: none; }

/* el ahorro del plazo: verde y discreto, al lado del nombre del periodo.
   Es el unico color que entra en la linea del item — el resto es tinta. */
.co-ahorro { color: var(--k-ok); font-weight: 500; }

.co-cant { display: inline-flex; align-items: center; gap: 8px; }
.co-cant b { min-width: 16px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.co-cant-btn {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--k-g200);
    border-radius: 8px;
    background: var(--k-blanco);
    color: var(--k-acento);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--k-t), border-color var(--k-t), transform var(--k-t);
}

.co-cant-btn:hover { background: var(--k-g50); border-color: var(--k-g400); }
.co-cant-btn:active { transform: scale(.92); }

.co-tarjeta .co-totales { border-top: none; padding: 4px 0 0; }
.co-tarjeta .co-campo { margin: 12px 0 0; }

@media (max-width: 760px) {
    .co-pasos li { width: 92px; font-size: 10.5px; }
}

/* ── ALTA EXPRESS: comprar sin tener cuenta ────────────────────────────────
   Los tres datos que crean el portal viajan en el MISMO envío del pago.
   Con sesión abierta este bloque ni se pinta.                              */
.co-alta {
    border: none;
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--k-g100);
    display: grid;
    gap: 10px;
}

/* ⚠ PESO 300 A 12px ES UN TRAZO DE HILO: en pantallas normales se deshace y
   es lo que se leía como «letras frágiles». El cuerpo arranca en 400. */
.co-alta-p { font-size: var(--k-f-sm); font-weight: var(--k-peso-cuerpo); color: var(--k-g600); margin-top: -2px; max-width: 46ch; }
.co-alta-ya { font-size: var(--k-f-sm); font-weight: var(--k-peso-cuerpo); color: var(--k-g600); }
.co-alta-ya a { color: var(--k-acento); font-weight: 500; }

/* aviso de cambio para tarjetas de otro país: informa, no alarma */
.co-aviso-cambio {
    margin-bottom: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--k-g50);
    border-left: 3px solid var(--k-acento);
}

.co-aviso-cambio b { display: block; font-size: 12.5px; font-weight: 600; }
.co-aviso-cambio p { margin-top: 3px; font-size: var(--k-f-xs); font-weight: var(--k-peso-cuerpo); line-height: 1.55; color: var(--k-g600); }

.co-brand { color: var(--k-acento); }
.co-brand .k-marca { color: var(--k-tinta); }