/* =========================================================================
   DREAMSOFT PANAMÁ — style.css
   Hoja de estilos propia. Bootstrap solo aporta el grid/utilidades base;
   todo el look & feel (paleta, tipografía, glassmorphism, glow, motion
   base en CSS) vive aquí.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES DE MARCA
------------------------------------------------------------------------- */
:root {
    /* Paleta oficial */
    --ds-cyan: #00F0FF;
    --ds-blue: #0066FF;
    --ds-purple: #7A00FF;
    --ds-magenta: #FF00E0;
    --ds-green: #00FFB3;

    --ds-bg: #05060D;
    --ds-bg-2: #0B0E1A;
    --ds-text: #EAF0FF;
    --ds-muted: #8B93B0;

    /* Gradiente de marca */
    --ds-gradient: linear-gradient(135deg, var(--ds-cyan), var(--ds-blue), var(--ds-purple), var(--ds-magenta));
    --ds-gradient-soft: linear-gradient(135deg, rgba(0, 240, 255, .15), rgba(0, 102, 255, .12), rgba(122, 0, 255, .12), rgba(255, 0, 224, .15));

    /* Tipografía */
    --ds-font-display: 'Orbitron', sans-serif;
    --ds-font-body: 'Montserrat', sans-serif;

    /* Vidrio / glassmorphism */
    --ds-glass-bg: rgba(255, 255, 255, .04);
    --ds-glass-border: rgba(255, 255, 255, .10);
    --ds-radius-lg: 24px;
    --ds-radius-md: 16px;

    /* Layout */
    --ds-container-max: 1280px;
    --ds-navbar-h: 84px;
    --ds-bottomnav-h: 68px;

    /* Transiciones */
    --ds-ease: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------------------
   2. RESET Y BASE
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: auto; /* Lenis controla el smooth scroll por JS */
    background: var(--ds-bg);
}

body {
    margin: 0;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden; /* evita scroll horizontal accidental */
    cursor: default;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--ds-font-display);
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0;
    text-transform: uppercase;
}

p { margin: 0; }

.container {
    width: 100%;
    max-width: var(--ds-container-max);
    margin-inline: auto;
    padding-inline: 24px;
}

::selection { background: var(--ds-magenta); color: #05060D; }

/* Cuando el cursor custom está activo (escritorio con puntero fino) */
.ds-has-custom-cursor, .ds-has-custom-cursor a, .ds-has-custom-cursor button {
    cursor: none;
}

/* Respeta accesibilidad: reduce movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Franja decorativa tipo "circuito" reutilizable */
.section-kicker {
    display: inline-block;
    font-family: var(--ds-font-display);
    font-size: .75rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--ds-cyan);
    margin-bottom: 14px;
    position: relative;
    padding-left: 28px;
}
.section-kicker::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 20px; height: 2px;
    background: var(--ds-gradient);
    transform: translateY(-50%);
}

.section-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.15;
    max-width: 720px;
}

.section-heading { margin-bottom: 56px; }

/* Texto con gradiente de marca aplicado (background-clip: text) */
.text-gradient {
    background: var(--ds-gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -------------------------------------------------------------------------
   3. REVEAL AL SCROLL (estado base; main.js agrega .is-visible)
------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s var(--ds-ease), transform .9s var(--ds-ease);
    will-change: transform, opacity;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Sin JS o con reduced-motion: todo visible desde el inicio */
.no-js [data-reveal],
body.reduced-motion [data-reveal] { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   4. PRELOADER
------------------------------------------------------------------------- */
#preloader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--ds-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 28px;
    transition: transform .8s var(--ds-ease);
}
/* El panel completo (con su fondo sólido) se desliza hacia arriba como cortina;
   el contenido interno se desvanece un poco más rápido para que la salida se
   sienta ágil y no como un simple corte. */
#preloader > * { transition: opacity .35s ease; }
body.preloader-exit #preloader { transform: translateY(-100%); }
body.preloader-exit #preloader > * { opacity: 0; }
.preloader-glow {
    position: absolute;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(0, 240, 255, .25), transparent 70%);
    filter: blur(40px);
    animation: ds-pulse-glow 2.4s ease-in-out infinite;
}
.preloader-logo {
    width: 160px; height: auto; object-fit: contain;
    filter: drop-shadow(0 0 24px rgba(0, 240, 255, .55));
    animation: ds-pulse-scale 1.8s ease-in-out infinite;
    position: relative; z-index: 1;
}
.preloader-bar {
    width: 220px; height: 4px; border-radius: 4px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden; position: relative; z-index: 1;
}
.preloader-bar span {
    display: block; height: 100%; width: 0%;
    background: var(--ds-gradient); background-size: 300% auto;
    animation: ds-gradient-move 2s linear infinite;
    transition: width .25s ease-out;
}
.preloader-label {
    font-family: var(--ds-font-display);
    font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--ds-muted); position: relative; z-index: 1;
}

