/* ═══════════════════════════════════════════════════════════
   CINE.CSS — Sistema de diseño "cine oscuro"
   WebClicStudio

   El lenguaje de la portada (fondo casi negro, luz de color, vidrio,
   titulares grandes y apretados) llevado a TODO el sitio. Lo carga cada
   página; las piezas propias de la portada siguen en css/portada.css.

   EL COLOR DE CADA PÁGINA
   Cada página interna trae su acento en <body data-theme="..."> (ver
   css/pages.css: azul en sitios web, teal en dashboards, rosa en spa…).
   Aquí ese acento pinta la luz de fondo, los números, los iconos y los
   subrayados; el rojo de la marca queda para el logo y los botones
   principales. Así cada página se distingue y el sitio sigue siendo uno.
   Sobre fondo oscuro el acento se aclara (--acc-hi) para que se lea.

   DOS SUPERFICIES
   · .cn-sec           oscura (la normal).
   · .cn-sec.cn-paper  clara, para dar respiro entre bloques oscuros.
   Los componentes leen sus colores de variables (--cn-*), así que el
   mismo marcado funciona sobre las dos.

   Prefijo cn- en todo: no choca con las clases viejas de pages.css,
   home.css ni lab.css.
   ═══════════════════════════════════════════════════════════ */

:root {
    --cn-bg:      #07080C;
    --cn-bg-alt:  #0A0C13;
    --cn-panel:   #10131C;
    --cn-line:    rgba(255,255,255,.08);
    --cn-line-2:  rgba(255,255,255,.15);
    --cn-tx:      #F5F7FA;
    --cn-tx-2:    rgba(245,247,250,.74);
    --cn-tx-3:    rgba(245,247,250,.52);
    --cn-card:    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    --cn-shadow:  0 30px 70px -36px rgba(0,0,0,.9);
    --cn-red:     #E0121B;
    --cn-red-hi:  #FF3B44;
    --cn-radius:  24px;
    --cn-max:     1280px;
}
/* El acento aclarado para fondo oscuro. Sin data-theme (la portada) es el
   rojo de la marca. */
body { --acc-hi: color-mix(in srgb, var(--acc, #E0121B) 70%, #fff); }

.cn-paper {
    --cn-bg:      #F4F5F8;
    --cn-bg-alt:  #FFFFFF;
    --cn-panel:   #FFFFFF;
    --cn-line:    #E3E6EC;
    --cn-line-2:  #CDD3DD;
    --cn-tx:      #0B1220;
    --cn-tx-2:    #3D4A5C;
    --cn-tx-3:    #64748B;
    --cn-card:    #FFFFFF;
    --cn-shadow:  0 24px 50px -30px rgba(15,23,42,.35);
    --acc-hi:     var(--acc, #E0121B);
}

/* ─ Sección y contenedor ─ */
.cn-sec {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(80px, 9vw, 136px) 0;
    background: var(--cn-bg);
    color: var(--cn-tx);
}
.cn-sec--alt { background: var(--cn-bg-alt); }
.cn-sec--tight { padding: clamp(56px, 6vw, 88px) 0; }
/* Un filo de luz arriba de cada sección: separa sin dibujar una raya. */
.cn-sec::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    z-index: 0;
    background: linear-gradient(90deg, transparent 0%, var(--cn-line-2) 30%, var(--cn-line-2) 70%, transparent 100%);
    opacity: .7;
}
.cn-wrap { position: relative; z-index: 1; width: 100%; max-width: var(--cn-max); margin: 0 auto; padding: 0 32px; }

/* Luces y tramas de fondo, decorativas (aria-hidden en el marcado). */
.cn-glow {
    position: absolute;
    z-index: -1;
    width: var(--s, 760px);
    height: var(--s, 760px);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--g, var(--acc, #E0121B)) 30%, transparent), transparent);
    opacity: var(--o, .55);
}
.cn-paper .cn-glow { opacity: calc(var(--o, .55) * .45); }
.cn-trama {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--cn-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--cn-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
    opacity: .55;
}

/* ─ Encabezado de sección ─ */
.cn-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 760px; }
.cn-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cn-head--center .cn-lead { margin-left: auto; margin-right: auto; }
.cn-head--row {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    gap: 24px 56px;
}
.cn-head--row .cn-lead { margin-bottom: 6px; }
.cn-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font: 800 12px/1 var(--font);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cn-tx-3);
}
.cn-kicker b { color: var(--acc-hi); font-weight: 900; letter-spacing: .04em; }
.cn-kicker i { width: 30px; height: 1px; background: currentColor; opacity: .55; }
.cn-h2 {
    font-size: clamp(34px, 4.3vw, 60px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.042em;
    color: var(--cn-tx);
    text-wrap: balance;
}
/* Cualquier <mark> dentro del sistema es "la palabra del acento", nunca
   el subrayado amarillo del navegador. */
.cn-sec mark,
.cn-h2 mark, .cn-h3 mark, .cn-hero__title mark {
    background: none;
    color: var(--acc-hi);
}
.cn-h2 + .cn-lead, .cn-h2 + p { margin-top: 20px; }
.cn-h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 900; line-height: 1.12; letter-spacing: -0.03em; color: var(--cn-tx); }
.cn-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; color: var(--cn-tx-2); max-width: 600px; text-wrap: pretty; }
.cn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 15px;
    color: var(--cn-tx);
    transition: gap .2s ease, color .2s ease;
}
.cn-link svg { color: var(--acc-hi); transition: transform .2s ease; }
.cn-link:hover { gap: 12px; color: var(--acc-hi); }

