/* ═══════════════════════════════════════════════════════════
   CINE-PAGINAS.CSS — Las páginas internas en "cine oscuro"
   WebClicStudio

   Las páginas internas están hechas con los componentes de
   css/pages.css (.sec, .icard, .step, .timeline, .faq…), pensados para
   fondo claro. Este archivo los repinta en oscuro, con el mismo lenguaje
   que la portada: superficies casi negras, vidrio, el acento de cada
   página como luz. Se carga DESPUÉS de pages.css y de css/cine.css.

   Qué NO cambia: el marcado ni el contenido. Las secciones siguen
   diciendo lo mismo; lo que cambia es cómo se ven.

   Las tarjetas de formulario (contacto) siguen claras a propósito: un
   formulario blanco sobre fondo oscuro invita a escribir; un formulario
   negro, no (ver la historia en css/pages.css, "CONTACTO — sep. 2026").
   ═══════════════════════════════════════════════════════════ */

body[data-theme] { background: var(--cn-bg); color: var(--cn-tx); }
.page-main:has(> .cn-hero) { padding-top: 0; }
.text-acc { color: var(--acc-hi); }

/* ─ Secciones ─ */
.sec { padding: clamp(80px, 9vw, 128px) 0; color: var(--cn-tx); }
.sec--white { background: var(--cn-bg); }
.sec--soft  { background: var(--cn-bg-alt); }
.sec--tint  { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%), var(--cn-bg-alt); }
/* Secciones sin clase de fondo: oscuras igual (algunas traían un azul
   noche en el atributo style; ese sigue mandando). */
.sec:not(.sec--white):not(.sec--soft):not(.sec--tint):not(.sec--ink):not(.sec--contacto) { background-color: var(--cn-bg); }

/* Costuras: en oscuro, una línea de luz y la barra del acento, con el
   punto recortado contra el fondo oscuro (antes, contra blanco). */
:is(.sec--white, .sec--soft, .sec--tint) + :is(.sec--white, .sec--soft, .sec--tint) { border-top: 1px solid var(--cn-line); }
:is(.sec--white, .sec--soft, .sec--tint) + :is(.sec--white, .sec--soft, .sec--tint):not(.bg-section)::after {
    box-shadow: 0 0 0 5px var(--cn-bg), 0 0 18px 2px color-mix(in srgb, var(--acc) 70%, transparent);
}

/* ─ Tipografía ─ */
.eyebrow-acc { color: var(--acc-hi); letter-spacing: .18em; }
.eyebrow-acc::before { background: var(--acc-hi); box-shadow: 0 0 10px var(--acc); }
.h-sec { color: var(--cn-tx); font-size: clamp(30px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -0.038em; text-wrap: balance; }
.h-sec .text-acc { color: var(--acc-hi); }
.sec .center > .h-sec::after { background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 30%, transparent)); }
.p-lead, .lead { color: var(--cn-tx-2); }
.prose p { color: var(--cn-tx-2); }
.crumbs { color: var(--cn-tx-3); }
.crumbs a:hover, .crumbs span[aria-current] { color: var(--cn-tx); }

/* Texto de párrafo genérico dentro de secciones oscuras que traía el gris
   de fondo claro. */
.sec :is(p, li):not([class]) { color: var(--cn-tx-2); }
.sec :is(h2, h3, h4):not([class]) { color: var(--cn-tx); }