body.preloader-done #preloader { display: none; }
@keyframes ds-pulse-glow { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes ds-pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ds-gradient-move { to { background-position: 300% center; } }

/* -------------------------------------------------------------------------
   5. CURSOR CUSTOM (solo escritorio, activado por JS)
------------------------------------------------------------------------- */
.ds-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9997; opacity: 0; }
.ds-cursor-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--ds-cyan);
    transform: translate(-50%, -50%);
    transition: opacity .2s ease;
}
.ds-cursor-ring {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1.5px solid rgba(0, 240, 255, .6);
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    transition: width .25s var(--ds-ease), height .25s var(--ds-ease), border-color .25s ease, background .25s ease, opacity .2s ease;
}
.ds-cursor-ring #cursorLabel {
    font-family: var(--ds-font-display);
    font-size: .64rem; letter-spacing: .1em;
    color: var(--ds-bg); opacity: 0; text-transform: uppercase;
}
body.ds-has-custom-cursor .ds-cursor { opacity: 1; }
.ds-cursor-ring.is-active {
    width: 92px; height: 92px;
    background: var(--ds-gradient);
    border-color: transparent;
}
.ds-cursor-ring.is-active #cursorLabel { opacity: 1; }

/* -------------------------------------------------------------------------
   6. BARRA DE PROGRESO DE LECTURA
------------------------------------------------------------------------- */
.reading-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001;
    background: rgba(255, 255, 255, .06);
}
.reading-progress span {
    display: block; height: 100%; width: 0%;
    background: var(--ds-gradient); background-size: 300% auto;
    box-shadow: 0 0 12px rgba(0, 240, 255, .6);
}

/* -------------------------------------------------------------------------
   7. NAVBAR
------------------------------------------------------------------------- */
.ds-navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--ds-navbar-h);
    display: flex; align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease, height .3s ease;
}
.ds-navbar.is-scrolled {
    height: 68px;
    background: rgba(5, 6, 13, .72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ds-glass-border);
}
.ds-navbar-inner {
    max-width: var(--ds-container-max);
    margin-inline: auto;
    width: 100%;
    padding-inline: 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.ds-navbar-logo { height: 54px; width: auto; transition: height .3s ease; }
.ds-navbar.is-scrolled .ds-navbar-logo { height: 44px; }

.ds-navbar-menu { display: flex; align-items: center; gap: 40px; }
.ds-navbar-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.ds-nav-link {
    position: relative;
    font-family: var(--ds-font-display);
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ds-text); padding-bottom: 6px;
}
.ds-nav-link::after {
    content: '';
    position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
    background: var(--ds-gradient);
    transition: width .3s var(--ds-ease);
}
.ds-nav-link:hover::after, .ds-nav-link.is-active::after { width: 100%; }
.ds-nav-link.is-active { color: var(--ds-cyan); }

.ds-navbar-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; padding: 8px; cursor: pointer;
}
.ds-navbar-toggle span { width: 24px; height: 2px; background: var(--ds-text); transition: transform .3s ease, opacity .3s ease; }
.ds-navbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ds-navbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ds-navbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   8. BOTONES DE MARCA
------------------------------------------------------------------------- */
.btn-ds {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--ds-font-display);
    font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
    padding: 15px 30px; border-radius: 100px;
    border: 1px solid transparent;
    transition: transform .3s var(--ds-ease), box-shadow .3s ease, background .3s ease;
    cursor: pointer;
    white-space: nowrap;
}
.btn-ds:active { transform: scale(.97); }