/* ─ Botones ─ */
.cn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 700 15px/1 var(--font);
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.cn-btn svg { flex-shrink: 0; }
.cn-btn:hover { transform: translateY(-2px); }
.cn-btn--wa { background: #22C55E; color: #fff; box-shadow: 0 10px 26px rgba(34,197,94,.32), inset 0 -2px 0 rgba(0,0,0,.08); }
.cn-btn--wa:hover { background: #16A34A; box-shadow: 0 14px 32px rgba(34,197,94,.44); }
.cn-btn--glass { background: rgba(255,255,255,.07); color: var(--cn-tx); border-color: var(--cn-line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cn-btn--glass:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); }
.cn-paper .cn-btn--glass { background: #fff; border-color: var(--cn-line-2); }
.cn-paper .cn-btn--glass:hover { background: #fff; border-color: var(--cn-tx-3); }
.cn-btn--acc { background: var(--acc, #E0121B); color: #fff; box-shadow: 0 10px 26px -8px var(--acc, #E0121B); }
.cn-btn--acc:hover { background: var(--acc-d, #B50E15); }
.cn-btn--light { background: #fff; color: #0B1220; box-shadow: 0 10px 26px -10px rgba(0,0,0,.5); }
.cn-btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.cn-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.cn-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid var(--cn-line-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--cn-tx);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cn-pill b { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--acc-hi); }
/* Latido con transform y opacity (compositor), no con box-shadow (repinta). */
.cn-pill b::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--acc, #E0121B) 55%, transparent); animation: cn-ping 2s ease-out infinite; }
@keyframes cn-ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
.cn-tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--cn-line-2);
    font-size: 12px;
    font-weight: 700;
    color: var(--cn-tx-2);
    white-space: nowrap;
}
.cn-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Número grande de fondo, para tarjetas en serie. */

/* Rejillas */

.cn-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
}
.cn-split--rev > :first-child { order: 2; }

/* Lista con check del acento */
.cn-list { list-style: none; display: grid; gap: 12px; }
.cn-list li { position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.55; color: var(--cn-tx-2); }
.cn-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 1px;
    width: 21px; height: 21px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--acc, #E0121B) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
    border: 1px solid color-mix(in srgb, var(--acc, #E0121B) 45%, transparent);
}
.cn-paper .cn-list li::before {
    background-color: var(--acc, #E0121B);
    border-color: var(--acc, #E0121B);
}
.cn-list b { color: var(--cn-tx); font-weight: 800; }

/* Rótulo con explicación debajo (p. ej. "Retorno promedio" + qué significa). */

.cn-nota { margin-top: 22px; font-size: 13px; line-height: 1.5; color: var(--cn-tx-3); }
/* > span: el rótulo. La cifra puede traer su propio <span data-count>. */

/* ─ Pasos (línea de tiempo horizontal) ─ */
.cn-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 0 28px;
    counter-reset: cn-paso;
}
.cn-step { position: relative; padding-top: 74px; counter-increment: cn-paso; }
/* La línea que une los pasos y el nodo de cada uno. */
.cn-step::before {
    content: '';
    position: absolute;
    left: 0; right: -28px; top: 26px;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--acc, #E0121B) 70%, transparent), var(--cn-line-2));
}
.cn-step:last-child::before { right: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--acc, #E0121B) 70%, transparent), transparent); }
.cn-step::after {
    content: counter(cn-paso, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 900 15px/1 var(--font);
    color: #fff;
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--acc, #E0121B) 80%, #fff), var(--acc, #E0121B) 60%, color-mix(in srgb, var(--acc, #E0121B) 60%, #000));
    box-shadow: 0 0 0 6px var(--cn-bg), 0 12px 30px -8px var(--acc, #E0121B);
}
.cn-sec--alt .cn-step::after { box-shadow: 0 0 0 6px var(--cn-bg-alt), 0 12px 30px -8px var(--acc, #E0121B); }
.cn-step h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--cn-tx); margin-bottom: 10px; }
.cn-step p { font-size: 15px; line-height: 1.6; color: var(--cn-tx-2); }
.cn-step small { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-hi); }

/* ─ Preguntas frecuentes ─ */
.cn-faq { border-top: 1px solid var(--cn-line); }
.cn-faq details { border-bottom: 1px solid var(--cn-line); }
.cn-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cn-tx);
    cursor: pointer;
}
.cn-faq summary::-webkit-details-marker { display: none; }
.cn-faq summary::after {
    content: '';
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--cn-line-2);
    background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
                linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
    color: var(--acc-hi);
    transition: transform .3s ease, background-color .3s ease;
}
.cn-faq details[open] summary::after { transform: rotate(45deg); background-color: color-mix(in srgb, var(--acc, #E0121B) 18%, transparent); }
.cn-faq details > div { padding: 0 64px 26px 0; font-size: 16px; line-height: 1.7; color: var(--cn-tx-2); }
.cn-faq details > div p + p { margin-top: 10px; }
.cn-faq details > div a { color: var(--acc-hi); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ─ Cierre con llamada a la acción ─ */
.cn-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px 64px;
    padding: clamp(36px, 6vw, 80px);
    border-radius: 36px;
    background:
        radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--acc, #E0121B) 34%, transparent), transparent 70%),
        radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--acc, #E0121B) 16%, transparent), transparent 70%),
        #0E1018;
    border: 1px solid var(--cn-line-2);
    color: #fff;
    box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--acc, #E0121B) 70%, transparent);
}
.cn-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000, transparent 70%);
}
.cn-cta .cn-h2 { color: #fff; font-size: clamp(30px, 3.6vw, 52px); }
.cn-cta .cn-lead { color: rgba(255,255,255,.74); margin-top: 18px; }
.cn-cta .cn-list { margin-top: 26px; }
.cn-cta .cn-list li { color: rgba(255,255,255,.82); }
.cn-cta__action { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cn-cta__action .cn-btn { min-height: 62px; padding: 0 32px; font-size: 16.5px; }
.cn-cta__nota { font-size: 13.5px; color: rgba(255,255,255,.58); }
.cn-cta__action .cn-btn--wa { width: 100%; }

/* Vista previa del chat de WhatsApp (encima del botón del cierre). */
.cn-chat {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: #0B141A;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.95);
}
.cn-chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #1F2C34; }
.cn-chat__av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.cn-chat__head b { display: block; font-size: 15px; color: #fff; }
.cn-chat__head small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.cn-chat__head small i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.cn-chat__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 16px 18px;
    background:
        radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 18px 18px,
        #0B141A;
}
.cn-chat__msg {
    align-self: flex-end;
    max-width: 88%;
    padding: 10px 12px 8px;
    border-radius: 14px 14px 4px 14px;
    background: #005C4B;
    font-size: 14.5px;
    line-height: 1.45;
    color: #E9EDEF;
}
.cn-chat__msg > span { display: block; margin-top: 4px; text-align: right; font-size: 11px; color: rgba(233,237,239,.6); }
.cn-chat__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: #1F2C34; }
.cn-chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(233,237,239,.55); animation: cn-escribe 1.2s ease-in-out infinite; }
.cn-chat__typing i:nth-child(2) { animation-delay: .15s; }
.cn-chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cn-escribe { 0%, 100% { translate: 0 0; opacity: .45; } 50% { translate: 0 -4px; opacity: 1; } }
.cn-cta__nota b { color: #fff; }

/* ─ Marco de navegador para capturas ─ */
.cn-browser {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px rgba(0,0,0,.95);
}
.cn-browser__bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #EEF1F5; border-bottom: 1px solid #E2E6EC; }
.cn-browser__bar i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cn-browser__bar i:nth-child(1) { background: #F87171; }
.cn-browser__bar i:nth-child(2) { background: #FBBF24; }
.cn-browser__bar i:nth-child(3) { background: #34D399; }
.cn-browser__bar span { margin: 0 auto; max-width: 60%; padding: 4px 14px; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 600; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-browser img { display: block; width: 100%; height: auto; }

/* ─ Tarjeta de una web de cliente ─
   La captura es la página ENTERA: al pasar el ratón baja despacio, como
   si alguien la recorriera. En pantallas táctiles se queda arriba. */
.cn-webc {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #0E1018;
    border: 1px solid var(--cn-line);
    box-shadow: var(--cn-shadow);
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cn-webc:hover { border-color: rgba(255,255,255,.22); transform: translateY(-4px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.95); }
.cn-webc__bar { height: 30px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #161A24; border-bottom: 1px solid rgba(255,255,255,.06); }
.cn-webc__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); flex-shrink: 0; }
.cn-webc__bar span { margin-left: 8px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-webc__screen { position: relative; flex: 1; min-height: 190px; overflow: hidden; background: #fff; }
.cn-webc__screen img {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: auto;
    transition: transform 6s cubic-bezier(.45,.05,.25,1);
}
@media (hover: hover) {
    .cn-webc:hover .cn-webc__screen img { transform: translateY(calc(-100% + var(--alto-vista, 260px))); }
}
/* Lo que solo tiene sentido con ratón ("pasa el cursor y se recorre
   sola"): en una pantalla táctil no hay cursor, y la captura no baja. */
@media (hover: none) { .cn-con-raton { display: none; } }
.cn-webc__info {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(12,14,22,.84);
    border: 1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    transition: transform .3s ease;
}
.cn-webc__logo { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #fff; }
.cn-webc__logo.is-dark { background: #0F172A; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.cn-webc__logo img { width: 32px; height: 32px; object-fit: contain; }
.cn-webc__txt { flex: 1; min-width: 0; }
/* El nombre puede ir en dos líneas: "Vinces Fight Training Center" cortado
   en "Vinces Fight Tra…" se veía descuidado. */
.cn-webc__txt b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 800; line-height: 1.22; }
.cn-webc__txt small { display: block; font-size: 12px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-webc__go { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background .2s ease; }
.cn-webc:hover .cn-webc__go { background: var(--cn-red); }
.cn-webc--grande .cn-webc__txt b { font-size: 18px; }

/* ─ Tarjeta de un sistema con demo ─ */
.cn-sys {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: #0E1018;
    border: 1px solid var(--cn-line);
    color: #fff;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cn-sys:hover { border-color: color-mix(in srgb, var(--sc) 60%, transparent); transform: translateY(-4px); box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--sc) 70%, transparent); }
.cn-sys__shot { position: relative; display: block; padding: 16px 16px 0; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--sc) 34%, transparent), transparent 70%); }
.cn-sys__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 10px 10px 0 0; box-shadow: 0 -1px 0 rgba(255,255,255,.1), 0 20px 40px -20px rgba(0,0,0,.9); transition: transform .4s ease; }
.cn-sys:hover .cn-sys__shot img { transform: translateY(-4px); }
.cn-sys__body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; border-top: 1px solid rgba(255,255,255,.06); }
.cn-sys__body small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--sc) 70%, #fff); }
.cn-sys__body b { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; }
.cn-sys__body em { font-style: normal; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.66); }
.cn-sys__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13.5px; font-weight: 800; color: #fff; }
.cn-sys__go svg { color: color-mix(in srgb, var(--sc) 70%, #fff); transition: transform .2s ease; }
.cn-sys:hover .cn-sys__go svg { transform: translate(2px, -2px); }

/* Al saltar desde el índice, el bloque queda bajo la barra y el índice. */
[data-cn-ancla] { scroll-margin-top: calc(var(--nav-h) + 90px); }
.cn-hero.is-paused .mw-track { animation-play-state: paused; }

/* Índice de anclas: una cinta de chips que se queda pegada bajo la barra. */
.cn-index {
    position: sticky;
    top: calc(var(--nav-h) + 10px);
    z-index: 20;
    display: flex;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto clamp(36px, 4vw, 56px);
    padding: 6px;
    border-radius: 999px;
    background: rgba(12,14,22,.82);
    border: 1px solid var(--cn-line-2);
    box-shadow: 0 20px 50px -24px rgba(0,0,0,.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    flex-wrap: wrap;
    justify-content: center;
}
.cn-index a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cn-tx-2);
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.cn-index a i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.cn-index a:hover, .cn-index a.is-on { background: rgba(255,255,255,.08); color: #fff; }

@media (max-width: 980px) {
    
    
    
    
    
    .cn-index { margin-left: -20px; margin-right: -20px; border-radius: 0; border-inline: 0; width: auto; top: var(--nav-h); }
}
@media (max-width: 640px) {
    
    .cn-index { margin-left: -16px; margin-right: -16px; }
}

/* ─ Vitrina de webs reales (cn_vitrina) ─ */
.cn-vitrina { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 18px; }
.cn-vitrina .cn-webc--grande { grid-column: span 2; grid-row: span 2; }
.cn-vitrina .cn-webc__screen { container-type: size; }
@media (hover: hover) {
    .cn-vitrina .cn-webc:hover .cn-webc__screen img { transform: translateY(calc(-100% + 100cqh)); }
}
.cn-vitrina__cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 28px;
    border-radius: 20px;
    border: 1px dashed rgba(255,255,255,.22);
    background: radial-gradient(120% 100% at 100% 0%, rgba(224,18,27,.22), transparent 60%), rgba(255,255,255,.02);
    color: #fff;
    transition: border-color .3s ease, transform .3s ease;
}
.cn-vitrina__cta:hover { border-color: rgba(255,59,68,.7); transform: translateY(-4px); }
.cn-vitrina__plus { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--cn-red); box-shadow: 0 16px 36px -10px var(--cn-red); margin-bottom: 6px; }
.cn-vitrina__cta b { font-size: 21px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; }
.cn-vitrina__cta small { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.66); }
.cn-vitrina__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 800; color: #4ADE80; }

/* La fila de herramientas cierra la sección del proceso. */

/* Preguntas a dos columnas: el encabezado se queda quieto a la izquierda
   mientras se leen las respuestas. */
.cn-split--faq { align-items: start; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.cn-split--faq > .cn-head { position: sticky; top: calc(var(--nav-h) + 32px); margin-bottom: 0; }

/* Para que las piezas sticky (el índice de anclas y el encabezado de las
   preguntas) se peguen de verdad. Es el mismo problema que tuvieron las
   pestañas del Lab (explicado en css/lab.css): main.css pone
   `html, body { overflow-x: hidden }` y .cn-sec lleva overflow:hidden para
   recortar sus luces; cualquiera de los dos convierte al elemento en
   contenedor de scroll y el sticky se queda pegado a él, o sea, a nada.
   `clip` recorta igual sin crear contenedor de scroll. Solo donde hay una
   pieza sticky, y dentro de @supports: sin `clip` todo queda como estaba. */
@supports (overflow: clip) {
    html:has(.cn-index, .cn-split--faq), body:has(.cn-index, .cn-split--faq) { overflow-x: clip; }
    .cn-sec:has(.cn-index, .cn-split--faq) { overflow: clip; }
}

@media (max-width: 1180px) {
    
    .cn-vitrina { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 270px; }
}
@media (max-width: 980px) {
    .cn-split--faq > .cn-head { position: static; margin-bottom: 8px; }
    
    
    
    .cn-vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 250px; }
}
@media (max-width: 640px) {
    
    
    /* En el celular nada se desliza de lado: las webs van una debajo de otra. */
    .cn-vitrina { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
    .cn-vitrina > .cn-webc { height: 300px; }
    .cn-vitrina .cn-webc--grande { grid-column: auto; grid-row: auto; height: 340px; }
}

/* ═══════════════════════════════════════════════════════════
   PIEZAS DE LAS PÁGINAS DE SOLUCIÓN
   (cn_sysgrid, cn_hub, cn_barras y cn_dash en partials/cine.php)
   ═══════════════════════════════════════════════════════════ */

/* ─ Demos de sistemas (cn_sysgrid) ─ */
.cn-sysgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cn-sysgrid .cn-sys { min-height: 100%; }
.cn-sysgrid .cn-sys__body { flex: 1; }
.cn-sysgrid .cn-sys__go { margin-top: auto; padding-top: 12px; }

/* ─ Diagrama de conexiones (cn_hub) ─
   Una línea baja de cada fuente al riel, el riel las junta y otra línea
   baja al destino; por ella corre un punto de luz, el dato que llega. */
.cn-hub { position: relative; }
.cn-hub__fuentes { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.cn-hub__f {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 10px;
    border-radius: 18px;
    text-align: center;
    background: rgba(16,19,28,.88);
    border: 1px solid var(--cn-line-2);
}
.cn-hub__f::after { content: ''; position: absolute; left: 50%; bottom: -26px; width: 2px; height: 26px; translate: -50% 0; background: color-mix(in srgb, var(--acc, #E0121B) 55%, transparent); }
.cn-hub__f i { width: 44px; height: 44px; margin-bottom: 8px; border-radius: 13px; display: grid; place-items: center; font-style: normal; color: var(--acc-hi); background: color-mix(in srgb, var(--acc, #E0121B) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc, #E0121B) 30%, transparent); }
.cn-hub__f b { font-size: 14.5px; font-weight: 800; line-height: 1.2; color: var(--cn-tx); }
.cn-hub__f small { font-size: 12px; line-height: 1.35; color: var(--cn-tx-3); }
.cn-hub__riel { position: relative; height: 82px; }
.cn-hub__riel::before {
    content: '';
    position: absolute;
    top: 26px;
    left: calc(100% / var(--n, 4) / 2);
    right: calc(100% / var(--n, 4) / 2);
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--acc, #E0121B) 55%, transparent);
}
.cn-hub__riel span { position: absolute; left: 50%; top: 26px; bottom: 0; width: 2px; translate: -50% 0; background: var(--acc, #E0121B); }
.cn-hub__riel span::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    translate: -50% 0;
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc, #E0121B) 35%, transparent), 0 0 16px var(--acc, #E0121B);
    animation: cn-baja 1.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes cn-baja { 0% { top: -4px; opacity: 0; } 25% { opacity: 1; } 100% { top: calc(100% - 5px); opacity: 0; } }
.cn-hub__destino {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 14px 24px 14px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--acc, #E0121B) 28%, #10131C), #10131C 70%);
    border: 1px solid color-mix(in srgb, var(--acc, #E0121B) 50%, transparent);
    box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--acc, #E0121B) 70%, transparent);
}
.cn-hub__destino i { width: 50px; height: 50px; flex-shrink: 0; border-radius: 15px; display: grid; place-items: center; font-style: normal; color: #fff; background: var(--acc, #E0121B); box-shadow: 0 10px 24px -8px var(--acc, #E0121B); }
.cn-hub__destino b { display: block; font-size: 17px; font-weight: 900; letter-spacing: -0.015em; color: #fff; }
.cn-hub__destino small { font-size: 13px; color: rgba(255,255,255,.66); }

/* ─ Barras de horas (cn_barras) ─ */
.cn-barras { display: grid; gap: 16px; padding: clamp(26px, 3.4vw, 46px); border-radius: 28px; background: var(--cn-card); border: 1px solid var(--cn-line); }
.cn-barras__fila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; align-items: center; gap: 20px; }
.cn-barras__rot { font-size: 15.5px; line-height: 1.4; color: var(--cn-tx-2); }
.cn-barras__pista { height: 14px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.cn-barras__barra {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--acc, #E0121B) 50%, transparent), var(--acc-hi));
    box-shadow: 0 0 18px -2px var(--acc, #E0121B);
    transition: width 1.3s cubic-bezier(.2,.8,.2,1) var(--d, 0ms);
}
.cn-barras.fx-in .cn-barras__barra { width: var(--w); }
.cn-barras__val { min-width: 96px; text-align: right; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: var(--cn-tx); white-space: nowrap; }
.cn-barras__val small { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--cn-tx-3); }
.cn-barras__total { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding-top: 26px; border-top: 1px dashed var(--cn-line-2); }
.cn-barras__total b { font-size: clamp(48px, 5.4vw, 78px); font-weight: 900; line-height: .95; letter-spacing: -0.05em; color: var(--acc-hi); text-shadow: 0 0 40px color-mix(in srgb, var(--acc, #E0121B) 45%, transparent); }
.cn-barras__total span { max-width: 22ch; font-size: 16px; line-height: 1.45; text-align: right; color: var(--cn-tx-2); }
.cn-barras__total span strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cn-tx-3); }

/* ─ Tablero de muestra (cn_dash) ─ */
.cn-dash {
    --dc: var(--acc, #14B8A6);
    --bh: 150px;
    border-radius: 18px;
    overflow: hidden;
    background: #0C0F17;
    border: 1px solid var(--cn-line-2);
    box-shadow: 0 60px 120px -50px rgba(0,0,0,.95), 0 0 140px -40px color-mix(in srgb, var(--dc) 55%, transparent);
    color: #E8ECF3;
    text-align: left;
}
.cn-dash .cn-browser__bar { background: #141925; border-bottom-color: rgba(255,255,255,.06); }
.cn-dash .cn-browser__bar span { background: rgba(255,255,255,.06); color: rgba(255,255,255,.55); }
.cn-dash__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.cn-dash--completo .cn-dash__cuerpo { grid-template-columns: 190px minmax(0, 1fr); }
.cn-dash__side { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: #0A0D14; border-right: 1px solid rgba(255,255,255,.06); }
.cn-dash__logo { display: flex; align-items: center; gap: 9px; padding: 0 8px 16px; font-size: 13.5px; font-weight: 800; color: #fff; }
.cn-dash__logo i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--dc), color-mix(in srgb, var(--dc) 40%, #000)); }
.cn-dash__side span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); }
.cn-dash__side span.is-on { background: color-mix(in srgb, var(--dc) 16%, transparent); color: #fff; }
.cn-dash__side span.is-on svg { color: var(--dc); }
.cn-dash__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; }
.cn-dash__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.cn-dash__top b { font-size: 16px; font-weight: 800; color: #fff; }
.cn-dash__top small { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.cn-dash__top small i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.cn-dash__filtros { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.05); }
.cn-dash__filtros span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55); }
.cn-dash__filtros .is-on { background: rgba(255,255,255,.1); color: #fff; }
.cn-dash__filtros .cn-dash__pdf { margin-left: 4px; background: var(--dc); color: #fff; }
.cn-dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cn-dash__kpi { position: relative; overflow: hidden; padding: 13px 13px 34px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
.cn-dash__kpi small { display: block; font-size: 11px; color: rgba(255,255,255,.5); }
.cn-dash__kpi b { display: block; margin-top: 5px; font-size: 21px; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
.cn-dash__kpi em { font-style: normal; font-size: 11px; font-weight: 800; color: #34D399; }
.cn-dash__kpi svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 28px; fill: none; stroke: var(--dc); stroke-width: 1.8; opacity: .85; }
.cn-dash__kpi polyline { vector-effect: non-scaling-stroke; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1.6s ease .3s; }
.cn-dash.fx-in .cn-dash__kpi polyline { stroke-dashoffset: 0; }
.cn-dash__graf { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 10px; }
.cn-dash__card { min-width: 0; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
.cn-dash__card > p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cn-dash__card > p b, .cn-dash__tabla > p b { font-size: 13px; color: #fff; }
.cn-dash__card > p small, .cn-dash__tabla > p small { font-size: 11px; color: rgba(255,255,255,.45); }
.cn-dash__bars { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 7px; height: calc(var(--bh) + 18px); padding-bottom: 18px; }
.cn-dash__bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.cn-dash__bar i { display: block; height: 0; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--dc), color-mix(in srgb, var(--dc) 30%, transparent)); transition: height 1s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.cn-dash.fx-in .cn-dash__bar i { height: var(--h); }
.cn-dash__bar:last-child i { background: linear-gradient(180deg, #fff, var(--dc)); box-shadow: 0 0 18px -2px var(--dc); }
.cn-dash__bar em { position: absolute; left: 0; right: 0; bottom: -18px; font-style: normal; font-size: 10px; text-align: center; color: rgba(255,255,255,.4); }
.cn-dash__meta { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--bh) * .72); z-index: 1; border-top: 1px dashed rgba(255,255,255,.4); }
.cn-dash__meta::after { content: 'Meta'; position: absolute; left: 0; top: -17px; font-size: 10px; font-weight: 800; color: rgba(255,255,255,.6); }
.cn-dash__canal { display: flex; flex-direction: column; }
.cn-dash__donut { position: relative; width: 118px; aspect-ratio: 1; margin: 2px auto 14px; display: grid; place-items: center; text-align: center; }
.cn-dash__donut::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(#2DD4BF 0 45%, #60A5FA 45% 75%, #A78BFA 75% 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent 63%, #000 64%);
    mask: radial-gradient(farthest-side, transparent 63%, #000 64%);
}
.cn-dash.fx-in .cn-dash__donut::before { animation: cn-gira 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cn-gira { from { transform: rotate(-120deg) scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
.cn-dash__donut b { display: block; font-size: 15px; font-weight: 900; color: #fff; }
.cn-dash__donut small { font-size: 10px; color: rgba(255,255,255,.5); }
.cn-dash__canal ul { list-style: none; display: grid; gap: 7px; margin-top: auto; }
.cn-dash__canal li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.7); }
.cn-dash__canal li i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.cn-dash__canal li b { margin-left: auto; color: #fff; }
.cn-dash__tabla { padding: 14px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
.cn-dash__tabla > p { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cn-dash__tabla > div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 60px; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 12px; color: rgba(255,255,255,.66); }
.cn-dash__tabla > div b { color: #fff; }
.cn-dash__tabla > div em { font-style: normal; font-weight: 800; text-align: right; color: #34D399; }
/* Un marco para presentarlo grande, con su luz debajo. */
.cn-pantalla { position: relative; max-width: 1140px; margin: 0 auto; }
.cn-pantalla::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: -40px; height: 120px; z-index: -1; border-radius: 50%; background: color-mix(in srgb, var(--acc, #E0121B) 45%, transparent); filter: blur(60px); opacity: .7; }
.cn-pantalla__pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 34px; font-size: 14px; color: var(--cn-tx-3); }
.cn-pantalla__pie span { display: inline-flex; align-items: center; gap: 8px; }
.cn-pantalla__pie svg { color: var(--acc-hi); }

/* ═══════════════════════════════════════════════════════════
   VISUALES PROPIOS DEL HERO (cn_vis_* en partials/cine.php)
   Van dentro de .cn-hero__visual; .cn-hvis los centra en su hueco.
   ═══════════════════════════════════════════════════════════ */
.cn-hvis { position: absolute; inset: 0; display: grid; place-items: center; }

/* Resultado de búsqueda con el anuncio primero (Google Ads) */
.cn-serp {
    position: relative;
    width: min(100%, 560px);
    padding: 18px;
    border-radius: 24px;
    background: rgba(14,17,26,.94);
    border: 1px solid var(--cn-line-2);
    box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 110px -30px color-mix(in srgb, var(--acc, #E0121B) 50%, transparent);
    rotate: -2deg;
    animation: cn-flota 9s ease-in-out infinite;
}
.cn-serp__bar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 18px; border-radius: 999px; background: #1B2130; border: 1px solid rgba(255,255,255,.1); font-size: 14.5px; color: #E8ECF3; }
.cn-serp__bar > svg { flex-shrink: 0; color: rgba(255,255,255,.55); }
.cn-serp__q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-serp__q::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--acc-hi); animation: cn-cursor 1s steps(1) infinite; }
@keyframes cn-cursor { 50% { opacity: 0; } }
.cn-serp__tabs { display: flex; gap: 20px; padding: 14px 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.45); }
.cn-serp__tabs span { padding-bottom: 10px; }
.cn-serp__tabs .is-on { color: #fff; box-shadow: inset 0 -2px 0 var(--acc-hi); }
.cn-serp__res { padding: 14px 10px; }
.cn-serp__res + .cn-serp__res { border-top: 1px solid rgba(255,255,255,.05); }
.cn-serp__u { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.55); }
.cn-serp__u b { font-weight: 800; color: #fff; }
.cn-serp__t { margin-top: 5px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #8AB4F8; }
.cn-serp__d { margin-top: 5px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62); }
.cn-serp__res--ad {
    position: relative;
    margin: 12px -6px 6px;
    padding: 16px 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--acc, #E0121B) 10%, rgba(255,255,255,.03));
    border: 1px solid color-mix(in srgb, var(--acc, #E0121B) 50%, transparent);
    box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--acc, #E0121B) 65%, transparent);
}
.cn-serp__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cn-serp__links span { padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #8AB4F8; background: rgba(138,180,248,.08); border: 1px solid rgba(138,180,248,.22); }
.cn-serp__res:not(.cn-serp__res--ad) { opacity: .45; }
.cn-serp__tu { position: absolute; right: -16px; top: -15px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: var(--acc, #E0121B); box-shadow: 0 12px 26px -8px var(--acc, #E0121B); rotate: 4deg; }

/* Flujo automático: el dato baja por la línea y cada paso se enciende
   cuando le llega (Automatización) */
.cn-flujo { position: relative; width: min(100%, 430px); display: grid; gap: 30px; }
.cn-flujo::before { content: ''; position: absolute; left: 33px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--acc, #E0121B) 75%, transparent), color-mix(in srgb, var(--acc, #E0121B) 18%, transparent)); }
.cn-flujo::after {
    content: '';
    position: absolute;
    left: 29px; top: 34px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc, #E0121B) 40%, transparent), 0 0 18px var(--acc, #E0121B);
    animation: cn-flujo-pulso 4s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cn-flujo-pulso { 0% { top: 34px; opacity: 0; } 8%, 92% { opacity: 1; } 100% { top: calc(100% - 44px); opacity: 0; } }
.cn-flujo__nodo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px 14px 14px;
    border-radius: 18px;
    background: rgba(16,19,28,.92);
    border: 1px solid var(--cn-line-2);
    box-shadow: 0 24px 50px -28px rgba(0,0,0,.9);
    animation: cn-flujo-on 4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1s);
}
.cn-flujo__nodo:nth-child(even) { translate: 28px 0; }
.cn-flujo__nodo:nth-child(even)::before { content: ''; position: absolute; left: -28px; top: 50%; width: 28px; height: 2px; background: color-mix(in srgb, var(--acc, #E0121B) 45%, transparent); }
.cn-flujo__nodo > i { position: relative; z-index: 1; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-style: normal; color: #fff; background: linear-gradient(135deg, var(--acc, #E0121B), color-mix(in srgb, var(--acc, #E0121B) 45%, #000)); }
.cn-flujo__nodo b { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.cn-flujo__nodo small { font-size: 12.5px; color: rgba(255,255,255,.6); }
.cn-flujo__t { margin-left: auto; flex-shrink: 0; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--acc-hi); background: color-mix(in srgb, var(--acc, #E0121B) 14%, transparent); }
@keyframes cn-flujo-on {
    0%, 40%, 100% { border-color: var(--cn-line-2); box-shadow: 0 24px 50px -28px rgba(0,0,0,.9); }
    12%, 26% { border-color: color-mix(in srgb, var(--acc, #E0121B) 75%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc, #E0121B) 14%, transparent), 0 24px 50px -22px color-mix(in srgb, var(--acc, #E0121B) 55%, transparent); }
}

/* Celular con un reel y piezas alrededor (Contenido con IA) */
.cn-reel { position: relative; width: min(100%, 540px); height: min(500px, 100%); }
.cn-reel__phone {
    position: absolute;
    left: 50%; top: 50%;
    translate: -50% -50%;
    z-index: 2;
    width: 236px;
    aspect-ratio: 9 / 18.5;
    padding: 8px;
    border-radius: 36px;
    background: #0B0D13;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 50px 100px -30px rgba(0,0,0,.95), 0 0 100px -30px color-mix(in srgb, var(--acc, #E0121B) 70%, transparent);
}
.cn-reel__pantalla { position: relative; height: 100%; border-radius: 29px; overflow: hidden; background: #111; }
.cn-reel__pantalla img { width: 100%; height: 100%; object-fit: cover; animation: cn-reel-zoom 10s ease-in-out infinite alternate; }
@keyframes cn-reel-zoom { from { transform: scale(1.03); } to { transform: scale(1.16) translateY(-3%); } }
.cn-reel__pantalla::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 22%, transparent 55%, rgba(0,0,0,.82) 100%); }
.cn-reel__top { position: absolute; z-index: 2; left: 16px; right: 16px; top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; color: #fff; }
.cn-reel__rail { position: absolute; z-index: 2; right: 12px; bottom: 96px; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.cn-reel__pie { position: absolute; z-index: 2; left: 14px; right: 52px; bottom: 26px; color: #fff; }
.cn-reel__pie b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.cn-reel__pie b i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--acc, #E0121B), #F59E0B); }
.cn-reel__pie p { margin-top: 6px; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.88); }
.cn-reel__prog { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.cn-reel__prog span { display: block; width: 0; height: 100%; background: #fff; animation: cn-prog 10s linear infinite; }
@keyframes cn-prog { to { width: 100%; } }
.cn-reel__play { position: absolute; z-index: 2; left: 50%; top: 46%; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cn-reel__post { position: absolute; z-index: 1; width: 176px; margin: 0; border-radius: 18px; overflow: hidden; background: #fff; color: #0B1220; box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); animation: cn-flota 8s ease-in-out infinite; }
.cn-reel__post--a { left: 0; top: 7%; rotate: -7deg; }
.cn-reel__post--b { right: 0; bottom: 5%; rotate: 6deg; animation-delay: -3s; }
.cn-reel__post img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cn-reel__post figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 11.5px; font-weight: 800; }
.cn-reel__tag { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(11,13,19,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cn-reel__dots { display: inline-flex; gap: 4px; }
.cn-reel__dots i { width: 5px; height: 5px; border-radius: 50%; background: #CBD5E1; }
.cn-reel__dots i:first-child { background: var(--acc, #E0121B); }
.cn-reel__graf { position: absolute; z-index: 3; right: 3%; top: 5%; width: 152px; padding: 16px 16px 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--acc, #E0121B), color-mix(in srgb, var(--acc, #E0121B) 38%, #000)); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--acc, #E0121B) 80%, #000); rotate: 5deg; animation: cn-flota 9s ease-in-out infinite; animation-delay: -5s; }
.cn-reel__graf small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.cn-reel__graf b { display: block; margin: 6px 0 4px; font-size: 22px; font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; }
.cn-reel__graf span { font-size: 11.5px; opacity: .85; }

@media (max-width: 1180px) {
    .cn-sysgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-dash--completo .cn-dash__cuerpo { grid-template-columns: minmax(0, 1fr); }
    .cn-dash__side { display: none; }
}
@media (max-width: 980px) {
    
    
    
    
    
    
    .cn-hvis { place-items: start center; padding-top: 14px; }
    .cn-serp { width: min(100% - 40px, 460px); padding: 14px; rotate: 0deg; animation: none; }
    .cn-flujo { width: min(100% - 40px, 400px); gap: 18px; }
    .cn-flujo__nodo:nth-child(even) { translate: 0 0; }
    .cn-flujo__nodo:nth-child(even)::before { display: none; }
    .cn-reel { height: 100%; width: min(100%, 420px); }
    .cn-reel__phone { top: 18px; translate: -50% 0; width: 176px; }
    .cn-reel__post { width: 128px; }
    .cn-reel__post--a { left: 4%; top: 30px; }
    .cn-reel__post--b { right: 4%; bottom: auto; top: 110px; }
    .cn-reel__graf { display: none; }
}
@media (max-width: 760px) {
    
    
    
    
    
    
    
    .cn-dash { --bh: 110px; }
    .cn-dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-dash__graf { grid-template-columns: minmax(0, 1fr); }
    .cn-dash__canal { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 18px; }
    .cn-dash__canal > p { grid-column: 1 / -1; }
    .cn-dash__donut { width: 104px; margin: 0; }
    .cn-dash__donut b { font-size: 12.5px; }
    .cn-dash__tabla > div { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 52px; }
    .cn-dash__tabla > div > span:nth-child(2) { display: none; }
    .cn-dash__filtros span:not(.is-on):not(.cn-dash__pdf) { display: none; }
}
@media (max-width: 640px) {
    
    
    
    
    
    .cn-hub__fuentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-hub__f::after, .cn-hub__riel::before { display: none; }
    .cn-hub__riel { height: 52px; }
    .cn-hub__riel span { top: 0; }
    .cn-barras__fila { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
    .cn-barras__pista { grid-column: 1 / -1; grid-row: 2; }
    .cn-barras__val { min-width: 0; font-size: 20px; }
    .cn-barras__total { flex-direction: column; align-items: flex-start; }
    .cn-barras__total span { text-align: left; }
    /* Sin carrusel de lado: dos columnas compactas que se recorren hacia abajo. */
    .cn-sysgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    /* La tarjeta final ocupa la fila entera solo si quedaría sola; si
       hay un hueco al lado de la última demo, lo llena. */
    .cn-sysgrid > .cn-vitrina__cta:nth-child(odd) { grid-column: 1 / -1; }
    .cn-sysgrid > .cn-vitrina__cta:nth-child(even) { padding: 16px 14px; }
    .cn-sysgrid > .cn-vitrina__cta:nth-child(even) b { font-size: 17px; }
    .cn-sysgrid > .cn-vitrina__cta:nth-child(even) small { font-size: 12.5px; }
    .cn-sysgrid .cn-sys { border-radius: 16px; }
    .cn-sysgrid .cn-sys__shot { padding: 10px 10px 0; }
    .cn-sysgrid .cn-sys__body { padding: 12px 12px 14px; gap: 2px; }
    .cn-sysgrid .cn-sys__body small { font-size: 9.5px; letter-spacing: .08em; }
    .cn-sysgrid .cn-sys__body b { font-size: 15.5px; }
    .cn-sysgrid .cn-sys__body em { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .cn-sysgrid .cn-sys__go { margin-top: 8px; font-size: 12.5px; }
    .cn-dash__main { padding: 14px; gap: 10px; }
    .cn-dash__kpi b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-barras__barra { width: var(--w); transition: none; }
    .cn-dash__bar i { height: var(--h); transition: none; }
    .cn-serp, .cn-serp__q::after, .cn-flujo::after, .cn-flujo__nodo, .cn-reel__pantalla img, .cn-reel__prog span, .cn-reel__post, .cn-reel__graf, .cn-hub__riel span::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PIEZAS DE LAS PÁGINAS DE SECTOR
   (cn_logos y cn_rubros en partials/cine.php; la portada con foto es
   cn_hero 'foto')
   ═══════════════════════════════════════════════════════════ */

/* ─ Fila de webs del mismo tamaño (cn_vitrina sin la grande) ─ */
.cn-vitrina--fila { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); grid-auto-rows: 400px; }

/* ─ Logos de clientes de un rubro (cn_logos) ─ */
.cn-logos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cn-logos li { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 190px; text-align: center; }
.cn-logos__img { width: 100%; height: 104px; margin-bottom: 10px; display: grid; place-items: center; padding: 16px 22px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -24px rgba(0,0,0,.9); transition: transform .3s ease; }
.cn-logos__img.is-dark { background: #0F172A; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 20px 40px -24px rgba(0,0,0,.9); }
.cn-logos li:hover .cn-logos__img { transform: translateY(-4px); }
.cn-logos__img img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.cn-logos__img > b { font-size: 15px; font-weight: 900; color: #0B1220; }
.cn-logos li > b { font-size: 14.5px; font-weight: 800; color: var(--cn-tx); }
.cn-logos li > small { font-size: 12.5px; color: var(--cn-tx-3); }

/* ─ Rubros como carteles (cn_rubros, página /sectores) ─ */
.cn-rubros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 400px; gap: 18px; }
.cn-rubro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px;
    border-radius: 28px;
    border: 1px solid var(--cn-line);
    color: #fff;
    transition: border-color .35s ease, box-shadow .35s ease;
}
.cn-rubro picture { position: absolute; inset: 0; z-index: -2; }
.cn-rubro img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.72); transition: transform 1.4s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.cn-rubro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,8,12,.55) 0%, rgba(7,8,12,.05) 30%, rgba(7,8,12,.35) 55%, rgba(7,8,12,.95) 100%); }
.cn-rubro:hover { border-color: color-mix(in srgb, var(--acc, #E0121B) 60%, transparent); box-shadow: 0 50px 90px -50px color-mix(in srgb, var(--acc, #E0121B) 80%, transparent); }
.cn-rubro:hover img { transform: scale(1.06); filter: saturate(1) brightness(.8); }
.cn-rubro__top { display: flex; align-items: center; justify-content: space-between; }
.cn-rubro__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--acc, #E0121B); box-shadow: 0 14px 30px -10px var(--acc, #E0121B); }
.cn-rubro__num { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.45); }
.cn-rubro__info { display: flex; flex-direction: column; gap: 8px; max-width: 34ch; padding-right: 54px; }
.cn-rubro__t { font-size: clamp(26px, 2.4vw, 34px); font-weight: 900; line-height: 1.05; letter-spacing: -0.035em; }
.cn-rubro__d { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.82); }
.cn-rubro__cli { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.cn-rubro__cli small { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cn-rubro__cli em { font-style: normal; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cn-rubro__go { position: absolute; right: 24px; bottom: 26px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); transition: background .25s ease, transform .25s ease; }
.cn-rubro:hover .cn-rubro__go { background: var(--acc, #E0121B); border-color: transparent; transform: translateX(3px); }
.cn-rubro--extra { justify-content: flex-end; gap: 10px; background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--acc, #E0121B) 34%, transparent), transparent 70%), #0E1018; border-style: dashed; border-color: rgba(255,255,255,.22); }
.cn-rubro--extra::after { display: none; }
.cn-rubro__plus { width: 56px; height: 56px; margin-bottom: auto; border-radius: 17px; display: grid; place-items: center; background: var(--acc, #E0121B); box-shadow: 0 16px 36px -10px var(--acc, #E0121B); }
.cn-rubro--extra .cn-rubro__d { max-width: 30ch; color: rgba(255,255,255,.7); }

/* ─ Portada con la foto del sector (cn_hero 'foto') ─
   La foto ocupa la mitad derecha a sangre, se funde hacia el texto y hacia
   abajo, y respira despacio. Encima, dos fichas de lo que hacemos. */
.cn-hfoto {
    position: absolute;
    z-index: 0;
    top: 0; bottom: 0; right: 0;
    left: 38%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, #000 70%, transparent 100%);
    mask-composite: intersect;
}
.cn-hfoto picture, .cn-hfoto img { display: block; width: 100%; height: 100%; }
.cn-hfoto img { object-fit: cover; filter: saturate(.9) brightness(.78); animation: cn-respira 26s ease-in-out infinite alternate; }
@keyframes cn-respira { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.cn-hfoto::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 80% 20%, color-mix(in srgb, var(--acc, #E0121B) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(7,8,12,.35) 0%, transparent 25%); mix-blend-mode: normal; }
.cn-hero--foto .cn-hero__visual { min-height: 460px; }
.cn-hfoto__chip--0 { left: 6%; bottom: 16%; animation-delay: -2s; }
.cn-hfoto__chip--1 { right: 0; top: 14%; animation-delay: -4.5s; }
.cn-hero.is-paused .cn-hfoto img { animation-play-state: paused; }
.cn-hero__tags { margin-top: 22px; }
.cn-hero__tags .cn-tag { height: 32px; padding: 0 14px; background: rgba(255,255,255,.05); font-size: 12.5px; }

@media (max-width: 1180px) {
    .cn-vitrina--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 360px; }
}
@media (max-width: 980px) {
    .cn-rubros { grid-auto-rows: 360px; }
    .cn-hfoto {
        top: calc(var(--topbar-h) + var(--nav-h)); bottom: auto; left: 0; right: 0;
        height: var(--hv-h);
        -webkit-mask-image: none; mask-image: none;
    }
    .cn-hfoto::after { background: linear-gradient(180deg, rgba(7,8,12,.25) 0%, rgba(7,8,12,0) 30%, rgba(7,8,12,.55) 70%, var(--cn-bg) 100%); }
    .cn-hero--foto .cn-hero__visual { min-height: 0; }
    .cn-hero--foto .cn-hero__visual::after { display: none; }
}
@media (max-width: 760px) {
    /* Cada rubro mide lo que pide su contenido (con un mínimo para que la
       foto se vea), y "¿Otro rubro?" queda como una franja baja: con el
       alto de una foto era una caja casi vacía. */
    .cn-rubros { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
    .cn-rubro { min-height: 270px; gap: 40px; padding: 20px; border-radius: 22px; }
    .cn-rubro__num { font-size: 44px; }
    .cn-rubro__go { right: 18px; bottom: 20px; width: 42px; height: 42px; }
    .cn-rubro--extra { min-height: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 18px 70px 18px 18px; }
    .cn-rubro--extra .cn-rubro__plus { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; border-radius: 14px; }
    .cn-rubro--extra .cn-rubro__t { font-size: 22px; }
    .cn-rubro--extra .cn-rubro__d { font-size: 14px; }
    .cn-rubro--extra .cn-rubro__go { top: 50%; bottom: auto; translate: 0 -50%; }
    .cn-logos li { width: calc(50% - 8px); }
}
@media (max-width: 640px) {
    .cn-vitrina--fila { display: grid; grid-template-columns: minmax(0, 1fr); }
    
}
@media (prefers-reduced-motion: reduce) {
    .cn-hfoto img { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   CIERRE A TODO EL ANCHO (cn_cta con 'ancho' => true)
   El mismo cierre, pero como banda de borde a borde: el fondo es la
   sección entera y el contenido va en el contenedor normal.
   ═══════════════════════════════════════════════════════════ */
.cn-ctaband {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(84px, 10vw, 140px) 0;
    background:
        radial-gradient(60% 100% at 92% 0%, color-mix(in srgb, var(--acc, #E0121B) 44%, transparent), transparent 70%),
        radial-gradient(50% 90% at 0% 100%, color-mix(in srgb, var(--acc, #E0121B) 22%, transparent), transparent 70%),
        linear-gradient(180deg, #0E1018 0%, #07080C 100%);
    border-top: 1px solid var(--cn-line-2);
    color: #fff;
}
.cn-ctaband::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 10%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 90% at 85% 10%, #000, transparent 72%);
}
/* Dos aros de luz que respiran detrás, arriba a la derecha. */
.cn-ctaband__aro {
    position: absolute;
    z-index: -1;
    right: -200px; top: -300px;
    width: 820px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--acc, #E0121B) 42%, transparent);
    box-shadow: inset 0 0 140px -50px color-mix(in srgb, var(--acc, #E0121B) 80%, transparent);
    animation: cn-aro 16s ease-in-out infinite alternate;
    pointer-events: none;
}
.cn-ctaband__aro--2 { width: 540px; right: -60px; top: -170px; animation-delay: -8s; opacity: .7; }
@keyframes cn-aro { from { transform: scale(.94) rotate(0deg); } to { transform: scale(1.06) rotate(20deg); } }
.cn-cta--banda { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.cn-cta--banda::before { display: none; }
.cn-cta--banda .cn-h2 { font-size: clamp(36px, 4.8vw, 70px); }
.cn-cta--banda .cn-lead { font-size: clamp(16px, 1.4vw, 20px); }
@media (max-width: 980px) {
    .cn-ctaband__aro { width: 520px; right: -260px; top: -260px; }
    .cn-ctaband__aro--2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-ctaband__aro { animation: none; }
}

/* ─ Cierre con un visual en lugar del chat (cn_cta 'visual') ─ */
.cn-cta__btns { margin-top: 30px; }
.cn-cta__btns .cn-btn--wa { min-height: 60px; padding: 0 30px; font-size: 16.5px; }
.cn-cta > div > .cn-cta__nota { margin-top: 16px; }
.cn-cta__vis { position: relative; }

/* Diagnóstico de ejemplo (cn_vis_diag): cómo queda un negocio con
   WebClicStudio. El anillo y el número arrancan en 68 y suben a 100 cuando
   el cierre aparece en pantalla (fx.js le pone .fx-in); cada barra deja en
   tenue dónde estaba y se llena entera, en verde. */
.cn-diag { position: relative; padding: 26px 10px 32px; }
.cn-diag__card {
    position: relative;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(24,28,40,.94), rgba(12,14,22,.96));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 90px -30px color-mix(in srgb, var(--acc, #E0121B) 60%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    rotate: -1.5deg;
    transition: rotate .6s ease;
}
.cn-diag:hover .cn-diag__card { rotate: 0deg; }
.cn-diag__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cn-diag__logo { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #fff; }
.cn-diag__head b { display: block; font-size: 16px; font-weight: 800; color: #fff; }
.cn-diag__head small { font-size: 12px; color: rgba(255,255,255,.55); }
.cn-diag__gratis { margin-left: auto; flex-shrink: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #052E16; background: #4ADE80; }
.cn-diag__body { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; padding: 34px 0 34px; }
.cn-diag__gauge { position: relative; width: 150px; aspect-ratio: 1; }
.cn-diag__gauge svg { display: block; width: 100%; height: 100%; rotate: -90deg; }
.cn-diag__pista { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10; }
.cn-diag__valor {
    fill: none;
    stroke: var(--acc-hi, #FF3B44);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 32;
    filter: drop-shadow(0 0 6px rgba(74,222,128,.55));
    transition: stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1) .4s, stroke .9s ease .6s;
}
.cn-cta.fx-in .cn-diag__valor { stroke-dashoffset: 0; stroke: #4ADE80; }
/* El número cuenta de 68 a 100 solo con CSS: una propiedad registrada que
   se anima y un contador que la pinta. Sin soporte de @property, sale 100
   directamente. */
@property --cn-diag-n { syntax: '<integer>'; initial-value: 68; inherits: false; }
.cn-diag__num { --cn-diag-n: 68; counter-reset: cn-diag-n var(--cn-diag-n); transition: --cn-diag-n 1.8s cubic-bezier(.2,.8,.2,1) .4s; }
.cn-diag__num::after { content: counter(cn-diag-n); }
.cn-cta.fx-in .cn-diag__num { --cn-diag-n: 100; }
.cn-diag__antes { position: absolute; left: 50%; top: -26px; translate: -50% 0; white-space: nowrap; padding: 4px 9px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); background: rgba(248,113,113,.14); border: 1px solid rgba(248,113,113,.35); }
.cn-diag__antes s { color: #FCA5A5; text-decoration-thickness: 2px; }
.cn-diag__gauge > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cn-diag__gauge b { font-size: 46px; font-weight: 900; line-height: .9; letter-spacing: -0.04em; color: #fff; }
.cn-diag__gauge small { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); }
/* El rótulo va debajo del anillo: dentro no cabía y pisaba el trazo. */
.cn-diag__gauge em { position: absolute; left: 50%; bottom: -24px; translate: -50% 0; white-space: nowrap; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.cn-diag__barras { list-style: none; display: grid; gap: 12px; }
.cn-diag__barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; font-size: 13px; color: rgba(255,255,255,.78); }
.cn-diag__barras b { font-size: 13px; font-weight: 800; color: #4ADE80; }
.cn-diag__barras i { position: relative; grid-column: 1 / -1; height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.cn-diag__barras s { position: absolute; left: 0; top: 0; bottom: 0; width: var(--antes); border-radius: inherit; background: rgba(248,113,113,.45); }
.cn-diag__barras em { position: relative; display: block; width: var(--antes); height: 100%; border-radius: inherit; background: #4ADE80; box-shadow: 0 0 12px -2px #4ADE80; opacity: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1) var(--d, .4s), opacity .3s ease var(--d, .4s); }
.cn-cta.fx-in .cn-diag__barras em { width: 100%; opacity: 1; }
.cn-diag__ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.cn-diag__ruta small { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.cn-diag__paso { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px; font-size: 13.5px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--pc) 22%, rgba(255,255,255,.04)); border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); }
.cn-diag__paso svg { color: color-mix(in srgb, var(--pc) 70%, #fff); }
.cn-diag__ruta > i { font-style: normal; font-weight: 900; color: rgba(255,255,255,.5); }
.cn-diag__chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: rgba(16,19,28,.94);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: cn-flota 7s ease-in-out infinite;
}
.cn-diag__chip svg { color: #4ADE80; }
.cn-diag__chip--a { left: -14px; top: 0; animation-delay: -2s; }
.cn-diag__chip--b { right: -6px; bottom: 4px; animation-delay: -4.5s; }
.cn-diag__chip--b svg { color: #FBBF24; }
@media (max-width: 640px) {
    .cn-diag { padding: 22px 0 28px; }
    .cn-diag__card { rotate: 0deg; padding: 18px 18px 32px; }
    .cn-diag__dom { display: none; }
    .cn-diag__body { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
    .cn-diag__gauge { width: 112px; }
    .cn-diag__gauge b { font-size: 34px; }
    .cn-diag__gauge em { display: none; }
    .cn-diag__chip--a { left: 0; }
    .cn-diag__chip--b { right: 0; }
    .cn-cta__btns .cn-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-diag__chip { animation: none; }
    .cn-diag__valor, .cn-diag__barras em, .cn-diag__num { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   PORTADA CENTRADA (cn_hero 'centro')
   El muro llena todo el fondo, inclinado en 3D; un velo oscurece el centro
   y el texto va centrado encima. Ocupa justo la pantalla.
   ═══════════════════════════════════════════════════════════ */
.cn-hero--centro { display: flex; align-items: center; min-height: 100svh; }
.cn-hero--centro .cn-hero__in {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    min-height: 0;
    padding-top: clamp(36px, 6svh, 80px);
    padding-bottom: clamp(56px, 9svh, 110px);
    text-align: center;
}
.cn-hero--centro .cn-hero__copy { display: flex; flex-direction: column; align-items: center; max-width: 960px; }
.cn-hero--centro .crumbs { justify-content: center; }
.cn-hero--centro .cn-hero__title { max-width: 15em; font-size: clamp(42px, min(5.4vw, 8.6svh), 88px); text-shadow: 0 10px 50px rgba(0,0,0,.6); }
.cn-hero--centro .cn-hero__lead { max-width: 620px; margin-left: auto; margin-right: auto; }
.cn-hero--centro .cn-hero__ctas { justify-content: center; }
.cn-hero--centro .cn-hero__stats { max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; text-align: center; }
.cn-hcentro { position: absolute; inset: 0; z-index: 0; overflow: hidden; perspective: 1600px; }
.cn-hcentro__plano {
    position: absolute;
    left: 50%;
    top: -48%;
    height: 196%;
    display: flex;
    gap: 22px;
    translate: -50% 0;
    transform: rotateX(28deg) rotateZ(-12deg);
    animation: cn-hcentro-entra 1.4s ease .1s both;
}
@keyframes cn-hcentro-entra { from { opacity: 0; } to { opacity: 1; } }
.cn-hcentro .mw-col { --col-w: 270px; --gap: 22px; }
.cn-hcentro__velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 46% 58% at 50% 54%, rgba(7,8,12,.96) 0%, rgba(7,8,12,.9) 46%, rgba(7,8,12,.55) 76%, rgba(7,8,12,.15) 100%),
        radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--acc, #E0121B) 22%, transparent), transparent 70%),
        linear-gradient(180deg, #07080C 0%, rgba(7,8,12,0) 22%, rgba(7,8,12,0) 76%, #07080C 100%);
}
.cn-hero--centro .cn-hero__luz { display: none; }
.cn-hero--centro.is-paused .mw-track { animation-play-state: paused; }

@media (max-width: 980px) {
    .cn-hero--centro { min-height: 0; display: block; }
    .cn-hero--centro .cn-hero__in { padding-top: clamp(48px, 8svh, 80px); padding-bottom: 64px; }
    .cn-hero--centro .cn-hero__copy { margin-top: 0; order: 0; }
    .cn-hcentro { perspective: none; }
    /* En px y no en %: con % el muro dependía del alto de la portada, y
       cuando llega la fuente y el título se reacomoda, se movía entero
       (Google lo cuenta como salto de diseño, CLS 0,44). */
    .cn-hcentro__plano { top: -240px; height: 1300px; transform: rotate(-10deg); gap: 14px; }
    .cn-hcentro .mw-col { --col-w: 180px; --gap: 14px; }
    .cn-hcentro__velo { background: radial-gradient(ellipse 80% 55% at 50% 50%, rgba(7,8,12,.95) 0%, rgba(7,8,12,.86) 60%, rgba(7,8,12,.55) 100%), linear-gradient(180deg, #07080C 0%, rgba(7,8,12,0) 18%, rgba(7,8,12,0) 80%, #07080C 100%); }
}
@media (max-width: 560px) {
    .cn-hcentro .mw-col:nth-child(-n+1), .cn-hcentro .mw-col:nth-last-child(-n+1) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-hcentro__plano { animation: none; }
}

/* ─ El formulario de Contacto, oscuro ─
   Era una tarjeta blanca a propósito ("un formulario blanco invita a
   escribir"), pero sobre el sitio oscuro se veía como un pegote. La
   cabecera roja se queda: es la que dice "aquí se escribe". */
.ct2.sec--contacto .form-card { background: #0E1018; border: 1px solid rgba(255,255,255,.1); }
.ct2.sec--contacto .form-card__body { background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%); }
.ct2.sec--contacto .field label { color: var(--cn-tx); }
.ct2.sec--contacto .field label .opt { color: var(--cn-tx-3); }
.ct2.sec--contacto .field input, .ct2.sec--contacto .field select, .ct2.sec--contacto .field textarea { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: #fff; }
.ct2.sec--contacto .field input::placeholder, .ct2.sec--contacto .field textarea::placeholder { color: rgba(255,255,255,.38); }
.ct2.sec--contacto .field input:hover, .ct2.sec--contacto .field textarea:hover { border-color: rgba(255,255,255,.24); }
.ct2.sec--contacto .field input:focus, .ct2.sec--contacto .field select:focus, .ct2.sec--contacto .field textarea:focus { background: rgba(255,255,255,.08); border-color: var(--acc-hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 24%, transparent); }
.ct2.sec--contacto .field select option { background: #0E1018; color: #fff; }
/* El autocompletado de Chrome pinta el campo de blanco: se tapa con sombra. */
.ct2.sec--contacto .field input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; box-shadow: 0 0 0 1000px #171A24 inset; }
.ct2.sec--contacto .serv-chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: var(--cn-tx); }
.ct2.sec--contacto .serv-chip i { color: var(--cn-tx-3); }
.ct2.sec--contacto .serv-chip:hover { border-color: var(--acc-hi); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.ct2.sec--contacto .serv-chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.ct2.sec--contacto .serv-chip.on i { color: #fff; }
.ct2 .form-wa { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); color: #DCFCE7; }
.ct2 .form-wa:hover { background: rgba(34,197,94,.17); border-color: rgba(74,222,128,.6); }
.ct2 .form-wa strong { color: #fff; }
.ct2 .form-wa > .fa-whatsapp, .ct2 .form-wa__go { color: #4ADE80; }
.ct2 .form-tranqui li { color: var(--cn-tx-2); }
.ct2 .form-tranqui i { color: #4ADE80; }
.ct2 .form-note { color: var(--cn-tx-3); }

/* ─ La propuesta que llega por WhatsApp (cn_vis_propuesta) ─ */
.cn-prop { position: relative; padding: 26px 10px 18px; }
.cn-prop__hoja {
    position: relative;
    padding: 22px 22px 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(24,28,40,.95), rgba(12,14,22,.97));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 90px -30px color-mix(in srgb, var(--pc) 60%, transparent);
    rotate: 1.5deg;
    transition: rotate .6s ease;
}
.cn-prop:hover .cn-prop__hoja { rotate: 0deg; }
.cn-prop__hoja::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 20%, transparent)); }
.cn-prop__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cn-prop__logo { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #fff; }
.cn-prop__head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.cn-prop__head b { display: block; font-size: 17px; font-weight: 900; letter-spacing: -0.015em; color: #fff; }
.cn-prop__sello { margin-left: auto; flex-shrink: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #052E16; background: #4ADE80; }
.cn-prop__lista { list-style: none; display: grid; gap: 11px; padding: 18px 0; }
.cn-prop__lista li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: rgba(255,255,255,.86); opacity: .25; translate: 0 6px; transition: opacity .5s ease var(--d), translate .5s ease var(--d); }
.cn-cta.fx-in .cn-prop__lista li { opacity: 1; translate: 0 0; }
.cn-prop__lista i { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; font-style: normal; color: #fff; background: var(--pc); box-shadow: 0 6px 14px -6px var(--pc); }
.cn-prop__datos { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; padding: 14px 0; border-top: 1px dashed rgba(255,255,255,.14); border-bottom: 1px dashed rgba(255,255,255,.14); }
.cn-prop__datos span { display: flex; flex-direction: column; gap: 3px; }
.cn-prop__datos small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.cn-prop__datos b { font-size: 14px; font-weight: 800; color: #fff; }
.cn-prop__pie { display: flex; align-items: center; gap: 8px; padding-top: 14px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.6); }
.cn-prop__pie svg { color: #4ADE80; }
.cn-prop__pie em { margin-left: auto; font-style: normal; font-weight: 800; color: #60A5FA; }
/* Abajo a la derecha: arriba tapaba el logo de la cabecera. */
.cn-prop .cn-diag__chip--a { left: auto; top: auto; right: 26px; bottom: -2px; }
@media (max-width: 640px) {
    .cn-prop { padding: 22px 0 10px; }
    .cn-prop__hoja { rotate: 0deg; padding: 18px; }
    .cn-prop__datos b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-prop__lista li { opacity: 1; translate: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   PIEZAS DE "NOSOTROS"
   ═══════════════════════════════════════════════════════════ */

/* ─ Portada: las tres placas de la marca flotando en el tiempo ─ */
.cn-marca3 { position: relative; width: min(100%, 540px); height: min(100%, 470px); }
.cn-marca3__linea {
    position: absolute;
    left: 12%; top: 16%;
    width: 72%; height: 66%;
    border-top: 2px dashed rgba(255,255,255,.18);
    border-right: 2px dashed rgba(255,255,255,.18);
    border-top-right-radius: 60px;
}
.cn-marca3__placa {
    position: absolute;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 26px 30px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 40px 80px -30px rgba(0,0,0,.95);
    animation: cn-flota 9s ease-in-out infinite;
}
.cn-marca3__placa img { display: block; max-width: 100%; height: auto; max-height: 90px; width: auto; }
.cn-marca3__anio {
    position: absolute;
    left: 50%; top: -16px;
    translate: -50% 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
    color: #fff;
    background: #1A1E29;
    border: 1px solid rgba(255,255,255,.18);
    white-space: nowrap;
}
.cn-marca3__placa--1 { left: 0; top: 4%; width: 46%; opacity: .55; filter: grayscale(.6); rotate: -6deg; animation-delay: -1s; }
.cn-marca3__placa--2 { right: 2%; top: 22%; width: 52%; opacity: .78; filter: grayscale(.3); rotate: 4deg; animation-delay: -4s; }
.cn-marca3__placa--3 {
    left: 10%; bottom: 2%;
    width: 70%;
    padding: 36px 40px;
    rotate: -2deg;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 50px 100px -30px rgba(0,0,0,.95), 0 0 110px -20px rgba(224,18,27,.65);
    animation-delay: -6s;
}
.cn-marca3__placa--3 img { max-height: 110px; }
.cn-marca3__placa--3 .cn-marca3__anio { background: #E0121B; border-color: #E0121B; box-shadow: 0 10px 24px -8px #E0121B; }

/* ─ Valores: cinta de palabras grandes ─ */
.cn-cinta {
    position: relative;
    overflow: hidden;
    padding: 30px 0;
    background: #0A0C13;
    border-block: 1px solid var(--cn-line);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.cn-cinta__track { display: flex; width: max-content; animation: cn-cinta 46s linear infinite; }
.cn-cinta:hover .cn-cinta__track { animation-play-state: paused; }
@keyframes cn-cinta { to { transform: translateX(-50%); } }
.cn-cinta__fila { list-style: none; display: flex; align-items: center; flex-shrink: 0; }
.cn-cinta__fila li {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
    font-size: clamp(34px, 4.6vw, 64px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.4);
}
.cn-cinta__fila li:nth-child(odd) { color: #fff; -webkit-text-stroke: 0; }
.cn-cinta__fila li::after { content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: #E0121B; box-shadow: 0 0 18px #E0121B; }

/* ─ Misión y visión ─ */
.cn-mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cn-mv__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(28px, 3.4vw, 46px);
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(224,18,27,.18), rgba(16,19,28,.9) 55%);
    border: 1px solid rgba(224,18,27,.3);
}
.cn-mv__card--b { background: linear-gradient(155deg, rgba(99,102,241,.2), rgba(16,19,28,.9) 55%); border-color: rgba(99,102,241,.32); }
.cn-mv__card::after { content: ''; position: absolute; right: -60px; bottom: -60px; z-index: -1; width: 220px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 30px rgba(255,255,255,.02), 0 0 0 60px rgba(255,255,255,.015); }
.cn-mv__ico { width: 58px; height: 58px; margin-bottom: 22px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: #E0121B; box-shadow: 0 14px 30px -10px #E0121B; }
.cn-mv__card--b .cn-mv__ico { background: #6366F1; box-shadow: 0 14px 30px -10px #6366F1; }
.cn-mv__card h3 { margin-bottom: 12px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 900; letter-spacing: -0.03em; color: #fff; }
.cn-mv__card p { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.78); }

/* ─ Línea de tiempo de la marca ─ */
.cn-tl { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cn-tl::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(224,18,27,.7)); }
.cn-tl__hito { position: relative; display: flex; flex-direction: column; padding-top: 44px; }
.cn-tl__punto { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #10131C; border: 2px solid rgba(255,255,255,.35); }
.cn-tl__hito.is-hoy .cn-tl__punto { background: #E0121B; border-color: #E0121B; box-shadow: 0 0 0 6px rgba(224,18,27,.22), 0 0 20px #E0121B; }
.cn-tl__anio { position: absolute; left: 32px; top: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; color: #fff; }
.cn-tl__hito.is-hoy .cn-tl__anio { color: #FF3B44; }
.cn-tl__placa { display: grid; place-items: center; height: 170px; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); transition: transform .35s ease; }
.cn-tl__hito:hover .cn-tl__placa { transform: translateY(-4px); }
.cn-tl__hito:not(.is-hoy) .cn-tl__placa img { filter: grayscale(.4); opacity: .85; }
.cn-tl__placa img { max-width: 100%; max-height: 110px; width: auto; height: auto; }
.cn-tl__hito h3 { margin: 22px 0 8px; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--cn-tx); }
.cn-tl__hito p { font-size: 15px; line-height: 1.6; color: var(--cn-tx-2); }

@media (max-width: 980px) {
    /* Más bajo que el hueco: el texto sube 40 px sobre el visual y tapaba la placa de hoy. */
    .cn-marca3 { width: min(100% - 40px, 420px); height: calc(100% - 56px); }
    .cn-marca3__placa { padding: 16px 20px; border-radius: 18px; }
    .cn-marca3__placa img { max-height: 54px; }
    .cn-marca3__placa--3 { padding: 22px 26px; }
    .cn-marca3__placa--3 img { max-height: 70px; }
    .cn-mv { grid-template-columns: minmax(0, 1fr); }
    .cn-tl { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .cn-tl::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(224,18,27,.7)); }
    .cn-tl__hito { padding: 0 0 0 40px; }
    .cn-tl__punto { top: 6px; }
    .cn-tl__anio { position: static; margin-bottom: 12px; }
}
/* En el celular, misión, visión e historia más compactas: el icono al lado
   del título y las placas de los logos más bajas. */
@media (max-width: 640px) {
    .cn-mv__card { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 0 14px; padding: 22px 20px; }
    .cn-mv__ico { width: 46px; height: 46px; margin: 0; border-radius: 14px; }
    .cn-mv__card h3 { margin: 0; font-size: 22px; }
    .cn-mv__card p { grid-column: 1 / -1; margin-top: 14px; font-size: 15px; line-height: 1.6; }
    .cn-tl { gap: 28px; }
    .cn-tl__anio { margin-bottom: 10px; font-size: 22px; }
    .cn-tl__placa { height: 108px; padding: 16px; border-radius: 18px; }
    .cn-tl__placa img { max-height: 70px; }
    .cn-tl__hito h3 { margin: 16px 0 6px; font-size: 18px; }
    .cn-tl__hito p { font-size: 14.5px; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-marca3__placa, .cn-cinta__track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   PIEZAS DE "CONTACTO"
   ═══════════════════════════════════════════════════════════ */

/* ─ Portada: el radar de canales (cn_vis_canales) ─ */
.cn-canales { position: relative; width: min(100%, 520px); aspect-ratio: 1; max-height: 100%; }
.cn-canales__anillo {
    position: absolute;
    left: 50%; top: 50%;
    width: 38%; aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    border: 1px solid rgba(255,59,68,.4);
    box-shadow: inset 0 0 60px -20px rgba(224,18,27,.6);
    animation: cn-radar 4.5s ease-out infinite;
}
.cn-canales__anillo--2 { animation-delay: -1.5s; }
.cn-canales__anillo--3 { animation-delay: -3s; }
@keyframes cn-radar { 0% { transform: scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.cn-canales__centro {
    position: absolute;
    left: 50%; top: 50%;
    width: 128px; height: 128px;
    translate: -50% -50%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #FF5A61, #E0121B 55%, #7F0A10);
    box-shadow: 0 0 0 10px rgba(224,18,27,.14), 0 30px 70px -20px rgba(224,18,27,.9);
}
.cn-canales__centro svg { translate: -3px 3px; }
.cn-canal {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: 18px;
    background: rgba(16,19,28,.92);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 50px -24px rgba(0,0,0,.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    white-space: nowrap;
    animation: cn-flota 8s ease-in-out infinite;
}
.cn-canal > i { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; font-style: normal; }
.cn-canal b { display: block; font-size: 15px; font-weight: 800; }
.cn-canal small { font-size: 12.5px; color: rgba(255,255,255,.62); }
.cn-canal--wa { left: 0; top: 10%; animation-delay: -1s; }
.cn-canal--wa > i { color: #fff; background: #22C55E; box-shadow: 0 10px 24px -8px #22C55E; }
.cn-canal--mail { right: 0; top: 30%; animation-delay: -3s; }
.cn-canal--mail > i { color: #fff; background: #E0121B; box-shadow: 0 10px 24px -8px #E0121B; }
.cn-canal--hora { left: 4%; bottom: 14%; animation-delay: -5s; }
.cn-canal--hora > i { color: #FBBF24; background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.35); }
.cn-canal--24 { right: 8%; bottom: 6%; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px 20px; background: linear-gradient(135deg, #22C55E, #15803D); border-color: transparent; animation-delay: -6.5s; }
.cn-canal--24 b { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.cn-canal--24 small { color: rgba(255,255,255,.85); font-weight: 700; }

/* ─ Formulario y datos ─ */
.ct2 .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); }
.ct2 .form-card { border-radius: 28px; border: 0; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); }
.ct2-aside { display: flex; flex-direction: column; gap: 16px; }
.ct2-persona { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 22px; background: linear-gradient(155deg, rgba(224,18,27,.2), rgba(16,19,28,.92) 60%); border: 1px solid rgba(224,18,27,.32); }
.ct2-persona__av { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; background: #fff; box-shadow: 0 12px 26px -10px rgba(224,18,27,.7); }
.ct2-persona h3 { margin-bottom: 6px; font-size: 18px; font-weight: 900; letter-spacing: -0.015em; color: #fff; }
.ct2-persona p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.75); }
.ct2-persona__on { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #4ADE80; }
.ct2-persona__on i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.ct2-gar { list-style: none; display: grid; gap: 10px; }
.ct2-gar li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--cn-card); border: 1px solid var(--cn-line); font-size: 14.5px; line-height: 1.5; color: var(--cn-tx-2); }
.ct2-gar li > i { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-style: normal; color: var(--acc-hi); background: color-mix(in srgb, var(--acc, #E0121B) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc, #E0121B) 32%, transparent); }
.ct2-gar strong { color: #fff; }
/* Uno por fila: a dos columnas el correo y el horario se cortaban. */
.ct2-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ct2-dato { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border-radius: 18px; background: var(--cn-card); border: 1px solid var(--cn-line); color: #fff; transition: border-color .2s ease, transform .2s ease; }
a.ct2-dato:hover { border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.ct2-dato > i { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-style: normal; color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); }
.ct2-dato > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct2-dato small { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55); }
.ct2-dato b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct2-dato--wa { grid-column: 1 / -1; padding: 16px 18px; background: linear-gradient(135deg, rgba(34,197,94,.2), rgba(34,197,94,.06)); border-color: rgba(34,197,94,.4); }
.ct2-dato--wa > i { color: #fff; background: #22C55E; box-shadow: 0 10px 22px -8px #22C55E; }
.ct2-dato--wa b { font-size: 19px; font-weight: 900; }
.ct2-dato--wa > svg:last-child { flex-shrink: 0; color: #4ADE80; }

@media (max-width: 980px) {
    .cn-canales { width: min(100% - 40px, calc(var(--hv-h, 300px) - 24px)); }
    .cn-canales__centro { width: 92px; height: 92px; }
    .cn-canales__centro svg { width: 34px; height: 34px; }
    .cn-canal { padding: 8px 12px 8px 8px; gap: 9px; border-radius: 14px; }
    .cn-canal > i { width: 34px; height: 34px; border-radius: 10px; }
    .cn-canal b { font-size: 13px; }
    .cn-canal small { font-size: 11px; }
    .cn-canal--24 b { font-size: 22px; }
    .ct2 .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Tablet y celular: el radar no cabe y sus cuatro fichas, puestas a mano
   alrededor del centro, se montaban unas sobre otras. Aquí son una rejilla
   de 2 x 2 con los anillos detrás, de adorno. */
@media (max-width: 980px) {
    .cn-hero:has(.cn-canales) .cn-hero__visual { height: auto; overflow: visible; margin: 0; padding: 18px 0 4px; -webkit-mask-image: none; mask-image: none; }
    .cn-hero:has(.cn-canales) .cn-hero__copy { margin-top: 30px; }
    .cn-hero:has(.cn-canales) .cn-hvis { position: relative; }
    .cn-canales { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: auto; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cn-canales__centro { display: none; }
    .cn-canales__anillo { width: 46%; }
    .cn-canal { position: relative; inset: auto; z-index: 1; min-width: 0; white-space: normal; animation: none; }
    .cn-canal > span { min-width: 0; }
    .cn-canal b, .cn-canal small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cn-canal--24 { flex-direction: row; align-items: center; gap: 10px; }
    .cn-canal--24 small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-canales__anillo, .cn-canal { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   PORTADA COMPACTA (cn_hero 'compacto' => true) y CONFIGURADOR
   ═══════════════════════════════════════════════════════════ */
.cn-hero--compacto.cn-hero--centro { min-height: 0; }
.cn-hero--compacto .cn-hero__in { padding-top: clamp(28px, 5svh, 64px); padding-bottom: clamp(44px, 7svh, 80px); }
.cn-hero--compacto .cn-hero__title { font-size: clamp(38px, min(4.6vw, 7.6svh), 74px); }
.cn-hero--centro .cn-hero__tags { justify-content: center; }

/* El configurador de "Tu solución": los rubros como tarjetas grandes */
.cfg-sec .cfg-rubros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1000px; margin: 0 auto; }
.cfg-sec .cfg-rubro {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 14px 20px 14px 14px;
    border-radius: 20px;
    background: var(--cn-card);
    border: 1px solid var(--cn-line);
    color: #fff;
    font: 800 16px/1.2 var(--font);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, background .25s ease, box-shadow .25s ease;
}
.cfg-sec .cfg-rubro i {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: var(--acc-hi);
    background: color-mix(in srgb, var(--acc) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
    transition: background .2s ease, color .2s ease;
}
.cfg-sec .cfg-rubro:hover { border-color: color-mix(in srgb, var(--acc) 55%, transparent); transform: translateY(-3px); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--acc) 70%, transparent); }
.cfg-sec .cfg-rubro:hover i { background: var(--acc); color: #fff; }
.cfg-sec .cfg-rubro.on { background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 50%, #000)); border-color: transparent; box-shadow: 0 24px 50px -22px var(--acc); }
.cfg-sec .cfg-rubro.on i { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.cfg-sec .cfg-salida.tiene { margin-top: 34px; }
.cfg-sec .cfg-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(24px, 3.2vw, 44px);
    border-radius: 30px;
    background: radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid color-mix(in srgb, var(--acc) 34%, rgba(255,255,255,.08));
    animation: cn-entra .5s ease both;
}
.cfg-sec .cfg-panel__dolor { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--cn-line); }
.cfg-sec .cfg-panel__dolor p { font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; color: #fff; }
.cfg-sec .cfg-panel__necesita li { color: var(--cn-tx-2); }
.cfg-sec .cfg-demo, .cfg-sec .cfg-web { border-radius: 20px; }
@media (max-width: 980px) {
    .cfg-sec .cfg-rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cfg-sec .cfg-rubro { min-height: 70px; font-size: 14.5px; padding: 12px; gap: 11px; }
    .cfg-sec .cfg-rubro i { width: 42px; height: 42px; font-size: 17px; }
}
@media (max-width: 640px) {
    .cfg-sec .cfg-rubro { flex-direction: row; }
}

/* ─ Configurador v3 (Tu solución): tres pasos, el problema con su prueba
     (demo o web real) a un lado y la propuesta con el WhatsApp al otro ─ */
.cfg-pasos { list-style: none; display: flex; justify-content: center; gap: 10px; max-width: 780px; margin: -4px auto 26px; }
.cfg-pasos li { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; padding: 9px 16px 9px 9px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--cn-tx-3); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: color .3s ease, background .3s ease, border-color .3s ease; }
.cfg-pasos b { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; background: rgba(255,255,255,.1); transition: background .3s ease; }
.cfg-pasos li:first-child,
.cfg-sec:has(.cfg-salida.tiene) .cfg-pasos li { color: #fff; background: color-mix(in srgb, var(--acc) 12%, transparent); border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.cfg-pasos li:first-child b,
.cfg-sec:has(.cfg-salida.tiene) .cfg-pasos li b { background: var(--acc); }

.cfg-sec .cfg-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.cfg-v3 { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.cfg-v3__izq { display: flex; flex-direction: column; gap: 18px; }
.cfg-v3__dolor { position: relative; padding-left: 36px; font-size: clamp(19px, 1.9vw, 25px); font-weight: 800; line-height: 1.35; letter-spacing: -0.015em; color: #fff; }
.cfg-v3__comilla { position: absolute; left: 0; top: -8px; font: 900 52px/1 Georgia, 'Times New Roman', serif; color: var(--acc-hi); }
.cfg-v3__prueba { display: flex; flex-direction: column; gap: 14px; }
.cfg-v3__prueba .cn-tv-web { width: 100%; }
.cfg-v3__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.cfg-v3__fila p { flex: 1 1 220px; font-size: 14px; line-height: 1.5; color: var(--cn-tx-2); }
.cfg-v3__charla { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.18); }
.cfg-v3__charla-ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--acc); box-shadow: 0 14px 30px -12px var(--acc); }
.cfg-v3__charla b { display: block; font-size: 18px; font-weight: 900; color: #fff; }
.cfg-v3__charla p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--cn-tx-2); }
.cfg-v3__web { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 18px; color: #fff; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); transition: border-color .25s ease, transform .25s ease; }
.cfg-v3__web:hover { border-color: color-mix(in srgb, var(--acc) 55%, transparent); transform: translateY(-2px); }
.cfg-v3__web-img { display: block; height: 72px; overflow: hidden; border-radius: 10px; background: #fff; }
.cfg-v3__web-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cfg-v3__web-txt small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc-hi); }
.cfg-v3__web-txt b { display: block; margin-top: 2px; font-size: 15.5px; font-weight: 900; }
.cfg-v3__web-txt em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--cn-tx-3); }
.cfg-v3__web-go { color: var(--cn-tx-3); }
.cfg-v3__prop { --pc: var(--acc); }
.cfg-v3__eti { margin-top: 16px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cn-tx-3); }
.cfg-v3__lista { min-height: 0; padding: 12px 0 14px; }
.cfg-v3__lista li { align-items: flex-start; line-height: 1.45; }
.cfg-v3__mas { margin: -4px 0 14px; }
.cfg-v3__mas summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--acc-hi); }
.cfg-v3__mas summary::-webkit-details-marker { display: none; }
.cfg-v3__mas[open] summary { display: none; }
.cfg-v3__mas .cfg-v3__lista { padding: 0; }

.cfg-incl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; max-width: 980px; margin: 34px auto 0; padding: 14px 24px; border-radius: 999px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.cfg-incl__eti { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cn-tx-3); }
.cfg-incl ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.cfg-incl li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #fff; }
.cfg-incl i { display: grid; color: var(--acc-hi); }

@media (max-width: 980px) {
    .cfg-v3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .cfg-pasos { gap: 6px; margin-bottom: 22px; }
    .cfg-pasos li { flex-direction: column; gap: 6px; padding: 10px 6px; border-radius: 16px; font-size: 12px; text-align: center; }
    .cfg-v3__dolor { padding-left: 30px; font-size: 18px; }
    .cfg-v3__comilla { font-size: 44px; }
    .cfg-v3__fila .cn-btn { width: 100%; }
    .cfg-v3__web { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; padding-right: 14px; }
    .cfg-v3__web-img { height: 60px; }
    .cfg-incl { flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; }
    .cfg-incl ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; width: 100%; }
    .cfg-incl li { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════
   BLOG (blog.php): el artículo destacado y los estados vacíos, en oscuro.
   Las tarjetas y los filtros ya están en css/cine-paginas.css.
   ═══════════════════════════════════════════════════════════ */
.blg2 .feat-post {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    margin-bottom: 40px;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(90% 100% at 100% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%), #0E1018;
    border: 1px solid color-mix(in srgb, var(--acc) 30%, rgba(255,255,255,.08));
    color: #fff;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blg2 .feat-post:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--acc) 70%, transparent); }
.blg2 .feat-post__img { position: relative; min-height: 320px; overflow: hidden; background: #151925; }
.blg2 .feat-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.blg2 .feat-post:hover .feat-post__img img { transform: scale(1.05); }
.blg2 .feat-post__badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 50%, #000)); box-shadow: 0 10px 24px -8px var(--acc); }
.blg2 .feat-post__b { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3.4vw, 44px); }
.blg2 .feat-post__cat { display: inline-block; width: fit-content; margin-bottom: 16px; padding: 6px 13px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.blg2 .feat-post__b h2 { margin-bottom: 13px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; line-height: 1.12; letter-spacing: -0.025em; color: #fff; }
.blg2 .feat-post__b p { margin-bottom: 18px; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.72); }
.blg2 .feat-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 20px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.5); }
.blg2 .feat-post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.blg2 .feat-post__meta i { color: var(--acc-hi); }
.blg2 .feat-post .post-card__more { color: var(--acc-hi); font-weight: 800; }
.blg2 .feat-post .post-card__more i { transition: transform .2s ease; }
.blg2 .feat-post:hover .post-card__more i { transform: translateX(4px); }
.blg2 .skel { background: rgba(255,255,255,.06); border-radius: 18px; animation: blg2-skel 1.4s ease-in-out infinite; }
@keyframes blg2-skel { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.blg2-vacio { padding: 56px 20px; text-align: center; }
.blg2-vacio > i { display: block; margin-bottom: 14px; font-size: 42px; color: var(--acc-hi); }
.blg2-vacio h2 { margin-bottom: 8px; font-size: 22px; font-weight: 900; color: #fff; }
.blg2-vacio p { max-width: 420px; margin: 0 auto 18px; color: var(--cn-tx-2); }
@media (max-width: 640px) {
    /* Nada que deslizar de lado: las categorías se parten en líneas y las
       etiquetas (#...) se buscan con el buscador. */
    .blg2 .blog-chip[data-chip^="tag:"] { display: none; }
}
@media (max-width: 760px) {
    .blg2 .feat-post { grid-template-columns: minmax(0, 1fr); }
    .blg2 .feat-post__img { min-height: 220px; }
}

/* ═══════════════════════════════════════════════════════════
   PÁGINAS QUE VENDEN (partials/cine.php: cn_tour, cn_tv_*, cn_armador
   y la portada 'escena'; comportamiento en js/cine.js)
   Menos lectura y más "mira": cada pieza enseña lo que antes se
   explicaba en párrafos.
   ═══════════════════════════════════════════════════════════ */

/* ─ "Mira cómo funciona" ─ */
.cn-tour { --c: var(--acc-hi, #FF3B44); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.cn-tour__pasos { display: flex; flex-direction: column; gap: 10px; }
.cn-tour__paso {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 18px 20px 22px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--cn-tx-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.cn-tour__paso:hover { background: rgba(255,255,255,.03); color: #fff; }
.cn-tour__paso.is-on { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, rgba(255,255,255,.03)), rgba(255,255,255,.015)); border-color: color-mix(in srgb, var(--c) 42%, transparent); }
.cn-tour__paso:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.cn-tour__ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; color: var(--cn-tx-2); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.cn-tour__paso.is-on .cn-tour__ico { color: #07080C; background: var(--c); border-color: transparent; box-shadow: 0 12px 26px -10px var(--c); }
.cn-tour__txt { display: flex; flex-direction: column; min-width: 0; }
.cn-tour__txt small { font-size: 11px; font-weight: 900; letter-spacing: .14em; color: var(--c); }
.cn-tour__txt b { margin-top: 3px; font-size: clamp(18px, 1.55vw, 22px); font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; }
/* La línea de cada paso solo se abre en el activo: se lee una a la vez. */
.cn-tour__txt em { max-height: 0; overflow: hidden; opacity: 0; font-style: normal; font-size: 15px; line-height: 1.55; color: var(--cn-tx-2); transition: max-height .45s ease, opacity .3s ease, margin .3s ease; }
.cn-tour__paso.is-on .cn-tour__txt em { max-height: 90px; opacity: 1; margin-top: 6px; }
.cn-tour__bar { position: absolute; left: 20px; right: 20px; bottom: 9px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.cn-tour__paso.is-on .cn-tour__bar { opacity: 1; }
.cn-tour__bar i { display: block; width: 0; height: 100%; background: var(--c); }
.cn-tour.is-auto .cn-tour__paso.is-on .cn-tour__bar i { animation: cn-tour-avanza var(--dur, 6.5s) linear forwards; }
.cn-tour.is-paused .cn-tour__paso.is-on .cn-tour__bar i,
.cn-tour.is-off .cn-tour__paso.is-on .cn-tour__bar i { animation-play-state: paused; }
.cn-tour.is-quieto .cn-tour__bar { display: none; }
@keyframes cn-tour-avanza { to { width: 100%; } }

.cn-tour__escena {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(420px, 36vw, 540px);
    border-radius: 30px;
    overflow: hidden;
    background: radial-gradient(80% 75% at 70% 15%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), linear-gradient(180deg, #10131C, #0A0C12);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 50px 100px -50px rgba(0,0,0,.9);
}
.cn-tour__escena::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000, transparent 75%);
}
.cn-tour__vis { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px, 3.2vw, 46px); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1), visibility 0s linear .45s; }
.cn-tour__vis.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.cn-tour__arte { width: 100%; display: flex; justify-content: center; }
.cn-tour__pie, .cn-tour__cab { display: none; }

/* ─ Piezas del recorrido ─ */
/* Navegador */
.cn-tv-web { --c: var(--acc-hi, #FF3B44); position: relative; width: min(100%, 600px); }
.cn-tv-web__bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 16px 16px 0 0; background: #161A24; border: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
.cn-tv-web__bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.cn-tv-web__bar > i:nth-child(1) { background: #FF5F57; }
.cn-tv-web__bar > i:nth-child(2) { background: #FEBC2E; }
.cn-tv-web__bar > i:nth-child(3) { background: #28C840; }
.cn-tv-web__bar > span { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 4px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.cn-tv-web__pantalla { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 0 16px 16px; border: 1px solid rgba(255,255,255,.1); border-top: 0; background: #fff; container-type: size; box-shadow: 0 40px 80px -36px rgba(0,0,0,.92), 0 0 90px -34px color-mix(in srgb, var(--c) 70%, transparent); }
.cn-tv-web__pantalla img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cn-tv-web--captura .cn-tv-web__pantalla img { position: absolute; left: 0; top: 0; height: auto; transition: transform 6s cubic-bezier(.45,.05,.25,1); }
@media (hover: hover) {
    .cn-tv-web--captura:hover .cn-tv-web__pantalla img { transform: translateY(calc(-100% + 100cqh)); }
}
.cn-tv-chip { position: absolute; left: -18px; bottom: 26px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 15px; background: rgba(16,19,28,.94); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 50px -24px rgba(0,0,0,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; animation: cn-flota 7s ease-in-out infinite; }
.cn-tv-chip > i { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; font-style: normal; color: #07080C; background: var(--c); }
.cn-tv-chip b { display: block; font-size: 13.5px; font-weight: 800; }
.cn-tv-chip small { display: block; font-size: 11.5px; color: rgba(255,255,255,.62); }

/* Celular con WhatsApp (cn_tv_tel), con los colores del modo oscuro de
   WhatsApp y lo que lo hace reconocible: la isla de la cámara, la barra del
   teléfono, la cabecera con sus iconos, el aviso amarillo de cifrado, la
   fecha, los globos con colita, "escribiendo…" y el borrador antes de
   enviar. En cada fila, --p es cuándo se empieza a escribir y --d cuándo
   aparece el mensaje. */
.cn-tv-tel { --c: var(--acc-hi, #FF3B44); width: 250px; aspect-ratio: 9 / 18.5; padding: 9px; border-radius: 38px; background: linear-gradient(160deg, #2C313D, #0E1016 60%); box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 44px 90px -34px rgba(0,0,0,.95), 0 0 80px -28px color-mix(in srgb, var(--c) 65%, transparent); }
.cn-tv-tel__pantalla { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 20h18a4 4 0 014 4v8a4 4 0 01-4 4h-9l-6 5v-5h-3a4 4 0 01-4-4v-8a4 4 0 014-4z'/%3E%3Cpath d='M84 12l3 6 6.5 1-4.7 4.6 1.1 6.4-5.9-3.1-5.9 3.1 1.1-6.4-4.7-4.6 6.5-1z'/%3E%3Ccircle cx='97' cy='76' r='8'/%3E%3Cpath d='M28 84c4 5 12 5 16 0M30 74h.01M42 74h.01'/%3E%3Cpath d='M60 54l9 9M69 54l-9 9'/%3E%3Cpath d='M56 104c3-4 7-4 10 0s7 4 10 0'/%3E%3Cpath d='M101 100l6 6-6 6'/%3E%3C/svg%3E") 0 0 / 120px 120px, #0B141A; }
.cn-tv-tel__pantalla::before { content: ''; position: absolute; top: 7px; left: 50%; z-index: 3; width: 56px; height: 15px; border-radius: 999px; background: #000; translate: -50% 0; }
.cn-tv-tel__head { position: relative; display: flex; align-items: center; gap: 6px; padding: 28px 10px 8px 6px; background: #202C33; color: #E9EDEF; }
.cn-tv-tel__reloj { position: absolute; left: 18px; right: 16px; top: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; color: #E9EDEF; }
.cn-tv-tel__reloj b { font-weight: 700; }
.cn-tv-tel__reloj i { width: 17px; height: 8px; border-radius: 2.5px; border: 1.2px solid rgba(233,237,239,.85); background: linear-gradient(90deg, #E9EDEF 68%, transparent 68%) content-box; padding: 1px; }
.cn-tv-tel__atras { display: grid; flex-shrink: 0; color: #AEBAC1; }
.cn-tv-tel__av { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: end center; overflow: hidden; color: #CFD4D6; background: #6A7175; }
.cn-tv-tel__av svg { width: 23px; height: 23px; margin-bottom: -3px; }
.cn-tv-tel__quien { flex: 1; min-width: 0; margin-left: 2px; }
.cn-tv-tel__quien b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-tv-tel__quien small { display: block; font-size: 10.5px; color: #8696A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-tv-tel__acc { display: flex; align-items: center; gap: 9px; flex-shrink: 0; color: #AEBAC1; }
.cn-tv-tel__chat { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 10px 9px; }
.cn-tv-tel__cifrado { align-self: center; display: flex; align-items: flex-start; gap: 5px; max-width: 96%; padding: 6px 9px; border-radius: 8px; font-size: 9.5px; line-height: 1.38; text-align: center; color: #FFD279; background: #182229; }
.cn-tv-tel__cifrado svg { flex-shrink: 0; margin-top: 1px; }
.cn-tv-tel__cif-corto { display: none; }
.cn-tv-tel__fecha { align-self: center; margin: 2px 0 3px; padding: 3px 9px; border-radius: 7px; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #8696A0; background: #182229; }
.cn-tv-fila { position: relative; display: flex; flex-direction: column; }
.cn-tv-fila--in { align-items: flex-start; }
.cn-tv-fila--out { align-items: flex-end; }
.cn-tv-msg { position: relative; max-width: 86%; padding: 6px 9px 17px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; color: #E9EDEF; box-shadow: 0 1px .5px rgba(11,20,26,.13); opacity: 0; translate: 0 8px; }
.cn-tv-msg--in { background: #202C33; border-top-left-radius: 0; }
.cn-tv-msg--out { background: #005C4B; border-top-right-radius: 0; }
.cn-tv-msg::before { content: ''; position: absolute; top: 0; width: 8px; height: 10px; background: inherit; }
.cn-tv-msg--in::before { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cn-tv-msg--out::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* La hora es el último span del globo; el texto puede traer el suyo (i18n). */
.cn-tv-msg > span:last-child { position: absolute; right: 8px; bottom: 4px; font-size: 9.5px; color: rgba(233,237,239,.6); }
.cn-tv-msg > span:last-child i { font-style: normal; color: #53BDEB; }
.cn-tv-escribe { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; padding: 8px 10px; border-radius: 8px; border-top-left-radius: 0; background: #202C33; opacity: 0; }
.cn-tv-escribe i { width: 5px; height: 5px; border-radius: 50%; background: #8696A0; animation: cn-tv-punto 1s ease-in-out infinite; }
.cn-tv-escribe i:nth-child(2) { animation-delay: .15s; }
.cn-tv-escribe i:nth-child(3) { animation-delay: .3s; }
.cn-tv-tel__barra { display: flex; align-items: center; gap: 6px; margin: 0 7px 9px; }
.cn-tv-tel__campo { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; font-size: 11.5px; color: #8696A0; background: #2A3942; }
.cn-tv-tel__campo > svg { flex-shrink: 0; }
.cn-tv-tel__campo > em { flex: 1; min-width: 0; font-style: normal; }
.cn-tv-tel__borrador { position: absolute; left: 30px; right: 52px; top: 50%; translate: 0 -50%; font-style: normal; color: #E9EDEF; background: #2A3942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.cn-tv-tel__boton { position: relative; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #fff; background: #00A884; }
.cn-tv-tel__boton > b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #00A884; opacity: 0; }
:is(.cn-tour__vis.is-on, .cn-escena, .cn-nos-why__tel.fx-in) .cn-tv-msg { animation: cn-tv-entra .4s cubic-bezier(.2,.8,.2,1) var(--d) both; }
:is(.cn-tour__vis.is-on, .cn-escena, .cn-nos-why__tel.fx-in) :is(.cn-tv-escribe, .cn-tv-tel__borrador) { animation: cn-tv-ventana calc(var(--d) - var(--p)) linear var(--p) both; }
:is(.cn-tour__vis.is-on, .cn-escena, .cn-nos-why__tel.fx-in) .cn-tv-tel__boton > b { animation: cn-tv-envia calc(var(--d) - var(--p)) linear var(--p) both; }
@keyframes cn-tv-entra { from { opacity: 0; translate: 0 10px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cn-tv-ventana { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cn-tv-envia { 0% { opacity: 0; scale: 1; } 15%, 82% { opacity: 1; scale: 1; } 92% { opacity: 1; scale: .82; } 100% { opacity: 0; scale: 1; } }
@keyframes cn-tv-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
/* En los celulares chicos (la portada de los sectores y el que va montado
   sobre otra pieza), el aviso de cifrado en su versión corta. */
.cn-escena__tel .cn-tv-tel__cif-largo, .cn-tv-duo__b .cn-tv-tel__cif-largo { display: none; }
.cn-escena__tel .cn-tv-tel__cif-corto, .cn-tv-duo__b .cn-tv-tel__cif-corto { display: inline; }
/* En esos celulares el nombre no cabía con los tres iconos ("Client…",
   "New cust…"): queda solo el menú de los tres puntos. */
:is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__acc svg:not(:last-child) { display: none; }

/* Avisos */
.cn-tv-avisos { --c: var(--acc-hi, #FF3B44); display: flex; flex-direction: column; gap: 10px; width: min(100%, 370px); }
.cn-tv-aviso { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(22,26,36,.93); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 22px 44px -24px rgba(0,0,0,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; opacity: 0; translate: 0 14px; }
.cn-tv-aviso > i { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-style: normal; color: #07080C; background: var(--c); }
.cn-tv-aviso > span { flex: 1; min-width: 0; }
.cn-tv-aviso b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; }
.cn-tv-aviso small { display: block; font-size: 12px; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-tv-aviso em { align-self: flex-start; font-style: normal; font-size: 10.5px; color: rgba(255,255,255,.45); }
.cn-tour__vis.is-on .cn-tv-aviso { animation: cn-tv-entra .5s cubic-bezier(.2,.8,.2,1) var(--d) both; }
/* En la portada de los sectores se turnan en el mismo sitio: tres avisos,
   tres segundos cada uno, sin fin. */
.cn-tv-avisos--ciclo { display: grid; }
.cn-tv-avisos--ciclo .cn-tv-aviso { grid-area: 1 / 1; animation: cn-tv-ciclo 9s ease-in-out calc(var(--i) * 3s) infinite both; }
@keyframes cn-tv-ciclo { 0% { opacity: 0; translate: 0 16px; } 5%, 30% { opacity: 1; translate: 0 0; } 35%, 100% { opacity: 0; translate: 0 -12px; } }

/* Indicadores */
.cn-tv-kpis { --c: var(--acc-hi, #FF3B44); width: min(100%, 500px); padding: 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(24,28,40,.96), rgba(12,14,22,.98)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 44px 90px -40px rgba(0,0,0,.95), 0 0 80px -30px color-mix(in srgb, var(--c) 55%, transparent); }
.cn-tv-kpis__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.cn-tv-kpis__head b { font-size: 15px; font-weight: 800; color: #fff; }
.cn-tv-kpis__head span { padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.14); }
.cn-tv-kpis__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cn-tv-kpis__nums span { min-width: 0; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.cn-tv-kpis__nums small { display: block; font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-tv-kpis__nums b { display: block; margin-top: 4px; font-size: clamp(16px, 1.7vw, 23px); font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; color: #fff; }
.cn-tv-kpis__nums em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #4ADE80; }
.cn-tv-kpis__graf { display: flex; align-items: flex-end; gap: 8px; height: 118px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.1); }
.cn-tv-kpis__graf i { flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 25%, transparent)); transform-origin: bottom; }
.cn-tour__vis.is-on .cn-tv-kpis__graf i { animation: cn-tv-crece .8s cubic-bezier(.2,.8,.2,1) var(--d) both; }
@keyframes cn-tv-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Dos piezas juntas */
.cn-tv-duo { position: relative; width: min(100%, 620px); padding-bottom: 28px; }
.cn-tv-duo__a { width: 84%; }
.cn-tv-duo__b { position: absolute; right: 0; bottom: 0; }
.cn-tv-duo__b .cn-tv-tel { width: 200px; }
.cn-tv-duo__b .cn-tv-avisos { width: 300px; }
.cn-tv-duo__b .cn-tv-kpis { width: 290px; }

/* ─ "Te encuentran": la búsqueda que se hace sola (cn_tv_busqueda) ─
   Estados que pone el guion (js/cine.js): is-caja (el buscador con foco),
   is-res (salen los resultados), is-hover (el cursor sobre el tuyo),
   is-destino (se abre tu web o tu ficha) e is-fin (el chip). La letra es
   la de Google, no la del sitio. */
.cn-tvb { --c: var(--acc-hi, #FF3B44); position: relative; width: min(100%, 600px); }
.cn-tvb__bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 16px 16px 0 0; background: #161A24; border: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
.cn-tvb__bar > i { width: 9px; height: 9px; border-radius: 50%; }
.cn-tvb__bar > i:nth-child(1) { background: #FF5F57; }
.cn-tvb__bar > i:nth-child(2) { background: #FEBC2E; }
.cn-tvb__bar > i:nth-child(3) { background: #28C840; }
.cn-tvb__bar > span { display: inline-flex; align-items: center; gap: 6px; max-width: 70%; margin: 0 auto; padding: 4px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); white-space: nowrap; overflow: hidden; }
.cn-tvb__bar em { font-style: normal; }
.cn-tvb__url-d, .cn-tvb.is-destino .cn-tvb__url-g { display: none; }
.cn-tvb.is-destino .cn-tvb__url-d { display: inline; }
.cn-tvb__pantalla { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 0 16px 16px; border: 1px solid rgba(255,255,255,.1); border-top: 0; background: #fff; color: #202124; font-family: Roboto, Arial, Helvetica, sans-serif; box-shadow: 0 40px 80px -36px rgba(0,0,0,.92), 0 0 90px -34px color-mix(in srgb, var(--c) 70%, transparent); }
.cn-tvb__serp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.cn-tvb__top { display: flex; align-items: center; gap: 14px; }
.cn-tvb__logo { display: flex; flex-shrink: 0; font: 700 23px/1 Arial, Helvetica, sans-serif; letter-spacing: -.04em; }
.cn-tvb__logo b:nth-child(1), .cn-tvb__logo b:nth-child(4) { color: #4285F4; }
.cn-tvb__logo b:nth-child(2), .cn-tvb__logo b:nth-child(6) { color: #EA4335; }
.cn-tvb__logo b:nth-child(3) { color: #FBBC05; }
.cn-tvb__logo b:nth-child(5) { color: #34A853; }
.cn-tvb__caja { flex: 1; min-width: 0; display: flex; align-items: center; height: 38px; padding: 0 12px 0 16px; border-radius: 999px; border: 1px solid #DFE1E5; background: #fff; transition: box-shadow .3s ease, border-color .3s ease; }
.cn-tvb.is-caja .cn-tvb__caja { border-color: transparent; box-shadow: 0 1px 6px rgba(32,33,36,.28); }
.cn-tvb__q { min-width: 0; font-size: 14px; color: #202124; white-space: nowrap; overflow: hidden; }
.cn-tvb__caret { flex-shrink: 0; width: 1.5px; height: 17px; margin-left: 1px; background: #202124; opacity: 0; }
.cn-tvb.is-caja:not(.is-res) .cn-tvb__caret { opacity: 1; animation: cn-cursor 1s steps(1) infinite; }
.cn-tvb__lupa { display: grid; margin-left: auto; padding-left: 8px; color: #4285F4; }
.cn-tvb__res { display: flex; flex-direction: column; gap: 13px; padding-left: 96px; }
.cn-tvb__r, .cn-tvb__lugar, .cn-tvb__mapa { opacity: 0; translate: 0 8px; }
.cn-tvb.is-res :is(.cn-tvb__r, .cn-tvb__lugar, .cn-tvb__mapa) { animation: cn-tv-entra .45s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 110ms) both; }
.cn-tvb__r { display: flex; flex-direction: column; gap: 3px; }
.cn-tvb__r:not(.cn-tvb__r--tu) { filter: opacity(.5); }
.cn-tvb__sitio { display: flex; align-items: center; gap: 8px; }
.cn-tvb__sitio > i { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #5F6368; background: #F1F3F4; }
.cn-tvb__sitio b { display: block; font-size: 12px; font-weight: 400; color: #202124; }
.cn-tvb__sitio small { display: block; font-size: 11px; color: #4D5156; }
.cn-tvb__t { align-self: flex-start; font-size: 16px; line-height: 1.3; color: #1A0DAB; }
.cn-tvb.is-hover .cn-tvb__r--tu .cn-tvb__t { text-decoration: underline; }
.cn-tvb__d { font-size: 12px; line-height: 1.45; color: #4D5156; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Variante Google Maps */
.cn-tvb--mapa .cn-tvb__res { gap: 6px; }
/* Un plano dibujado: un parque, calles finas y una avenida amarilla. */
.cn-tvb__mapa { position: relative; display: block; height: 98px; margin-bottom: 4px; border-radius: 12px; overflow: hidden; border: 1px solid #E3E6E8;
    background:
        radial-gradient(ellipse 22% 34% at 84% 24%, #C8E6C0 0 98%, transparent 100%),
        linear-gradient(28deg, transparent 47%, #FDE293 47% 50.5%, transparent 50.5%),
        repeating-linear-gradient(90deg, transparent 0 23%, #fff 23% 24.2%, transparent 24.2% 25%),
        repeating-linear-gradient(0deg, transparent 0 31%, #fff 31% 33.5%, transparent 33.5% 34%),
        #EBEFEA; }
.cn-tvb__pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: #EA4335; transform: translate(-50%, -100%) rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.cn-tvb__pin::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.cn-tvb__pin--tu { width: 19px; height: 19px; }
.cn-tvb__pin--tu::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(234,67,53,.5); animation: cn-ping 1.8s ease-out infinite; }
.cn-tvb__lugar { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; }
.cn-tvb__lugar b { font-size: 14px; font-weight: 500; color: #202124; }
.cn-tvb__lugar small { font-size: 11.5px; color: #70757A; }
.cn-tvb__lugar:not(.cn-tvb__lugar--tu) { filter: opacity(.5); }
.cn-tvb__lugar--tu { background: #F1F6FF; border: 1px solid #D2E3FC; transition: background .25s ease; }
.cn-tvb.is-hover .cn-tvb__lugar--tu { background: #E2ECFD; }
/* Lo que se abre al hacer clic */
.cn-tvb__destino { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.cn-tvb.is-destino .cn-tvb__serp { opacity: 0; transform: scale(.97); }
.cn-tvb.is-destino .cn-tvb__destino { opacity: 1; transform: none; }
.cn-tvb__web { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; font-family: var(--font); }
.cn-tvb__web-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 40px; padding: 0 16px; border-bottom: 1px solid #EEF0F3; }
.cn-tvb__web-nav b { margin-right: auto; font-size: 13px; font-weight: 900; color: #0B1220; }
.cn-tvb__web-nav i { width: 34px; height: 6px; border-radius: 3px; background: #E5E7EB; }
.cn-tvb__web-nav em { padding: 5px 11px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: var(--sc); white-space: nowrap; }
.cn-tvb__web-hero { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden; }
.cn-tvb__web-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-tvb__web-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,8,12,.9) 0%, rgba(7,8,12,.6) 55%, rgba(7,8,12,.1) 100%); }
.cn-tvb__web-hero > span { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; max-width: 64%; padding: 0 22px; color: #fff; }
.cn-tvb__web-hero small { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sc); }
.cn-tvb__web-hero b { font-size: clamp(16px, 2vw, 25px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.cn-tvb__web-hero em { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 7px 13px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #22C55E; }
.cn-tvb__web-cards { display: flex; gap: 10px; flex-shrink: 0; height: 22%; padding: 12px 16px; background: #F8FAFC; }
.cn-tvb__web-cards i { flex: 1; border-radius: 8px; background: #fff; border: 1px solid #E5E7EB; }
.cn-tvb__ficha { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.cn-tvb__ficha img { display: block; width: 100%; height: 46%; object-fit: cover; }
.cn-tvb__ficha-in { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; }
.cn-tvb__ficha-in > b { font-size: 19px; font-weight: 400; color: #202124; }
.cn-tvb__ficha-in > small { font-size: 12px; color: #70757A; }
.cn-tvb__ficha-in > small em { font-style: normal; color: #202124; }
.cn-tvb__ficha-in > small:nth-of-type(1) { color: #FBBC04; }
.cn-tvb__ficha-in > small:nth-of-type(1) em, .cn-tvb__ficha-in > small:nth-of-type(1) span { color: #70757A; }
.cn-tvb__abierto { color: #188038 !important; }
.cn-tvb__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cn-tvb__botones > span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid #DADCE0; font-size: 11.5px; color: #1A73E8; transition: background .25s ease, border-color .25s ease; }
.cn-tvb__botones em { font-style: normal; }
.cn-tvb.is-fin .cn-tvb__boton-ir { background: #E8F0FE; border-color: #1A73E8; }
/* El chip, abajo a la derecha: a la izquierda tapaba los botones de la ficha. */
.cn-tvb .cn-tv-chip { left: auto; right: -18px; bottom: 20px; opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.cn-tvb.is-fin .cn-tv-chip { opacity: 1; transform: none; }

/* ─ El cursor de "Mira cómo funciona" (guiones de js/cine.js) ─
   La punta de la flecha cae justo en el punto al que va (el margen
   negativo la corre). Al hacer clic, se encoge y suelta una onda. */
.cn-cursor { position: absolute; left: 0; top: 0; z-index: 30; width: 24px; height: 24px; margin: -3px 0 0 -4px; pointer-events: none; opacity: 0; transition-property: transform, opacity; transition-duration: .85s, .3s; transition-timing-function: cubic-bezier(.45,.05,.2,1), ease; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); will-change: transform; }
.cn-cursor.is-on { opacity: 1; }
.cn-cursor svg { display: block; width: 100%; height: 100%; transition: transform .15s ease; }
.cn-cursor.is-clic svg { transform: scale(.82); }
.cn-cursor__onda { position: absolute; left: -11px; top: -12px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--c, #FF3B44); background: color-mix(in srgb, var(--c, #FF3B44) 30%, transparent); opacity: 0; transform: scale(.2); }
.cn-cursor.is-onda .cn-cursor__onda { animation: cn-onda .6s ease-out; }
@keyframes cn-onda { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.5); } }
/* Estados del guion en las demás piezas del recorrido */
.cn-tour__vis :is(.cn-tv-avisos, .cn-tv-kpis, .cn-tv-duo)[data-cn-guion] { position: relative; }
.cn-tour__vis .cn-tv-web[data-cn-guion] .cn-tv-chip { opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.cn-tour__vis .cn-tv-web[data-cn-guion].is-hecho .cn-tv-chip { opacity: 1; transform: none; }
.cn-tour__vis .cn-tv-web--captura[data-cn-guion] .cn-tv-web__pantalla img { transition: transform 2.2s cubic-bezier(.45,.05,.25,1); }
.cn-tour__vis .cn-tv-web--captura[data-cn-guion].is-recorre .cn-tv-web__pantalla img { transform: translateY(calc((-100% + 100cqh) * .42)); }
.cn-tv-aviso { transition: border-color .3s ease, box-shadow .3s ease, scale .3s ease; }
.cn-tv-aviso.is-tocado { border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 24%, transparent), 0 22px 44px -24px rgba(0,0,0,.92); scale: 1.02; }
.cn-tv-aviso.is-tocado em { color: var(--c); }
.cn-tv-kpis__graf { position: relative; }
.cn-tv-kpis__graf i { transition: filter .25s ease; }
.cn-tv-kpis__graf i.is-hover { filter: brightness(1.4) saturate(1.2); }
.cn-tv-kpis__tip { position: absolute; z-index: 2; padding: 6px 10px; border-radius: 9px; font-size: 12px; font-weight: 800; white-space: nowrap; color: #07080C; background: #fff; box-shadow: 0 12px 26px -10px rgba(0,0,0,.6); opacity: 0; translate: 0 4px; transition: opacity .25s ease, translate .25s ease; pointer-events: none; }
.cn-tv-kpis__tip.is-on { opacity: 1; translate: 0 0; }
.cn-tv-kpis__nums span { transition: border-color .3s ease, background .3s ease; }
.cn-tv-kpis__nums span.is-tocado { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, rgba(255,255,255,.04)); }
.cn-tour__vis .cn-tv-duo[data-cn-guion] .cn-tv-duo__b { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.cn-tour__vis .cn-tv-duo[data-cn-guion].is-hecho .cn-tv-duo__b { opacity: 1; transform: none; }
.cn-tour__vis .cn-tv-duo[data-cn-guion] .cn-tv-aviso { animation: none; opacity: 0; }
.cn-tour__vis .cn-tv-duo[data-cn-guion].is-hecho .cn-tv-aviso { animation: cn-tv-entra .5s cubic-bezier(.2,.8,.2,1) calc(var(--d) - 100ms) both; }
@media (max-width: 640px) {
    .cn-tvb__pantalla { aspect-ratio: 4 / 4.4; }
    .cn-tvb__serp { gap: 10px; padding: 14px 12px; }
    .cn-tvb__top { flex-direction: column; align-items: stretch; gap: 10px; }
    .cn-tvb__logo { align-self: center; font-size: 22px; }
    .cn-tvb__caja { height: 36px; }
    .cn-tvb__q { font-size: 13px; }
    .cn-tvb__res { gap: 11px; padding-left: 0; }
    .cn-tvb__t { font-size: 14.5px; }
    .cn-tvb__d { font-size: 11.5px; }
    .cn-tvb__mapa { height: 78px; }
    .cn-tvb__web-nav i { display: none; }
    .cn-tvb__web-hero > span { max-width: 86%; padding: 0 14px; }
    .cn-tvb__web-cards { height: 18%; padding: 10px 12px; }
    .cn-tvb__ficha img { height: 40%; }
    .cn-tvb__ficha-in { padding: 10px 12px; }
    .cn-tvb__ficha-in > b { font-size: 17px; }
    .cn-tvb__botones > span { padding: 5px 9px; font-size: 11px; }
    .cn-tvb .cn-tv-chip { right: 8px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-cursor { display: none; }
    .cn-tvb__serp, .cn-tvb__destino { transition: none; }
}

/* ─ "Arma tu cotización" ─ */
.cn-armador { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 5vw, 76px); align-items: center; }
.cn-armador .cn-h2 { font-size: clamp(34px, 4vw, 58px); }
.cn-armador__grupos { display: grid; gap: 24px; margin-top: 30px; }
.cn-armador__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.cn-armador__grupo legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0; margin-bottom: 12px; font-size: 16.5px; font-weight: 800; color: #fff; }
.cn-armador__grupo legend b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #07080C; background: var(--pc); }
.cn-armador__grupo legend small { font-size: 12.5px; font-weight: 600; color: var(--cn-tx-3); }
.cn-armador__ops { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-op { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px 10px 12px; border-radius: 999px; font: 700 14.5px/1.2 var(--font, inherit); color: var(--cn-tx); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease; }
.cn-op > i { width: 19px; height: 19px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: transparent; border: 1.5px solid rgba(255,255,255,.32); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.cn-op:hover { border-color: rgba(255,255,255,.32); transform: translateY(-2px); }
.cn-op.is-on { color: #fff; background: color-mix(in srgb, var(--pc) 22%, rgba(255,255,255,.04)); border-color: var(--pc); }
.cn-op.is-on > i { color: #fff; background: var(--pc); border-color: var(--pc); }
.cn-op:focus-visible { outline: 2px solid var(--pc); outline-offset: 3px; }
.cn-armador__prop {
    position: relative;
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(24,28,40,.96), rgba(12,14,22,.98));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 100px -30px color-mix(in srgb, var(--pc) 60%, transparent);
}
.cn-armador__prop::before { content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 20%, transparent)); }
.cn-armador__lista { min-height: 132px; align-content: start; }
.cn-armador__lista li { opacity: 1; translate: none; transition: none; }
.cn-armador__lista li.is-nuevo { animation: cn-tv-entra .35s ease both; }
.cn-armador__wa { width: 100%; justify-content: center; min-height: 58px; margin-top: 18px; font-size: 16px; }
.cn-armador__nota { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--cn-tx-3); text-align: center; }
.cn-armador__sec { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--cn-tx-2); }
.cn-armador__sec:hover { color: #fff; }

/* ─ Portada 'escena' de los sectores ─ */
.cn-hero--escena .cn-hero__visual { min-height: 540px; }
.cn-escena { position: absolute; inset: 0; }
.cn-escena__web { position: absolute; right: -4%; top: 4%; width: 100%; transform: perspective(1800px) rotateY(-11deg) rotateX(4deg); transform-origin: 70% 50%; }
.cn-escena__web .cn-tv-web { width: 100%; }
.cn-escena__tel { position: absolute; left: -2%; bottom: 0; }
.cn-escena__tel .cn-tv-tel { width: 214px; }
.cn-escena__avisos { position: absolute; right: -2%; bottom: 6%; width: 320px; }
.cn-escena__avisos .cn-tv-avisos { width: 100%; }
.cn-hero--escena .cn-hfoto { left: 30%; }
.cn-hero--escena .cn-hfoto img { filter: saturate(.85) brightness(.5); }
.cn-hero.is-paused .cn-tv-aviso, .cn-hero.is-paused .cn-tv-chip { animation-play-state: paused; }

/* ─ Tablet y celular ─ */
@media (max-width: 1100px) {
    .cn-escena__avisos { width: 280px; }
}
@media (max-width: 980px) {
    /* En el celular el recorrido se lee hacia abajo: cada paso es una
       tarjeta con su número, su línea y su visual, que se anima al entrar en
       pantalla (js/cine.js). Nada de pestañas que se deslizan de lado. */
    .cn-tour { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cn-tour__pasos { display: none; }
    .cn-tour__escena { display: flex; flex-direction: column; gap: 14px; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
    .cn-tour__escena::before { display: none; }
    .cn-tour__vis { position: relative; opacity: 1; visibility: visible; transform: none; transition: none; justify-content: flex-start; align-items: stretch; gap: 14px; padding: 20px 16px 22px; border-radius: 24px; overflow: hidden; background: radial-gradient(90% 60% at 85% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), linear-gradient(180deg, #10131C, #0A0C12); border: 1px solid rgba(255,255,255,.08); }
    .cn-tour__cab { display: flex; align-items: center; gap: 12px; }
    .cn-tour__cab .cn-tour__ico { color: #07080C; background: var(--c); border-color: transparent; box-shadow: 0 12px 26px -10px var(--c); }
    .cn-tour__cab small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .14em; color: var(--c); }
    .cn-tour__cab b { display: block; font-size: 19px; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
    .cn-tour__pie { display: block; margin-top: -6px; font-size: 15px; line-height: 1.5; color: var(--cn-tx-2); }
    .cn-tour__arte { padding-top: 4px; }
    .cn-tv-web { width: 100%; }
    .cn-tv-chip { left: 8px; bottom: 10px; padding: 8px 12px 8px 8px; }
    .cn-tv-chip > i { width: 30px; height: 30px; }
    .cn-tv-tel { width: 196px; }
    .cn-tv-duo { padding-bottom: 0; }
    .cn-tv-duo__a { width: 100%; }
    .cn-tv-duo__b { right: -4px; bottom: -14px; }
    .cn-tv-duo__b .cn-tv-tel { width: 132px; padding: 6px; border-radius: 26px; }
    .cn-tv-duo__b .cn-tv-tel__pantalla { border-radius: 21px; }
    .cn-tv-duo__b .cn-tv-tel__head { padding: 18px 6px 6px 4px; gap: 4px; }
    .cn-tv-duo__b .cn-tv-msg { font-size: 9.5px; padding: 5px 7px 14px; }
    .cn-tv-duo__b .cn-tv-tel__barra { display: none; }
    .cn-tv-duo__b .cn-tv-avisos, .cn-tv-duo__b .cn-tv-kpis { width: 230px; }

    .cn-armador { grid-template-columns: minmax(0, 1fr); }

    /* Portada 'escena': arriba la foto con el celular y los avisos; la web
       grande no cabe y se queda solo en PC. */
    /* La foto se funde con máscara (no con una capa negra encima, que dejaba
       una franja donde empieza el texto). */
    .cn-hero--escena .cn-hfoto { left: 0; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
    .cn-hero--escena .cn-hfoto::after { background: linear-gradient(180deg, rgba(7,8,12,.35) 0%, rgba(7,8,12,.05) 35%, rgba(7,8,12,.35) 100%); }
    .cn-hero--escena .cn-hero__visual { height: 330px; min-height: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .cn-escena__web { display: none; }
    .cn-escena__tel { left: 4%; bottom: 0; }
    .cn-escena__tel .cn-tv-tel { width: 150px; padding: 6px; border-radius: 26px; }
    .cn-escena__tel .cn-tv-tel__pantalla { border-radius: 21px; }
    .cn-escena__tel .cn-tv-tel__head { padding: 19px 7px 6px 3px; gap: 4px; }
    .cn-escena__tel .cn-tv-tel__av { width: 22px; height: 22px; }
    .cn-escena__tel .cn-tv-tel__av svg { width: 17px; height: 17px; }
    .cn-escena__tel .cn-tv-tel__barra { display: none; }
    .cn-escena__tel .cn-tv-msg { font-size: 9.5px; padding: 5px 7px 14px; }
    /* Lo mismo para los dos celulares chicos (portada y montado). */
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__pantalla::before { top: 5px; width: 38px; height: 11px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__reloj { top: 5px; left: 12px; right: 11px; font-size: 7.5px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__reloj i { width: 12px; height: 6px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__atras svg { width: 11px; height: 11px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__acc { display: none; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__quien b { font-size: 10px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__quien small { font-size: 8px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__chat { gap: 4px; padding: 7px 6px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__cifrado { gap: 3px; padding: 3px 6px; font-size: 7.5px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__cifrado svg { width: 8px; height: 8px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-tel__fecha { display: none; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-msg > span:last-child { right: 6px; bottom: 3px; font-size: 7px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-escribe { padding: 6px 7px; }
    :is(.cn-escena__tel, .cn-tv-duo__b) .cn-tv-escribe i { width: 4px; height: 4px; }
    .cn-escena__avisos { left: auto; right: 3%; bottom: 26%; width: min(56vw, 280px); }
    .cn-hero--escena .cn-hero__copy { margin-top: 14px; }
}
@media (max-width: 640px) {
    .cn-tour__pasos { margin: 0 -16px; padding: 2px 16px 6px; }
    .cn-op { min-height: 42px; padding: 9px 13px 9px 10px; font-size: 13.5px; }
    .cn-armador__prop { padding: 20px 18px; }
    .cn-armador__prop::before { left: 18px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-tv-msg, .cn-tv-aviso, .cn-tv-kpis__graf i { opacity: 1; translate: none; animation: none !important; }
    .cn-tv-escribe, .cn-tv-tel__borrador, .cn-tv-tel__boton > b { display: none; }
    .cn-tour__vis [data-cn-guion] .cn-tv-chip, .cn-tour__vis .cn-tv-duo[data-cn-guion] .cn-tv-duo__b, .cn-tour__vis .cn-tv-duo[data-cn-guion] .cn-tv-aviso { opacity: 1 !important; transform: none !important; }
    .cn-tv-avisos--ciclo .cn-tv-aviso:not(:first-child) { display: none; }
    .cn-tv-chip { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   PIEZAS A MEDIDA (partials/cine.php: cn_selector, cn_antes_despues,
   cn_tv_excel, cn_anuncio, cn_objetivos, cn_cadena; js/cine.js)
   En el celular nada se desliza de lado: todo baja.
   ═══════════════════════════════════════════════════════════ */

/* ─ Selector ─ */
.cn-sel { --c: var(--acc-hi, #FF3B44); display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.cn-sel__ops { position: sticky; top: calc(var(--nav-h, 84px) + 28px); display: flex; flex-direction: column; gap: 10px; }
.cn-sel__op { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); color: var(--cn-tx-2); font: inherit; text-align: left; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.cn-sel__op:hover { background: rgba(255,255,255,.06); color: #fff; }
.cn-sel__op.is-on { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, rgba(255,255,255,.03)), rgba(255,255,255,.02)); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--c) 70%, transparent); }
.cn-sel__op:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.cn-sel__ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; color: var(--cn-tx-2); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: background .25s ease, color .25s ease; }
.cn-sel__op.is-on .cn-sel__ico { color: #07080C; background: var(--c); border-color: transparent; }
.cn-sel__txt { flex: 1; min-width: 0; }
.cn-sel__txt b { display: block; font-size: 17px; font-weight: 900; letter-spacing: -0.01em; }
.cn-sel__txt small { display: block; margin-top: 2px; font-size: 13px; color: var(--cn-tx-3); }
.cn-sel__go { flex-shrink: 0; color: var(--cn-tx-3); opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease; }
.cn-sel__op.is-on .cn-sel__go { opacity: 1; transform: none; color: var(--c); }
.cn-sel__paneles { display: grid; }
.cn-sel__panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 22px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s; }
.cn-sel__panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.cn-sel__cab { display: none; }
.cn-sel__arte { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(320px, 30vw, 440px); padding: clamp(22px, 3vw, 40px); border-radius: 28px; overflow: hidden; background: radial-gradient(80% 75% at 70% 15%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), linear-gradient(180deg, #10131C, #0A0C12); border: 1px solid rgba(255,255,255,.08); }
.cn-sel__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.cn-sel__puntos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 24px; }
.cn-sel__puntos li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--cn-tx-2); }
.cn-sel__puntos i { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #07080C; background: var(--c); }
.cn-sel__btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* La tarjeta extra es solo de la rejilla (tablet y celular). */
.cn-sel__extra { display: none; }
.cn-sel__desc { flex: 1 1 100%; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--cn-tx-2); }
/* Logo del cliente en lugar del icono: tarjeta blanca (u oscura, para el
   que no se ve sobre blanco) y un aro del color al elegirlo. */
.cn-sel__ico:has(.cn-sel__logo) { position: relative; overflow: hidden; border: 0; }
.cn-sel__logo { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; background: #fff; }
.cn-sel__logo--oscuro { background: #0B0D13; }
.cn-sel__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cn-sel__op.is-on .cn-sel__ico:has(.cn-sel__logo) { box-shadow: 0 0 0 2px var(--c); }
/* La web elegida se recorre sola, de arriba abajo y de vuelta. */
@keyframes cn-recorre { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
.cn-sel__panel.is-on .cn-tv-web--captura .cn-tv-web__pantalla img { animation: cn-recorre 18s ease-in-out 1s infinite alternate; }

/* ─ Antes / después ─ */
.cn-ad { --c: var(--acc-hi, #FF3B44); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cn-ad__btns { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.cn-ad__btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px 11px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--cn-tx-2); font: 800 15px/1.2 var(--font, inherit); cursor: pointer; transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.cn-ad__btn i { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(255,255,255,.08); }
.cn-ad__btn--antes.is-on { color: #FCA5A5; background: #3A1518; }
.cn-ad__btn--antes.is-on i { color: #3A1518; background: #F87171; }
.cn-ad__btn--despues.is-on { color: #07080C; background: var(--c); box-shadow: 0 14px 34px -12px var(--c); }
.cn-ad__btn--despues.is-on i { color: var(--c); background: #07080C; }
.cn-ad__btn:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.cn-ad__escena { display: grid; width: 100%; }
.cn-ad__lado { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: clamp(22px, 4vw, 56px); opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), visibility 0s linear .5s; }
.cn-ad__lado.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.cn-ad__arte { display: flex; align-items: center; justify-content: center; min-height: 380px; padding: clamp(20px, 3vw, 40px); border-radius: 28px; overflow: hidden; background: radial-gradient(80% 75% at 70% 15%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), linear-gradient(180deg, #10131C, #0A0C12); border: 1px solid rgba(255,255,255,.08); }
.cn-ad__lado--antes .cn-ad__arte { background: radial-gradient(80% 70% at 30% 20%, rgba(248,113,113,.16), transparent 70%), linear-gradient(180deg, #13141B, #0B0C11); }
.cn-ad__puntos { list-style: none; display: grid; gap: 16px; }
.cn-ad__puntos li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; font-weight: 700; line-height: 1.4; color: #fff; }
.cn-ad__puntos i { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; font-style: normal; }
.cn-ad__lado--antes .cn-ad__puntos i { color: #F87171; background: rgba(248,113,113,.14); border: 1px solid rgba(248,113,113,.35); }
.cn-ad__lado--despues .cn-ad__puntos i { color: #07080C; background: var(--c); }

/* La planilla de Excel del "antes" */
.cn-xls { position: relative; width: min(100%, 580px); border-radius: 12px; background: #fff; box-shadow: 0 40px 80px -36px rgba(0,0,0,.92); font-family: Calibri, 'Segoe UI', Arial, sans-serif; transform: rotate(-1.4deg); }
.cn-xls__top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px 12px 0 0; background: #1E7145; color: #fff; font-size: 12px; font-weight: 700; }
.cn-xls__top i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); }
.cn-xls__top span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-xls__grid { display: grid; grid-template-columns: 26px 1.7fr .6fr .65fr .8fr 1fr; font-size: 11.5px; color: #1F2937; }
.cn-xls__grid > * { min-height: 27px; padding: 6px 7px; border-right: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-xls__h, .cn-xls__n { background: #F3F4F6; color: #6B7280; text-align: center; font-size: 10.5px; }
.cn-xls__grid b { background: #E8F0EA; font-weight: 700; }
.cn-xls__c.is-err { color: #B91C1C; background: #FEE2E2; font-weight: 700; }
.cn-xls__c.is-warn { color: #854D0E; background: #FEF08A; font-weight: 700; }
.cn-xls__c.is-dup { background: #FED7AA; }
.cn-xls__postit { position: absolute; right: -16px; bottom: 36px; width: 146px; padding: 12px; background: #FDE68A; color: #78350F; font: 700 13px/1.3 'Segoe Print', 'Comic Sans MS', cursive; box-shadow: 0 14px 26px -12px rgba(0,0,0,.6); transform: rotate(5deg); }
.cn-xls__tabs { display: flex; gap: 2px; padding: 5px 8px; border-radius: 0 0 12px 12px; background: #F3F4F6; font-size: 11px; color: #4B5563; }
.cn-xls__tabs > * { padding: 3px 10px; white-space: nowrap; }
.cn-xls__tabs b { color: #1E7145; background: #fff; border-bottom: 2px solid #1E7145; }

/* ─ "Crea tu anuncio" ─ */
.cn-anu { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.cn-anu__form { display: grid; gap: 16px; }
.cn-anu__form label { display: grid; gap: 8px; }
.cn-anu__form label span { font-size: 14.5px; font-weight: 800; color: #fff; }
.cn-anu__form input { width: 100%; padding: 15px 16px; border-radius: 14px; font: 600 16px/1.2 var(--font, inherit); color: #fff; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.cn-anu__form input::placeholder { color: rgba(255,255,255,.42); }
.cn-anu__form input:focus { outline: none; background: rgba(255,255,255,.08); border-color: var(--acc-hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 24%, transparent); }
.cn-anu__nota { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--cn-tx-3); }
.cn-anu__nota svg { flex-shrink: 0; margin-top: 2px; color: var(--acc-hi); }
.cn-anu__vista { display: flex; flex-direction: column; gap: 14px; }
.cn-anu__google { padding: 18px 20px 20px; border-radius: 22px; background: #fff; color: #202124; box-shadow: 0 40px 80px -36px rgba(0,0,0,.92); font-family: Arial, Helvetica, sans-serif; }
.cn-anu__barra { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 11px 16px; border-radius: 999px; border: 1px solid #DFE1E5; box-shadow: 0 1px 6px rgba(32,33,36,.18); font-size: 14px; }
.cn-anu__barra svg { flex-shrink: 0; color: #9AA0A6; }
.cn-anu__barra span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-anu__ad { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--acc) 6%, #fff); outline: 2px solid color-mix(in srgb, var(--acc) 50%, transparent); }
.cn-anu__u { display: flex; gap: 8px; font-size: 12.5px; }
.cn-anu__u b { font-weight: 700; }
.cn-anu__u span { color: #4D5156; overflow: hidden; text-overflow: ellipsis; }
.cn-anu__t { margin-top: 4px; font-size: 18.5px; line-height: 1.3; color: #1A0DAB; }
.cn-anu__d { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #4D5156; }
.cn-anu__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: #1A0DAB; }
.cn-anu__org { display: grid; gap: 8px; margin-top: 16px; padding: 0 4px; }
.cn-anu__org i { height: 10px; border-radius: 6px; background: #ECEEF1; }
.cn-anu__org i:nth-child(1) { width: 38%; }
.cn-anu__org i:nth-child(2) { width: 88%; }
.cn-anu__org i:nth-child(3) { width: 70%; }
.cn-anu__maps { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; color: #202124; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); font-family: Arial, Helvetica, sans-serif; }
.cn-anu__pin { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #EA4335; }
.cn-anu__maps > div { min-width: 0; }
.cn-anu__maps b { display: block; font-size: 15px; }
.cn-anu__maps small { display: block; font-size: 12.5px; color: #5F6368; }
.cn-anu__maps em { font-style: normal; font-weight: 700; color: #188038; }
.cn-anu__maps p { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cn-anu__maps p span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid #DADCE0; font-size: 12px; font-weight: 700; color: #1A73E8; }
.cn-anu__wa { align-self: flex-start; }

/* ─ "¿Qué quieres lograr?" ─ */
.cn-obj { display: flex; flex-direction: column; gap: 28px; }
.cn-obj__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cn-obj__chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font: 800 14px/1.2 var(--font, inherit); color: var(--cn-tx); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.cn-obj__chip svg { color: var(--acc-hi); }
.cn-obj__chip:hover { border-color: rgba(255,255,255,.32); transform: translateY(-2px); }
.cn-obj__chip.is-on { color: #07080C; background: #fff; border-color: #fff; }
.cn-obj__chip.is-on svg { color: #07080C; }
.cn-obj__chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cn-obj__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cn-objc { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #0E1018; border: 1px solid var(--cn-line); color: #fff; transition: transform .35s ease, opacity .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease; }
.cn-objc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--c) 70%, transparent); }
.cn-objc__img { position: relative; display: block; padding: 18px 18px 0; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 36%, transparent), transparent 70%); }
.cn-objc__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 12px 12px 0 0; box-shadow: 0 -1px 0 rgba(255,255,255,.1), 0 20px 40px -20px rgba(0,0,0,.9); transition: transform .4s ease; }
.cn-objc:hover .cn-objc__img img { transform: translateY(-4px); }
.cn-objc__rec { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #07080C; background: var(--c); opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }
.cn-objc__txt { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 4px; }
.cn-objc__txt small { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: color-mix(in srgb, var(--c) 70%, #fff); }
.cn-objc__txt b { font-size: 21px; font-weight: 900; letter-spacing: -0.02em; }
.cn-objc__txt > span { font-size: 14.5px; line-height: 1.5; color: var(--cn-tx-2); }
.cn-objc__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px 0; }
.cn-objc__tags em { padding: 5px 10px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--cn-tx-2); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.cn-objc__go { display: inline-flex; align-items: center; gap: 7px; margin: auto 20px 20px; padding-top: 16px; font-size: 14px; font-weight: 800; }
.cn-objc__go svg { color: var(--c); transition: transform .2s ease; }
.cn-objc:hover .cn-objc__go svg { transform: translateX(3px); }
/* Con un objetivo elegido: las suyas, arriba y encendidas; las demás, apagadas. */
.cn-obj.is-filtrado .cn-objc.is-pick { order: -1; border-color: var(--c); box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--c) 80%, transparent); }
.cn-obj.is-filtrado .cn-objc.is-pick .cn-objc__rec { opacity: 1; transform: none; }
.cn-obj.is-filtrado .cn-objc.is-off { opacity: .32; filter: grayscale(.85); transform: scale(.97); }

/* ─ Cadena "todo conectado" ─ */
/* Vitrina corta: en el celular, solo las cuatro primeras webs (el resto, en
   /proyectos); con ocho una debajo de otra la página no terminaba nunca. */
@media (max-width: 640px) {
    .cn-vitrina-corta .cn-webc:nth-child(n+5) { display: none; }
}
.cn-cad { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; }
.cn-cad__n { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 18px 24px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); }
.cn-cad__n + .cn-cad__n::before { content: ''; position: absolute; left: -21px; top: 55px; width: 22px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.15), var(--c)); }
.cn-cad__ico { width: 58px; height: 58px; margin-bottom: 6px; border-radius: 18px; display: grid; place-items: center; color: #07080C; background: var(--c); box-shadow: 0 16px 34px -12px var(--c); }
.cn-cad__n b { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; color: #fff; }
.cn-cad__n small { font-size: 14px; line-height: 1.5; color: var(--cn-tx-2); }

/* ─ Abanico (cn_abanico): el de "Lo que hacemos" en la portada ─
   Tres ventanas de atrás a adelante; la de adelante, con el brillo del
   color de su tarjeta (--c). Al pasar el cursor se abren un poco. */
.cn-abanico { position: absolute; inset: 0; display: block; }
.cn-abanico__win { position: absolute; width: 72%; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #0B0D13; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 26px 50px -22px rgba(0,0,0,.95); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cn-abanico__bar { flex: none; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; background: #0B0D13; border-bottom: 1px solid rgba(255,255,255,.08); }
.cn-abanico__bar > i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; }
.cn-abanico__bar > i:nth-child(1) { background: #FF5F57; }
.cn-abanico__bar > i:nth-child(2) { background: #FEBC2E; }
.cn-abanico__bar > i:nth-child(3) { background: #28C840; }
.cn-abanico__bar > span { display: inline-flex; align-items: center; gap: 4px; max-width: 72%; margin: 0 auto; padding: 2px 8px; border-radius: 6px; background: #1A1E29; border: 1px solid rgba(255,255,255,.09); font-size: 9px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-abanico__bar svg { flex-shrink: 0; color: #4ADE80; }
.cn-abanico__win img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.cn-abanico__win:nth-child(1) { left: 2%; top: 7%; transform: rotate(-7deg); }
.cn-abanico__win:nth-child(2) { left: 14%; top: 21%; transform: rotate(-1.5deg); z-index: 1; }
.cn-abanico__win:nth-child(3) { left: 26%; top: 35%; transform: rotate(5deg); z-index: 2; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -24px rgba(0,0,0,.95), 0 0 50px -18px color-mix(in srgb, var(--c, #E0121B) 75%, transparent); }
a:hover .cn-abanico__win:nth-child(1) { transform: rotate(-11deg) translate(-12px, -6px); }
a:hover .cn-abanico__win:nth-child(2) { transform: rotate(-1.5deg) translateY(-10px); }
a:hover .cn-abanico__win:nth-child(3) { transform: rotate(8deg) translate(12px, -4px); }
/* Dentro de las tarjetas de "¿Qué quieres lograr?" */
.cn-objc__img--abanico { height: clamp(190px, 16vw, 230px); overflow: hidden; }
.cn-objc__img--abanico img, .cn-objc:hover .cn-objc__img--abanico img { border-radius: 0; box-shadow: none; transform: none; }
@media (max-width: 640px) {
    .cn-objc__img--abanico { height: 116px; }
    .cn-abanico__win { border-radius: 6px; }
    .cn-abanico__bar { height: 13px; gap: 3px; padding: 0 5px; }
    .cn-abanico__bar > i { width: 4px; height: 4px; }
    .cn-abanico__bar > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-abanico__win { transition: none; }
}

/* ─ Nosotros: el chat de ejemplo y las seis razones ─ */
.cn-nos-why { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.cn-nos-why__tel { position: relative; display: grid; place-items: center; }
.cn-nos-why__tel::before { content: ''; position: absolute; width: min(420px, 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc, #E0121B) 34%, transparent), transparent 68%); }
.cn-nos-why__tel .cn-tv-tel { position: relative; width: 270px; }
.cn-nos-why__lista { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 30px; }
.cn-nos-why__lista li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; gap: 3px 14px; }
.cn-nos-why__lista i { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; color: var(--acc-hi); background: color-mix(in srgb, var(--acc, #E0121B) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc, #E0121B) 30%, transparent); }
.cn-nos-why__lista b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.cn-nos-why__lista span { font-size: 14px; line-height: 1.5; color: var(--cn-tx-2); }

/* ─ Tablet y celular ─ */
@media (max-width: 1100px) {
    .cn-obj__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .cn-nos-why { grid-template-columns: minmax(0, 1fr); }
    .cn-nos-why__tel { order: 2; }
}
/* En el celular, las razones solo con su título y de dos en dos: el
   chat de al lado ya cuenta cómo se trabaja. */
@media (max-width: 640px) {
    .cn-nos-why__lista { gap: 14px 12px; margin-top: 24px; }
    .cn-nos-why__lista li { grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; }
    .cn-nos-why__lista i { grid-row: auto; width: 34px; height: 34px; border-radius: 10px; }
    .cn-nos-why__lista b { font-size: 14px; line-height: 1.25; }
    .cn-nos-why__lista span { display: none; }
    .cn-nos-why__tel .cn-tv-tel { width: 236px; }
}
@media (max-width: 980px) {
    .cn-sel { grid-template-columns: minmax(0, 1fr); }
    .cn-sel__ops { display: none; }
    .cn-sel__paneles { display: flex; flex-direction: column; gap: 14px; }
    .cn-sel__panel { opacity: 1; visibility: visible; transform: none; transition: none; gap: 16px; padding: 20px 16px 22px; border-radius: 24px; background: linear-gradient(180deg, #10131C, #0A0C12); border: 1px solid rgba(255,255,255,.08); }
    .cn-sel__cab { display: flex; align-items: center; gap: 12px; }
    .cn-sel__cab .cn-sel__ico { color: #07080C; background: var(--c); border-color: transparent; }
    .cn-sel__cab b { display: block; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; color: #fff; }
    .cn-sel__cab small { display: block; font-size: 13px; color: var(--cn-tx-3); }
    .cn-sel__arte { min-height: 0; padding: 16px 12px; border-radius: 18px; }
    .cn-sel__info { flex-direction: column; align-items: stretch; }
    .cn-sel__puntos { grid-template-columns: minmax(0, 1fr); }
    .cn-sel__btns .cn-btn { flex: 1 1 100%; justify-content: center; }
    /* Rejilla: de dos en dos, como una galería. */
    .cn-sel--rejilla .cn-sel__paneles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .cn-sel--rejilla .cn-sel__panel { grid-area: auto; }
    .cn-sel--rejilla .cn-sel__info { margin-top: auto; }
    .cn-sel__extra { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 22px 18px; border-radius: 24px; background: radial-gradient(90% 80% at 85% 0%, rgba(34,197,94,.2), transparent 70%), linear-gradient(180deg, #10131C, #0A0C12); border: 1px dashed rgba(34,197,94,.45); }
    .cn-sel__extra b { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; color: #fff; }
    .cn-sel__extra p { font-size: 14px; line-height: 1.5; color: var(--cn-tx-2); }
    .cn-sel__extra .cn-btn { width: 100%; }
    /* Si la extra quedaría sola en su fila, ocupa las dos columnas. */
    .cn-sel--rejilla .cn-sel__extra:nth-child(odd) { grid-column: 1 / -1; align-items: center; text-align: center; }
    .cn-sel--rejilla .cn-sel__extra:nth-child(odd) .cn-btn { width: auto; min-width: 220px; }
    .cn-sel--rejilla .cn-tv-web__pantalla img { animation: none !important; }

    .cn-ad__btns { width: 100%; }
    .cn-ad__btn { flex: 1; justify-content: center; padding: 11px 10px; font-size: 14px; }
    .cn-ad__lado { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .cn-ad__arte { min-height: 0; padding: 22px 14px; border-radius: 22px; }
    .cn-ad__puntos li { font-size: 15.5px; }

    .cn-anu { grid-template-columns: minmax(0, 1fr); }
    .cn-anu__wa { width: 100%; justify-content: center; }

    .cn-cad { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cn-cad__n { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 16px; text-align: left; }
    .cn-cad__ico { grid-row: 1 / 3; width: 50px; height: 50px; margin: 0; border-radius: 15px; }
    .cn-cad__n + .cn-cad__n::before { left: 40px; top: -13px; width: 2px; height: 14px; background: linear-gradient(180deg, rgba(255,255,255,.15), var(--c)); }
}
@media (max-width: 640px) {
    /* En el celular, de dos en dos: las seis se ven de un vistazo. */
    .cn-obj { gap: 20px; }
    .cn-obj__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cn-obj__chips { gap: 7px; }
    .cn-obj__chip { gap: 6px; padding: 9px 12px; font-size: 13px; }
    .cn-objc { border-radius: 18px; }
    .cn-objc__img { padding: 10px 10px 0; }
    .cn-objc__img img { border-radius: 8px 8px 0 0; }
    .cn-objc__txt { gap: 3px; padding: 12px 12px 0; }
    .cn-objc__txt small { font-size: 10px; }
    .cn-objc__txt b { font-size: 16px; line-height: 1.2; }
    .cn-objc__txt > span { font-size: 12.5px; line-height: 1.4; }
    .cn-objc__tags { display: none; }
    .cn-objc__go { margin: auto 12px 12px; padding-top: 10px; font-size: 13px; }
    .cn-objc__rec { top: 6px; right: 6px; padding: 4px 8px; font-size: 10.5px; }
    .cn-xls__grid { grid-template-columns: 22px 1.6fr .6fr .65fr .9fr; font-size: 10.5px; }
    .cn-xls__grid > :nth-child(6n) { display: none; }
    .cn-xls__postit { right: 4px; bottom: -18px; width: 124px; font-size: 12px; }
    .cn-anu__t { font-size: 17px; }

    /* Rejilla en el celular: visual, nombre y un solo botón por tarjeta. */
    .cn-sel--rejilla .cn-sel__paneles { gap: 10px; }
    .cn-sel--rejilla .cn-sel__panel { gap: 10px; padding: 10px 10px 12px; border-radius: 18px; }
    .cn-sel--rejilla .cn-sel__cab { order: 2; align-items: flex-start; }
    .cn-sel--rejilla .cn-sel__cab b { font-size: 15px; line-height: 1.25; }
    .cn-sel--rejilla .cn-sel__cab small { margin-top: 3px; font-size: 11.5px; line-height: 1.35; }
    .cn-sel--rejilla .cn-sel__arte { order: 1; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
    .cn-sel--rejilla .cn-sel__info { order: 3; }
    .cn-sel--rejilla .cn-sel__cab .cn-sel__ico,
    .cn-sel--rejilla .cn-sel__desc,
    .cn-sel--rejilla .cn-sel__puntos,
    .cn-sel--rejilla .cn-sel__btns .cn-btn ~ .cn-btn,
    .cn-sel--rejilla .cn-sel__largo,
    .cn-sel--rejilla .cn-tv-chip,
    .cn-sel--rejilla .cn-tv-web__bar > span { display: none; }
    .cn-sel--rejilla .cn-tv-web__bar { height: 20px; gap: 4px; padding: 0 9px; border-radius: 10px 10px 0 0; }
    .cn-sel--rejilla .cn-tv-web__bar > i { width: 6px; height: 6px; }
    .cn-sel--rejilla .cn-tv-web__pantalla { border-radius: 0 0 10px 10px; box-shadow: 0 18px 30px -20px rgba(0,0,0,.9); }
    .cn-sel--rejilla .cn-sel__btns .cn-btn, .cn-sel__extra .cn-btn { min-height: 42px; padding: 0 12px; gap: 7px; font-size: 14px; }
    .cn-sel__extra { gap: 8px; padding: 16px 12px; border-radius: 18px; }
    .cn-sel__extra b { font-size: 16px; line-height: 1.25; }
    .cn-sel__extra p { font-size: 12.5px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-sel__panel, .cn-ad__lado, .cn-objc { transition: none; }
    .cn-sel__panel.is-on .cn-tv-web--captura .cn-tv-web__pantalla img { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   EL MURO (tarjetas, columnas y cintas)
   Lo usan el hero de la portada y los de las páginas internas.
   ═══════════════════════════════════════════════════════════ */
.mw-card {
    margin: 0;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.9);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.mw-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 0 2px rgba(224,18,27,.6), 0 34px 60px -22px rgba(0,0,0,.6); }
.mw-card__bar { height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #F8FAFC; border-bottom: 1px solid #EEF2F7; }
.mw-card__bar i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mw-card__bar i:nth-child(1) { background: #FCA5A5; }
.mw-card__bar i:nth-child(2) { background: #FDE68A; }
.mw-card__bar i:nth-child(3) { background: #A7F3D0; }
.mw-card__bar span { margin-left: 8px; font-size: 10px; font-weight: 600; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.mw-card figcaption {
    position: absolute;
    left: 10px; bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: rgba(15,23,42,.84);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}
.mw-card figcaption b { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.mw-card--web  { --dot: #F87171; }
.mw-card--sis  { --dot: #60A5FA; }
.mw-card--dash { --dot: #34D399; }
.mw-card--foto { --dot: #FBBF24; }
.mw-card--foto img { aspect-ratio: 4 / 3; }
/* Columnas que suben y bajan: la lista va dos veces, así que correrla media
   altura (más medio hueco) cae justo sobre la copia y el bucle no tiene costura. */
.mw-col { width: var(--col-w, 320px); flex: none; }
.mw-track { display: flex; flex-direction: column; gap: var(--gap, 24px); animation: mw-up var(--dur, 56s) linear infinite; }
.mw-col--rev .mw-track { animation-name: mw-down; }
.mw-col:hover .mw-track { animation-play-state: paused; }
@keyframes mw-up   { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--gap, 24px) / 2)); } }
@keyframes mw-down { from { transform: translateY(calc(-50% - var(--gap, 24px) / 2)); } to { transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════
   HERO DE LAS PÁGINAS INTERNAS
   El de la portada en pequeño: oscuro, con la luz del acento de la
   página, el texto a la izquierda y a la derecha un visual propio
   (un muro de trabajo relacionado, una maqueta o fotos). Lo pinta
   cn_hero() en partials/cine.php.
   ═══════════════════════════════════════════════════════════ */
.cn-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(var(--topbar-h) + var(--nav-h));
    background: var(--cn-bg);
    color: var(--cn-tx);
}
.cn-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('/img/bg/noise.svg');
    opacity: .06;
    mix-blend-mode: overlay;
}
.cn-hero__in {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    min-height: clamp(540px, calc(88svh - var(--topbar-h) - var(--nav-h)), 720px);
    padding-top: clamp(28px, 4svh, 56px);
    padding-bottom: clamp(48px, 7svh, 88px);
}
.cn-hero__copy > * { animation: cn-entra .8s cubic-bezier(.2,.8,.2,1) both; }
.cn-hero__copy > :nth-child(2) { animation-delay: .06s; }
.cn-hero__copy > :nth-child(3) { animation-delay: .12s; }
.cn-hero__copy > :nth-child(4) { animation-delay: .18s; }
.cn-hero__copy > :nth-child(5) { animation-delay: .24s; }
.cn-hero__copy > :nth-child(6) { animation-delay: .3s; }
@keyframes cn-entra { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
/* El título no se desvanece, solo sube: un texto que arranca transparente
   no cuenta para Google como pintado (el LCP) hasta mucho después. */
.cn-hero__copy > .cn-hero__title { animation-name: cn-sube; }
@keyframes cn-sube { from { translate: 0 16px; } to { translate: 0 0; } }
/* La forma base de las migas venía de css/pages.css; una página que no lo
   carga (el Lab) las mostraba pegadas: "Inicio/ Lab". */
.cn-hero .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--cn-tx-3); margin-bottom: 22px; }
.cn-hero .crumbs__sep { opacity: .5; }
.cn-hero .crumbs a:hover, .cn-hero .crumbs span[aria-current] { color: var(--cn-tx); }
.cn-hero .cn-pill { margin-bottom: 22px; }
.cn-hero__title {
    font-size: clamp(38px, min(4.6vw, 7.6svh), 70px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--cn-tx);
    text-wrap: balance;
    max-width: 11.5em;
}
.cn-hero__title mark { text-shadow: 0 0 34px color-mix(in srgb, var(--acc, #E0121B) 45%, transparent); }
.cn-hero__lead { margin-top: 22px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; color: var(--cn-tx-2); max-width: 560px; }
.cn-hero__ctas { margin-top: 32px; }
/* Siempre en una fila: con rótulos largos, el flex las partía en dos
   filas y la tercera cifra quedaba suelta debajo. */
.cn-hero__stats { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px 28px; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--cn-line); max-width: 560px; }
.cn-hero__stats b { display: block; font-size: 28px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--cn-tx); }
.cn-hero__stats span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--cn-tx-3); }

/* Luz de fondo: el acento de la página arriba a la derecha y el rojo de
   la marca abajo a la izquierda. */
.cn-hero__luz {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 85% 18%, color-mix(in srgb, var(--acc, #E0121B) 28%, transparent), transparent 70%),
        radial-gradient(700px 520px at 6% 96%, rgba(224,18,27,.16), transparent 70%);
}

/* Visual: un panel a la derecha que el texto nunca pisa. */
.cn-hero__visual { position: relative; align-self: stretch; min-height: 420px; }

/* Variante "muro": columnas de trabajo relacionado, inclinadas y en
   movimiento, que se apagan hacia el texto. */
.cn-hero--muro .cn-hero__visual { position: static; }
.cn-hmuro {
    position: absolute;
    z-index: 0;
    top: 0; bottom: 0; right: 0;
    left: 46%;
    overflow: hidden;
    perspective: 1400px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 22%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 22%, #000 82%, transparent 100%);
    mask-composite: intersect;
}
.cn-hmuro__plano {
    position: absolute;
    left: 6%;
    top: -34%;
    height: 170%;
    display: flex;
    gap: 22px;
    transform-origin: 30% 50%;
    transform: rotateX(18deg) rotateY(-14deg) rotateZ(-8deg);
}
.cn-hmuro .mw-col { --col-w: 290px; --gap: 22px; }

/* Variante "maqueta": una o dos maquetas enmarcadas que flotan. */
.cn-shot {
    position: absolute;
    inset: 4% 0 4% 0;
    display: grid;
    place-items: center;
    perspective: 1600px;
}
.cn-shot__main {
    width: 100%;
    max-width: 640px;
    transform: rotateY(-10deg) rotateX(4deg);
    transform-origin: 70% 50%;
    animation: cn-flota 9s ease-in-out infinite;
}
.cn-shot__main img { aspect-ratio: auto; }
.cn-shot__chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: 16px;
    background: rgba(16,19,28,.86);
    border: 1px solid var(--cn-line-2);
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    animation: cn-flota 7s ease-in-out infinite;
}
.cn-shot__chip > i {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 16px;
    color: var(--acc-hi);
    background: color-mix(in srgb, var(--acc, #E0121B) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--acc, #E0121B) 38%, transparent);
}
.cn-shot__chip b { display: block; font-size: 15px; line-height: 1.2; }
.cn-shot__chip small { font-size: 12px; color: rgba(255,255,255,.6); }
.cn-shot__chip--a { left: -4%; bottom: 14%; animation-delay: -2s; }
.cn-shot__chip--b { right: -2%; top: 10%; animation-delay: -4.5s; }
@keyframes cn-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Variante "fotos": rejilla inclinada de fotos (sectores). */
.cn-fotos {
    position: absolute;
    inset: 0 -12% 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-content: center;
    transform: rotate(-6deg);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.cn-fotos figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.95); }
.cn-fotos figure:nth-child(even) { translate: 0 44px; }
.cn-fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cn-fotos figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(7,8,12,.78); font-size: 11.5px; font-weight: 700; color: #fff; }

/* ─ Responsive ─ */
@media (max-width: 1100px) {
    
    .cn-steps { --cols: 2 !important; gap: 40px 28px; }
    .cn-step::before { display: none; }
    
    
    
}
@media (max-width: 980px) {
    .cn-wrap { padding: 0 20px; }
    .cn-head--row { grid-template-columns: minmax(0, 1fr); }
    .cn-split { grid-template-columns: minmax(0, 1fr); }
    .cn-split--rev > :first-child { order: 0; }
    .cn-cta { grid-template-columns: minmax(0, 1fr); }

    .cn-hero { --hv-h: clamp(230px, 34svh, 340px); }
    .cn-hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; padding-top: 0; }
    .cn-hero__copy { order: 2; }
    .cn-hero__visual { order: 1; min-height: 0; height: var(--hv-h); margin: 0 -20px; overflow: hidden; }
    .cn-hero__visual::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(7,8,12,.3) 0%, rgba(7,8,12,0) 30%, rgba(7,8,12,.55) 70%, var(--cn-bg) 100%);
    }
    /* El muro no vive dentro del visual (está a nivel de la sección), así
       que se coloca a mano encima del hueco que deja el visual: justo bajo
       la barra y con su mismo alto. El fundido a negro va en su ::after. */
    .cn-hero--muro .cn-hero__visual::after { display: none; }
    .cn-hmuro {
        position: absolute;
        top: calc(var(--topbar-h) + var(--nav-h)); bottom: auto; left: 0; right: 0;
        height: var(--hv-h);
        perspective: none;
        -webkit-mask-image: none; mask-image: none;
    }
    .cn-hmuro::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(7,8,12,.3) 0%, rgba(7,8,12,0) 30%, rgba(7,8,12,.55) 70%, var(--cn-bg) 100%);
    }
    .cn-hmuro__plano { left: 50%; top: -45%; height: 200%; translate: -50% 0; transform: rotate(-10deg); gap: 14px; }
    .cn-hmuro .mw-col { --col-w: 190px; --gap: 14px; }
    .cn-shot { inset: 6% 18px 0; }
    .cn-shot__main { max-width: 520px; transform: none; }
    .cn-shot__chip { display: none; }
    .cn-fotos { inset: 0 -20px; transform: rotate(-6deg) scale(.92); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .cn-hero__copy { margin-top: -40px; position: relative; z-index: 4; }
}
@media (max-width: 640px) {
    .cn-wrap { padding: 0 16px; }
    .cn-steps { --cols: 1 !important; }
    /* Pasos en el celular: el número al lado del texto y una línea que
       los une hacia abajo (con el número encima, cada paso medía el doble). */
    .cn-steps { gap: 24px; }
    .cn-step { min-height: 46px; padding: 0 0 0 64px; }
    .cn-step::after { width: 46px; height: 46px; font-size: 14px; }
    .cn-step::before { display: block; left: 22px; right: auto; top: 54px; bottom: -20px; width: 2px; height: auto; background: linear-gradient(180deg, color-mix(in srgb, var(--acc, #E0121B) 60%, transparent), var(--cn-line-2)); }
    .cn-step:last-child::before { display: none; }
    .cn-step h3 { padding-top: 2px; margin-bottom: 4px; font-size: 18px; }
    .cn-step p { font-size: 14.5px; line-height: 1.5; }
    .cn-step small { margin-top: 6px; }
    
    
    
    
    .cn-cta { border-radius: 26px; }
    .cn-cta__action, .cn-cta__action .cn-btn { width: 100%; }
    .cn-faq details > div { padding-right: 0; }
    .cn-hero__visual { margin: 0 -16px; }
    .cn-hero__title { font-size: clamp(31px, 8.8vw, 40px); }
    .cn-hero__stats { gap: 12px 16px; margin-top: 30px; }
    .cn-hero__stats b { font-size: 23px; }
    .cn-hero__stats span { font-size: 12px; }
    .cn-hero__ctas .cn-btn { width: 100%; }
    .cn-btns .cn-btn { flex: 1 1 100%; }
}

/* Portadas en tablet y celular, sin cortes. El visual se funde con una
   máscara y no con una capa negra encima (dejaba una franja negra justo
   donde empieza el texto), y la luz roja del fondo se apaga antes del final
   de la portada (si no, se cortaba en seco contra la sección siguiente). */
@media (max-width: 980px) {
    .cn-hero__visual::after { display: none; }
    .cn-hero__visual { -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
    .cn-hmuro { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
    .cn-hmuro::after { background: linear-gradient(180deg, rgba(7,8,12,.3) 0%, rgba(7,8,12,0) 30%); }
}
.cn-hero__luz { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
/* Las portadas con una interfaz dibujada (búsqueda, flujo, reel) o con
   fotos rotuladas (Sectores) tienen letras: el fundido acaba antes de los 40px en los que la copia sube
   sobre el visual, para que las migas no se lean encima de otro texto. */
@media (max-width: 980px) {
    .cn-hero--html:has(.cn-serp, .cn-flujo, .cn-reel) .cn-hero__visual,
    .cn-hero:has(.cn-fotos) .cn-hero__visual { -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 86%); mask-image: linear-gradient(180deg, #000 52%, transparent 86%); }
    .cn-serp__tabs { display: none; }
    .cn-serp__res--ad { margin-top: 14px; }
}

/* Tres cifras: no se parten en 2 + 1. Tres columnas hasta el móvil y,
   ahí, una debajo de otra. */

@media (prefers-reduced-motion: reduce) {
    .cn-hero__copy > *, .cn-shot__main, .cn-shot__chip, .cn-pill b { animation: none !important; }
    .mw-track { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   FRANJA DE LOGOS (partials/clientes.php) sobre fondo oscuro
   Las tarjetas de los logos siguen blancas, con su color real: lo que
   cambia es la superficie de alrededor, que ahora es la del sitio.
   ═══════════════════════════════════════════════════════════ */
.cli-band { background: var(--cn-bg-alt); border-block: 1px solid var(--cn-line); padding: clamp(60px, 7vw, 96px) 0; }
.cli-band::before { background: radial-gradient(60% 90% at 50% -20%, rgba(224,18,27,.16), transparent 70%); }
.cli-band .cli-band__filo { background: linear-gradient(90deg, transparent 0%, rgba(224,18,27,.3) 18%, rgba(255,59,68,.8) 50%, rgba(224,18,27,.3) 82%, transparent 100%) top / 100% 1px no-repeat; }
.cli-band__label { color: var(--cn-tx); font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.035em; }
.cli-band__eyebrow { color: var(--cn-red-hi); }
.cli-band__sub, .cli-band__dato { color: var(--cn-tx-3); }
.cli-band__dato b { color: var(--cn-tx); }
.cli-logo { border-color: rgba(255,255,255,.1); box-shadow: 0 20px 40px -24px rgba(0,0,0,.9); }