/* ─ Botones ─ */
.btn--ghost { color: var(--cn-tx); border-color: var(--cn-line-2); background: rgba(255,255,255,.04); }
.btn--ghost:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.1); color: #fff; }
.btn--ink { background: #fff; color: #0B1220; }
.btn--ink:hover { background: #E2E8F0; color: #0B1220; }

/* ─ Tarjetas con icono ─ */
.icard {
    background: var(--cn-card);
    border: 1px solid var(--cn-line);
    border-radius: 22px;
}
.icard:hover {
    border-color: color-mix(in srgb, var(--acc) 50%, transparent);
    box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--acc) 60%, transparent);
}
.icard__ico {
    color: var(--acc-hi);
    background: color-mix(in srgb, var(--acc) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
}
.icard h3 { color: var(--cn-tx); }
.icard p { color: var(--cn-tx-2); }
.icard__more { color: var(--acc-hi); }
.icard--num .num { color: transparent; -webkit-text-stroke: 1px var(--cn-line-2); font-size: 56px; }

/* Lista con check */
.flist li { color: var(--cn-tx-2); }
.flist li::before {
    background-color: color-mix(in srgb, var(--acc) 22%, transparent);
    background-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    border-color: color-mix(in srgb, var(--acc) 50%, transparent);
}

/* Imagen junto al texto */
.split__media img { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px rgba(0,0,0,.95); }
.split__media--frame { background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 60%, #000), #0E1018); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--acc) 70%, transparent); }

/* ─ Pasos ─ */
.step { background: var(--cn-card); border: 1px solid var(--cn-line); border-radius: 20px; }
.step h3 { color: var(--cn-tx); }
.step p { color: var(--cn-tx-2); }
.timeline::before { background: var(--cn-line-2); }
.tl-dot { background: #0E1018; box-shadow: 0 0 0 6px var(--cn-bg), 0 10px 26px -8px color-mix(in srgb, var(--acc) 70%, transparent); }
.sec--soft .tl-dot { box-shadow: 0 0 0 6px var(--cn-bg-alt), 0 10px 26px -8px color-mix(in srgb, var(--acc) 70%, transparent); }
.tl-item h3 { color: var(--cn-tx); }
.tl-item p { color: var(--cn-tx-2); }

/* ─ Preguntas frecuentes ─ */
.faq__item { background: var(--cn-card); border: 1px solid var(--cn-line); border-radius: 16px; }
.faq__item[open] { border-color: color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--acc) 60%, transparent); }
.faq__item summary { color: var(--cn-tx); }
.faq__item summary::after { color: var(--acc-hi); }
.faq__item p { color: var(--cn-tx-2); }

/* ─ Banda de cierre: deja de ser un rectángulo plano de color y pasa a
   ser el mismo panel de cine que el cierre de la portada. ─ */
.cta-band {
    background:
        radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--acc) 38%, transparent), transparent 70%),
        radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%),
        #0E1018;
    border: 1px solid var(--cn-line-2);
    border-radius: 32px;
    padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 64px);
    box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--acc) 70%, transparent);
}
.cta-band::before {
    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%);
}
.cta-band::after { display: none; }
.cta-band h2 { font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -0.04em; line-height: 1.05; }
.cta-band p { color: rgba(255,255,255,.74); }
.cta-band .btn--light { color: #0B1220; }

/* ─ Planes ─ */
.plan { background: var(--cn-card); border: 1px solid var(--cn-line); }
.plan:hover { box-shadow: 0 34px 70px -40px rgba(0,0,0,.9); }
.plan--featured { border-color: var(--acc); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 16%, transparent), rgba(255,255,255,.02)); }
.plan__name, .plan__price .amount { color: var(--cn-tx); }
.plan__desc, .plan__price .cur, .plan__features li { color: var(--cn-tx-2); }
.plan__note { color: var(--cn-tx-3); }
.plan__features li.off { color: rgba(255,255,255,.3); }