.btn-ds-gradient {
    background: var(--ds-gradient); background-size: 200% auto;
    color: #05060D; font-weight: 700;
    box-shadow: 0 0 28px rgba(122, 0, 255, .35);
}
.btn-ds-gradient:hover { background-position: right center; box-shadow: 0 0 40px rgba(0, 240, 255, .55); transform: translateY(-2px); }

.btn-ds-outline {
    background: rgba(255, 255, 255, .03);
    border-color: var(--ds-glass-border);
    color: var(--ds-text);
    backdrop-filter: blur(6px);
}
.btn-ds-outline:hover { border-color: var(--ds-cyan); color: var(--ds-cyan); box-shadow: 0 0 20px rgba(0, 240, 255, .25); }

.btn-ds-sm { padding: 10px 20px; font-size: .68rem; }

.btn-ds-giant {
    padding: 24px 52px; font-size: 1rem; border-radius: 100px;
    box-shadow: 0 0 60px rgba(255, 0, 224, .4);
}

.ds-navbar-cta { padding: 12px 24px; font-size: .7rem; }

/* -------------------------------------------------------------------------
   9. HERO
------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: center;
    overflow: hidden;
    padding-top: var(--ds-navbar-h);
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--ds-bg-2); }
.hero-video {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.2s ease;
}
.hero-video.is-loaded { opacity: 1; }
.hero-media-fallback-logo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 180px; opacity: .12; pointer-events: none;
}
.hero-media-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(5,6,13,.55) 0%, rgba(5,6,13,.65) 45%, rgba(5,6,13,.95) 100%),
        linear-gradient(90deg, rgba(5,6,13,.7) 0%, rgba(5,6,13,.25) 50%, rgba(5,6,13,.7) 100%);
}
.hero-particles { position: absolute; inset: 0; z-index: 1; opacity: .8; }

.hero-content { position: relative; z-index: 2; padding-block: 60px; }

.hero-kicker {
    font-family: var(--ds-font-display);
    font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--ds-cyan); margin-bottom: 20px;
}
.hero-title {
    font-size: clamp(2.6rem, 7.5vw, 6.2rem);
    line-height: .95;
    color: var(--ds-cyan); /* fallback visible si JS no llega a aplicar el degradado por letra */
    filter: drop-shadow(0 0 40px rgba(0, 240, 255, .25));
    margin-bottom: 18px;
}
/* El degradado real se aplica por letra desde main.js (initHeroLetters), calculando
   un background-position continuo para que el gradiente fluya como un solo bloque
   de texto en lugar de repetirse en cada span individual. */
.hero-letter { display: inline-block; opacity: 0; transform: translateY(40px) rotateX(-60deg); }
.hero-letter.is-in { animation: ds-letter-in .6s var(--ds-ease) forwards; }
@keyframes ds-letter-in { to { opacity: 1; transform: translateY(0) rotateX(0); } }

.hero-tagline {
    font-family: var(--ds-font-display);
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--ds-text); letter-spacing: .04em; margin-bottom: 22px;
}

.hero-rotator {
    min-height: 32px;
    font-size: clamp(1.05rem, 2.2vw, 1.5rem);
    font-weight: 600; color: var(--ds-magenta);
    margin-bottom: 22px;
}
.ds-caret { display: inline-block; color: var(--ds-cyan); animation: ds-caret-blink 1s step-end infinite; }
@keyframes ds-caret-blink { 50% { opacity: 0; } }

.hero-paragraph {
    max-width: 620px; color: var(--ds-muted);
    font-size: 1.05rem; margin-bottom: 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 32px; }

.hero-social-proof {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 100px;
    background: var(--ds-glass-bg); border: 1px solid var(--ds-glass-border);
    backdrop-filter: blur(8px);
    font-size: .82rem; color: var(--ds-text);
    margin-bottom: 20px;
}
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--ds-green);
    box-shadow: 0 0 0 rgba(0, 255, 179, .6);
    animation: ds-dot-pulse 1.8s ease-out infinite;
    flex-shrink: 0;
}
@keyframes ds-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 179, .6); }
    70% { box-shadow: 0 0 0 10px rgba(0, 255, 179, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 179, 0); }
}

