/* ═══════════════════════════════════════════════════════════════════════════
   D.H.T — TEMA TERMINAL
   El lenguaje visual de la compra (checkout) aplicado a toda la web:
   fondo negro verdoso, ventanas de terminal con barra de título, paneles con
   borde ácido, prompts ">", marcadores [ ] y brillo fósforo.
   Las ventanas (.tw) las crea matrix.js alrededor de cada bloque principal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Variables base (antes en claude-widgets.css, que ya no se carga mientras
   el chatbot y el IA LAB estén apagados). :where = no pisa a las de cada página. */
:where(:root) {
    --black:           #060608;
    --white:           #ffffff;
    --acid-yellow:     #C8FF00;
    --acid-yellow-dim: rgba(200,255,0,0.12);
    --concrete-gray:   #8C8C7A;
    --dark-gray:       #0d0d10;
    --mid-gray:        #141418;
    --card-bg:         #111115;
    --border:          rgba(255,255,255,0.06);
    --border-yellow:   rgba(200,255,0,0.18);
    --glow-sm:         0 0 20px rgba(200,255,0,0.25);
    --transition:      0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --expo:            cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ PILA DE BOTONES FLOTANTES ============
   De abajo arriba: volver arriba → WhatsApp → chat. Mismo tamaño y eje.
   En páginas sin WhatsApp (servicios) el chat se queda abajo del todo. */
:root {
    --float-size: 52px;
    --float-gap: 12px;
    --float-right: 2rem;
    --float-bottom: 2rem;
    --float-step: calc(var(--float-size) + var(--float-gap));
    --chat-fab-bottom: var(--float-bottom);
}
body:has(.whatsapp-float) { --chat-fab-bottom: calc(var(--float-bottom) + 2 * var(--float-step)); }
@media (max-width: 768px) {
    :root { --float-size: 48px; --float-gap: 10px; --float-right: 1rem; --float-bottom: 1rem; }
}


:root {
    --black: #050704;
    --dark-gray: #070a05;
    --mid-gray: #0c1008;
    --card-bg: #0b0e07;
    --border: rgba(200,255,0,.14);
    --border-yellow: rgba(200,255,0,.35);
    --white: #f1fbe4;
    --concrete-gray: #8f9b7d;
    --term-text: #e9ffd0;
    --term-muted: rgba(233,255,208,.6);
    --term-line: rgba(200,255,0,.15);
    --term-line-strong: rgba(200,255,0,.45);
}

body {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(200,255,0,.05), transparent 70%),
        #050704;
    color: var(--term-text);
}