/* ─ Blog ─ */
.post-card { background: #0E1018; border: 1px solid var(--cn-line); }
.post-card__img { background: #151925; }
.post-card__img::after { background: linear-gradient(180deg, transparent 50%, rgba(7,8,12,.5)); }
.post-card__cat { background: rgba(14,16,24,.85); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.post-card__body h3 { color: var(--cn-tx); }
.post-card__body p { color: var(--cn-tx-2); }
.post-card__meta { border-top-color: var(--cn-line); color: var(--cn-tx-3); }
.post-card__more, .post-card__meta i { color: var(--acc-hi); }
.blog-filtros { background: var(--cn-card); border-color: var(--cn-line); }
.blog-filtros__sep { background: var(--cn-line); }
.blog-buscar input { background: rgba(255,255,255,.05); border-color: var(--cn-line-2); color: #fff; }
.blog-buscar input::placeholder { color: var(--cn-tx-3); }
.blog-buscar input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent); }
.blog-buscar i { color: var(--cn-tx-3); }
.blog-chip { background: transparent; border-color: var(--cn-line-2); color: var(--cn-tx-2); }
.blog-chip:hover { color: #fff; }
.blog-cuenta { color: var(--cn-tx-3); }
.blog-cuenta strong { color: #fff; }

/* ─ Proyectos (galería y cifras) ─ */
.work-filter { background: transparent; border-color: var(--cn-line-2); color: var(--cn-tx-2); }
.work-card { background: #0E1018; border: 1px solid var(--cn-line); }
.work-card__badge { background: rgba(14,16,24,.85); color: #fff; }
.work-card__body h3 { color: var(--cn-tx); }
.work-card__body p { color: var(--cn-tx-2); }
.work-card__tags span { color: var(--acc-hi); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.statbar { background: transparent; border: 0; border-block: 1px solid var(--cn-line); border-radius: 0; }
.statbar__c { border-right-color: var(--cn-line); padding: 34px 20px; }
.statbar__n { color: var(--cn-tx); font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.045em; }
.statbar__n span { color: var(--acc-hi); }
.statbar__l { color: var(--cn-tx-3); }
@media (max-width: 640px) { .statbar { background: transparent; } .statbar__c { border-bottom: 1px solid var(--cn-line); } }

/* Chips */
.pill { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc-hi); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }

/* ─ Contacto: fondo oscuro, la tarjeta del formulario sigue clara ─ */
.sec--contacto {
    background:
        radial-gradient(ellipse 60% 50% at 88% 0%, rgba(224,18,27,.18), transparent 62%),
        radial-gradient(ellipse 55% 45% at 5% 100%, rgba(71,85,105,.18), transparent 60%),
        var(--cn-bg);
}
.sec--contacto .cinfo,
.cinfo,
.ct-garantia { background: var(--cn-card); border-color: var(--cn-line); box-shadow: none; }
.cinfo h3, .ct-garantia strong { color: var(--cn-tx); }
.cinfo p, .cinfo a, .ct-garantia { color: var(--cn-tx-2); }
.cinfo__ico { color: var(--acc-hi); background: color-mix(in srgb, var(--acc) 15%, transparent); }
.form-card .field label { color: #0F172A; }

/* ─ Configurador de soluciones (planes) ─ */
.cfg-rubro { background: var(--cn-card); border-color: var(--cn-line); color: var(--cn-tx); }
.cfg-rubro i { color: var(--cn-tx-3); }
.cfg-rubro:hover { box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--acc) 60%, transparent); }
.cfg-panel { background: var(--cn-card); border-color: var(--cn-line); }
.cfg-panel__dolor { border-bottom-color: var(--cn-line); }
.cfg-panel__dolor p, .cfg-panel__necesita li { color: var(--cn-tx); }
.cfg-demo, .cfg-web { background: #0E1018; border-color: var(--cn-line); }
.cfg-demo__nombre, .cfg-web__nombre { color: var(--cn-tx); }
.cfg-demo__txt, .cfg-web__txt, .cfg-nota { color: var(--cn-tx-2); }
.cfg-demo__label { color: var(--acc-hi); }
.cfg-web__label { color: var(--acc-hi); }
.cfg-web__btn { background: transparent; color: #fff; border-color: var(--cn-line-2); }
.cfg-web__btn:hover { background: #fff; color: #0B1220; }

/* La reveal de pages.js sigue igual; solo que en oscuro las tarjetas
   entran con un poco más de recorrido. */
.reveal { transform: translateY(28px); }

/* ═══════════════════════════════════════════════════════════
   EL ARTÍCULO DEL BLOG (blog-post.php)
   Sus estilos propios, en la página, son de fondo claro: en oscuro el
   texto del artículo salía gris oscuro sobre negro, casi ilegible, y
   la barra lateral y las secciones de abajo quedaban como cajas blancas.
   ═══════════════════════════════════════════════════════════ */
.post-body { color: var(--cn-tx-2); }
.post-body h2, .post-body h3, .post-body h4, .post-body strong { color: #fff; }
.post-body a { color: var(--acc-hi); }
.post-body ul > li::before { background: var(--acc-hi); }
.post-body ol > li::before { color: var(--acc-hi); }
.post-body blockquote { background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--cn-tx); }
.post-body code { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc-hi); }
.post-body pre { background: #05060A; border: 1px solid var(--cn-line); }
.post-body th { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc-hi); }
.post-body td { border-bottom-color: var(--cn-line); }
.post-body img { box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }

.post-share { border-top-color: var(--cn-line); }
.post-share span { color: var(--cn-tx-3); }
.post-share a { background: rgba(255,255,255,.06); color: var(--cn-tx); }

.post-cta {
    background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%), #0E1018;
    border: 1px solid color-mix(in srgb, var(--acc) 34%, rgba(255,255,255,.08));
}
.post-cta p.label { color: var(--acc-hi); }
.post-cta h3 { color: #fff; }
.post-cta p.sub { color: var(--cn-tx-2); }

.aside-card:not(.aside-promo) { background: #0E1018; border-color: var(--cn-line); }
.aside-card__t { color: #fff; }
.aside-card__t i { color: var(--acc-hi); }
.aside-promo { border: 1px solid rgba(224,18,27,.25); }
.rel-item:hover { background: rgba(255,255,255,.05); }
.rel-item__img { background: #151925; }
.rel-item__cat { color: var(--acc-hi); }
.rel-item__t { color: #fff; }

.post-sell { background: var(--cn-bg-alt); border-top-color: var(--cn-line); }
.sell-head h2 { color: #fff; }
.sell-head p { color: var(--cn-tx-2); }
.sell-b { background: #0E1018; border-color: var(--cn-line); }
.sell-b:hover { border-color: var(--cn-line-2); box-shadow: 0 28px 60px -34px rgba(0,0,0,.95); }
.sell-b h3 { color: #fff; }
.sell-b p { color: var(--cn-tx-2); }

.nl-box h3 { color: #fff; }
.nl-box p { color: var(--cn-tx-2); }
.nl-form input { background: rgba(255,255,255,.05); border-color: var(--cn-line-2); color: #fff; }
.nl-form input::placeholder { color: var(--cn-tx-3); }

#post-loading .skel { background: rgba(255,255,255,.07); }
.err-404 h2 { color: #fff; }
.err-404 p { color: var(--cn-tx-2); }