.hero-trust { color: var(--ds-muted); font-size: .82rem; letter-spacing: .02em; }

.hero-scroll-cue {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--ds-cyan); animation: ds-bounce 2.2s ease-in-out infinite;
}
.hero-scroll-cue-line { width: 1px; height: 40px; background: linear-gradient(180deg, transparent, var(--ds-cyan)); }
@keyframes ds-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* -------------------------------------------------------------------------
   11. MARQUEE INFINITO
------------------------------------------------------------------------- */
.marquee {
    overflow: hidden; white-space: nowrap;
    padding-block: 22px;
    border-block: 1px solid var(--ds-glass-border);
    background: var(--ds-bg-2);
}
.marquee-track { display: inline-flex; animation: ds-marquee-scroll 26s linear infinite; }
.marquee-item {
    font-family: var(--ds-font-display);
    font-size: clamp(1.1rem, 2.4vw, 1.8rem);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    -webkit-text-stroke: 1px var(--ds-cyan);
    color: transparent;
    padding-right: 12px;
}
@keyframes ds-marquee-scroll { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* -------------------------------------------------------------------------
   12. ESTADÍSTICAS
------------------------------------------------------------------------- */
.stats-section { padding-block: 90px; background: var(--ds-bg); }
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.stat-card {
    text-align: center; padding: 36px 20px;
    background: var(--ds-glass-bg); border: 1px solid var(--ds-glass-border);
    border-radius: var(--ds-radius-md); backdrop-filter: blur(10px);
}
.stat-icon { font-size: 1.6rem; color: var(--ds-cyan); margin-bottom: 14px; }
.stat-number { font-family: var(--ds-font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; }
.stat-value { background: var(--ds-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-suffix { color: var(--ds-magenta); }
.stat-number.is-complete { animation: ds-stat-glow 1s ease; }
@keyframes ds-stat-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 18px rgba(0, 240, 255, .8)); } }
.stat-label { color: var(--ds-muted); font-size: .88rem; margin-top: 8px; }

/* -------------------------------------------------------------------------
   13. SERVICIOS
------------------------------------------------------------------------- */
.services-section { padding-block: 120px; background: var(--ds-bg-2); position: relative; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.service-card {
    position: relative;
    background: var(--ds-glass-bg);
    border: 1px solid var(--ds-glass-border);
    border-radius: var(--ds-radius-lg);
    padding: 38px 30px;
    backdrop-filter: blur(10px);
    transform-style: preserve-3d;
    transition: transform .1s linear, box-shadow .4s ease, border-color .4s ease;
    overflow: hidden;
}
.service-card-border {
    position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--ds-gradient); opacity: 0; transition: opacity .4s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.service-card:hover { box-shadow: 0 20px 60px rgba(0, 240, 255, .12); }
.service-card:hover .service-card-border { opacity: 1; }

.service-number {
    display: block; font-family: var(--ds-font-display); font-size: .82rem;
    color: var(--ds-muted); letter-spacing: .2em; margin-bottom: 20px;
}
.service-icon { font-size: 1.8rem; color: var(--ds-cyan); margin-bottom: 18px; display: block; }
.service-title { font-size: 1.15rem; margin-bottom: 12px; letter-spacing: .02em; }
.service-text { color: var(--ds-muted); font-size: .92rem; }

/* -------------------------------------------------------------------------
   14. PROYECTOS — GALERÍA HORIZONTAL PINNED
------------------------------------------------------------------------- */
.projects-section { padding-block: 120px 0; background: var(--ds-bg); overflow: hidden; }
.projects-section .section-heading { margin-bottom: 60px; }

.projects-pin { position: relative; height: 100vh; overflow: hidden; }
.projects-track {
    display: flex; gap: 28px; height: 100%; align-items: center;
    padding-inline: 24px; width: max-content;
    will-change: transform;
}
.project-card {
    position: relative;
    width: min(420px, 82vw); flex-shrink: 0;
    background: var(--ds-glass-bg); border: 1px solid var(--ds-glass-border);
    border-radius: var(--ds-radius-lg); padding: 40px 34px;
    backdrop-filter: blur(10px);
    transition: border-color .4s ease, transform .4s ease;
}
.project-card:hover { border-color: rgba(0, 240, 255, .4); transform: translateY(-6px); }
.project-card-index {
    position: absolute; top: 24px; right: 28px;
    font-family: var(--ds-font-display); font-size: .82rem; color: var(--ds-muted);
}
.project-card-icon {
    width: 58px; height: 58px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-gradient-soft); color: var(--ds-cyan); font-size: 1.4rem;
    margin-bottom: 22px;
}
.project-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tag {
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 100px;
    border: 1px solid rgba(0, 255, 179, .35); color: var(--ds-green);
}
.project-card-title { font-size: 1.25rem; margin-bottom: 14px; line-height: 1.25; }
.project-card-text { color: var(--ds-muted); font-size: .9rem; }

/* Puntitos del carrusel (solo mobile, ver RESPONSIVE) — mismo patrón
   visual que .testimonials-dots, activados por scroll en main.js. */
.projects-dots { display: none; justify-content: center; gap: 10px; margin-top: 24px; }
.projects-dots button {
    width: 9px; height: 9px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, .18); cursor: pointer; padding: 0;
    transition: background .3s ease, transform .3s ease;
}
.projects-dots button.is-active { background: var(--ds-gradient); transform: scale(1.3); }