/* ── Ventana de terminal ─────────────────────────────────────────────────── */
.tw {
    position: relative;
    width: 100%; max-width: 1240px; margin: 0 auto;
    background: rgba(5,7,4,.9);
    border: 1px solid var(--term-line-strong);
    box-shadow:
        0 0 0 1px rgba(200,255,0,.06),
        0 0 60px rgba(200,255,0,.1),
        0 30px 80px rgba(0,0,0,.6),
        inset 0 0 80px rgba(200,255,0,.035);
}
.tw::after { /* líneas de escaneo */
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.14) 3px, transparent 4px);
    mix-blend-mode: multiply;
}
.tw-bar {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid rgba(200,255,0,.25);
    background: linear-gradient(180deg, rgba(200,255,0,.08), rgba(200,255,0,.02));
    font-family: 'DM Mono', monospace;
}
.tw-dots { display: flex; gap: .4rem; flex-shrink: 0; }
.tw-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(200,255,0,.25); }
.tw-dots i:first-child { background: var(--acid-yellow); box-shadow: 0 0 8px var(--acid-yellow); }
.tw-path { flex: 1; min-width: 0; font-size: .72rem; color: rgba(200,255,0,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-path b { color: var(--acid-yellow); font-weight: 400; }
.tw-meta { flex-shrink: 0; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--acid-yellow); }
.tw-meta::before { content: '● '; animation: mxBlink 1.6s steps(1) infinite; }
.tw-body { position: relative; padding: clamp(1rem, 2.4vw, 2rem); }
.tw-body > * { margin-left: 0; margin-right: 0; max-width: none; }
@media (max-width: 600px) {
    .tw-meta { display: none; }
    .tw-body { padding: .9rem; }
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
header {
    background: rgba(5,7,4,.88);
    border-bottom: 1px solid rgba(200,255,0,.25);
    box-shadow: 0 1px 0 rgba(200,255,0,.05), 0 10px 40px rgba(0,0,0,.4);
}
header nav a::before { content: './'; color: rgba(200,255,0,.45); }
header nav a:hover::before { color: var(--acid-yellow); }
.logo { text-shadow: 0 0 18px rgba(200,255,0,.45); }

/* ── Títulos de sección: > TÍTULO▌ ───────────────────────────────────────── */
.section-title::before, .service-hero h1::before { content: '> '; color: var(--acid-yellow); text-shadow: 0 0 16px rgba(200,255,0,.6); }
.section-title { color: #fff; text-shadow: 0 0 24px rgba(200,255,0,.22); }
.tw-caret {
    display: inline-block; flex-shrink: 0;
    width: .42em; height: .7em; align-self: center;
    font-size: clamp(2.5rem, 6vw, 5rem);
    background: var(--acid-yellow); box-shadow: 0 0 14px rgba(200,255,0,.6);
    animation: mxBlink 1s steps(1) infinite;
}
.section-line { height: 6px; background: repeating-linear-gradient(90deg, rgba(200,255,0,.35) 0 6px, transparent 6px 9px); opacity: .5; }
.section-number { color: var(--acid-yellow); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.header-cta { display: inline-block; text-decoration: none; }
@media (max-width: 1024px) { header:has(.hamburger) > .header-cta { display: none; } }  /* en móvil está en el menú */
.btn-primary, .contact-submit, .header-cta:hover, .cta-btn:hover, .newsletter-btn {
    box-shadow: 0 0 24px rgba(200,255,0,.35);
}
.btn-secondary { border-color: rgba(200,255,0,.35) !important; color: var(--term-text); }
.btn-secondary:hover { border-color: var(--acid-yellow) !important; color: var(--acid-yellow); }
.btn-primary span::after, .contact-submit span::after { content: ' →'; }

/* ── Paneles (tarjetas) — mismo lenguaje que las filas de plan ───────────── */
.service-card, .portfolio-card, .testimonial-card, .blog-card, .process-step,
.identity-block, .stat-item, .content-item, .pc, .client-logo-link {
    background: linear-gradient(180deg, rgba(200,255,0,.035), rgba(200,255,0,.008)) !important;
    border-color: var(--term-line) !important;
}
.service-card { border: 1px solid var(--term-line) !important; box-shadow: none; }
.service-card:hover, .portfolio-card:hover, .testimonial-card:hover, .blog-card:hover,
.process-step:hover, .identity-block:hover, .content-item:hover, .pc:hover, .client-logo-link:hover {
    border-color: var(--term-line-strong) !important;
    background: linear-gradient(90deg, rgba(200,255,0,.1), rgba(200,255,0,.025)) !important;
    box-shadow: 0 0 24px rgba(200,255,0,.15), inset 3px 0 0 var(--acid-yellow) !important;
}
.service-card-bg { opacity: .25; }
.service-name, .pc-name { color: #fff; }
.service-desc, .portfolio-cat, .blog-excerpt, .testimonial-quote, .process-desc, .identity-block-content, .content-item-desc, .feature-desc, .pc-desc {
    color: var(--term-muted);
}
.service-tags span::before, .pricing-trust li::before { content: '['; margin-right: .25em; color: rgba(200,255,0,.55); }
.service-tags span::after { content: ']'; margin-left: .25em; color: rgba(200,255,0,.55); }
.service-tags span { border-color: rgba(200,255,0,.15); color: rgba(233,255,208,.55); }
.sc-num-bg { color: var(--acid-yellow); opacity: .05; }

/* Contadores y números grandes con brillo fósforo */
.stat-number, .process-number, .pc-amount, .ct-price { text-shadow: 0 0 20px rgba(200,255,0,.35); }
.stat-number { color: var(--acid-yellow); }
.testimonial-stars { color: var(--acid-yellow); text-shadow: 0 0 10px rgba(200,255,0,.5); }

/* ── Tarjetas de plan (páginas de servicio) ──────────────────────────────── */
.pc { border: 1px solid var(--term-line) !important; }
.pc--popular {
    border-color: var(--acid-yellow) !important;
    background: linear-gradient(180deg, rgba(200,255,0,.12), rgba(200,255,0,.03)) !important;
    box-shadow: 0 0 30px rgba(200,255,0,.18), inset 3px 0 0 var(--acid-yellow) !important;
}
.pc::before { display: none; }
.pc-tier::before { content: '[ ] '; color: rgba(200,255,0,.55); }
.pc--popular .pc-tier::before { content: '[•] '; color: var(--acid-yellow); }
.pc-price { border-bottom: 1px dashed rgba(200,255,0,.25) !important; }
.pc-badge { box-shadow: 0 0 16px rgba(200,255,0,.5); }
@media (max-width: 760px) {
    .pc-badge { position: static; align-self: flex-start; margin-bottom: 1rem; }
}
.pc-cta--primary, .ct-cta--primary { box-shadow: 0 0 24px rgba(200,255,0,.35); }
.pricing-intro, .pricing-foot { color: var(--term-muted); }
.pricing-trust li::before { content: '['; }
.pricing-trust span { display: none; }
.pricing-trust li::after { content: '✓]'; order: -1; color: var(--acid-yellow); margin-right: .4em; }
.pricing-trust li::before { content: '['; order: -2; margin-right: 0; }

/* Comparativa */
.compare-scroll { border-color: var(--term-line); }
.tw .compare-scroll { border: 0; }
.compare-table th, .compare-table td { border-bottom-color: rgba(200,255,0,.1); }
.compare-table thead th, .compare-table tfoot td, .compare-table tfoot th, .compare-table thead .ct-corner { background: #070a05; }
.compare-table thead th { border-bottom-color: rgba(200,255,0,.35); }
.compare-table tbody th[scope="row"] { background: #050704; color: var(--term-text); }
.compare-table th.is-popular { background: linear-gradient(180deg, rgba(200,255,0,.14), #070a05); }

/* ── Proceso, identidad, FAQ ─────────────────────────────────────────────── */
.process-steps, .faq-list { border-color: var(--term-line); }
.faq-item { border-bottom: 1px dashed rgba(200,255,0,.2) !important; }
.faq-question-text::before { content: '[+] '; color: var(--acid-yellow); }
.faq-item.open .faq-question-text::before { content: '[-] '; }
.faq-answer-text { color: var(--term-muted); }
.faq-item.open .faq-question-text { color: var(--acid-yellow); text-shadow: 0 0 12px rgba(200,255,0,.35); }

/* ── Formulario de contacto: campos con prompt ───────────────────────────── */
.contact-form { border-color: var(--term-line) !important; background: rgba(200,255,0,.015); }
.form-field { border-color: rgba(200,255,0,.12) !important; }
.form-label { color: rgba(200,255,0,.7); letter-spacing: .12em; text-transform: none; font-size: .64rem; }
.form-label::before { content: '// '; }
.contact-input { color: #fff; caret-color: var(--acid-yellow); }
.form-field { position: relative; }
.form-field::after {
    content: '>'; position: absolute; left: .7rem; top: 2.75rem;
    color: var(--acid-yellow); font-family: 'DM Mono', monospace; font-size: .85rem; pointer-events: none;
}
.form-field:focus-within { background: rgba(200,255,0,.05); box-shadow: inset 3px 0 0 var(--acid-yellow); }
.contact-input::placeholder { color: rgba(233,255,208,.28); }
.newsletter-input { border-color: rgba(200,255,0,.25); }

/* ── Páginas de servicio ─────────────────────────────────────────────────── */
.service-section { border-top-color: rgba(200,255,0,.25) !important; }
.service-hero p { color: var(--term-muted); }
.content-item { border: 1px solid var(--term-line) !important; border-left: 3px solid var(--acid-yellow) !important; }
.feature { border-bottom: 1px dashed rgba(200,255,0,.2) !important; }
.feature-icon { text-shadow: 0 0 14px rgba(200,255,0,.6); }
.back-link::before { content: '$ '; color: var(--acid-yellow); }
/* el enlace "volver" de las páginas de servicio era fijo y flotaba sobre el contenido */
.service-hero ~ .back-link, body > .back-link { position: absolute !important; }

/* ── Stack ───────────────────────────────────────────────────────────────── */
.tech-item { background: linear-gradient(180deg, #0b0f07 0%, #070a05 100%) !important; }
.tfx .tech-item.is-linked { background: #0f1409 !important; }
.tech-item:hover { background: #0f1409 !important; }

/* ── Blog: cabeceras de tarjeta en la paleta de terminal ─────────────────── */
.blog-card .blog-img-bg {
    background:
        radial-gradient(ellipse at 80% 100%, rgba(200,255,0,.22), transparent 60%),
        linear-gradient(135deg, #050704 0%, #0b1206 60%, #10190a 100%) !important;
}
.blog-img-deco { color: var(--acid-yellow) !important; opacity: .55; text-shadow: 0 0 24px rgba(200,255,0,.45); }
.blog-card:hover .blog-img-deco { opacity: .9; }

/* ── Blog (índice) ───────────────────────────────────────────────────────── */
:root { --acid: #C8FF00; --gray: #8f9b7d; --surface: #070a05; }
.blog-hero .hero-title::before { content: '> '; color: var(--acid-yellow); font-size: .6em; vertical-align: .35em; text-shadow: 0 0 16px rgba(200,255,0,.6); }
.blog-hero .hero-title { text-shadow: 0 0 30px rgba(200,255,0,.18); }
.hero-desc { color: var(--term-muted) !important; }
.filter-btn {
    border-color: var(--term-line) !important; color: rgba(233,255,208,.7) !important;
    background: rgba(200,255,0,.02) !important;
}
.filter-btn::before { content: '[ ] '; color: rgba(200,255,0,.55); }
.filter-btn.active::before { content: '[x] '; color: var(--acid-yellow); }
.filter-btn.active, .filter-btn:hover {
    border-color: var(--acid-yellow) !important; color: #fff !important;
    background: rgba(200,255,0,.09) !important; box-shadow: 0 0 18px rgba(200,255,0,.12);
}
.tw .blog-grid { padding: 0 !important; }
.blog-filters { margin-bottom: 1.4rem !important; }
.blog-grid { background: transparent !important; }
.blog-card-full {
    background: linear-gradient(180deg, rgba(200,255,0,.035), rgba(200,255,0,.008)) !important;
    border: 1px solid var(--term-line) !important;
}
.blog-card-full:hover {
    border-color: var(--term-line-strong) !important;
    background: linear-gradient(90deg, rgba(200,255,0,.1), rgba(200,255,0,.025)) !important;
    box-shadow: 0 0 24px rgba(200,255,0,.15), inset 3px 0 0 var(--acid-yellow);
}
.featured-card { border-color: var(--acid-yellow) !important; box-shadow: 0 0 30px rgba(200,255,0,.15), inset 3px 0 0 var(--acid-yellow); }
.blog-card-img {
    background:
        radial-gradient(ellipse at 80% 100%, rgba(200,255,0,.22), transparent 60%),
        linear-gradient(135deg, #050704 0%, #0b1206 60%, #10190a 100%) !important;
}
.blog-card-icon { color: var(--acid-yellow) !important; opacity: .55; text-shadow: 0 0 24px rgba(200,255,0,.45); }
.blog-card-cat-badge { box-shadow: 0 0 14px rgba(200,255,0,.4); }
.blog-card-meta { color: rgba(200,255,0,.6) !important; }
.blog-card-meta::before { content: '// '; }
.blog-card-excerpt { color: var(--term-muted) !important; }
.blog-card-link { color: var(--acid-yellow) !important; }
.newsletter-strip { background: transparent !important; border-top: 1px solid rgba(200,255,0,.25); border-bottom: 1px solid rgba(200,255,0,.25); }
.newsletter-strip-inner {
    border: 1px solid var(--term-line-strong); background: rgba(5,7,4,.9);
    box-shadow: 0 0 40px rgba(200,255,0,.1), inset 0 0 60px rgba(200,255,0,.04);
    padding: 1.6rem 1.8rem !important;
}
.newsletter-strip h3 { color: #fff !important; }
.newsletter-strip h3::before { content: '> '; color: var(--acid-yellow); }
.newsletter-strip p { color: var(--term-muted) !important; }
.newsletter-input { background: transparent !important; color: #fff !important; border: 1px solid rgba(200,255,0,.3) !important; }
.newsletter-input::placeholder { color: rgba(233,255,208,.35) !important; }
.newsletter-btn-inline { background: var(--acid-yellow) !important; color: #050704 !important; box-shadow: 0 0 20px rgba(200,255,0,.3); }
.back-to-home a::before { content: '$ cd '; color: var(--acid-yellow); }

/* ── Artículos ───────────────────────────────────────────────────────────── */
.article-hero { border-bottom: 1px dashed rgba(200,255,0,.25) !important; }
.article-cat { box-shadow: 0 0 14px rgba(200,255,0,.25); }
.article-cat::before { content: '[ '; } .article-cat::after { content: ' ]'; }
.article-title { color: #fff !important; text-shadow: 0 0 24px rgba(200,255,0,.18); }
.article-title::before { content: '> '; color: var(--acid-yellow); text-shadow: 0 0 16px rgba(200,255,0,.6); }
.article-meta { color: rgba(200,255,0,.6) !important; }
.article-meta::before { content: '// '; }
.tw .article-body { padding: clamp(.5rem, 2vw, 1.5rem) !important; max-width: none; }
.tw:has(.article-body) { max-width: 920px; }
.article-body p, .article-body ul li { color: rgba(233,255,208,.82) !important; }
.article-body ul li { border-bottom: 1px dashed rgba(200,255,0,.15) !important; }
.article-body h2 { color: #fff !important; }
.article-body h2::before { content: '## '; color: rgba(200,255,0,.5); }
.highlight-box { background: rgba(200,255,0,.05) !important; box-shadow: inset 3px 0 0 var(--acid-yellow); border-left: 0 !important; }
.highlight-box p::before { content: '> '; color: var(--acid-yellow); font-style: normal; }
.highlight-box p { color: #fff !important; }
.article-cta { background: transparent !important; border-top: 1px solid rgba(200,255,0,.25) !important; }
.article-cta h3::before { content: '> '; color: var(--acid-yellow); }
.article-cta p { color: var(--term-muted) !important; }
.btn { box-shadow: 0 0 24px rgba(200,255,0,.35); }
.blog-nav-bottom { border-top: 1px dashed rgba(200,255,0,.2) !important; }
.blog-nav-bottom a { color: rgba(233,255,208,.6) !important; }
.blog-nav-bottom a:hover { color: var(--acid-yellow) !important; }
body > footer { color: rgba(233,255,208,.5) !important; }
body > footer:not(:has(*))::before { content: '$ '; color: var(--acid-yellow); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid rgba(200,255,0,.25) !important; background: #050704 !important; }
.footer-copy::before { content: '$ '; color: var(--acid-yellow); }
.ticker { border-color: rgba(200,255,0,.25) !important; }

@media (prefers-reduced-motion: reduce) {
    .tw-caret, .tw-meta::before { animation: none; }
}

/* ── Modo ligero (móvil / táctil): sin mezclas ni desenfoques ────────────── */
.mx-lite .tw::after { display: none; }
.mx-lite .tw { box-shadow: 0 0 0 1px rgba(200,255,0,.06), 0 0 30px rgba(200,255,0,.08); }
.mx-lite header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #050704; }
.mx-lite .ck-term { backdrop-filter: none; }
.mx-lite .ck-term::after { display: none; }
.mx-lite .section-title, .mx-lite .stat-number, .mx-lite .pc-amount { text-shadow: none; }