/*
 * ciclotech-modern.css — rediseño 2026 (capa sobre tailwind.css + ciclotech-store-visuals.css).
 * CSS plano: no requiere recompilar Tailwind. Prefijo cm-* para no chocar con cb-*.
 * Acompaña a static/js/ciclotech-motion.js.
 */

:root {
    --cm-navy: #0a1628;
    --cm-navy2: #0f2438;
    --cm-green: #22c55e;
    --cm-teal: #14b8a6;
    --cm-mint: #f0fdf6;
    --cm-border: #d4f3e2;
    --cm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cm-glow: rgba(20, 184, 166, 0.14);
    --cm-shadow-lift: 0 18px 40px -18px rgba(10, 22, 40, 0.28), 0 4px 12px -6px rgba(20, 184, 166, 0.25);
}
.dark {
    --cm-glow: rgba(34, 197, 94, 0.12);
    --cm-shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 184, 166, 0.35);
}

/* ── Estado inicial de las entradas (solo con JS y sin reduced-motion) ── */
.cm-js:not(.cm-reduce) [data-reveal]:not(.cm-in),
.cm-js:not(.cm-reduce) [data-stagger] > :not(.cm-in) {
    opacity: 0;
}

/* ── Barra de progreso y cabecera ──────────────────────────────────── */
#cm-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--cm-green), var(--cm-teal));
    pointer-events: none;
}
body > header {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
body > header.cm-scrolled {
    box-shadow: 0 8px 24px -16px rgba(10, 22, 40, 0.35);
}
.dark body > header.cm-scrolled {
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.7);
}

/* ── Tarjeta de producto ───────────────────────────────────────────── */
.cm-card {
    --cm-mx: 50%;
    --cm-my: 0%;
    --cm-rx: 0deg;
    --cm-ry: 0deg;
    position: relative;
    border-radius: 1rem !important;
    transform: perspective(900px) rotateX(var(--cm-rx)) rotateY(var(--cm-ry)) translateY(0);
    transition: transform 0.45s var(--cm-ease-out), box-shadow 0.35s ease, border-color 0.25s ease !important;
    will-change: transform;
}
.cm-card::before {
    /* Foco de luz que sigue al cursor */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--cm-mx) var(--cm-my), var(--cm-glow), transparent 45%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}
.cm-card:hover {
    transform: perspective(900px) rotateX(var(--cm-rx)) rotateY(var(--cm-ry)) translateY(-4px);
    box-shadow: var(--cm-shadow-lift) !important;
}
.cm-card:hover::before { opacity: 1; }
.cm-card:focus-within {
    border-color: var(--cm-teal) !important;
}
.cm-card .cm-card-media {
    height: 12rem;
    background:
        radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f1f8f6 60%, #e7f3ef 100%);
}
.dark .cm-card .cm-card-media {
    background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}
.cm-card .cm-card-media img {
    transition: transform 0.6s var(--cm-ease-out) !important;
}
.cm-card:hover .cm-card-media img {
    transform: scale(1.06) translateY(-2px);
}
.cm-card-price {
    font-variant-numeric: tabular-nums;
    font-size: 1.125rem !important;
    letter-spacing: -0.01em;
}
.cm-card-warranty {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
/* Favoritos/comparar: en pantallas táctiles no hay hover, así que siempre visibles */
@media (hover: none) {
    .cm-card .cm-card-actions { opacity: 1 !important; }
}
.cm-card .cm-card-actions button {
    width: 2.25rem !important;
    height: 2.25rem !important;
    backdrop-filter: blur(6px);
}

/* ── Botones: pulsación y "añadiendo" ──────────────────────────────── */
.cm-press {
    transition: transform 0.18s var(--cm-ease-out), box-shadow 0.25s ease, opacity 0.2s ease !important;
}
.cm-press:hover { box-shadow: 0 8px 20px -10px rgba(20, 184, 166, 0.7); }
.cm-press:active { transform: scale(0.96); }
.cm-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
}
.cm-add svg { transition: transform 0.3s var(--cm-ease-spring); }
.cm-add:hover svg { transform: rotate(-8deg) scale(1.12); }
.cm-adding {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.cm-adding::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid rgba(10, 22, 40, 0.25);
    border-top-color: var(--cm-navy);
    animation: cmSpin 0.7s linear infinite;
}
@keyframes cmSpin { to { transform: rotate(360deg); } }

[data-magnetic] {
    transition: transform 0.35s var(--cm-ease-out), box-shadow 0.25s ease, opacity 0.2s ease !important;
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.cm-hero {
    isolation: isolate;
}
.cm-hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(60px);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    animation: cmOrb 18s ease-in-out infinite alternate;
}
.cm-hero-orb--a { width: 26rem; height: 26rem; left: -8rem; top: -10rem; background: rgba(34, 197, 94, 0.28); }
.cm-hero-orb--b { width: 22rem; height: 22rem; right: -6rem; bottom: -10rem; background: rgba(20, 184, 166, 0.28); animation-delay: -6s; }
.dark .cm-hero-orb { opacity: 0.35; }
@keyframes cmOrb {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(40px, 20px) scale(1.08); }
    100% { transform: translate(-20px, 30px) scale(0.96); }
}
.cm-shimmer {
    background-image: linear-gradient(110deg, #22c55e 0%, #14b8a6 35%, #5eead4 50%, #14b8a6 65%, #22c55e 100%);
    background-size: 220% 100%;
    animation: cmShimmer 6s ease-in-out infinite;
}
@keyframes cmShimmer {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: 0 0; }
}
.cm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--cm-border);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
}
.dark .cm-eyebrow {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
.cm-eyebrow-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--cm-green);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: cmPing 2.2s ease-out infinite;
}
@keyframes cmPing {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    80%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

/* Cifras de confianza bajo el hero */
.cm-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 36rem;
    margin: 2.5rem auto 0;
}
.cm-stat {
    padding: 0.9rem 0.5rem;
    border-radius: 1rem;
    border: 1px solid var(--cm-border);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
}
.dark .cm-stat {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}
.cm-stat-value {
    display: block;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--cm-navy);
}
.dark .cm-stat-value { color: #ffffff; }
.cm-stat-label {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #475569;
}
.dark .cm-stat-label { color: #94a3b8; }

/* ── Categorías ────────────────────────────────────────────────────── */
.cm-cat {
    border-radius: 1rem !important;
}
.cm-cat .cm-cat-arrow {
    opacity: 1 !important;
    transition: transform 0.3s var(--cm-ease-out);
}
.cm-cat:hover .cm-cat-arrow { transform: translateX(4px); }

/* ── Bento de sostenibilidad ───────────────────────────────────────── */
.cm-bento {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
    .cm-bento {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto auto;
    }
    .cm-bento-hero { grid-column: span 2; grid-row: span 2; }
}
.cm-bento-hero {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    padding: 2rem;
    color: #e2e8f0;
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(20, 184, 166, 0.35), transparent 60%),
        radial-gradient(70% 60% at 0% 100%, rgba(34, 197, 94, 0.3), transparent 60%),
        var(--cm-navy);
}
@media (min-width: 1024px) {
    .cm-bento-hero { grid-column: span 2; }
}
.cm-bento-hero h2 { color: #ffffff; }
.cm-bento-hero .cm-bento-leaf {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    width: 9rem;
    height: 9rem;
    opacity: 0.18;
    animation: cmSway 9s ease-in-out infinite;
}
@keyframes cmSway {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(6deg) translateY(-6px); }
}
.cm-bento-tile {
    border-radius: 1.25rem !important;
    transition: transform 0.35s var(--cm-ease-out), box-shadow 0.35s ease, border-color 0.25s ease;
}
.cm-bento-tile:hover {
    transform: translateY(-3px);
    border-color: var(--cm-teal) !important;
    box-shadow: var(--cm-shadow-lift);
}

/* ── Proceso: pasos con elevación al pasar ─────────────────────────── */
.cb-process-step {
    transition: transform 0.35s var(--cm-ease-out);
}
.cb-process-step:hover { transform: translateY(-4px); }
.cb-process-step:hover .cb-process-icon {
    box-shadow: 0 10px 24px -12px rgba(20, 184, 166, 0.7);
}

/* ── Ventajas: panel único con separadores finos (sustituye a 4 tarjetas sueltas) ── */
.cm-trust {
    --cm-mx: 50%;
    --cm-my: 50%;
    --cm-line: #dcebe4;
    position: relative;
    gap: 0 !important;
    counter-reset: cm-trust;
    border: 1px solid var(--cm-line);
    border-radius: 1.5rem;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(240, 253, 246, 0.6), rgba(255, 255, 255, 0) 55%),
        #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 24px 48px -32px rgba(10, 22, 40, 0.25);
}
.cm-trust::before {
    /* Foco de luz compartido por todo el panel */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(520px circle at var(--cm-mx) var(--cm-my), rgba(20, 184, 166, 0.10), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.cm-trust:hover::before { opacity: 1; }

.cm-trust .cb-feature {
    counter-increment: cm-trust;
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 1.75rem 1.5rem 1.6rem;
    text-align: left;
    /* Separadores: los del borde exterior los recorta el overflow del panel */
    box-shadow: 1px 0 0 var(--cm-line), 0 1px 0 var(--cm-line);
}
.cm-trust .cb-feature:hover {
    transform: none;
    box-shadow: 1px 0 0 var(--cm-line), 0 1px 0 var(--cm-line);
    border-color: transparent;
}
.cm-trust .cb-feature::after {
    /* Numeración 01–04 */
    content: counter(cm-trust, decimal-leading-zero);
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #94a3b8;
    transition: color 0.3s ease;
}
.cm-trust .cb-feature:hover::after { color: var(--cm-teal); }
.cm-trust .cb-feature::before {
    /* Línea de acento inferior */
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cm-green), var(--cm-teal));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.5s var(--cm-ease-out);
}
.cm-trust .cb-feature:hover::before { transform: scaleX(1); }

.cm-trust .cb-feature-icon {
    width: 52px;
    height: 52px;
    margin: 0 0 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--cm-line);
    background: radial-gradient(circle at 30% 20%, #ffffff, #eef6f2);
    box-shadow: 0 6px 16px -10px rgba(10, 22, 40, 0.35);
    transition: transform 0.45s var(--cm-ease-spring), box-shadow 0.35s ease, border-color 0.3s ease;
}
.cm-trust .cb-feature:hover .cb-feature-icon {
    transform: translateY(-3px) rotate(-4deg);
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.1), 0 12px 24px -12px rgba(20, 184, 166, 0.6);
}
.cm-trust .cb-feature h3 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}
.cm-trust .cb-feature p {
    font-size: 0.8125rem;
    line-height: 1.55;
    max-width: 30ch;
}

/* Móvil: lista compacta, icono a la izquierda */
@media (max-width: 760px) {
    .cm-trust { grid-template-columns: 1fr !important; }
    .cm-trust .cb-feature {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
        align-items: start;
        padding: 1.15rem 3rem 1.15rem 1.15rem;
    }
    .cm-trust .cb-feature-icon {
        grid-row: span 2;
        width: 46px;
        height: 46px;
        margin: 0;
    }
    .cm-trust .cb-feature h3 { margin-top: 0.15rem; }
    .cm-trust .cb-feature p { max-width: none; }
    .cm-trust .cb-feature::after { top: 1.2rem; right: 1.15rem; }
}