/* Fallback / móvil: carrusel deslizable con snap (ver media queries) */
.no-js .projects-pin, .no-js .projects-track { height: auto; overflow-x: auto; }

/* -------------------------------------------------------------------------
   15. NOSOTROS
------------------------------------------------------------------------- */
.about-section { position: relative; padding-block: 140px; overflow: hidden; }
.about-media { position: absolute; inset: 0; z-index: 0; background: var(--ds-bg-2); }
.about-video { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.about-media-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(5,6,13,.96) 0%, rgba(5,6,13,.88) 45%, rgba(5,6,13,.6) 100%);
}
.about-content { position: relative; z-index: 1; max-width: 680px; }
.about-text { color: var(--ds-muted); margin-top: 20px; font-size: 1rem; line-height: 1.75; }

/* -------------------------------------------------------------------------
   16. TESTIMONIOS
------------------------------------------------------------------------- */
.testimonials-section { padding-block: 80px; background: var(--ds-bg-2); }
.testimonials-carousel { position: relative; max-width: 580px; margin-inline: auto; }
.testimonials-track { display: flex; transition: transform .6s var(--ds-ease); }
.testimonial-card {
    flex: 0 0 100%;
    background: var(--ds-glass-bg); border: 1px solid var(--ds-glass-border);
    border-radius: var(--ds-radius-lg); padding: 32px 30px;
    backdrop-filter: blur(10px); text-align: center;
}
.testimonial-stars { color: var(--ds-magenta); font-size: .8rem; margin-bottom: 14px; letter-spacing: 4px; }
.testimonial-quote { font-size: .92rem; line-height: 1.6; color: var(--ds-text); margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; justify-content: center; gap: 12px; }
.testimonial-author img {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    border: 2px solid transparent;
    background: var(--ds-gradient) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    padding: 2px;
}
.testimonial-author-info { text-align: left; }
.testimonial-author-info strong { display: block; font-size: .86rem; }
.testimonial-author-info span { font-size: .72rem; color: var(--ds-muted); }

.testimonials-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.testimonials-dots button {
    width: 9px; height: 9px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, .18); cursor: pointer; padding: 0;
    transition: background .3s ease, transform .3s ease;
}
.testimonials-dots button.is-active { background: var(--ds-gradient); transform: scale(1.3); }

/* -------------------------------------------------------------------------
   17. CTA FINAL
------------------------------------------------------------------------- */
.cta-final-section {
    position: relative; min-height: 100svh;
    display: flex; align-items: center; justify-content: center; text-align: center;
    overflow: hidden;
}
.cta-final-media { position: absolute; inset: 0; z-index: 0; background: var(--ds-bg); }
.cta-final-media video { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.cta-final-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(122,0,255,.25), rgba(5,6,13,.94) 70%); }
.cta-final-content { position: relative; z-index: 1; }
.cta-final-title {
    font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.1; max-width: 900px; margin-inline: auto 32px;
    background: var(--ds-gradient); background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: ds-gradient-move 6s linear infinite;
    margin-bottom: 40px;
}

