/* ═══════════════════════════════════════════════════════════════════════════
   D.H.T — DISEÑO MÓVIL
   Se carga solo en pantallas ≤ 760 px (media del <link>), así que nada de esto
   afecta al escritorio. Escala propia tipo app: tipografía y espaciados
   compactos, cuadrículas de 2-3 columnas, carruseles deslizables y una barra
   de navegación fija abajo (mobile.js).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --m-gutter: 1rem;
    --m-section: 2.75rem;
    --m-dock: 64px;
}
html { font-size: 13.5px; }
body { padding-bottom: calc(var(--m-dock) + env(safe-area-inset-bottom)); }

/* ── Cabecera compacta ───────────────────────────────────────────────────── */
header { padding: .7rem var(--m-gutter) !important; min-height: 56px; }
header .logo, .logo { font-size: 1.45rem !important; letter-spacing: .16em !important; }
.hamburger { transform: scale(.85); }
.scroll-progress { height: 2px !important; }
.back-link { top: 64px !important; left: var(--m-gutter) !important; font-size: .62rem !important; }
.cta-btn { padding: .5rem .9rem !important; font-size: .62rem !important; }

/* ── Botones flotantes → sustituidos por la barra inferior ───────────────── */
.whatsapp-float, .back-to-top { display: none !important; }

/* ── Secciones: ritmo vertical compacto ──────────────────────────────────── */
body > section, .service-section, section.service-cta, .newsletter, .faq-section, .tech-section, .contact, .blog, .testimonials, .process, .identity, .stats, .portfolio, .services {
    padding: var(--m-section) var(--m-gutter) !important;
}
.section-header { margin-bottom: 1.25rem !important; gap: .5rem !important; flex-wrap: wrap; align-items: center !important; }
.section-number { font-size: .55rem !important; order: -1; width: 100%; margin: 0 !important; }
.section-title { font-size: 1.85rem !important; letter-spacing: -.01em !important; line-height: 1.02 !important; margin-bottom: 0 !important; }
.service-section > .section-title { margin-bottom: 1.25rem !important; }
.tw-caret { font-size: 1.85rem; }
.section-line { display: none !important; }
.mx-cmd { font-size: .6rem !important; margin-bottom: .45rem !important; white-space: nowrap; overflow: hidden; }
.mx-cmd-prompt { display: none; }
.mx-cmd-text::before { content: '$ '; color: rgba(200,255,0,.55); }