.dark .cm-trust {
    --cm-line: rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.06), rgba(15, 36, 56, 0) 60%),
        var(--cm-navy2);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
.dark .cm-trust .cb-feature,
.dark .cm-trust .cb-feature:hover {
    background: transparent;
    border: 0;
    box-shadow: 1px 0 0 var(--cm-line), 0 1px 0 var(--cm-line);
}
.dark .cm-trust .cb-feature-icon { border-color: rgba(255, 255, 255, 0.15); }

@media (prefers-reduced-motion: reduce) {
    .cm-trust .cb-feature:hover .cb-feature-icon { transform: none; }
    .cm-trust .cb-feature::before { transition: none; }
}

/* ── Modo oscuro para los bloques cb-*(no tenían variante oscura) ────
   Los iconos SVG llevan trazos navy fijos: su pastilla se queda clara a propósito. */
.dark .cb-feature {
    background: var(--cm-navy2);
    border-color: rgba(255, 255, 255, 0.1);
}
.dark .cb-feature:hover {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.8);
}
.dark .cb-feature h3,
.dark .cb-process-header h2,
.dark .cb-process-step h4 { color: #ffffff; }
.dark .cb-feature p,
.dark .cb-process-header p,
.dark .cb-process-step p { color: #94a3b8; }
.dark .cb-process-line { background: rgba(255, 255, 255, 0.12); }

/* ── CTA final con aurora ──────────────────────────────────────────── */
.cm-aurora {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cm-aurora::before,
.cm-aurora::after {
    content: "";
    position: absolute;
    width: 36rem;
    height: 36rem;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.35;
    z-index: -1;
    animation: cmOrb 16s ease-in-out infinite alternate;
}
.cm-aurora::before { left: -10rem; top: -18rem; background: rgba(34, 197, 94, 0.55); }
.cm-aurora::after  { right: -12rem; bottom: -20rem; background: rgba(20, 184, 166, 0.55); animation-delay: -8s; }

/* ── Movimiento reducido: todo quieto y visible ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cm-card,
    .cm-card:hover,
    .cm-bento-tile:hover,
    .cb-process-step:hover { transform: none !important; }
    .cm-card .cm-card-media img,
    .cm-card:hover .cm-card-media img { transform: none !important; }
    .cm-hero-orb,
    .cm-aurora::before,
    .cm-aurora::after,
    .cm-shimmer,
    .cm-eyebrow-dot,
    .cm-bento-leaf { animation: none !important; }
    #cm-progress { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO 2026 (cm-hx-*) — texto + "informe de revisión" animado.
   El movimiento lo coordina setupHero() en ciclotech-motion.js:
   --sx/--sy (foco de luz), --px/--py (parallax -1..1), --p (progreso 0..1).
   ══════════════════════════════════════════════════════════════════════ */
.cm-hx {
    --sx: 70%;
    --sy: 35%;
    background: linear-gradient(160deg, #ffffff 0%, #f3fbf8 45%, #e6f6f0 100%);
}
.dark .cm-hx {
    background: linear-gradient(160deg, var(--cm-navy) 0%, #0c1d31 50%, var(--cm-navy2) 100%);
}
.cm-hx-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.cm-hx-grid {
    position: absolute;
    inset: -48px;
    background-image:
        linear-gradient(rgba(10, 22, 40, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 22, 40, 0.055) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 60% 40%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 75% 65% at 60% 40%, #000 30%, transparent 75%);
    animation: cmGridPan 30s linear infinite;
}
.dark .cm-hx-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
@keyframes cmGridPan { to { transform: translate(48px, 48px); } }
.cm-hx-spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(640px circle at var(--sx) var(--sy), rgba(20, 184, 166, 0.16), transparent 60%);
}
.dark .cm-hx-spot {
    background: radial-gradient(640px circle at var(--sx) var(--sy), rgba(34, 197, 94, 0.14), transparent 60%);
}

.cm-hx-inner {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 4rem;
}
@media (min-width: 1024px) {
    .cm-hx-inner {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: 2.5rem;
        min-height: min(44rem, calc(100vh - 7rem));
        padding-top: 3.5rem;
        padding-bottom: 5rem;
    }
}
.cm-hx-copy { text-align: center; }
@media (min-width: 1024px) { .cm-hx-copy { text-align: left; } }
.cm-hx-copy .cm-eyebrow { margin-bottom: 1.4rem; }

/* Titular: entra palabra a palabra (JS lo parte en .cm-w) */
.cm-hx-title {
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(1.65rem, 6.6vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--cm-navy);
    text-wrap: balance;
}
@media (min-width: 1024px) {
    .cm-hx-title { font-size: clamp(2.3rem, 3.3vw, 3.05rem); }
}
.dark .cm-hx-title { color: #ffffff; }
.cm-js:not(.cm-reduce) [data-split]:not(.is-split) { opacity: 0; }
.cm-w {
    display: inline-block;
    animation: cmWordIn 0.95s var(--cm-ease-out) both;
    animation-delay: calc(var(--i, 0) * 65ms + 120ms);
}
@keyframes cmWordIn {
    from { opacity: 0; transform: translateY(0.55em) rotate(2deg); filter: blur(10px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Entradas encadenadas del resto del bloque (--d = retardo) */
.cm-js:not(.cm-reduce) .cm-hx-in {
    animation: cmRiseIn 0.9s var(--cm-ease-out) both;
    animation-delay: var(--d, 0ms);
}
@keyframes cmRiseIn {
    from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* "Listos para ___" con palabra rotativa */
.cm-hx-rotline {
    margin-top: 1.1rem;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 600;
    color: #334155;
}
.dark .cm-hx-rotline { color: #cbd5e1; }
.cm-hx-rotator {
    position: relative;
    display: inline-grid;
    vertical-align: bottom;
    overflow: hidden;
    line-height: 1.3;
    padding-bottom: 0.12em;
    text-align: left;
}
.cm-hx-rotator > span {
    grid-area: 1 / 1;
    color: var(--cm-teal);
    font-weight: 800;
    opacity: 0;
    transform: translateY(105%);
    filter: blur(4px);
    transition: transform 0.65s var(--cm-ease-out), opacity 0.45s ease, filter 0.45s ease;
}
.cm-hx-rotator > span.is-on { opacity: 1; transform: none; filter: blur(0); }
.cm-hx-rotator > span.is-off { opacity: 0; transform: translateY(-105%); }
.cm-hx-rotator::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cm-green), var(--cm-teal));
    transform-origin: 0 50%;
    animation: cmUnderline 2.8s var(--cm-ease-out) infinite;
}
@keyframes cmUnderline {
    0%        { transform: scaleX(0); opacity: 1; }
    35%, 80%  { transform: scaleX(1); opacity: 1; }
    100%      { transform: scaleX(1); opacity: 0; }
}

.cm-hx-lead {
    margin: 1.1rem auto 0;
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #64748b;
}
@media (min-width: 640px) { .cm-hx-lead { font-size: 1.0625rem; } }
@media (min-width: 1024px) { .cm-hx-lead { margin-left: 0; } }
.dark .cm-hx-lead { color: #94a3b8; }

.cm-hx-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
@media (min-width: 1024px) { .cm-hx-actions { justify-content: flex-start; } }
.cm-hx-cta,
.cm-hx-ghost {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0 1.6rem;
    border-radius: 0.85rem;
    font-size: 0.9375rem;
    font-weight: 700;
}
.cm-hx-cta {
    overflow: hidden;
    color: var(--cm-navy);
    background: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
    box-shadow: 0 14px 30px -14px rgba(20, 184, 166, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cm-hx-cta::after {
    /* Destello que cruza el botón cada pocos segundos */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: cmShine 4.5s ease-in-out 1.8s infinite;
}
@keyframes cmShine {
    0%, 70% { transform: translateX(-160%) skewX(-18deg); }
    100%    { transform: translateX(330%) skewX(-18deg); }
}
.cm-hx-cta svg { transition: transform 0.35s var(--cm-ease-spring); }
.cm-hx-cta:hover svg { transform: translateX(4px); }
.cm-hx-ghost {
    color: var(--cm-navy);
    border: 1px solid rgba(10, 22, 40, 0.14);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
}
.cm-hx-ghost:hover { border-color: var(--cm-teal); color: #0f766e; }
.dark .cm-hx-ghost { color: #e2e8f0; border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); }
.dark .cm-hx-ghost:hover { color: #5eead4; border-color: #5eead4; }

.cm-hx-stats { margin: 2.5rem auto 0; max-width: 34rem; }
@media (min-width: 1024px) {
    .cm-hx-stats { margin-left: 0; }
    .cm-hx-stats .cm-stat { text-align: left; padding: 0.9rem 1rem; }
}

/* ── Visual: informe de revisión ─────────────────────────────────── */
.cm-hx-visual {
    --px: 0;
    --py: 0;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 30rem;
    perspective: 1200px;
}
.cm-hx-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    pointer-events: none;
    translate: calc(-50% + var(--px) * -10px) calc(-50% + var(--py) * -10px);
    transition: translate 0.8s var(--cm-ease-out);
}
.cm-hx-ring--1 {
    width: min(27rem, 92vw);
    aspect-ratio: 1;
    border: 1.5px dashed rgba(20, 184, 166, 0.35);
    animation: cmSpinSlow 70s linear infinite;
}
.cm-hx-ring--2 {
    width: min(34rem, 118vw);
    aspect-ratio: 1;
    border: 1px solid rgba(34, 197, 94, 0.16);
    background: radial-gradient(circle, rgba(20, 184, 166, 0.10), transparent 62%);
    animation: cmSpinSlow 22s linear infinite reverse;
}
.cm-hx-ring--2::before {
    /* Satélite que orbita el anillo exterior */
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 999px;
    background: var(--cm-green);
    box-shadow: 0 0 14px 4px rgba(34, 197, 94, 0.55);
}
@keyframes cmSpinSlow { to { transform: rotate(360deg); } }

.cm-hx-card {
    --p: 0;
    position: relative;
    z-index: 2;
    width: min(100%, 23rem);
    padding: 1.1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow:
        0 50px 90px -40px rgba(10, 22, 40, 0.45),
        0 0 0 1px rgba(20, 184, 166, 0.14),
        inset 0 1px 0 #ffffff;
    transform: rotateX(calc(var(--py) * -7deg)) rotateY(calc(var(--px) * 9deg));
    transition: transform 0.7s var(--cm-ease-out);
}
.cm-js:not(.cm-reduce) .cm-hx-card { animation: cmCardIn 1.2s var(--cm-ease-out) 0.35s backwards; }
@keyframes cmCardIn {
    from { opacity: 0; transform: translateY(40px) rotateX(18deg) scale(0.92); filter: blur(8px); }
    to   { opacity: 1; filter: blur(0); }
}
.dark .cm-hx-card {
    background: rgba(15, 36, 56, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(20, 184, 166, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cm-hx-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
}
.cm-hx-dots { display: inline-flex; gap: 4px; }
.cm-hx-dots i { width: 8px; height: 8px; border-radius: 999px; background: #cbd5e1; }
.cm-hx-dots i:nth-child(2) { background: #99f6e4; }
.cm-hx-dots i:nth-child(3) { background: #86efac; }
.cm-hx-card-title { font-weight: 700; color: var(--cm-navy); letter-spacing: 0.01em; }
.dark .cm-hx-card-title { color: #ffffff; }
.cm-hx-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
    transition: color 0.3s ease, background-color 0.3s ease;
}
.cm-hx-live i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    animation: cmPing 1.6s ease-out infinite;
}
.cm-hx-card.is-graded .cm-hx-live { color: #15803d; background: rgba(34, 197, 94, 0.15); }
.cm-hx-card.is-graded .cm-hx-live i { animation: none; }

.cm-hx-device {
    position: relative;
    margin: 0.9rem 0 0.85rem;
    padding: 1rem 0.75rem 0.5rem;
    border-radius: 1rem;
    background:
        radial-gradient(90% 80% at 50% 0%, rgba(20, 184, 166, 0.14), transparent 70%),
        linear-gradient(180deg, #f5fbf9, #eaf5f1);
    border: 1px solid #dcefe8;
}
.dark .cm-hx-device {
    background: radial-gradient(90% 80% at 50% 0%, rgba(20, 184, 166, 0.2), transparent 70%), rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.cm-hx-device svg { display: block; width: 100%; height: auto; }
.cm-hx-scanline { animation: cmScan 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; transition: opacity 0.4s ease; }
@keyframes cmScan { from { transform: translateY(0); } to { transform: translateY(142px); } }
.cm-hx-card.is-graded .cm-hx-scanline { opacity: 0; }
.cm-hx-bar-fill {
    transform-box: fill-box;
    transform-origin: 0 50%;
    transform: scaleX(var(--p));
    transition: transform 0.6s var(--cm-ease-out);
}
.cm-hx-pulse {
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: cmPulseDraw 2.4s linear infinite;
}
@keyframes cmPulseDraw {
    0%   { stroke-dashoffset: 160; opacity: 1; }
    70%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

.cm-hx-grade {
    position: absolute;
    top: -0.9rem;
    right: -0.9rem;
    display: grid;
    place-items: center;
    align-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 999px;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cm-navy);
    background: linear-gradient(135deg, #4ade80, #14b8a6);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9), 0 16px 30px -10px rgba(20, 184, 166, 0.9);
    transform: scale(0) rotate(-40deg);
    transition: transform 0.7s var(--cm-ease-spring);
}
.cm-hx-grade small {
    font-family: Sora, system-ui, sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}
.dark .cm-hx-grade { box-shadow: 0 0 0 5px rgba(15, 36, 56, 0.95), 0 16px 30px -10px rgba(20, 184, 166, 0.9); }
.cm-hx-card.is-graded .cm-hx-grade { transform: scale(1) rotate(0); }
.cm-hx-card.is-graded .cm-hx-grade::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: cmGradeRing 1.2s ease-out 0.25s both;
}
@keyframes cmGradeRing {
    from { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    to   { box-shadow: 0 0 0 22px rgba(34, 197, 94, 0); }
}

.cm-hx-progress-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}
.dark .cm-hx-progress-top { color: #94a3b8; }
.cm-hx-progress-top b {
    color: #0f766e;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.dark .cm-hx-progress-top b { color: #5eead4; }
.cm-hx-progress-bar {
    margin-top: 0.45rem;
    height: 6px;
    border-radius: 999px;
    background: #e2ece8;
    overflow: hidden;
}
.dark .cm-hx-progress-bar { background: rgba(255, 255, 255, 0.08); }
.cm-hx-progress-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cm-green), var(--cm-teal));
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.7);
    transform-origin: 0 50%;
    transform: scaleX(var(--p));
    transition: transform 0.6s var(--cm-ease-out);
}

.cm-hx-checks {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.2rem;
}
.cm-hx-checks li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.42rem 0.55rem;
    border-radius: 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    transition: background-color 0.35s ease, color 0.35s ease;
}
.dark .cm-hx-checks li { color: #94a3b8; }
.cm-hx-checks li.is-active { background: rgba(20, 184, 166, 0.1); color: var(--cm-navy); }
.cm-hx-checks li.is-done { color: var(--cm-navy); }
.dark .cm-hx-checks li.is-active,
.dark .cm-hx-checks li.is-done { color: #ffffff; }
.cm-hx-tick {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.45s var(--cm-ease-spring);
}
.cm-hx-tick svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    transition: stroke-dashoffset 0.4s ease 0.12s;
}
.cm-hx-checks li.is-active .cm-hx-tick {
    border-color: var(--cm-teal);
    border-top-color: transparent;
    animation: cmSpin 0.7s linear infinite;
}
.cm-hx-checks li.is-done .cm-hx-tick {
    background: var(--cm-green);
    border-color: var(--cm-green);
    transform: scale(1.1);
    animation: none;
}
.cm-hx-checks li.is-done .cm-hx-tick svg { stroke-dashoffset: 0; }

.cm-hx-stamp {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem;
    border-radius: 0.85rem;
    border: 1.5px dashed rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.07);
    font-size: 0.78rem;
    font-weight: 700;
    color: #15803d;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.45s ease 0.2s, transform 0.6s var(--cm-ease-spring) 0.2s;
}
.dark .cm-hx-stamp { color: #4ade80; }
.cm-hx-card.is-graded .cm-hx-stamp { opacity: 1; transform: none; }

/* Chips flotantes alrededor de la tarjeta */
.cm-hx-chip {
    position: absolute;
    z-index: 3;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem 0.45rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--cm-navy);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(20, 184, 166, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 36px -18px rgba(10, 22, 40, 0.45);
    translate: calc(var(--px) * var(--depth, 18px)) calc(var(--py) * var(--depth, 18px));
    transition: translate 0.8s var(--cm-ease-out);
}
@media (min-width: 640px) { .cm-hx-chip { display: inline-flex; } }
.dark .cm-hx-chip { color: #e2e8f0; background: rgba(15, 36, 56, 0.85); border-color: rgba(255, 255, 255, 0.12); }
.cm-hx-chip-ico {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.13);
}
.dark .cm-hx-chip-ico { color: #5eead4; }
.cm-hx-chip--a { top: 9%;  left: 0;     --depth: 26px; --d: 1.1s; }
.cm-hx-chip--b { bottom: 6%; right: 2%; --depth: 16px; --d: 1.3s; }
.cm-hx-chip--c { top: 30%; right: 0;    --depth: 32px; --d: 1.5s; }
@media (min-width: 1024px) {
    .cm-hx-chip--a { left: -4%; }
    .cm-hx-chip--b { right: -4%; }
    .cm-hx-chip--c { right: -6%; }
}
.cm-js:not(.cm-reduce) .cm-hx-chip {
    animation:
        cmChipIn 0.9s var(--cm-ease-spring) var(--d) both,
        cmFloat 6s ease-in-out calc(var(--d) + 0.9s) infinite;
}
.cm-js:not(.cm-reduce) .cm-hx-chip--b { animation-duration: 0.9s, 7s; }
.cm-js:not(.cm-reduce) .cm-hx-chip--c { animation-duration: 0.9s, 5.5s; }
@keyframes cmChipIn {
    from { opacity: 0; transform: translateY(16px) scale(0.8); }
    to   { opacity: 1; transform: none; }
}
@keyframes cmFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Indicador de scroll */
.cm-hx-scroll {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    display: none;
    width: 1.5rem;
    height: 2.4rem;
    margin-left: -0.75rem;
    border-radius: 999px;
    border: 2px solid rgba(10, 22, 40, 0.2);
}
@media (min-width: 1024px) { .cm-hx-scroll { display: block; } }
.dark .cm-hx-scroll { border-color: rgba(255, 255, 255, 0.25); }
.cm-hx-scroll span {
    position: absolute;
    left: 50%;
    top: 0.4rem;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 4px;
    background: var(--cm-teal);
    animation: cmScrollCue 1.8s var(--cm-ease-out) infinite;
}
@keyframes cmScrollCue {
    0%   { transform: translateY(0); opacity: 1; }
    80%  { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   PROCESO ligado al scroll (setupProcess): la línea avanza con --p y cada
   paso se enciende (.is-active) cuando la línea llega a él.
   Sin JS o con movimiento reducido no hay .cm-proc-live: todo se ve normal.
   ══════════════════════════════════════════════════════════════════════ */
.cb-process-row { --p: 0; }
.cm-proc-live .cb-process-line-fg {
    transform: scaleX(var(--p));
    transition: transform 0.12s linear;
}
.cm-proc-live .cb-process-line::after {
    /* Cabeza luminosa de la línea */
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--p) * 100%);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid var(--cm-green);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.18), 0 0 18px rgba(34, 197, 94, 0.8);
    opacity: calc(var(--p) * 40);
    transition: left 0.12s linear;
}
.cm-proc-live .cb-process-step {
    transition: transform 0.35s var(--cm-ease-out), opacity 0.5s ease, filter 0.5s ease;
}
/* Apagados: el texto se sigue leyendo; solo se atenúan icono y número */
.cm-proc-live .cb-process-step:not(.is-active) { opacity: 0.72; }
.cm-proc-live .cb-process-step:not(.is-active) .cb-process-icon { filter: grayscale(0.9); opacity: 0.6; }
.cm-proc-live .cb-process-badge {
    transition: background-color 0.4s ease, transform 0.5s var(--cm-ease-spring);
}
.cm-proc-live .cb-process-step:not(.is-active) .cb-process-badge { background: #94a3b8; transform: scale(0.85); }
.cm-proc-live .cb-process-step.is-active .cb-process-badge {
    animation: cmBadgePop 0.8s ease-out;
}
@keyframes cmBadgePop {
    0%   { box-shadow: 0 0 0 4px var(--cb-paper, #fff), 0 0 0 4px rgba(20, 184, 166, 0.55); }
    100% { box-shadow: 0 0 0 4px var(--cb-paper, #fff), 0 0 0 18px rgba(20, 184, 166, 0); }
}
.cb-process-icon {
    border: 1px solid transparent;
    transition: transform 0.5s var(--cm-ease-spring), box-shadow 0.4s ease, border-color 0.4s ease;
}
.cm-proc-live .cb-process-step.is-active .cb-process-icon {
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.08), 0 14px 28px -14px rgba(20, 184, 166, 0.75);
}
.cm-proc-live.is-complete .cb-process-step:last-child .cb-process-icon {
    animation: cmFinalGlow 2.4s ease-in-out infinite;
}
@keyframes cmFinalGlow {
    0%, 100% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.1), 0 14px 28px -14px rgba(34, 197, 94, 0.8); }
    50%      { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.16), 0 18px 36px -12px rgba(34, 197, 94, 0.95); }
}

/* Tablet y móvil: línea de tiempo vertical (antes la línea desaparecía) */
@media (max-width: 900px) {
    .cb-process-row {
        grid-template-columns: 1fr !important;
        row-gap: 0.5rem;
        max-width: 30rem;
        margin: 0 auto;
    }
    .cb-process-line {
        display: block;
        top: 36px;
        bottom: 36px;
        left: 27px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .cb-process-line-fg { transform-origin: 50% 0; }
    .cm-proc-live .cb-process-line-fg { transform: scaleY(var(--p)); }
    .cm-proc-live .cb-process-line::after { top: calc(var(--p) * 100%); left: 50%; transition: top 0.12s linear; }
    .cb-process-step {
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-template-areas: "icon title" "icon text";
        column-gap: 1rem;
        align-items: center;
        text-align: left;
        padding: 0.55rem 0;
    }
    .cb-process-icon { grid-area: icon; margin: 0; position: relative; z-index: 1; }
    .cb-process-step h4 { grid-area: title; align-self: end; margin: 0 0 0.15rem; }
    .cb-process-step p { grid-area: text; align-self: start; max-width: none; }
    .cb-process-badge {
        position: absolute;
        z-index: 2;
        top: 0.2rem;
        left: 40px;
        width: 20px;
        height: 20px;
        font-size: 10px;
        margin: 0;
    }
    .cb-process-step:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-hx-grid,
    .cm-hx-ring,
    .cm-hx-rotator::after,
    .cm-hx-cta::after,
    .cm-hx-scanline,
    .cm-hx-pulse,
    .cm-hx-live i,
    .cm-hx-scroll span,
    .cm-hx-chip { animation: none !important; }
    .cm-hx-pulse { stroke-dashoffset: 0; }
    .cm-hx-scanline { opacity: 0; }
    .cm-hx-card { transform: none !important; }
    .cm-hx-chip { translate: none !important; }
    .cm-hx-ring { translate: -50% -50% !important; }
}

/* ── Oferta integrada en el hero (sustituye al carrusel de arriba) ── */
.cm-hx-offer {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    max-width: 100%;
    margin-top: 1.4rem;
    padding: 0.3rem 0.95rem 0.3rem 0.3rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    color: #334155;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(234, 88, 12, 0.25);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 26px -16px rgba(234, 88, 12, 0.7);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--cm-ease-out);
}
.cm-hx-offer:hover {
    border-color: rgba(234, 88, 12, 0.55);
    box-shadow: 0 14px 30px -14px rgba(234, 88, 12, 0.8);
    transform: translateY(-1px);
}
.cm-hx-offer b { color: #c2410c; font-weight: 700; }
.cm-hx-offer-tag {
    flex: none;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    animation: cmOfferGlow 2.4s ease-out infinite;
}
@keyframes cmOfferGlow {
    0%        { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.5); }
    70%, 100% { box-shadow: 0 0 0 9px rgba(234, 88, 12, 0); }
}
.cm-hx-offer-arrow { flex: none; color: #ea580c; transition: transform 0.35s var(--cm-ease-spring); }
.cm-hx-offer:hover .cm-hx-offer-arrow { transform: translateX(3px); }
.dark .cm-hx-offer { color: #cbd5e1; background: rgba(255, 255, 255, 0.05); border-color: rgba(251, 146, 60, 0.35); }
.dark .cm-hx-offer b { color: #fb923c; }

/* Pegatina "-63%" sobre el visual */
.cm-hx-sale {
    position: absolute;
    z-index: 4;
    left: 2%;
    bottom: 8%;
    display: grid;
    place-items: center;
    width: 6rem;
    aspect-ratio: 1;
    border-radius: 999px;
    color: #ffffff;
    background: radial-gradient(circle at 30% 25%, #fdba74, #f97316 45%, #c2410c 100%);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9), 0 22px 40px -14px rgba(234, 88, 12, 0.8);
    rotate: -12deg;
    translate: calc(var(--px) * 30px) calc(var(--py) * 30px);
    transition: translate 0.8s var(--cm-ease-out);
}
@media (max-width: 639px) { .cm-hx-sale { left: -0.35rem; bottom: auto; top: 2.6rem; width: 5rem; } .cm-hx-sale .cm-hx-sale-core b { font-size: 0.95rem; } .cm-hx-sale .cm-hx-sale-core small { font-size: 0.45rem; } }
@media (min-width: 640px) { .cm-hx-sale { width: 7.25rem; } }
@media (min-width: 1024px) { .cm-hx-sale { left: -2%; bottom: 12%; } }
.dark .cm-hx-sale { box-shadow: 0 0 0 5px rgba(15, 36, 56, 0.95), 0 22px 40px -14px rgba(234, 88, 12, 0.8); }
.cm-js:not(.cm-reduce) .cm-hx-sale {
    animation:
        cmSaleIn 0.9s var(--cm-ease-spring) 1.7s both,
        cmSaleWobble 5s ease-in-out 2.6s infinite;
}
@keyframes cmSaleIn {
    from { opacity: 0; transform: scale(0.2) rotate(-60deg); }
    to   { opacity: 1; transform: none; }
}
@keyframes cmSaleWobble {
    0%, 86%, 100% { transform: none; }
    90%           { transform: scale(1.08) rotate(6deg); }
    95%           { transform: scale(1.04) rotate(-4deg); }
}
.cm-hx-sale-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: cmSpinSlow 18s linear infinite;
}
.cm-hx-sale-text text {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 8.4px;
    font-weight: 700;
    letter-spacing: 1.2px;
    fill: rgba(255, 255, 255, 0.85);
}
.cm-hx-sale-core {
    display: grid;
    justify-items: center;
    line-height: 1;
}
.cm-hx-sale-core small {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.9;
}
.cm-hx-sale-core b {
    margin-top: 0.15rem;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
@media (min-width: 640px) { .cm-hx-sale-core b { font-size: 1.55rem; } }

@media (prefers-reduced-motion: reduce) {
    .cm-hx-offer-tag,
    .cm-hx-sale,
    .cm-hx-sale-text { animation: none !important; }
    .cm-hx-sale { translate: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   VENTAJAS como barra de cristal que monta sobre el borde del hero (cm-tbar-*)
   ══════════════════════════════════════════════════════════════════════ */
.cm-hx-inner { padding-bottom: 5.5rem; }
@media (min-width: 1024px) { .cm-hx-inner { padding-bottom: 6.5rem; } }

.cm-tbar-wrap {
    position: relative;
    z-index: 5;
    margin-top: -3rem;
    margin-bottom: 2.5rem;
}
.cm-tbar {
    --cm-mx: 50%;
    --cm-my: 50%;
    --cm-line: rgba(10, 22, 40, 0.07);
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    isolation: isolate;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow:
        0 30px 60px -30px rgba(10, 22, 40, 0.35),
        0 0 0 1px rgba(20, 184, 166, 0.12),
        inset 0 1px 0 #ffffff;
}
@media (min-width: 1024px) { .cm-tbar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cm-tbar::before {
    /* Foco de luz que sigue al cursor (data-spotlight) */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(360px circle at var(--cm-mx) var(--cm-my), rgba(20, 184, 166, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.cm-tbar:hover::before { opacity: 1; }
.cm-tbar::after {
    /* Reflejo que recorre el borde superior */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cm-teal), var(--cm-green), transparent);
    animation: cmTbarSweep 7s ease-in-out infinite;
}
@keyframes cmTbarSweep {
    0%   { transform: translateX(-100%); opacity: 0; }
    10%  { opacity: 1; }
    60%  { transform: translateX(300%); opacity: 1; }
    61%, 100% { transform: translateX(300%); opacity: 0; }
}

.cm-tbar-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.15rem 1.35rem;
    box-shadow: 1px 0 0 var(--cm-line), 0 1px 0 var(--cm-line);
    transition: background-color 0.3s ease;
}
.cm-tbar-item:hover { background: rgba(240, 253, 246, 0.6); }
.cm-tbar-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.85rem;
    border: 1px solid #dcebe4;
    background: radial-gradient(circle at 30% 20%, #ffffff, #eef6f2);
    box-shadow: 0 6px 14px -10px rgba(10, 22, 40, 0.35);
    transition: transform 0.45s var(--cm-ease-spring), box-shadow 0.35s ease, border-color 0.3s ease;
}
.cm-tbar-ico svg { width: 26px; height: 26px; }
.cm-tbar-item:hover .cm-tbar-ico {
    transform: translateY(-2px) rotate(-6deg) scale(1.06);
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1), 0 10px 20px -10px rgba(20, 184, 166, 0.6);
}
.cm-tbar-text { min-width: 0; }
.cm-tbar-text h3 {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cm-navy);
}
.cm-tbar-text p {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
}

@media (max-width: 639px) {
    .cm-tbar-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        padding: 1rem;
    }
    .cm-tbar-ico { width: 2.5rem; height: 2.5rem; }
    .cm-tbar-ico svg { width: 22px; height: 22px; }
}

.dark .cm-tbar {
    --cm-line: rgba(255, 255, 255, 0.08);
    background: rgba(15, 36, 56, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(20, 184, 166, 0.22);
}
.dark .cm-tbar-item:hover { background: rgba(20, 184, 166, 0.06); }
.dark .cm-tbar-ico { border-color: rgba(255, 255, 255, 0.15); }
.dark .cm-tbar-text h3 { color: #ffffff; }
.dark .cm-tbar-text p { color: #94a3b8; }

@media (prefers-reduced-motion: reduce) {
    .cm-tbar::after { animation: none; opacity: 0; }
    .cm-tbar-item:hover .cm-tbar-ico { transform: none; }
}

/* ── Proceso: ajustes v2 (línea centrada, textos más anchos, contador y final) ── */
.cm-proc-live .cb-process-icon { transition: transform 0.5s var(--cm-ease-spring), box-shadow 0.4s ease, border-color 0.4s ease, filter 0.5s ease, opacity 0.5s ease; }
.cm-proc-live .cb-process-step.is-active .cb-process-icon { transform: scale(1.08); }

@media (min-width: 901px) {
    /* La línea atraviesa el centro de los números (badge de 26px) */
    .cb-process-line { top: 12px; }
    .cb-process-step p { max-width: 21ch; }
}

/* Contador "Paso X de 6" que viaja sobre la cabeza luminosa */
.cm-proc-counter {
    position: absolute;
    bottom: calc(100% + 16px);
    left: calc(var(--p) * 100%);
    translate: -50% 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: var(--cm-navy);
    box-shadow: 0 8px 18px -8px rgba(10, 22, 40, 0.6);
    opacity: 0;
    transition: left 0.12s linear, opacity 0.3s ease, background-color 0.3s ease;
    pointer-events: none;
}
.cm-proc-counter::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--cm-navy);
    transition: border-color 0.3s ease;
}
.cm-proc-live .cm-proc-counter:not(:empty) { opacity: 1; }
.cm-proc-live.is-complete .cm-proc-counter { background: #16a34a; }
.cm-proc-live.is-complete .cm-proc-counter::after { border-top-color: #16a34a; }
.dark .cm-proc-counter { background: #ffffff; color: var(--cm-navy); }
.dark .cm-proc-counter::after { border-top-color: #ffffff; }
@media (max-width: 900px) { .cm-proc-counter { display: none; } }

/* Final: explosión de check al completar el paso 6 */
.cb-process-step:last-child .cb-process-icon { position: relative; overflow: visible; }
.cm-proc-live .cb-process-step:last-child .cb-process-icon::before,
.cm-proc-live .cb-process-step:last-child .cb-process-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    opacity: 0;
}
.cm-proc-live .cb-process-step:last-child .cb-process-icon::after {
    /* Onda */
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 18px;
    border: 2px solid var(--cm-green);
}
.cm-proc-live .cb-process-step:last-child .cb-process-icon::before {
    /* Chispas */
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 999px;
    background: transparent;
    box-shadow:
        0 -44px 0 0 #22c55e, 31px -31px 0 0 #14b8a6, 44px 0 0 0 #22c55e, 31px 31px 0 0 #5eead4,
        0 44px 0 0 #22c55e, -31px 31px 0 0 #14b8a6, -44px 0 0 0 #22c55e, -31px -31px 0 0 #5eead4;
}
.cm-proc-live.is-complete .cb-process-step:last-child .cb-process-icon::after { animation: cmBurstRing 0.9s var(--cm-ease-out) both; }
.cm-proc-live.is-complete .cb-process-step:last-child .cb-process-icon::before { animation: cmBurstSparks 0.9s var(--cm-ease-out) both; }
@keyframes cmBurstRing {
    0%   { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.9); }
}
@keyframes cmBurstSparks {
    0%   { opacity: 1; transform: scale(0.35); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.15); }
}
.cm-proc-live.is-complete .cb-process-step:last-child .cb-process-badge { background: var(--cm-green); transform: scale(1.15); }

@media (prefers-reduced-motion: reduce) {
    .cb-process-step:last-child .cb-process-icon::before,
    .cb-process-step:last-child .cb-process-icon::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SERVICIOS PARA EMPRESAS (cm-biz-*)
   ══════════════════════════════════════════════════════════════════════ */
.cm-biz {
    --cm-mx: 70%;
    --cm-my: 30%;
    position: relative;
    display: grid;
    gap: 2.25rem;
    padding: 2rem 1.25rem;
    border-radius: 1.75rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--cm-border);
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(20, 184, 166, 0.14), transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(34, 197, 94, 0.12), transparent 60%),
        linear-gradient(160deg, #ffffff, #f2fbf7);
    box-shadow: 0 30px 60px -40px rgba(10, 22, 40, 0.3);
}
@media (min-width: 640px) { .cm-biz { padding: 2.75rem; } }
@media (min-width: 1024px) {
    .cm-biz { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 3rem; padding: 3.25rem; }
}
.cm-biz::before {
    /* Cuadrícula técnica de fondo */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(10, 22, 40, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 22, 40, 0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 40%, #000 20%, transparent 70%);
            mask-image: radial-gradient(ellipse 60% 70% at 85% 40%, #000 20%, transparent 70%);
}
.cm-biz::after {
    /* Foco de luz (data-spotlight) */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(480px circle at var(--cm-mx) var(--cm-my), rgba(20, 184, 166, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.cm-biz:hover::after { opacity: 1; }
.dark .cm-biz {
    border-color: rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(20, 184, 166, 0.18), transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(34, 197, 94, 0.12), transparent 60%),
        var(--cm-navy2);
}
.dark .cm-biz::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.cm-biz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0f766e;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--cm-border);
}
.dark .cm-biz-eyebrow { color: #5eead4; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.cm-biz-title {
    margin-top: 1rem;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--cm-navy);
    text-wrap: balance;
}
.dark .cm-biz-title { color: #ffffff; }
.cm-biz-lead {
    margin-top: 1rem;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #64748b;
}
.dark .cm-biz-lead { color: #94a3b8; }
.cm-biz-audience {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.cm-biz-audience li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cm-navy);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(10, 22, 40, 0.08);
}
.cm-biz-audience li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cm-green), var(--cm-teal));
}
.dark .cm-biz-audience li { color: #e2e8f0; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.cm-biz-actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Tarjetas de servicio */
.cm-biz-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) and (max-width: 1023px) { .cm-biz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cm-biz-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100%;
    min-height: 8.25rem;
    padding: 1.1rem;
    border-radius: 1.1rem;
    /* Borde degradado: capa de relleno + capa de borde */
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(10, 22, 40, 0.09), rgba(10, 22, 40, 0.09)) border-box;
    box-shadow: 0 10px 24px -18px rgba(10, 22, 40, 0.35);
    transition: transform 0.4s var(--cm-ease-out), box-shadow 0.35s ease, background 0.35s ease;
}
.cm-biz-tile:hover,
.cm-biz-tile:focus-visible {
    transform: translateY(-4px);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box;
    box-shadow: 0 22px 36px -20px rgba(20, 184, 166, 0.6);
    outline: none;
}
.dark .cm-biz-tile {
    background:
        linear-gradient(#12263f, #12263f) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) border-box;
}
.dark .cm-biz-tile:hover,
.dark .cm-biz-tile:focus-visible {
    background:
        linear-gradient(#12263f, #12263f) padding-box,
        linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box;
}
.cm-biz-ico {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    color: #0f766e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(20, 184, 166, 0.14));
    transition: transform 0.45s var(--cm-ease-spring), background 0.35s ease, color 0.35s ease;
}
.cm-biz-ico svg { width: 1.35rem; height: 1.35rem; overflow: visible; }
.dark .cm-biz-ico { color: #5eead4; }
.cm-biz-tile:hover .cm-biz-ico {
    color: var(--cm-navy);
    background: linear-gradient(135deg, #4ade80, #14b8a6);
    transform: scale(1.06);
}
.cm-biz-name {
    margin-top: auto;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cm-navy);
}
.dark .cm-biz-name { color: #ffffff; }
.cm-biz-arrow {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    color: #94a3b8;
    transition: transform 0.35s var(--cm-ease-spring), color 0.3s ease;
}
.cm-biz-tile:hover .cm-biz-arrow { color: var(--cm-teal); transform: translate(2px, -2px); }

/* Microanimación distinta en cada icono al pasar el ratón */
.cm-biz-ico svg * { transform-box: fill-box; transform-origin: center; }
.cm-biz-tile:hover .cm-biz-ico--wrench svg { animation: cmBizWrench 0.8s var(--cm-ease-out); }
@keyframes cmBizWrench { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-24deg); } 60% { transform: rotate(10deg); } }
.cm-biz-net-lines { stroke-dasharray: 30; }
.cm-biz-tile:hover .cm-biz-net-lines { animation: cmBizNet 1s linear; }
@keyframes cmBizNet { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.cm-biz-tile:hover .cm-biz-chip-core { animation: cmBizCore 0.9s ease-in-out 2; }
@keyframes cmBizCore { 50% { transform: scale(0.4); opacity: 0.4; } }
.cm-biz-tile:hover .cm-biz-ico--bolt svg { animation: cmBizBolt 0.6s ease; }
@keyframes cmBizBolt { 0%, 100% { transform: none; } 25% { transform: translateY(-2px) scale(1.12); } 50% { opacity: 0.4; } 75% { opacity: 1; } }
.cm-biz-tile:hover .cm-biz-spark-a { animation: cmBizSpark 0.9s var(--cm-ease-spring); }
.cm-biz-tile:hover .cm-biz-spark-b { animation: cmBizSpark 0.9s var(--cm-ease-spring) 0.15s; }
@keyframes cmBizSpark { 0%, 100% { transform: none; } 40% { transform: scale(1.3) rotate(20deg); } }
.cm-biz-tile:hover .cm-biz-ico--recycle svg { animation: cmBizSpin 0.9s var(--cm-ease-out); }
@keyframes cmBizSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cm-biz-tile:hover { transform: none; }
    .cm-biz-tile:hover .cm-biz-ico,
    .cm-biz-tile:hover .cm-biz-ico svg,
    .cm-biz-tile:hover .cm-biz-ico svg * { animation: none !important; transform: none; }
}

/* ── Logo en móvil (símbolo sin fondo) ── */
.cm-logo-mark { width: 3.25rem; height: 3.25rem; }
.dark .cm-logo-mark { padding: 0.2rem; border-radius: 0.85rem; background: #ffffff; }
/* ══════════════════════════════════════════════════════════════════════
   BUSCADOR (cm-srch-*) — cabecera de la página de búsqueda
   ══════════════════════════════════════════════════════════════════════ */
.cm-srch {
    --cm-mx: 80%;
    --cm-my: 20%;
    position: relative;
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.75rem 1.25rem;
    border-radius: 1.5rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--cm-border);
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(20, 184, 166, 0.14), transparent 60%),
        radial-gradient(40% 80% at 0% 100%, rgba(34, 197, 94, 0.1), transparent 60%),
        linear-gradient(160deg, #ffffff, #f2fbf7);
}
@media (min-width: 640px) { .cm-srch { padding: 2.25rem 2.5rem; } }
@media (min-width: 1024px) { .cm-srch { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 2.5rem; } }
.cm-srch::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(10, 22, 40, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 22, 40, 0.045) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 30%, #000 20%, transparent 70%);
            mask-image: radial-gradient(ellipse 70% 90% at 80% 30%, #000 20%, transparent 70%);
}
.cm-srch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(420px circle at var(--cm-mx) var(--cm-my), rgba(20, 184, 166, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.cm-srch:hover::after { opacity: 1; }
.dark .cm-srch {
    border-color: rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(20, 184, 166, 0.18), transparent 60%),
        var(--cm-navy2);
}
.dark .cm-srch::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.cm-srch-title {
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cm-navy);
}
.dark .cm-srch-title { color: #ffffff; }
.cm-srch-sub { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.55; color: #64748b; }
.cm-srch-sub b { color: var(--cm-navy); }
.dark .cm-srch-sub { color: #94a3b8; }
.dark .cm-srch-sub b { color: #ffffff; }

.cm-srch-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 1rem;
    border-radius: 1.1rem;
    background: #ffffff;
    border: 1.5px solid rgba(10, 22, 40, 0.1);
    box-shadow: 0 16px 36px -22px rgba(10, 22, 40, 0.45);
    transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.cm-srch-field:focus-within {
    border-color: var(--cm-teal);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.14), 0 20px 40px -22px rgba(20, 184, 166, 0.7);
}
.dark .cm-srch-field { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.cm-srch-ico { flex: none; color: #94a3b8; transition: color 0.25s ease, transform 0.35s var(--cm-ease-spring); }
.cm-srch-field:focus-within .cm-srch-ico { color: var(--cm-teal); transform: scale(1.1) rotate(-8deg); }
.cm-srch-field input {
    flex: 1;
    min-width: 0;
    height: 2.75rem;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--cm-navy);
}
.cm-srch-field input:focus { box-shadow: none; }
.cm-srch-field input, .cm-flt-money input { padding: 0; border-radius: 0; }
.cm-srch-field input::-webkit-search-cancel-button { cursor: pointer; }
.dark .cm-srch-field input { color: #ffffff; }
.cm-srch-kbd {
    display: none;
    padding: 0.1rem 0.45rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(10, 22, 40, 0.15);
    border-bottom-width: 2px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: #64748b;
}
@media (hover: hover) and (min-width: 640px) { .cm-srch-kbd { display: inline-block; } }
.cm-srch-field:focus-within .cm-srch-kbd { opacity: 0; }
.cm-srch-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.75rem;
    padding: 0 1.2rem;
    border-radius: 0.8rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cm-navy);
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    box-shadow: 0 10px 22px -12px rgba(20, 184, 166, 0.9);
}
.cm-srch-btn svg { transition: transform 0.35s var(--cm-ease-spring); }
.cm-srch-btn:hover svg { transform: translateX(3px); }
@media (max-width: 420px) { .cm-srch-btn span { display: none; } .cm-srch-btn { padding: 0 0.9rem; } }

.cm-srch-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    font-size: 0.75rem;
}
.cm-srch-quick span { color: #94a3b8; font-weight: 600; margin-right: 0.15rem; }
.cm-srch-quick a {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
    color: #334155;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(10, 22, 40, 0.08);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--cm-ease-out), background-color 0.2s ease;
}
.cm-srch-quick a:hover { color: #0f766e; border-color: rgba(20, 184, 166, 0.5); background: #ffffff; transform: translateY(-1px); }
.dark .cm-srch-quick a { color: #cbd5e1; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.dark .cm-srch-quick a:hover { color: #5eead4; border-color: #5eead4; }

/* ══════════════════════════════════════════════════════════════════════
   FILTROS (cm-flt-*) — panel lateral de catálogo, categoría y búsqueda
   ══════════════════════════════════════════════════════════════════════ */
.cm-flt-sticky {
    position: sticky;
    top: 7.5rem;
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 2px 4px 12px 2px;
}
.cm-flt {
    border-radius: 1.25rem;
    background: #ffffff;
    border: 1px solid var(--cm-border);
    box-shadow: 0 24px 48px -36px rgba(10, 22, 40, 0.4);
    overflow: hidden;
}
.dark .cm-flt { background: var(--cm-navy2); border-color: rgba(255, 255, 255, 0.1); }

.cm-flt-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(20, 184, 166, 0.08));
    border-bottom: 1px solid var(--cm-border);
}
.dark .cm-flt-head { border-color: rgba(255, 255, 255, 0.08); }
.cm-flt-head-ico {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    color: var(--cm-navy);
    background: linear-gradient(135deg, #4ade80, #14b8a6);
}
.cm-flt-head-title { font-weight: 800; font-size: 0.95rem; color: var(--cm-navy); }
.dark .cm-flt-head-title { color: #ffffff; }
.cm-flt-head-count {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--cm-teal);
}
.cm-flt-clear {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.cm-flt-clear:hover { color: #dc2626; text-decoration-color: currentColor; }

/* Secciones plegables */
.cm-flt-group { border-bottom: 1px solid rgba(10, 22, 40, 0.06); }
.dark .cm-flt-group { border-color: rgba(255, 255, 255, 0.06); }
.cm-flt-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.1rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cm-navy);
    user-select: none;
    transition: background-color 0.2s ease;
}
.cm-flt-group summary::-webkit-details-marker { display: none; }
.cm-flt-group summary:hover { background: rgba(240, 253, 246, 0.7); }
.cm-flt-group summary:focus-visible { outline: 2px solid var(--cm-teal); outline-offset: -2px; }
.dark .cm-flt-group summary { color: #ffffff; }
.dark .cm-flt-group summary:hover { background: rgba(255, 255, 255, 0.03); }
.cm-flt-chev { color: #94a3b8; transition: transform 0.35s var(--cm-ease-out); }
.cm-flt-group[open] .cm-flt-chev { transform: rotate(180deg); }
.cm-flt-body { margin: 0; padding: 0 1.1rem 1.1rem; border: 0; min-width: 0; }
.cm-flt-group[open] .cm-flt-body { animation: cmFltOpen 0.35s var(--cm-ease-out); }
@keyframes cmFltOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Inputs ocultos pero accesibles (el label hace de control) */
.cm-flt-pill input,
.cm-flt-grade input,
.cm-flt-seg input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Marca: píldoras */
.cm-flt-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cm-flt-pill { position: relative; cursor: pointer; }
.cm-flt-pill span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border: 1px solid rgba(10, 22, 40, 0.1);
    transition: all 0.25s var(--cm-ease-out);
}
.cm-flt-pill-check { width: 0; opacity: 0; margin-left: -0.3rem; transition: width 0.25s var(--cm-ease-out), opacity 0.2s ease, margin 0.25s var(--cm-ease-out); }
.cm-flt-pill:hover span { border-color: rgba(20, 184, 166, 0.5); color: #0f766e; }
.cm-flt-pill input:checked + span {
    color: var(--cm-navy);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(20, 184, 166, 0.18));
    border-color: var(--cm-teal);
}
.cm-flt-pill input:checked + span .cm-flt-pill-check { width: 12px; opacity: 1; margin-left: 0; }
.cm-flt-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.35); }
.dark .cm-flt-pill span { color: #cbd5e1; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.dark .cm-flt-pill input:checked + span { color: #ffffff; }

/* Grado: tarjetas con insignia de color */
.cm-flt-grades { display: grid; gap: 0.45rem; }
.cm-flt-grade {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.85rem;
    cursor: pointer;
    background: #f8fafc;
    border: 1px solid rgba(10, 22, 40, 0.08);
    transition: all 0.25s var(--cm-ease-out);
}
.cm-flt-grade:hover { border-color: rgba(20, 184, 166, 0.45); transform: translateX(2px); }
.cm-flt-grade-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
}
.cm-flt-grade--b .cm-flt-grade-badge { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.cm-flt-grade--c .cm-flt-grade-badge { background: linear-gradient(135deg, #fbbf24, #ea580c); }
.cm-flt-grade-label { flex: 1; font-size: 0.78rem; line-height: 1.35; color: #475569; }
.cm-flt-grade-tick {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    color: transparent;
    border: 1.5px solid #cbd5e1;
    transition: all 0.25s var(--cm-ease-spring);
}
.cm-flt-grade input:checked ~ .cm-flt-grade-tick { color: #ffffff; background: var(--cm-teal); border-color: var(--cm-teal); transform: scale(1.1); }
.cm-flt-grade:has(input:checked) {
    background: #ffffff;
    border-color: var(--cm-teal);
    box-shadow: 0 10px 22px -16px rgba(20, 184, 166, 0.8);
}
.cm-flt-grade:has(input:checked) .cm-flt-grade-label { color: var(--cm-navy); font-weight: 600; }
.cm-flt-grade:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.35); }
.dark .cm-flt-grade { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.dark .cm-flt-grade-label { color: #94a3b8; }
.dark .cm-flt-grade:has(input:checked) { background: rgba(20, 184, 166, 0.1); }
.dark .cm-flt-grade:has(input:checked) .cm-flt-grade-label { color: #ffffff; }

/* Precio */
.cm-flt-price { display: flex; align-items: center; gap: 0.45rem; }
.cm-flt-money {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid rgba(10, 22, 40, 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.cm-flt-money:focus-within { background: #ffffff; border-color: var(--cm-teal); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18); }
.cm-flt-money input {
    width: 100%;
    min-width: 0;
    height: 2.4rem;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--cm-navy);
    -moz-appearance: textfield;
}
.cm-flt-money input:focus { box-shadow: none; }
.cm-flt-money input::-webkit-outer-spin-button,
.cm-flt-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cm-flt-money > span[aria-hidden] { font-size: 0.8rem; font-weight: 700; color: #94a3b8; }
.cm-flt-dash { flex: none; width: 0.6rem; height: 2px; border-radius: 2px; background: #cbd5e1; }
.dark .cm-flt-money { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.dark .cm-flt-money input { color: #ffffff; }
.cm-flt-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
.cm-flt-presets button {
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    border: 1px dashed rgba(10, 22, 40, 0.18);
    transition: all 0.2s ease;
}
.cm-flt-presets button:hover { color: #0f766e; border-color: var(--cm-teal); border-style: solid; }
.cm-flt-presets button.is-on { color: var(--cm-navy); border-style: solid; border-color: var(--cm-teal); background: rgba(20, 184, 166, 0.14); }
.dark .cm-flt-presets button { color: #cbd5e1; border-color: rgba(255, 255, 255, 0.2); }

/* Disponibilidad: control segmentado */
.cm-flt-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.25rem;
    border-radius: 0.85rem;
    background: #f1f5f9;
}
.dark .cm-flt-seg { background: rgba(255, 255, 255, 0.05); }
.cm-flt-seg label { position: relative; cursor: pointer; }
.cm-flt-seg span {
    display: block;
    padding: 0.5rem 0.2rem;
    border-radius: 0.65rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.25s var(--cm-ease-out);
}
.cm-flt-seg label:hover span { color: var(--cm-navy); }
.cm-flt-seg input:checked + span { color: var(--cm-navy); background: #ffffff; box-shadow: 0 4px 12px -6px rgba(10, 22, 40, 0.35); }
.cm-flt-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.35); }
.dark .cm-flt-seg span { color: #94a3b8; }
.dark .cm-flt-seg input:checked + span { color: #ffffff; background: rgba(255, 255, 255, 0.12); }

/* Aplicar */
.cm-flt-foot { padding: 1rem 1.1rem 1.1rem; }
.cm-flt-apply {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.9rem;
    border-radius: 0.85rem;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cm-navy);
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    box-shadow: 0 12px 26px -14px rgba(20, 184, 166, 0.9);
}
.cm-flt-apply svg { transition: transform 0.35s var(--cm-ease-spring); }
.cm-flt-apply:hover svg { transform: translateX(3px); }
.cm-flt.is-dirty .cm-flt-apply { animation: cmApplyPulse 1.8s ease-out infinite; }
.cm-flt.is-dirty .cm-flt-apply::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: cmShine 2.2s ease-in-out infinite;
}
@keyframes cmApplyPulse {
    0%        { box-shadow: 0 12px 26px -14px rgba(20, 184, 166, 0.9), 0 0 0 0 rgba(20, 184, 166, 0.45); }
    70%, 100% { box-shadow: 0 12px 26px -14px rgba(20, 184, 166, 0.9), 0 0 0 10px rgba(20, 184, 166, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cm-flt-group[open] .cm-flt-body,
    .cm-flt.is-dirty .cm-flt-apply,
    .cm-flt.is-dirty .cm-flt-apply::after { animation: none !important; }
    .cm-flt-grade:hover { transform: none; }
}

.cm-flt-aside { width: 16.5rem; }

/* ══════════════════════════════════════════════════════════════════════
   PÁGINA SERVICIOS PARA EMPRESAS (cm-svc-*, cm-cyc-*)
   El hero reutiliza cm-hx-*; "Cómo trabajamos" reutiliza cb-process-* + setupProcess.
   ══════════════════════════════════════════════════════════════════════ */
.cm-svc-audience { justify-content: center; margin-top: 1.4rem; }
@media (min-width: 1024px) { .cm-svc-audience { justify-content: flex-start; } }
.cm-svc-hero .cm-hx-inner { padding-bottom: 4.5rem; }
@media (min-width: 1024px) { .cm-svc-hero .cm-hx-inner { padding-bottom: 5rem; } }

/* ── Ciclo de vida ── */
.cm-cyc-wrap { min-height: 26rem; }
@media (min-width: 640px) { .cm-cyc-wrap { min-height: 32rem; } }
.cm-cyc {
    --size: min(20rem, 72vw);
    --rot: 0deg;
    position: relative;
    width: var(--size);
    aspect-ratio: 1;
    transform: rotateX(calc(var(--py, 0) * -6deg)) rotateY(calc(var(--px, 0) * 8deg));
    transition: transform 0.7s var(--cm-ease-out);
}
@media (min-width: 1280px) { .cm-cyc { --size: 22rem; } }
.cm-js:not(.cm-reduce) .cm-cyc { animation: cmCardIn 1.2s var(--cm-ease-out) 0.35s backwards; }
.cm-cyc-ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(20, 184, 166, 0.28);
    background: radial-gradient(circle, rgba(20, 184, 166, 0.1), transparent 65%);
}
.cm-cyc-ring--dash {
    inset: 14%;
    border: 1.5px dashed rgba(34, 197, 94, 0.35);
    background: none;
    animation: cmSpinSlow 50s linear infinite reverse;
}
.cm-cyc-arm {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    transform: rotate(var(--rot));
    transition: transform 1.2s var(--cm-ease-out);
}
.cm-cyc-arm::before {
    /* Estela del cometa sobre el anillo */
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from -70deg, transparent 0deg, rgba(34, 197, 94, 0.7) 70deg, transparent 70.5deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}
.cm-cyc-comet {
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid var(--cm-green);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.18), 0 0 22px 4px rgba(34, 197, 94, 0.7);
}
.cm-cyc-core {
    position: absolute;
    inset: 27%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px -30px rgba(10, 22, 40, 0.45), 0 0 0 1px rgba(20, 184, 166, 0.14);
}
.dark .cm-cyc-core { background: rgba(255, 255, 255, 0.92); }
.cm-cyc-core img { width: 44%; height: auto; }
.cm-cyc-word {
    font-family: Unbounded, "Arial Black", sans-serif;
    font-size: clamp(0.62rem, 2.4vw, 0.78rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0f766e;
}
.cm-cyc-word.is-swap { animation: cmWordSwap 0.6s var(--cm-ease-out); }
@keyframes cmWordSwap {
    from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
.cm-cyc-node {
    --a: calc(var(--i) * (360deg / 7) - 90deg);
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transform:
        rotate(var(--a)) translateX(calc(var(--size) / 2)) rotate(calc(var(--a) * -1))
        translate(-50%, -50%);
    transition: filter 0.4s ease;
    white-space: nowrap;
}
.cm-cyc-node i {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 2.5px solid #99d9cf;
    transition: all 0.4s var(--cm-ease-spring);
}
.cm-cyc-node b {
    display: none;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(10, 22, 40, 0.08);
    box-shadow: 0 10px 22px -16px rgba(10, 22, 40, 0.5);
    transition: all 0.4s var(--cm-ease-out);
}
@media (min-width: 640px) { .cm-cyc-node b { display: inline-block; } }
/* Etiquetas a la izquierda del punto en la mitad izquierda del círculo */
.cm-cyc-node:nth-of-type(n+5) { flex-direction: row-reverse; }
.cm-cyc-node.is-on i {
    border-color: var(--cm-green);
    background: var(--cm-green);
    transform: scale(1.25);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.18);
}
.cm-cyc-node.is-on b {
    color: var(--cm-navy);
    background: linear-gradient(135deg, #bbf7d0, #99f6e4);
    border-color: rgba(20, 184, 166, 0.5);
    transform: scale(1.06);
}
.dark .cm-cyc-node b { color: #e2e8f0; background: rgba(15, 36, 56, 0.9); border-color: rgba(255, 255, 255, 0.12); }
.dark .cm-cyc-node.is-on b { color: var(--cm-navy); }

/* ── Intro que se ilumina ── */
.cm-svc-intro { padding-top: 4.5rem; padding-bottom: 2rem; }
.cm-svc-intro-text {
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 3.2vw, 2.1rem);
    line-height: 1.35;
    letter-spacing: -0.015em;
    text-align: center;
    text-wrap: balance;
    color: var(--cm-navy);
}
.dark .cm-svc-intro-text { color: #ffffff; }
.cm-words-live .cm-w {
    animation: none;
    opacity: 0.16;
    transition: opacity 0.35s ease, color 0.35s ease;
}
.cm-words-live .cm-w.is-lit { opacity: 1; }

/* ── Servicios (bento) ── */
.cm-svc-section { padding-top: 3rem; padding-bottom: 5rem; }
.cm-svc-head { text-align: center; margin-bottom: 2.25rem; }
.cm-svc-h2 {
    margin-top: 0.9rem;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: -0.02em;
    color: var(--cm-navy);
}
.dark .cm-svc-h2 { color: #ffffff; }
.cm-svc-bento { display: grid; gap: 1rem; }
@media (min-width: 768px) {
    .cm-svc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-svc-card--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
    .cm-svc-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cm-svc-card {
    --cm-mx: 50%;
    --cm-my: 0%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 1.6rem;
    border-radius: 1.5rem;
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(10, 22, 40, 0.08), rgba(10, 22, 40, 0.08)) border-box;
    box-shadow: 0 18px 40px -32px rgba(10, 22, 40, 0.45);
    transition: transform 0.45s var(--cm-ease-out), box-shadow 0.4s ease, background 0.4s ease;
}
.cm-svc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(420px circle at var(--cm-mx) var(--cm-my), rgba(20, 184, 166, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.cm-svc-card:hover::before { opacity: 1; }
.cm-svc-card:hover {
    transform: translateY(-4px);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box;
    box-shadow: 0 28px 50px -30px rgba(20, 184, 166, 0.6);
}
.dark .cm-svc-card {
    background:
        linear-gradient(var(--cm-navy2), var(--cm-navy2)) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) border-box;
}
.dark .cm-svc-card:hover {
    background:
        linear-gradient(var(--cm-navy2), var(--cm-navy2)) padding-box,
        linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box;
}
/* Tarjeta destacada oscura (Software e IA) */
.cm-svc-card--dark,
.dark .cm-svc-card--dark {
    color: #e2e8f0;
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(20, 184, 166, 0.35), transparent 60%) padding-box,
        radial-gradient(60% 80% at 0% 100%, rgba(34, 197, 94, 0.25), transparent 60%) padding-box,
        linear-gradient(var(--cm-navy), var(--cm-navy)) padding-box,
        linear-gradient(135deg, rgba(20, 184, 166, 0.4), rgba(34, 197, 94, 0.2)) border-box;
}
.cm-svc-card--dark:hover,
.dark .cm-svc-card--dark:hover {
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(20, 184, 166, 0.45), transparent 60%) padding-box,
        radial-gradient(60% 80% at 0% 100%, rgba(34, 197, 94, 0.3), transparent 60%) padding-box,
        linear-gradient(var(--cm-navy), var(--cm-navy)) padding-box,
        linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box;
}
.cm-svc-card--dark h3 { color: #ffffff !important; }
.cm-svc-card--dark .cm-svc-list li { color: #cbd5e1 !important; }
.cm-svc-card--dark .cm-svc-num { color: rgba(255, 255, 255, 0.35); }

.cm-svc-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.1rem; }
.cm-svc-ico {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 0.95rem;
    color: #0f766e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(20, 184, 166, 0.16));
    transition: transform 0.5s var(--cm-ease-spring), background 0.35s ease, color 0.35s ease;
}
.cm-svc-ico svg { width: 1.6rem; height: 1.6rem; overflow: visible; }
.cm-svc-ico svg * { transform-box: fill-box; transform-origin: center; }
.cm-svc-card:hover .cm-svc-ico {
    color: var(--cm-navy);
    background: linear-gradient(135deg, #4ade80, #14b8a6);
    transform: rotate(-6deg) scale(1.08);
}
.cm-svc-card--dark .cm-svc-ico { color: #5eead4; background: rgba(255, 255, 255, 0.08); }
.dark .cm-svc-ico { color: #5eead4; }
.cm-svc-num {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #94a3b8;
    transition: color 0.3s ease;
}
.cm-svc-card:hover .cm-svc-num { color: var(--cm-teal); }
.cm-svc-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--cm-navy);
    margin-bottom: 0.85rem;
}
.dark .cm-svc-card h3 { color: #ffffff; }
.cm-svc-list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
    .cm-svc-card--wide .cm-svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}
.cm-svc-list li {
    position: relative;
    padding-left: 1.65rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #475569;
}
.dark .cm-svc-list li { color: #94a3b8; }
.cm-svc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.15);
}
.cm-svc-list li::after {
    /* Check dibujado con bordes (sin imágenes) */
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.37rem;
    width: 0.3rem;
    height: 0.52rem;
    border: solid #16a34a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cm-svc-card--dark .cm-svc-list li::before { background: rgba(34, 197, 94, 0.22); }
.cm-svc-card--dark .cm-svc-list li::after { border-color: #4ade80; }

/* Microanimaciones de iconos (reutilizan las ideas de la versión anterior) */
.cm-svc-spin { animation: cmSpinSlow 9s linear infinite; }
.cm-svc-card:hover .cm-svc-spin { animation-duration: 2s; }
.cm-svc-wiggle { animation: cmSvcWiggle 3.5s ease-in-out infinite; }
@keyframes cmSvcWiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 88% { transform: rotate(8deg); } }
.cm-svc-draw { stroke-dasharray: 14; stroke-dashoffset: 14; animation: cmSvcDraw 3s ease-in-out infinite; }
@keyframes cmSvcDraw { 0% { stroke-dashoffset: 14; } 40%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 14; } }
.cm-svc-dot { animation: cmSvcDot 1.8s ease-in-out infinite; }
@keyframes cmSvcDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.cm-svc-blink { animation: cmSvcDot 1.2s steps(2, jump-none) infinite; }

/* ── Cómo trabajamos: 5 pasos ── */
@media (min-width: 901px) {
    .cb-process-row.cm-svc-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .cm-svc-steps .cb-process-line { left: 10%; right: 10%; }
    .cm-svc-steps .cb-process-step h4 { max-width: 18ch; }
}
.cm-svc-steps .cb-process-step h4 { font-size: 0.9rem; }

/* ── CTA final ── */
.cm-svc-cta { padding: 5rem 0; }
@media (min-width: 640px) { .cm-svc-cta { padding: 6.5rem 0; } }
.cm-svc-cta-inner { text-align: center; }
.cm-svc-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5eead4;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.cm-svc-cta-title {
    margin-top: 1.2rem;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-wrap: balance;
}
.cm-svc-cta-text { margin: 1.1rem auto 0; max-width: 34rem; font-size: 1rem; line-height: 1.65; color: #cbd5e1; }
.cm-svc-cta-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.cm-svc-cta-ghost {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 1.5rem;
    border-radius: 0.85rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
}
.cm-svc-cta-ghost:hover { color: #5eead4; border-color: #5eead4; }

@media (prefers-reduced-motion: reduce) {
    .cm-cyc-ring--dash,
    .cm-svc-spin,
    .cm-svc-wiggle,
    .cm-svc-draw,
    .cm-svc-dot,
    .cm-svc-blink,
    .cm-cyc-word.is-swap { animation: none !important; }
    .cm-svc-draw { stroke-dashoffset: 0; }
    .cm-svc-card:hover { transform: none; }
    .cm-cyc { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   PÁGINA CONÓCENOS (cm-ab-*, cm-ba-*) — el hero reutiliza cm-hx-*
   ══════════════════════════════════════════════════════════════════════ */
.cm-ab-hero .cm-hx-inner { padding-bottom: 4.5rem; }
.cm-ab-hero .cm-hx-lead { max-width: 38rem; }

/* ── Comparador antes / después ── */
.cm-ab-visual { min-height: auto; align-content: center; gap: 0.9rem; }
.cm-ba {
    --x: 50%;
    position: relative;
    width: min(100%, 30rem);
    aspect-ratio: 4 / 3;
    border-radius: 1.6rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 50px 90px -40px rgba(10, 22, 40, 0.45), 0 0 0 1px rgba(20, 184, 166, 0.16);
    transform: rotateX(calc(var(--py, 0) * -5deg)) rotateY(calc(var(--px, 0) * 7deg));
    transition: transform 0.7s var(--cm-ease-out);
    touch-action: pan-y;
}
.cm-js:not(.cm-reduce) .cm-ba { animation: cmCardIn 1.2s var(--cm-ease-out) 0.35s backwards; }
.cm-ba:has(.cm-ba-range:focus-visible) { box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.5), 0 50px 90px -40px rgba(10, 22, 40, 0.45); }
.cm-ba-layer { position: absolute; inset: 0; }
.cm-ba-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-ba-after {
    background:
        radial-gradient(70% 60% at 50% 40%, rgba(20, 184, 166, 0.28), transparent 70%),
        radial-gradient(50% 40% at 80% 90%, rgba(34, 197, 94, 0.22), transparent 70%),
        linear-gradient(160deg, #f5fbf9, #dff4ec);
}
.dark .cm-ba-after { background: radial-gradient(70% 60% at 50% 40%, rgba(20, 184, 166, 0.3), transparent 70%), #0c1d31; }
.cm-ba-before {
    background: linear-gradient(160deg, #e5e7eb, #cbd5e1);
    clip-path: inset(0 calc(100% - var(--x)) 0 0);
}
.dark .cm-ba-before { background: linear-gradient(160deg, #334155, #1e293b); }
.cm-ba-before svg { filter: saturate(0.6); }
.cm-ba-sparks path { transform-box: fill-box; transform-origin: center; animation: cbTwinkle 2.2s ease-in-out infinite; }
.cm-ba-sparks path:nth-child(2) { animation-delay: 0.7s; }
.cm-ba-sparks path:nth-child(3) { animation-delay: 1.3s; }
.cm-ba-tag {
    position: absolute;
    top: 1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cm-ba-tag--before { left: 1rem; color: #ffffff; background: rgba(55, 65, 81, 0.85); }
.cm-ba-tag--after { right: 1rem; color: var(--cm-navy); background: linear-gradient(135deg, #4ade80, #14b8a6); }
.cm-ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--x);
    width: 2px;
    margin-left: -1px;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(10, 22, 40, 0.3);
    pointer-events: none;
}
.cm-ba-handle span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -1.375rem 0 0 -1.375rem;
    border-radius: 999px;
    color: #0f766e;
    background: #ffffff;
    box-shadow: 0 10px 24px -8px rgba(10, 22, 40, 0.5), 0 0 0 4px rgba(20, 184, 166, 0.25);
}
.cm-ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
}
.cm-ab-visual-hint { font-size: 0.75rem; font-weight: 600; color: #64748b; text-align: center; }
.dark .cm-ab-visual-hint { color: #94a3b8; }

/* ── Historia por capítulos ── */
.cm-ab-story { padding-top: 5rem; padding-bottom: 4rem; }
.cm-ab-story-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
    .cm-ab-story-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; }
    .cm-ab-sticky { position: sticky; top: 9rem; }
}
.cm-ab-h2 {
    margin-top: 1rem;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cm-navy);
    text-wrap: balance;
}
.dark .cm-ab-h2 { color: #ffffff; }
.cm-ab-toc { display: none; margin: 2rem 0 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .cm-ab-toc { display: grid; gap: 0.25rem; } }
.cm-ab-toc li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0 0.55rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
    transition: color 0.35s ease;
}
.cm-ab-toc li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 3px;
    border-radius: 3px;
    background: #e2e8f0;
    transition: background 0.35s ease;
}
.cm-ab-toc li b { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; }
.cm-ab-toc li.is-on { color: var(--cm-navy); }
.cm-ab-toc li.is-on::before { background: linear-gradient(180deg, var(--cm-green), var(--cm-teal)); }
.cm-ab-toc li.is-on b { color: var(--cm-teal); }
.dark .cm-ab-toc li.is-on { color: #ffffff; }
.dark .cm-ab-toc li::before { background: rgba(255, 255, 255, 0.1); }

.cm-ab-chapters { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .cm-ab-chapters { gap: 1.5rem; padding-bottom: 12vh; } }
.cm-ab-chapter {
    position: relative;
    padding: 1.75rem 1.75rem 1.75rem 4.75rem;
    border-radius: 1.4rem;
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(10, 22, 40, 0.08), rgba(10, 22, 40, 0.08)) border-box;
    box-shadow: 0 18px 40px -34px rgba(10, 22, 40, 0.45);
    transition: opacity 0.5s ease, transform 0.6s var(--cm-ease-out), box-shadow 0.5s ease, background 0.5s ease;
}
.cm-ab-chapter p { font-size: 1.02rem; line-height: 1.75; color: #475569; }
@media (min-width: 640px) { .cm-ab-chapter p { font-size: 1.1rem; } }
.cm-ab-chapter-num {
    position: absolute;
    left: 1.5rem;
    top: 1.75rem;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.75rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    transition: all 0.45s var(--cm-ease-out);
}
.cm-chapters-live .cm-ab-chapter:not(.is-on) { opacity: 0.45; transform: scale(0.98); }
.cm-ab-chapter.is-on {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box;
    box-shadow: 0 30px 60px -36px rgba(20, 184, 166, 0.55);
}
.cm-ab-chapter.is-on p { color: var(--cm-navy); }
.cm-ab-chapter.is-on .cm-ab-chapter-num { color: var(--cm-navy); background: linear-gradient(135deg, #4ade80, #14b8a6); }
.dark .cm-ab-chapter { background: linear-gradient(var(--cm-navy2), var(--cm-navy2)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) border-box; }
.dark .cm-ab-chapter.is-on { background: linear-gradient(var(--cm-navy2), var(--cm-navy2)) padding-box, linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box; }
.dark .cm-ab-chapter p { color: #94a3b8; }
.dark .cm-ab-chapter.is-on p { color: #ffffff; }
.dark .cm-ab-chapter-num { background: rgba(255, 255, 255, 0.06); }

/* Compromiso */
.cm-ab-commit {
    --cm-mx: 50%;
    --cm-my: 0%;
    position: relative;
    margin-top: 3.5rem;
    padding: 2.5rem 1.5rem;
    border-radius: 1.75rem;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    color: #e2e8f0;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(20, 184, 166, 0.35), transparent 60%),
        radial-gradient(60% 80% at 0% 100%, rgba(34, 197, 94, 0.28), transparent 60%),
        var(--cm-navy);
}
@media (min-width: 640px) { .cm-ab-commit { padding: 3.5rem 3rem; } }
.cm-ab-commit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(520px circle at var(--cm-mx) var(--cm-my), rgba(94, 234, 212, 0.14), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.cm-ab-commit:hover::after { opacity: 1; }
.cm-ab-commit-quote { margin: 0 auto 1rem; color: #5eead4; opacity: 0.8; }
.cm-ab-commit-text {
    max-width: 50rem;
    margin: 0 auto;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 2.6vw, 1.75rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-wrap: balance;
}
.cm-ab-pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}
.cm-ab-pillars li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.cm-ab-pillars li::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--cm-navy);
    background: linear-gradient(135deg, #4ade80, #14b8a6);
}

/* ── Las tres R ── */
.cm-ab-rs { padding-bottom: 5rem; }
.cm-ab-rs-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .cm-ab-rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cm-ab-r {
    --cm-rx: 0deg;
    --cm-ry: 0deg;
    position: relative;
    min-height: 15rem;
    padding: 1.9rem;
    border-radius: 1.5rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(10, 22, 40, 0.08), rgba(10, 22, 40, 0.08)) border-box;
    box-shadow: 0 18px 40px -32px rgba(10, 22, 40, 0.45);
    transform: perspective(900px) rotateX(var(--cm-rx)) rotateY(var(--cm-ry));
    transition: transform 0.45s var(--cm-ease-out), box-shadow 0.4s ease, background 0.4s ease;
}
.cm-ab-r:hover {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box;
    box-shadow: 0 30px 55px -32px rgba(20, 184, 166, 0.6);
}
.cm-ab-r--green,
.cm-ab-r--green:hover {
    background:
        radial-gradient(80% 80% at 100% 0%, rgba(20, 184, 166, 0.16), transparent 60%) padding-box,
        linear-gradient(160deg, #f0fdf6, #e3f7ee) padding-box,
        linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(34, 197, 94, 0.35)) border-box;
}
.dark .cm-ab-r,
.dark .cm-ab-r--green { background: linear-gradient(var(--cm-navy2), var(--cm-navy2)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) border-box; }
.dark .cm-ab-r:hover { background: linear-gradient(var(--cm-navy2), var(--cm-navy2)) padding-box, linear-gradient(135deg, var(--cm-green), var(--cm-teal)) border-box; }
.cm-ab-r-letter {
    position: absolute;
    right: -0.5rem;
    bottom: -3.5rem;
    z-index: -1;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-size: 13rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(20, 184, 166, 0.16);
    transition: transform 0.6s var(--cm-ease-out), -webkit-text-stroke-color 0.4s ease;
}
.cm-ab-r:hover .cm-ab-r-letter { transform: translate(-6px, -8px) rotate(-6deg); -webkit-text-stroke-color: rgba(20, 184, 166, 0.35); }
.cm-ab-r-ico {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
    color: #0f766e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(20, 184, 166, 0.18));
    transition: transform 0.5s var(--cm-ease-spring), background 0.35s ease, color 0.35s ease;
}
.cm-ab-r-ico svg { width: 1.6rem; height: 1.6rem; overflow: visible; }
.cm-ab-r-ico svg * { transform-box: fill-box; transform-origin: center; }
.cm-ab-r:hover .cm-ab-r-ico { color: var(--cm-navy); background: linear-gradient(135deg, #4ade80, #14b8a6); transform: rotate(-6deg) scale(1.08); }
.dark .cm-ab-r-ico { color: #5eead4; }
.cm-ab-r h3 {
    margin-top: 1.4rem;
    font-family: Unbounded, "Arial Black", sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cm-navy);
}
.dark .cm-ab-r h3 { color: #ffffff; }
.cm-ab-r p { margin-top: 0.5rem; max-width: 24ch; font-size: 0.92rem; line-height: 1.6; color: #475569; }
.dark .cm-ab-r p { color: #94a3b8; }
.cm-ab-sway { transform-origin: 50% 100%; animation: cmAbSway 4s ease-in-out infinite; }
@keyframes cmAbSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
    .cm-ba-sparks path,
    .cm-ab-sway { animation: none !important; }
    .cm-ba,
    .cm-ab-r { transform: none !important; }
    .cm-chapters-live .cm-ab-chapter:not(.is-on) { transform: none; }
}

.cm-ab-commit-quote { display: block; height: 2.2rem; font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1; background: linear-gradient(135deg, #4ade80, #14b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; }
/* ── Redes sociales en la barra de navegación ── */
.cm-social { flex: none; display: flex; align-items: center; gap: 0.45rem; }
.cm-social-label {
    margin-right: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}
.cm-social-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    color: #334155;
    background: #ffffff;
    border: 1px solid rgba(10, 22, 40, 0.1);
    transition: color 0.25s ease, background 0.3s ease, border-color 0.25s ease, transform 0.35s var(--cm-ease-spring), box-shadow 0.3s ease;
}
.cm-social-btn:hover,
.cm-social-btn:focus-visible { color: #ffffff; border-color: transparent; transform: translateY(-2px) scale(1.06); outline: none; }
.cm-social-btn--tiktok:hover,
.cm-social-btn--tiktok:focus-visible { background: #0a0a0a; box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55; }
.cm-social-btn--instagram:hover,
.cm-social-btn--instagram:focus-visible {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    box-shadow: 0 8px 18px -8px rgba(214, 36, 159, 0.8);
}
.dark .cm-social-btn { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
@media (prefers-reduced-motion: reduce) { .cm-social-btn:hover { transform: none; } }