/* -------------------------------------------------------------------------
   18. CONTACTO
------------------------------------------------------------------------- */
.contact-section { padding-block: 80px; background: var(--ds-bg); }
.contact-grid {
    display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px;
    max-width: 980px; margin-inline: auto; /* evita que las dos columnas se estiren por todo el ancho del container */
}

.contact-info-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 0; border-bottom: 1px solid var(--ds-glass-border);
    font-size: .86rem;
}
.contact-info-item i { color: var(--ds-cyan); font-size: 1rem; width: 20px; text-align: center; }
.contact-social { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

.contact-form {
    position: relative; /* contiene al honeypot absoluto (.form-honeypot) */
    background: var(--ds-glass-bg); border: 1px solid var(--ds-glass-border);
    border-radius: var(--ds-radius-lg); padding: 28px; backdrop-filter: blur(10px);
}
.form-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); }
.form-row input, .form-row textarea {
    width: 100%; padding: 11px 14px; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--ds-glass-border);
    color: var(--ds-text); font-family: var(--ds-font-body); font-size: .88rem;
    transition: border-color .3s ease, box-shadow .3s ease;
    resize: vertical;
}
.form-row input:focus, .form-row textarea:focus {
    outline: none; border-color: var(--ds-cyan); box-shadow: 0 0 0 3px rgba(0, 240, 255, .15);
}
.form-row.has-error input, .form-row.has-error textarea { border-color: var(--ds-magenta); }
.form-error { font-size: .7rem; color: var(--ds-magenta); min-height: 14px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form button[type="submit"] { width: 100%; margin-top: 4px; position: relative; }
.btn-loading { display: none; }
.contact-form button.is-loading .btn-label { visibility: hidden; }
.contact-form button.is-loading .btn-loading {
    display: flex; position: absolute; inset: 0; align-items: center; justify-content: center;
}
.form-feedback { margin-top: 12px; font-size: .84rem; text-align: center; min-height: 20px; }
.form-feedback.is-success { color: var(--ds-green); }
.form-feedback.is-error { color: var(--ds-magenta); }

/* -------------------------------------------------------------------------
   19. FOOTER
------------------------------------------------------------------------- */
.ds-footer { padding-block: 60px 32px; background: var(--ds-bg-2); border-top: 1px solid var(--ds-glass-border); }
.ds-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.ds-footer-brand { display: flex; align-items: center; gap: 14px; }
.ds-footer-logo { height: 32px; width: auto; }
.ds-footer-tagline { font-size: .85rem; color: var(--ds-muted); }
.ds-footer-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.ds-footer-links a { font-size: .82rem; color: var(--ds-muted); transition: color .3s ease; }
.ds-footer-links a:hover { color: var(--ds-cyan); }
.ds-footer-social { display: flex; gap: 14px; }
.ds-footer-social a {
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ds-glass-border); color: var(--ds-text); transition: all .3s ease;
}
.ds-footer-social a:hover { color: var(--ds-cyan); border-color: var(--ds-cyan); box-shadow: 0 0 16px rgba(0,240,255,.3); }
.ds-footer-divider { height: 1px; background: var(--ds-glass-border); margin: 40px 0 24px; }
.ds-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--ds-muted); }

/* -------------------------------------------------------------------------
   20. BOTONES FLOTANTES — WHATSAPP E INSTAGRAM
------------------------------------------------------------------------- */
.ds-social-float {
    position: fixed; right: 28px; z-index: 900;
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    transition: transform .3s var(--ds-ease);
}
.ds-social-float:hover { transform: scale(1.08); }