/* Ventanas de terminal más finas */
.tw { box-shadow: 0 0 0 1px rgba(200,255,0,.05), 0 0 24px rgba(200,255,0,.07) !important; }
.tw-bar { padding: .45rem .65rem !important; gap: .6rem !important; }
.tw-dots i { width: 7px !important; height: 7px !important; }
.tw-path { font-size: .6rem !important; }
.tw-body { padding: .5rem !important; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { min-height: calc(100svh - var(--m-dock)) !important; padding: 5.5rem var(--m-gutter) 2.5rem !important; }
.hero-eyebrow { font-size: .55rem !important; letter-spacing: .28em !important; padding: .45rem .8rem !important; margin-bottom: 1.4rem !important; }
.hero-title { font-size: clamp(2.6rem, 13vw, 3.4rem) !important; line-height: .95 !important; }
.subline { font-size: .58rem !important; letter-spacing: .22em !important; margin: 1.2rem 0 1.6rem !important; flex-wrap: wrap; justify-content: center; gap: .3rem .5rem !important; }
.hero-cta-group { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: .6rem !important; }
.hero-cta-group .btn-primary, .hero-cta-group .btn-secondary { width: 100%; padding: .95rem .5rem !important; font-size: .62rem !important; letter-spacing: .14em !important; }
.scroll-indicator { display: none !important; }
.ticker { padding: .55rem 0 !important; }
.ticker-item { font-size: .7rem !important; }

/* ── Servicios: cuadrícula 2 × 3 tipo app ────────────────────────────────── */
.services-grid { grid-template-columns: 1fr 1fr !important; gap: .55rem !important; }
.service-card { min-height: 0 !important; padding: .85rem .75rem .75rem !important; }
.service-card-arrow { top: .7rem !important; right: .7rem !important; width: 1.7rem !important; height: 1.7rem !important; font-size: .8rem !important; }
.service-number { font-size: .5rem !important; letter-spacing: .2em !important; margin-bottom: .7rem !important; }
.service-name { font-size: 1.05rem !important; line-height: 1.05 !important; margin-bottom: .45rem !important; padding-right: 1.6rem; }
.service-desc { font-size: .64rem !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.service-tags, .sc-num-bg { display: none !important; }
.service-card .service-cta { margin-top: .8rem !important; font-size: .55rem !important; letter-spacing: .16em !important; gap: .35rem !important; }

/* ── Carruseles deslizables (portfolio, proceso, testimonios) ────────────── */
.portfolio-grid, .process-steps, .testimonials-grid {
    display: flex !important; gap: .6rem !important;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    grid-template-columns: none !important;
    border: 0 !important; background: transparent !important;
    padding-bottom: .2rem;
}
.portfolio-grid::-webkit-scrollbar, .process-steps::-webkit-scrollbar, .testimonials-grid::-webkit-scrollbar { display: none; }
.portfolio-card, .process-step, .testimonial-card { flex: 0 0 84%; scroll-snap-align: start; border: 1px solid var(--term-line, rgba(200,255,0,.15)) !important; }
.process-step { flex-basis: 70%; }
.m-dots { display: flex; justify-content: center; gap: .35rem; margin-top: .7rem; }
.m-dots i { width: 14px; height: 3px; background: rgba(200,255,0,.2); transition: background .3s ease, width .3s ease; }
.m-dots i.is-on { width: 24px; background: var(--acid-yellow); box-shadow: 0 0 8px rgba(200,255,0,.5); }

/* Portfolio */
.portfolio-img-wrap { aspect-ratio: 16 / 9; height: auto !important; }
.portfolio-info { padding: .7rem .85rem .8rem !important; }
.portfolio-meta { font-size: .52rem !important; margin-bottom: .35rem !important; }
.portfolio-name { font-size: 1.05rem !important; }
.portfolio-footer { margin-top: 1.4rem !important; flex-direction: column; gap: .8rem !important; }
.portfolio-footer-text { font-size: .75rem !important; }
.portfolio-cta-title { font-size: 2rem !important; }

/* Proceso */
.process-step { padding: .95rem .9rem !important; }
.process-number { font-size: .55rem !important; margin: .6rem 0 .35rem !important; }
.process-name { font-size: 1.25rem !important; margin-bottom: .4rem !important; }
.process-desc { font-size: .72rem !important; line-height: 1.55 !important; }

/* Testimonios */
.testimonial-card { padding: 1rem .9rem !important; }
.testimonial-stars { font-size: .7rem !important; margin-bottom: .7rem !important; }
.testimonial-quote { font-size: .76rem !important; line-height: 1.6 !important; margin-bottom: 1rem !important; }
.testimonial-avatar { width: 2.2rem !important; height: 2.2rem !important; font-size: .6rem !important; }
.testimonial-name { font-size: .72rem !important; }
.testimonial-role { font-size: .58rem !important; }
.clients-bar { margin-top: 1.4rem !important; padding: 1rem 0 0 !important; }
.clients-label { font-size: .52rem !important; margin-bottom: .7rem !important; }
.clients-logos { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: .4rem !important; }
.client-logo-link { padding: .7rem .4rem !important; flex-direction: column; gap: .3rem !important; text-align: center; }
.client-logo-mark { font-size: .9rem !important; }
.client-logo-name { font-size: .5rem !important; }

/* ── Cifras: 2 × 2 ───────────────────────────────────────────────────────── */
.stats-grid { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; border: 0 !important; }
.stat-item { padding: .8rem .5rem !important; border: 1px solid var(--term-line, rgba(200,255,0,.15)) !important; }
.stat-number { font-size: 1.8rem !important; }
.stat-suffix { font-size: .9rem !important; }
.stat-label { font-size: .5rem !important; letter-spacing: .16em !important; margin-top: .4rem !important; }

/* ── Identidad: 3 columnas ───────────────────────────────────────────────── */
.identity-inner { grid-template-columns: repeat(3, 1fr) !important; gap: .4rem !important; }
.identity-block { padding: .8rem .4rem !important; border: 1px solid var(--term-line, rgba(200,255,0,.15)) !important; }
.identity-block-title { font-size: 1.05rem !important; line-height: 1 !important; }
.identity-block-label, .identity-block-content { font-size: .46rem !important; letter-spacing: .12em !important; margin-top: .4rem !important; }

/* ── Stack: 3 columnas ───────────────────────────────────────────────────── */
.tech-hint { margin: -.4rem 0 .8rem !important; font-size: .52rem !important; align-items: center !important; }
.tech-hint-text { font-size: .52rem !important; text-align: left !important; }
.tech-hint-text::after { content: none !important; }
.tech-grid { grid-template-columns: repeat(3, 1fr) !important; }
.tech-item { padding: .8rem .3rem !important; gap: .35rem !important; }
.tech-inner { gap: .35rem !important; }
.tech-label { font-size: 1rem !important; }
.tech-cat { font-size: .44rem !important; letter-spacing: .12em !important; }
.tech-count { font-size: .38rem !important; padding: .12rem .3rem !important; top: .3rem !important; right: .3rem !important; }

/* ── Blog (portada) ──────────────────────────────────────────────────────── */
.blog-img-wrap { height: 96px !important; }
.blog-img-deco { font-size: 3.2rem !important; }
.blog-body { padding: .8rem !important; }
.blog-meta { font-size: .52rem !important; }
.blog-title { font-size: 1.1rem !important; }
.blog-excerpt { font-size: .72rem !important; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.blog-footer { margin-top: 1rem !important; }
.blog-arrow { width: 38px !important; height: 38px !important; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-question { padding: 1rem 0 !important; gap: .6rem !important; }
.faq-question-text { font-size: .78rem !important; line-height: 1.45 !important; }
.faq-icon { width: 24px !important; height: 24px !important; font-size: .8rem !important; flex-shrink: 0; }
.faq-answer-text { font-size: .74rem !important; line-height: 1.7 !important; }

/* ── Contacto ────────────────────────────────────────────────────────────── */
.contact-inner { gap: 1.6rem !important; }
.contact-desc { font-size: .78rem !important; margin: .8rem 0 1.2rem !important; }
.contact-info { gap: .9rem !important; }
.contact-info-label { font-size: .5rem !important; }
.contact-info-value { font-size: .8rem !important; }
.contact-coords { font-size: .5rem !important; margin-top: 1rem !important; padding-top: 1rem !important; }
.form-row { grid-template-columns: 1fr !important; }
.form-label { padding: .8rem 1rem 0 1.8rem !important; font-size: .58rem !important; }
.contact-input { padding: .35rem 1rem .8rem 1.8rem !important; font-size: .82rem !important; }
.form-field::after { left: .75rem !important; top: 1.95rem !important; font-size: .8rem !important; }
textarea.contact-input { min-height: 96px !important; }
.contact-submit { padding: 1.05rem 1rem !important; font-size: .66rem !important; }

/* ── Newsletter y pie ────────────────────────────────────────────────────── */
.newsletter-inner { gap: 1rem !important; }
.newsletter-text h3, .newsletter h3 { font-size: 1.5rem !important; }
.newsletter-text p, .newsletter p { font-size: .72rem !important; }
.newsletter-form { width: 100%; }
.newsletter-input { font-size: .78rem !important; padding: .85rem .9rem !important; min-width: 0; }
.newsletter-btn { padding: .85rem 1rem !important; font-size: .62rem !important; }
footer { padding: 1.6rem var(--m-gutter) !important; gap: .8rem !important; font-size: .6rem !important; }
.footer-socials { gap: 1rem !important; }

/* ── Páginas de servicio ─────────────────────────────────────────────────── */
.service-hero { min-height: 0 !important; padding: 6rem var(--m-gutter) 2.2rem !important; }
.service-hero h1 { font-size: 2.4rem !important; line-height: 1 !important; margin-bottom: .9rem !important; }
.service-hero p { font-size: .8rem !important; line-height: 1.7 !important; }
.pricing-intro { font-size: .74rem !important; margin: -.6rem 0 1.2rem !important; }
.pc { padding: 1.15rem .95rem 1rem !important; }
.pc-name { font-size: 1.35rem !important; }
.pc-desc { font-size: .68rem !important; min-height: 0 !important; margin-bottom: 1.1rem !important; }
.pc-price { margin-bottom: 1.1rem !important; padding-bottom: 1.1rem !important; }
.pc-amount { font-size: 2.25rem !important; }
.pc-currency { font-size: 1.1rem !important; margin-top: .3rem !important; }
.pc-amount--text { font-size: 1.6rem !important; }
.pc-features { gap: .55rem !important; margin-bottom: 1.3rem !important; }
.pc-features li { font-size: .7rem !important; }
.pc-cta { padding: .95rem 1rem !important; font-size: .64rem !important; }
.pricing-trust { font-size: .56rem !important; gap: .5rem 1rem !important; margin-top: 1.2rem !important; }
.pricing-foot { font-size: .58rem !important; }
.compare-table { font-size: .64rem !important; }
.content-grid { grid-template-columns: 1fr !important; gap: .55rem !important; }
.content-item { padding: .8rem .85rem !important; }
.content-item-title { font-size: 1rem !important; margin-bottom: .4rem !important; }
.content-item-desc { font-size: .72rem !important; }
.feature { gap: .9rem !important; margin-bottom: 1rem !important; padding-bottom: 1rem !important; }
.feature-icon { font-size: 1.3rem !important; min-width: 22px !important; }
.feature-title { font-size: .95rem !important; }
.feature-desc { font-size: .72rem !important; }
.service-cta h2, .service-cta .section-title { font-size: 1.9rem !important; }
.service-cta p { font-size: .78rem !important; }
.cta-buttons { display: grid !important; grid-template-columns: 1fr; gap: .6rem !important; }
.cta-buttons a { width: 100%; text-align: center; padding: .95rem 1rem !important; font-size: .64rem !important; }

/* ── Blog (índice y artículos) ───────────────────────────────────────────── */
.blog-hero { padding: 5.5rem var(--m-gutter) 1.6rem !important; }
.blog-hero .hero-title { font-size: 2.8rem !important; }
.hero-desc { font-size: .78rem !important; }
.blog-filters { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding: 0 var(--m-gutter) !important; gap: .4rem !important; }
.blog-filters::-webkit-scrollbar { display: none; }
.filter-btn { flex-shrink: 0; font-size: .58rem !important; padding: .5rem .7rem !important; }
.tw:has(.blog-grid) { margin: 0 var(--m-gutter) !important; width: auto; }
.blog-grid { grid-template-columns: 1fr !important; gap: .6rem !important; }
.featured-card { grid-column: auto !important; }
.blog-card-img { aspect-ratio: 16 / 7 !important; }
.blog-card-icon, .featured-card .blog-card-icon { font-size: 3rem !important; }
.blog-card-body { padding: .8rem !important; }
.blog-card-title, .featured-card .blog-card-title { font-size: 1.15rem !important; }
.blog-card-excerpt { font-size: .72rem !important; margin-bottom: .8rem !important; }
.newsletter-strip { padding: 2rem var(--m-gutter) !important; }
.newsletter-strip-inner { flex-direction: column; align-items: stretch !important; padding: 1.2rem !important; }
.newsletter-form-inline { width: 100%; }
.newsletter-form-inline .newsletter-input { width: auto !important; flex: 1; }
.article-hero { padding: 5.5rem var(--m-gutter) 1.6rem !important; }
.article-title { font-size: 1.9rem !important; margin-bottom: .9rem !important; }
.article-meta { font-size: .56rem !important; }
.tw:has(.article-body) { margin: 1.2rem var(--m-gutter) 0 !important; width: auto; }
.article-body p { font-size: .84rem !important; line-height: 1.75 !important; margin-bottom: 1.1rem !important; }
.article-body h2 { font-size: 1.3rem !important; margin: 1.8rem 0 .8rem !important; }
.article-body ul li { font-size: .8rem !important; }
.highlight-box { padding: 1rem 1.1rem !important; margin: 1.4rem 0 !important; }
.article-cta { padding: 2.2rem var(--m-gutter) !important; }
.article-cta h3 { font-size: 1.5rem !important; }
.blog-nav-bottom { padding: 1.2rem var(--m-gutter) 2rem !important; flex-direction: column; gap: .8rem; align-items: flex-start !important; }

/* ── Barra de navegación inferior (mobile.js) ────────────────────────────── */
.m-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    height: calc(var(--m-dock) + env(safe-area-inset-bottom));
    padding: 0 .4rem env(safe-area-inset-bottom);
    display: grid; grid-template-columns: repeat(4, 1fr) 1.35fr; align-items: center; gap: .2rem;
    background: rgba(5,7,4,.98);
    border-top: 1px solid rgba(200,255,0,.3);
    box-shadow: 0 -10px 30px rgba(0,0,0,.6), 0 -1px 0 rgba(200,255,0,.08);
    font-family: 'DM Mono', monospace;
    transform: translateY(0); transition: transform .3s ease;
}
.m-dock.is-hidden { transform: translateY(110%); }
.m-dock a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem;
    height: 52px; text-decoration: none;
    color: rgba(233,255,208,.55); font-size: .48rem; letter-spacing: .12em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
}
.m-dock a svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.m-dock a.is-active { color: var(--acid-yellow); text-shadow: 0 0 10px rgba(200,255,0,.5); }
.m-dock a.is-active svg { filter: drop-shadow(0 0 4px rgba(200,255,0,.6)); }
.m-dock a.m-dock-cta {
    height: 42px; flex-direction: row; gap: .4rem;
    background: var(--acid-yellow); color: #050704; font-weight: 600; font-size: .58rem; letter-spacing: .14em;
    box-shadow: 0 0 18px rgba(200,255,0,.4);
}
.m-dock a.m-dock-cta svg { width: 15px; height: 15px; stroke-width: 2; }
.m-dock a:active { transform: scale(.94); }
/* el panel de compra va por encima de la barra */
body.ck-locked .m-dock { transform: translateY(110%); }

/* ── Compra (checkout) en móvil: precios y total más contenidos ──────────── */
.ck-planrow { padding: .75rem .8rem !important; gap: .7rem !important; }
.ck-planrow-name { font-size: 1.2rem !important; }
.ck-planrow-price { font-size: 1.2rem !important; }
.ck-step-title { font-size: 1.7rem !important; }
.ck-option-box { padding: .7rem .8rem !important; font-size: .7rem !important; }
.rc-paper { padding: 1rem .9rem .8rem !important; }
.rc-total strong { font-size: 2rem !important; }
.rc-brand { font-size: 1.3rem !important; }
.ck-mobile-total strong { font-size: 1.15rem !important; }
.compare-table .ct-price { font-size: 1rem !important; }
.ct-name { font-size: .95rem !important; }

/* ── Mínimos de legibilidad (con la escala 13.5px, nada por debajo de ~7.5px) ── */
.m-dock a { font-size: 9px !important; letter-spacing: .08em !important; }
.m-dock a.m-dock-cta { font-size: 9.5px !important; }
.tech-cat, .identity-block-label, .identity-block-content, .stat-label,
.service-number, .client-logo-name, .clients-label, .portfolio-meta,
.tech-hint, .tech-hint-text, .tw-path, .mx-cmd, .section-number,
.pc-suffix, .ck-planrow-price small, .rc-meta, .rc-trust li, .blog-meta, .contact-info-label { font-size: max(.56rem, 7.5px) !important; }
.tech-count { font-size: max(.45rem, 6.5px) !important; }

/* ── Herramientas (portada y /proyectos): carrusel compacto ─────────────── */
.tools-intro { font-size: .76rem !important; line-height: 1.6 !important; margin-bottom: .9rem !important; }
.tools-garantias { font-size: max(.56rem, 7.5px) !important; gap: .3rem !important; margin-bottom: 1rem !important; }
.tools-grid {
    display: flex !important; gap: .6rem !important; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .2rem;
    border: 0 !important;
}
.tools-grid::-webkit-scrollbar { display: none; }
.tool-card { flex: 0 0 86%; scroll-snap-align: start; padding: 1rem .95rem !important; border: 1px solid var(--term-line, rgba(200,255,0,.15)) !important; }
.tool-card + .tool-card { border-top: 1px solid var(--term-line, rgba(200,255,0,.15)) !important; }
.tool-media, .tool-img { max-height: 150px; object-fit: cover; }
.tool-top { margin-bottom: .5rem !important; font-size: max(.56rem, 7.5px) !important; }
.tool-title { font-size: 1.25rem !important; line-height: 1.05 !important; margin-bottom: .5rem !important; }
.tool-desc { font-size: .72rem !important; line-height: 1.6 !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tool-points { font-size: .66rem !important; margin: .6rem 0 !important; gap: .25rem !important; }
.tool-card .tool-points { display: none !important; }
.tool-cta { font-size: max(.58rem, 8px) !important; margin-top: .7rem !important; }
.tools-mas, .projects-more { margin-top: 1rem !important; font-size: .72rem !important; }

/* ── Proyectos: tarjetas compactas (en la portada, sin la lista de detalles) ── */
.project-card { margin-bottom: .8rem !important; border: 1px solid var(--term-line, rgba(200,255,0,.15)) !important; }
.project-media { max-height: 190px; overflow: hidden; }
.project-media img { width: 100%; height: 190px; object-fit: cover; }
.project-badge { font-size: max(.55rem, 7.5px) !important; padding: .3rem .55rem !important; }
.project-body { padding: 1rem .95rem !important; }
.project-body .tool-title { font-size: 1.3rem !important; }
.project-body .tool-desc { -webkit-line-clamp: 5; }
#proyectos .project-body .tool-points { display: none !important; }
.project-body .tool-points { display: grid !important; }
.project-views { gap: 0 !important; margin-top: .7rem !important; }
.project-views a, .project-views > * { padding: .6rem .7rem !important; font-size: .7rem !important; }
.pp-cifras { gap: .4rem !important; }
.pp-cifras > * { padding: .7rem .6rem !important; }
.pp-btn { padding: .9rem 1rem !important; font-size: max(.6rem, 8px) !important; }
.tools .section-header, .projects .section-header { margin-bottom: 1rem !important; }
.tools-intro { position: relative; margin-top: .3rem !important; clear: both; }