.ds-whatsapp-float {
    bottom: 28px;
    background: #25D366; color: #05060D;
    box-shadow: 0 0 0 rgba(37, 211, 102, .6);
    animation: ds-wa-pulse 2.4s ease-in-out infinite;
}
@keyframes ds-wa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
    70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.ds-instagram-float {
    bottom: 100px; /* apilado justo encima del botón de WhatsApp */
    background: var(--ds-gradient); color: #05060D;
    box-shadow: 0 0 0 rgba(255, 0, 224, .6);
    animation: ds-ig-pulse 2.4s ease-in-out infinite;
    animation-delay: .3s; /* pulsan alternados, no en sincro perfecta */
}
@keyframes ds-ig-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 224, .5); }
    70% { box-shadow: 0 0 0 16px rgba(255, 0, 224, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 224, 0); }
}

/* -------------------------------------------------------------------------
   21. BARRA CTA FLOTANTE INTELIGENTE
------------------------------------------------------------------------- */
.ds-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 899;
    transform: translateY(120%); transition: transform .5s var(--ds-ease);
}
.ds-cta-bar.is-visible { transform: translateY(0); }
.ds-cta-bar-inner {
    max-width: 720px; width: calc(100% - 40px);
    margin: 0 auto 18px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: rgba(11, 14, 26, .9); backdrop-filter: blur(14px);
    border: 1px solid var(--ds-glass-border); border-radius: 100px;
    padding: 12px 14px 12px 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.ds-cta-bar-inner span { font-size: .85rem; flex: 1; min-width: 180px; }
.ds-cta-bar-close {
    background: none; border: none; color: var(--ds-muted); cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: color .3s ease, background .3s ease;
}
.ds-cta-bar-close:hover { color: var(--ds-text); background: rgba(255,255,255,.08); }

/* -------------------------------------------------------------------------
   22. MENÚ INFERIOR MÓVIL (BOTTOM NAV) — 4 accesos + botón central elevado
   Solo existe en mobile (se activa en la media query de "Móvil" más abajo).
   Estructura: 2 links | hueco reservado para el FAB | 2 links, y el FAB
   ("D" del isotipo, ver assets/images) flota sobre una muesca semicircular
   recortada en el borde superior de la barra vía mask-image.
------------------------------------------------------------------------- */
.ds-bottom-nav {
    display: none; /* se activa solo en mobile, ver RESPONSIVE */
    position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 950;
    height: calc(var(--ds-bottomnav-h) + env(safe-area-inset-bottom, 0));
}

/* Barra visual (fondo/vidrio/muesca). Va separada del <nav> contenedor
   para que el FAB pueda ser un HERMANO fuera de ella: si el FAB fuera
   hijo de un elemento con mask-image, la máscara recortaría también su
   propio contenido (la máscara afecta a todo el grupo de pintado). */
.ds-bnav-bar {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 64px 1fr 1fr;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: rgba(11, 14, 26, .88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--ds-glass-border);
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .4);
    /* Muesca semicircular centrada en el borde superior, donde se posa el FAB */
    -webkit-mask-image: radial-gradient(circle 34px at 50% 0px, transparent 99%, #000 100%);
    mask-image: radial-gradient(circle 34px at 50% 0px, transparent 99%, #000 100%);
}

.ds-bnav-link {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--ds-muted);
    font-family: var(--ds-font-body); font-weight: 600;
    font-size: .62rem; letter-spacing: .02em; text-transform: uppercase;
    padding-top: 6px;
    transition: color .25s ease, transform .15s ease;
}
.ds-bnav-link i { font-size: 1.15rem; transition: transform .25s var(--ds-ease), filter .25s ease; }
.ds-bnav-link:active { transform: scale(.92); }
.ds-bnav-link.is-active { color: var(--ds-cyan); }
.ds-bnav-link.is-active i { transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(0, 240, 255, .55)); }

.ds-bnav-spacer { width: 64px; } /* reserva el hueco central bajo el FAB */

/* Botón flotante central: mismo diámetro que la muesca, con el isotipo
   "D" recortado del logo (sin crear un asset nuevo) y aro de separación
   del color de fondo para que "flote" sobre la barra. */
.ds-bnav-fab {
    position: absolute;
    left: 50%; top: -27px;
    transform: translateX(-50%);
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 28%, rgba(122, 0, 255, .95), var(--ds-bg-2) 72%);
    box-shadow:
        0 10px 28px rgba(122, 0, 255, .5),
        0 0 22px rgba(0, 240, 255, .3),
        0 0 0 5px var(--ds-bg-2);
    transition: transform .3s var(--ds-ease), box-shadow .3s ease;
}
.ds-bnav-fab:active { transform: translateX(-50%) scale(.92); }

/* Recorte del isotipo "D" a partir del logo completo (imagen 1586×992,
   "D" ubicada en x:520-1052 / y:200-614): se escala y desplaza dentro de
   un marco de 30×30 para mostrar solo la letra, sin generar un PNG aparte. */
.ds-bnav-fab-icon {
    width: 30px; height: 30px; overflow: hidden; position: relative;
}
.ds-bnav-fab-icon img {
    position: absolute; max-width: none; width: 89px; height: auto;
    left: -29px; top: -6px; /* deja margen antes del wordmark "SOFT" que sigue debajo en el mismo PNG */
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, .55));
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Tablet / Escritorio pequeño */
@media (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
}

/* Navbar móvil + ajustes generales de tablet */
@media (max-width: 991px) {
    .ds-navbar-toggle { display: flex; }
    .ds-navbar-menu {
        position: fixed; top: var(--ds-navbar-h); left: 0; right: 0; bottom: 0;
        background: rgba(5, 6, 13, .97); backdrop-filter: blur(20px);
        flex-direction: column; justify-content: flex-start; align-items: flex-start;
        gap: 32px; padding: 48px 28px;
        transform: translateX(100%); transition: transform .4s var(--ds-ease);
        overflow-y: auto;
    }
    .ds-navbar-menu.is-open { transform: translateX(0); }
    .ds-navbar-links { flex-direction: column; gap: 24px; }
    .ds-nav-link { font-size: 1.1rem; }
    .ds-navbar-cta { width: 100%; text-align: center; }

    /* Sin cursor custom en touch/tablet */
    .ds-cursor { display: none; }
}

/* Móvil */
@media (max-width: 768px) {
    :root { --ds-navbar-h: 68px; }

    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-title { font-size: clamp(2.6rem, 15vw, 4.5rem); }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .services-grid { grid-template-columns: 1fr; }

    /* Galería de proyectos: pasa a carrusel deslizable con snap (sin pin) */
    .projects-pin { height: auto; overflow: visible; }
    .projects-track {
        overflow-x: auto; scroll-snap-type: x mandatory;
        padding-block: 10px 20px; width: 100%;
        transform: none !important;
    }
    .project-card { scroll-snap-align: center; width: 86vw; }
    .projects-dots { display: flex; flex-wrap: wrap; padding-inline: 24px; }

    .contact-grid { gap: 36px; }
    .contact-form { padding: 28px; }

    .cta-final-title { margin-bottom: 30px; }
    .btn-ds-giant { padding: 18px 36px; font-size: .85rem; }

    .ds-social-float { width: 52px; height: 52px; font-size: 1.3rem; right: 18px; }
    /* Se reubican por encima del bottom-nav fijo para que no se tapen entre sí */
    .ds-whatsapp-float { bottom: calc(var(--ds-bottomnav-h) + env(safe-area-inset-bottom, 0) + 16px); }
    .ds-instagram-float { bottom: calc(var(--ds-bottomnav-h) + env(safe-area-inset-bottom, 0) + 80px); }
    .ds-cta-bar-inner { border-radius: var(--ds-radius-md); padding: 14px 16px; }

    /* La barra CTA inteligente queda cubierta por el bottom-nav (que ya trae
       su propio acceso directo a cotizar en el botón central "D") */
    .ds-cta-bar { display: none; }

    /* Bottom-nav: barra fija con 4 accesos + FAB circular central */
    body { padding-bottom: calc(var(--ds-bottomnav-h) + env(safe-area-inset-bottom, 0)); }
    .ds-bottom-nav { display: block; }
}

/* Móvil pequeño (360px) */
@media (max-width: 400px) {
    .container { padding-inline: 16px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .testimonial-card { padding: 34px 22px; }
    .hero-social-proof { font-size: .74rem; }
}

/* Escritorio grande (1920px+): limita el crecimiento excesivo del hero */
@media (min-width: 1920px) {
    .container { max-width: 1440px; }
}