/* ==========================================================================
 Black Web Digital — Main Stylesheet
 Next.js inspired — Pitch Black #000 · Violet/Gold Accents · Bento Grids
 ========================================================================== */

@font-face{
 font-family:'Fira Code';
 src:url('/fonts/fira-code-400.woff2') format('woff2');
 font-weight:400;
 font-style:normal;
 font-display:swap;
}

@font-face{
 font-family:'Fira Code';
 src:url('/fonts/fira-code-600.woff2') format('woff2');
 font-weight:600;
 font-style:normal;
 font-display:swap;
}

@font-face{
 font-family:'Fira Code';
 src:url('/fonts/fira-code-700.woff2') format('woff2');
 font-weight:700;
 font-style:normal;
 font-display:swap;
}


/* --------------------------------------------------------------------------
 CSS CUSTOM PROPERTIES — Design tokens
-------------------------------------------------------------------------- */
:root{
 --primary:#7C3AED;
 --primary-dark:#6D28D9;
 --primary-light:#A78BFA;
 --accent:#EC4899;
 --bg:#000000;
 --bg-card:#0a0a0a;
 --text:#ffffff;
 --text-secondary:#a1a1a1;
 --border:rgba(255,255,255,0.1);
 --font-main:'Fira Code',monospace;
}

/* --------------------------------------------------------------------------
 ELITE COMPONENTS — Custom premium components
-------------------------------------------------------------------------- */
.btn-elite{
 background:linear-gradient(135deg,#7C3AED,#4F46E5) !important;
 color:#ffffff !important;
 padding:0.625rem 1.75rem !important;
 border-radius:9999px !important;
 font-weight:700 !important;
 transition:all 0.3s ease !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 box-shadow:0 0 20px rgba(124,58,237,0.4) !important;
 text-decoration:none !important;
 border:none !important;
 cursor:pointer !important;
}

.btn-elite:hover{
 background:linear-gradient(135deg,#8B5CF6,#6366F1) !important;
 box-shadow:0 0 30px rgba(124,58,237,0.6) !important;
 transform:scale(1.05) translateY(-1px) !important;
}

.btn-elite-mobile{
 width:100% !important;
 padding:0.75rem 2rem !important;
 font-size:1rem !important;
}


/* --------------------------------------------------------------------------
 BASE — Page background
-------------------------------------------------------------------------- */
html,
body{
 background:var(--bg) !important;
 color:var(--text);
 font-family:var(--font-main);
 line-height:1.6;
}

/* Suble Dot Grid Pattern */
.dot-grid{
 background-image:radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px);
 background-size:32px 32px;
}

body{
 background:var(--bg);
 -webkit-font-smoothing:antialiased;
}

main{
 background:
 radial-gradient(ellipse 100% 50% at 5% 15%,rgba(124,58,237,0.07) 0%,transparent 60%),
 radial-gradient(ellipse 80% 40% at 95% 40%,rgba(236,72,153,0.05) 0%,transparent 55%),
 radial-gradient(ellipse 60% 35% at 50% 75%,rgba(124,58,237,0.04) 0%,transparent 60%),
 radial-gradient(ellipse 50% 25% at 25% 90%,rgba(236,72,153,0.03) 0%,transparent 60%);
}

/* Subtle separator between sections */
.section-sep{
 border-top:1px solid var(--border);
}


/* --------------------------------------------------------------------------
 ACCESSIBILITY — Skip to main content
-------------------------------------------------------------------------- */
.skip-to-content{
 position:absolute;
 top:-100%;
 left:1rem;
 padding:0.75rem 1.5rem;
 background:var(--primary);
 color:#fff;
 font-weight:600;
 border-radius:0 0 8px 8px;
 z-index:9999;
 transition:top 0.2s ease;
}

.skip-to-content:focus{
 top:0;
}


/* --------------------------------------------------------------------------
 NAVIGATION — Glassmorphism + animated underline
-------------------------------------------------------------------------- */
header{
 background:rgba(0,0,0,0.7) !important;
 backdrop-filter:blur(12px) !important;
 -webkit-backdrop-filter:blur(12px) !important;
 border-bottom:1px solid var(--border) !important;
}

.nav-link{
 position:relative;
 transition:color 0.3s ease;
 color:var(--text-secondary);
}

.nav-link:hover{
 color:var(--primary-light);
}

.nav-link::after{
 content:"";
 position:absolute;
 left:0;
 bottom:-6px;
 width:0%;
 height:1px;
 background:linear-gradient(90deg,var(--primary),var(--accent));
 transition:width 0.3s ease;
}

.nav-link:hover::after{
 width:100%;
}

/* Desktop CTA button style is now handled via Tailwind classes in HTML for better control */


/* Logo — "DIGITAL" word in violet */
header a .font-bold span,
header a span.text-gray-400{
 color:var(--primary-light) !important;
 -webkit-text-fill-color:var(--primary-light) !important;
}

/* Logo wordmark base color */
header .font-bold{
 color:var(--text) !important;
}


/* --------------------------------------------------------------------------
 SCROLL REVEAL — Fade + slide up on scroll
-------------------------------------------------------------------------- */
.reveal{
 opacity:0;
 transform:translateY(16px);
 transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1),transform 0.65s cubic-bezier(0.22,1,0.36,1);
}

.reveal.visible{
 opacity:1;
 transform:translateY(0);
}

.delay-1{
 transition-delay:0.10s;
}

.delay-2{
 transition-delay:0.20s;
}

.delay-3{
 transition-delay:0.30s;
}

.delay-4{
 transition-delay:0.40s;
}


/* --------------------------------------------------------------------------
 PAGE LOAD ANIMATIONS
-------------------------------------------------------------------------- */
.page-curtain{
 position:fixed;
 inset:0;
 background:var(--bg);
 z-index:9999;
 pointer-events:none;
 animation:curtainFade 0.55s 0.05s ease-out forwards;
}

@keyframes curtainFade{
 0%{
 opacity:1;
}

 100%{
 opacity:0;
}
}

.page-anim{
 opacity:0;
 animation-fill-mode:both;
 animation-timing-function:cubic-bezier(0.22,1,0.36,1);
 animation-name:slideUp;
 animation-duration:0.8s;
}

@keyframes slideDown{
 from{
 opacity:0;
 transform:translateY(-30px);
}

 to{
 opacity:1;
 transform:translateY(0);
}
}

@keyframes slideUp{
 from{
 opacity:0;
 transform:translateY(30px);
}

 to{
 opacity:1;
 transform:translateY(0);
}
}

@keyframes scaleIn{
 from{
 opacity:0;
 transform:scale(0.9);
}

 to{
 opacity:1;
 transform:scale(1);
}
}

@keyframes float{

 0%,
 100%{
 transform:translateY(0px);
}

 50%{
 transform:translateY(20px);
}
}

@keyframes floatReverse{

 0%,
 100%{
 transform:translateY(0px);
}

 50%{
 transform:translateY(-20px);
}
}

/* Legacy animations kept for compatibility */
@keyframes paUp{
 from{
 opacity:0;
 transform:translateY(30px);
}

 to{
 opacity:1;
 transform:translateY(0);
}
}

@keyframes paPop{
 0%{
 opacity:0;
 transform:scale(0.85) translateY(10px);
}

 65%{
 opacity:1;
 transform:scale(1.04) translateY(-1px);
}

 100%{
 opacity:1;
 transform:scale(1) translateY(0);
}
}

@keyframes paFade{
 from{
 opacity:0;
}

 to{
 opacity:1;
}
}

@keyframes paTitle{
 from{
 opacity:0;
 transform:translateY(36px);
 letter-spacing:0.02em;
}

 to{
 opacity:1;
 transform:translateY(0);
 letter-spacing:inherit;
}
}

@keyframes navDrop{
 from{
 opacity:0;
 transform:translateY(-100%);
}

 to{
 opacity:1;
 transform:translateY(0);
}
}

.page-anim.is-badge{
 animation-name:paPop;
 animation-duration:0.65s;
}

.page-anim.is-title{
 animation-name:paTitle;
 animation-duration:0.85s;
}

.page-anim.is-fade{
 animation-name:paFade;
 animation-duration:1.1s;
}

.pa-1{
 animation-delay:0.10s;
}

.pa-2{
 animation-delay:0.22s;
}

.pa-3{
 animation-delay:0.36s;
}

.pa-4{
 animation-delay:0.50s;
}

.pa-5{
 animation-delay:0.65s;
}

.pa-6{
 animation-delay:0.80s;
}

.nav-entrance{
 animation:navDrop 0.6s 0s cubic-bezier(0.22,1,0.36,1) both;
}


/* --------------------------------------------------------------------------
 BADGE — Eyebrow / section label pill — Violet accent
-------------------------------------------------------------------------- */
.badge{
 display:inline-flex;
 align-items:center;
 gap:0.4rem;
 padding:0.3rem 1rem;
 border-radius:9999px;
 border:1px solid rgba(124,58,237,0.4);
 background:rgba(124,58,237,0.08);
 font-size:0.7rem;
 letter-spacing:0.2em;
 text-transform:uppercase;
 color:var(--primary-light);
 font-weight:600;
}


/* --------------------------------------------------------------------------
 HERO — Floating radial backgrounds + dot grid
-------------------------------------------------------------------------- */
.hero-grid{
 background-image:
 radial-gradient(rgba(124,58,237,0.12) 1.5px,transparent 1.5px);
 background-size:30px 30px;
 mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 30%,transparent 100%);
 -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 30%,transparent 100%);
}

/* Floating radial orbs in hero / CTA */
.hero-orb-1{
 position:absolute;
 top:-10%;
 right:-5%;
 width:600px;
 height:600px;
 border-radius:50%;
 background:radial-gradient(circle,rgba(124,58,237,0.15),transparent 70%);
 pointer-events:none;
 animation:float 6s ease-in-out infinite;
}

.hero-orb-2{
 position:absolute;
 bottom:-10%;
 left:-5%;
 width:500px;
 height:500px;
 border-radius:50%;
 background:radial-gradient(circle,rgba(236,72,153,0.10),transparent 70%);
 pointer-events:none;
 animation:floatReverse 8s ease-in-out infinite;
}

/* Hero h1 animation */
#home h1,
#inicio h1{
 animation:slideDown 0.8s ease-out both;
 letter-spacing:-0.01em;/* Slight tightening but not broken */
}

.hero-glow{
 position:absolute;
 top:0;
 left:50%;
 transform:translateX(-50%);
 width:100vw;
 height:600px;
 background:radial-gradient(circle at 50% 0%,rgba(124,58,237,0.12) 0%,transparent 60%);
 pointer-events:none;
 z-index:1;
}

/* Hero p animation */
#home h1+p,
#home>div>p,
#inicio>div>p{
 animation:slideUp 0.8s ease-out 0.1s both;
}


/* --------------------------------------------------------------------------
 ICON BOX — Feature/service icon container — Violet
-------------------------------------------------------------------------- */
.icon-box{
 width:52px;
 height:52px;
 border-radius:14px;
 background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(236,72,153,0.05));
 border:1px solid rgba(124,58,237,0.3);
 display:flex;
 align-items:center;
 justify-content:center;
 color:var(--primary-light);
 margin-bottom:1.25rem;
 transition:background 0.4s cubic-bezier(0.4,0,0.2,1),
 border-color 0.4s cubic-bezier(0.4,0,0.2,1),
 box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
 animation:none;
}


/* --------------------------------------------------------------------------
 SERVICE / FEATURE CARDS — Glassmorphism + violet hover
-------------------------------------------------------------------------- */
.service-card{
 background:#0a0a0a;
 border:1px solid var(--border) !important;
 border-radius:12px;
 position:relative;
 transition:all 0.3s ease;
}

.service-card:hover{
 transform:translateY(-4px);
 border-color:rgba(255,255,255,0.2) !important;
 background:#111;
 box-shadow:0 0 40px rgba(0,0,0,0.5);
}

.service-card:hover .icon-box{
 background:linear-gradient(135deg,rgba(124,58,237,0.25),rgba(236,72,153,0.12));
 border-color:rgba(124,58,237,0.5);
 box-shadow:0 0 20px rgba(124,58,237,0.2);
}

/* Gradient border overlay */
.service-card::before{
 content:"";
 position:absolute;
 inset:0;
 border-radius:inherit;
 padding:1px;
 background:linear-gradient(135deg,rgba(124,58,237,0) 0%,rgba(124,58,237,0) 100%);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask-composite:exclude;
 transition:background 0.4s cubic-bezier(0.4,0,0.2,1);
 pointer-events:none;
}

.service-card:hover::before{
 background:linear-gradient(135deg,
 rgba(124,58,237,0.6) 0%,
 rgba(236,72,153,0.2) 50%,
 rgba(124,58,237,0.4) 100%);
}

/* Staggered animation for feature cards */
.service-card:nth-child(1){
 animation:scaleIn 0.6s ease-out 0.0s both;
}

.service-card:nth-child(2){
 animation:scaleIn 0.6s ease-out 0.1s both;
}

.service-card:nth-child(3){
 animation:scaleIn 0.6s ease-out 0.2s both;
}

.service-card:nth-child(4){
 animation:scaleIn 0.6s ease-out 0.3s both;
}

.service-card:nth-child(5){
 animation:scaleIn 0.6s ease-out 0.4s both;
}

.service-card:nth-child(6){
 animation:scaleIn 0.6s ease-out 0.5s both;
}


/* --------------------------------------------------------------------------
 STEP NUMBER — Process steps — Violet
-------------------------------------------------------------------------- */
.step-num{
 width:48px;
 height:48px;
 border-radius:50%;
 background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
 box-shadow:0 0 0 4px rgba(124,58,237,0.08),0 0 24px rgba(124,58,237,0.4);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:0.85rem;
 font-weight:700;
 color:#fff;
 margin-bottom:1rem;
 flex-shrink:0;
}


/* --------------------------------------------------------------------------
 STAT CARD — Metrics with violet top accent
-------------------------------------------------------------------------- */
.stat-card{
 border-top:2px solid rgba(124,58,237,0.4);
 transition:border-color 0.3s ease,box-shadow 0.3s ease;
}

.stat-card:hover{
 border-top-color:var(--primary);
 box-shadow:0 0 30px rgba(124,58,237,0.1);
}


/* --------------------------------------------------------------------------
 STATS ROW
-------------------------------------------------------------------------- */
.stats-row{
 display:flex;
 flex-wrap:wrap;
 gap:1.5rem;
}

.stats-row>div{
 flex:1 1 80px;
 min-width:70px;
 text-align:center;
}


/* --------------------------------------------------------------------------
 PORTFOLIO CARDS — Image aspect-ratio + violet hover
-------------------------------------------------------------------------- */
.portfolio-thumb{
 aspect-ratio:16 / 9;
 overflow:hidden;
 border-radius:0.5rem 0.5rem 0 0;
 background:#000;
 transition:opacity 0.3s ease;
 position:relative;
}

.portfolio-thumb picture{
 display:block;
 width:100%;
 height:100%;
}

.portfolio-thumb img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
 transition:transform 0.4s ease;
}

.portfolio-card:hover .portfolio-thumb img{
 transform:scale(1.04);
}

.portfolio-thumb::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(135deg,rgba(124,58,237,0.06) 0%,transparent 60%);
 pointer-events:none;
}

.portfolio-card{
 display:flex;
 flex-direction:column;
 transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),
 border-color 0.4s cubic-bezier(0.4,0,0.2,1),
 box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}

.portfolio-card>div.p-6{
 flex:1;
}

.portfolio-card:hover{
 transform:translateY(-4px);
 border-color:rgba(124,58,237,0.4) !important;
 box-shadow:0 0 36px rgba(124,58,237,0.15);
}


/* --------------------------------------------------------------------------
 GRADIENT TEXT — Violet + pink shimmer headline accent
-------------------------------------------------------------------------- */
.text-gradient{
 background:linear-gradient(135deg,var(--primary-light),var(--primary),var(--accent),var(--primary-light));
 background-size:200% auto;
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 animation:shine 4s linear infinite;
}

@keyframes shine{
 0%{
 background-position:0% center;
}

 100%{
 background-position:200% center;
}
}

/* --------------------------------------------------------------------------
 FOOTER — Mejoras de Contraste y Accesibilidad
-------------------------------------------------------------------------- */
footer{
 background:#050507 !important;
}

footer p,footer li,footer a{
 color:var(--text-secondary) !important;
 transition:color 0.2s ease;
}

footer a:hover{
 color:#fff !important;
 text-decoration:underline;
}
/* --------------------------------------------------------------------------
 BUTTONS — Violet gradient CTAs
-------------------------------------------------------------------------- */

/* Primary button */
a[class*="bg-white"][href="#contact"],
a[class*="bg-white"][href*="contact"],
.btn-primary,
button[type="submit"]{
 background:linear-gradient(135deg,var(--primary),var(--accent)) !important;
 color:#fff !important;
 border:none !important;
 border-radius:12px !important;
 padding:0.9rem 2.2rem !important;
 transition:transform 0.2s ease,box-shadow 0.2s ease !important;
}

button[type="submit"]:hover,
.btn-primary:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 25px rgba(124,58,237,0.5) !important;
}

/* General white background buttons override */
.bg-white.text-black{
 background:linear-gradient(135deg,var(--primary),var(--accent)) !important;
 color:#fff !important;
 padding:0.9rem 2.2rem !important;
 border-radius:12px !important;
 box-shadow:0 4px 15px rgba(124,58,237,0.3);
 transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.bg-white.text-black:hover{
 background:linear-gradient(135deg,var(--primary-dark),var(--primary)) !important;
 transform:translateY(-2px);
 box-shadow:0 8px 25px rgba(124,58,237,0.5);
}

/* Outline / secondary buttons */
.border-white\/30,
[class*="border-white"]{
 border-color:var(--border) !important;
}

a.border,
button.border{
 transition:border-color 0.3s ease,color 0.3s ease,box-shadow 0.3s ease;
}

a.border:hover,
button.border:hover{
 border-color:var(--primary) !important;
 color:var(--primary-light) !important;
 box-shadow:0 0 15px rgba(124,58,237,0.2);
}


/* --------------------------------------------------------------------------
 WHATSAPP — Fixed sticky button
-------------------------------------------------------------------------- */
.whatsapp-btn{
 position:fixed;
 bottom:30px;
 right:30px;
 width:64px;
 height:64px;
 border-radius:50%;
 background:#25D366;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 10px 25px rgba(0,0,0,0.4);
 z-index:999;
 transition:transform 0.2s ease;
}

.whatsapp-btn::after{
 content:"";
 position:absolute;
 inset:0;
 border-radius:50%;
 background:#25D366;
 z-index:-1;
 /* Usamos transform y opacity para que la GPU procese la animación */
 animation:waPulse 2s infinite;
}

.whatsapp-btn:hover{
 transform:scale(1.1);
}

.whatsapp-btn img{
 width:32px;
 height:32px;
}

@keyframes waPulse{
 0%{
 transform:scale(1);
 opacity:0.7;
}

 100%{
 transform:scale(1.6);
 opacity:0;
}
}


/* --------------------------------------------------------------------------
 FAQ — Rotate the "+" icon when open
-------------------------------------------------------------------------- */
.faq-icon{
 display:inline-block;
 transition:transform 0.3s ease;
}

details[open] .faq-icon{
 transform:rotate(45deg);
}

/* FAQ items violet accent */
details{
 border-color:var(--border) !important;
 transition:border-color 0.3s ease;
}

details[open],
details:hover{
 border-color:rgba(124,58,237,0.35) !important;
}

details summary{
 color:var(--text);
}


@keyframes curtainFade{
 0%{opacity:1;}
 100%{opacity:0;visibility:hidden;}
}

@keyframes navDrop{
 from{opacity:0;transform:translateY(-100%);}
 to{opacity:1;transform:translateY(0);}
}

.page-curtain{
 position:fixed;
 inset:0;
 background:var(--bg);
 z-index:9999;
 pointer-events:none;
 animation:curtainFade 0.8s forwards;
}

.nav-entrance{
 animation:navDrop 0.8s ease-out forwards;
}

/* --------------------------------------------------------------------------
 CONTACT FORM — Loading state + input styles
-------------------------------------------------------------------------- */
.form-loading{
 opacity:0.65;
 pointer-events:none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
 background-color:rgba(26,26,26,0.8) !important;
 border-color:var(--border) !important;
 color:var(--text) !important;
 border-radius:8px;
 transition:border-color 0.3s ease,box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus{
 border-color:var(--primary) !important;
 box-shadow:0 0 0 3px rgba(124,58,237,0.15) !important;
 outline:none;
}

select option{
 background:var(--bg-card);
 color:var(--text);
}


/* --------------------------------------------------------------------------
 PERFORMANCE — Rendering optimizations
-------------------------------------------------------------------------- */
.section-lazy{
 content-visibility:auto;
 contain-intrinsic-size:0 600px;
}

.portfolio-card:hover .portfolio-thumb img{
 will-change:transform;
}


/* --------------------------------------------------------------------------
 SECTION AMBIENT GLOWS — Violet tinted
-------------------------------------------------------------------------- */
#services{
 position:relative;
}

#services::before{
 content:"";
 position:absolute;
 inset:0;
 background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(124,58,237,0.04) 0%,transparent 70%);
 pointer-events:none;
}

#portfolio{
 position:relative;
}

#portfolio::before{
 content:"";
 position:absolute;
 inset:0;
 background:radial-gradient(ellipse 80% 60% at 80% 50%,rgba(124,58,237,0.03) 0%,transparent 70%);
 pointer-events:none;
}

#contact{
 position:relative;
}

#contact::before{
 content:"";
 position:absolute;
 inset:0;
 background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(124,58,237,0.05) 0%,transparent 70%);
 pointer-events:none;
}


/* --------------------------------------------------------------------------
 CARD GLASS — Glass effect for all card types
-------------------------------------------------------------------------- */
.service-card,
.portfolio-card>div.p-6,
.stat-card{
 background:rgba(255,255,255,0.025);
}


/* --------------------------------------------------------------------------
 SECTION RULE — Violet glowing divider
-------------------------------------------------------------------------- */
.section-rule{
 height:1px;
 background:linear-gradient(90deg,
 transparent 0%,
 rgba(124,58,237,0.5) 30%,
 rgba(236,72,153,0.6) 50%,
 rgba(124,58,237,0.5) 70%,
 transparent 100%);
 box-shadow:0 0 12px rgba(124,58,237,0.25);
 margin:0 auto;
 max-width:480px;
 margin-bottom:3rem;
}


/* --------------------------------------------------------------------------
 PREMIUM COMPONENTS — Badges,Roadmap & Cards
-------------------------------------------------------------------------- */

/* Unified Premium Badge */
.premium-badge{
 display:inline-flex;
 align-items:center;
 gap:0.75rem;
 background:rgba(255,255,255,0.03);
 border:1px solid rgba(255,255,255,0.1);
 padding:0.6rem 1.25rem;
 border-radius:9999px;
 font-size:0.75rem;
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:0.15em;
 color:#a78bfa;
 margin-bottom:2rem;
 backdrop-filter:blur(4px);
 box-shadow:0 4px 15px rgba(0,0,0,0.2);
}

.premium-badge .dot{
 width:6px;
 height:6px;
 background:#a78bfa;
 border-radius:50%;
 box-shadow:0 0 10px #a78bfa;
 display:inline-block;
}

/* --------------------------------------------------------------------------
 PROCESS TIMELINE — Clean vertical layout
-------------------------------------------------------------------------- */
.process-timeline{
 position:relative;
 max-width:42rem;
 margin:0 auto;
 display:flex;
 flex-direction:column;
 gap:3rem;
}

.process-step{
 display:flex;
 gap:1.5rem;
 position:relative;
}

.step-number{
 flex-shrink:0;
 width:3.5rem;
 height:3.5rem;
 background:#fff;
 color:#000;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:800;
 font-size:1.25rem;
 z-index:2;
 box-shadow:0 0 20px rgba(255,255,255,0.1);
}

.process-step::after{
 content:"";
 position:absolute;
 left:1.75rem;
 top:3.5rem;
 bottom:-3rem;
 width:1px;
 background:linear-gradient(to bottom,rgba(255,255,255,0.2),transparent);
 z-index:1;
}

.process-step:last-child::after{
 display:none;
}


/* --------------------------------------------------------------------------
 MOBILE MENU — Violet themed overlay
-------------------------------------------------------------------------- */
#mobileMenu{
 z-index:9998 !important;
 background:rgba(10,10,10,0.97) !important;
 backdrop-filter:blur(20px);
}


/* --------------------------------------------------------------------------
 NAVBAR RESPONSIVE BREAKPOINTS

 IMPORTANT:tailwind.min.css does NOT compile lg:flex / lg:hidden,
 so we must handle all three states manually here.

 Desktop ≥ 1024px → full nav:all links + lang switcher + CTA
 Tablet 768–1023px → condensed nav:links + CTA,lang switcher hidden
 Mobile < 768px → hamburger only
-------------------------------------------------------------------------- */

/* ── DESKTOP (≥ 1024px) ── */
@media (min-width:1024px){

 /* Show nav links container */
 header nav>div:nth-child(2){
 display:flex !important;
 align-items:center;
 gap:1.5rem;
}

 /* Hide hamburger */
 #menuBtn{
 display:none !important;
}
}

/* ── TABLET (768px – 1023px) ── */
@media (min-width:768px) and (max-width:1023px){

 /* Show condensed nav links */
 header nav>div:nth-child(2){
 display:flex !important;
 align-items:center;
 gap:1rem;
 font-size:0.8rem;
}

 /* Hide language switcher — saves horizontal space */
 header nav>div:nth-child(2)>div{
 display:none !important;
}

 /* Smaller CTA button */
 header nav>div:nth-child(2)>a:last-child{
 padding:0.5rem 1rem !important;
 font-size:0.8rem !important;
}

 /* Hide hamburger */
 #menuBtn{
 display:none !important;
}
}

/* ── MOBILE (< 768px) ── */
@media (max-width:767px){

 /* Hide nav links */
 header nav>div:nth-child(2){
 display:none !important;
}

 /* Show hamburger */
 #menuBtn{
 display:flex !important;
 align-items:center;
 justify-content:center;
}
}


/* --------------------------------------------------------------------------
 GENERAL TEXT COLOR OVERRIDES
-------------------------------------------------------------------------- */
.text-gray-400{
 color:var(--text-secondary) !important;
}

.text-gray-300{
 color:#C4C4C4 !important;
}

/* Violet highlights for accent elements */
.text-gold,
[class*="text-yellow"],
[class*="text-amber"]{
 color:var(--primary-light) !important;
}

/* Section labels / overlines */
p.text-sm.font-semibold,
span.text-sm.font-semibold{
 color:var(--primary-light);
}


/* --------------------------------------------------------------------------
 BORDER OVERRIDES — Swap white/gold borders for violet
-------------------------------------------------------------------------- */
[class*="border-white\/10"],
[class*="border-white\/20"],
[class*="border-white\/30"]{
 border-color:var(--border) !important;
}

.border-b{
 border-bottom-color:var(--border) !important;
}


/* --------------------------------------------------------------------------
 LANGUAGE SWITCHER
-------------------------------------------------------------------------- */
header .border.border-white\/20{
 border-color:var(--border) !important;
}

header .border.border-white\/20:hover{
 border-color:rgba(124,58,237,0.4) !important;
}


/* --------------------------------------------------------------------------
 RESPONSIVE — Breakpoint overrides
-------------------------------------------------------------------------- */

/* Very small phones (< 380px) */
@media (max-width:380px){
 .whatsapp-btn{
 bottom:16px;
 right:14px;
 width:52px;
 height:52px;
}

 .whatsapp-btn img{
 width:26px;
 height:26px;
}

 h1{
 font-size:1.9rem;
 line-height:1.2;
}
}

/* Small phones (< 480px) */
@media (max-width:480px){
 section{
 padding-left:1rem;
 padding-right:1rem;
}
}

/* --------------------------------------------------------------------------
 REMAINING STYLES (Conservados de tu versión anterior)
-------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);transition:0.65s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.service-card{background:rgba(255,255,255,0.03);border:1px solid var(--border) !important;border-radius:16px;transition:0.4s ease;}
.service-card:hover{transform:translateY(-5px);border-color:var(--primary) !important;}

/* --------------------------------------------------------------------------
 REDUCED MOTION — Respect user accessibility preferences
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
 .reveal{
 opacity:1;
 transform:none;
 transition:none;
}

 .page-anim{
 opacity:1;
 animation:none;
}

 .page-curtain{
 display:none;
}

 .nav-entrance{
 animation:none;
}

 .text-gradient{
 animation:none;
 background-position:0% center;
}

 .whatsapp-btn{
 animation:none;
}

 .service-card,
 .portfolio-card{
 transition:none;
}

 .icon-box{
 animation:none;
}
}


/* --------------------------------------------------------------------------
 DROPDOWN NAVIGATION — Services & Blog dropdowns
-------------------------------------------------------------------------- */
.nav-dropdown{
 position:relative;
}

.nav-dropdown-trigger{
 position:relative;
 transition:color 0.3s ease;
 color:var(--text-secondary);
 display:flex;
 align-items:center;
 gap:0.5rem;
 cursor:pointer;
 user-select:none;
}

.nav-dropdown-trigger:hover{
 color:var(--primary-light);
}

.nav-dropdown-trigger::after{
 content:"";
 position:absolute;
 left:0;
 bottom:-6px;
 width:0%;
 height:1px;
 background:linear-gradient(90deg,var(--primary),var(--accent));
 transition:width 0.3s ease;
}

.nav-dropdown-trigger:hover::after{
 width:100%;
}

/* Dropdown arrow icon */
.dropdown-arrow{
 font-size:0.75rem;
 transition:transform 0.3s ease;
 display:inline-block;
}

.nav-dropdown.active .dropdown-arrow{
 transform:rotate(180deg);
}

/* Dropdown menu */
.nav-dropdown-menu{
 position:absolute;
 top:100%;
 left:0;
 background:rgba(10,10,10,0.7);
 backdrop-filter:blur(16px);
 -webkit-backdrop-filter:blur(16px);
 border:1px solid rgba(255,255,255,0.15);
 border-radius:8px;
 min-width:200px;
 margin-top:0.5rem;
 opacity:0;
 visibility:hidden;
 transform:translateY(-8px);
 transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s ease;
 z-index:100;
 box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.nav-dropdown.active .nav-dropdown-menu{
 opacity:1;
 visibility:visible;
 transform:translateY(0);
}

/* Mega-menu servicios — 2 cards lado a lado */
.nav-services-menu{
 min-width:460px;
 padding:0.75rem;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:0.5rem;
 left:50%;
 transform:translateX(-50%) translateY(-8px);
}

.nav-dropdown.active .nav-services-menu{
 transform:translateX(-50%) translateY(0);
}

.nav-service-card{
 display:flex;
 flex-direction:column;
 gap:0.4rem;
 padding:0.9rem 1rem;
 border-radius:8px;
 border:1px solid rgba(255,255,255,0.08);
 background:rgba(255,255,255,0.02);
 text-decoration:none;
 transition:border-color 0.2s,background 0.2s;
 color:inherit;
}

.nav-service-card:hover{
 border-color:rgba(124,58,237,0.45);
 background:rgba(124,58,237,0.08);
}

.nav-service-icon{
 font-size:1.2rem;
 line-height:1;
 margin-bottom:0.15rem;
}

.nav-service-title{
 color:#fff;
 font-weight:600;
 font-size:0.82rem;
 white-space:nowrap;
}

.nav-service-desc{
 color:#a1a1a1;
 font-size:0.72rem;
 line-height:1.45;
}

/* Dropdown menu items */
.nav-dropdown-item{
 display:block;
 padding:0.75rem 1rem;
 color:var(--text-secondary);
 text-decoration:none;
 font-size:0.9rem;
 transition:all 0.3s ease;
 border-left:2px solid transparent;
}

.nav-dropdown-item:hover{
 color:var(--primary-light);
 background:rgba(124,58,237,0.1);
 border-left-color:var(--primary);
}

.nav-dropdown-item:first-child{
 border-radius:7px 7px 0 0;
}

.nav-dropdown-item:last-child{
 border-radius:0 0 7px 7px;
}
/* sales-pages styles are loaded via sales-pages.css */

/* --------------------------------------------------------------------------
 MISSING TAILWIND UTILITIES — clases no compiladas en tailwind.min.css
-------------------------------------------------------------------------- */
.w-6{width:1.5rem;}
.h-6{height:1.5rem;}
.h-12{height:3rem;}
.w-12{width:3rem;}
.btn-hero-wa{
 background:#6D28D9;
 box-shadow:0 10px 25px -5px rgba(109,40,217,0.4);
}
.btn-hero-wa:hover{
 background:#7C3AED;
 transform:scale(1.05);
}

.form-success-purple{
 background:rgba(109,40,217,0.15);
 border:1px solid rgba(139,92,246,0.3) !important;
 color:#A78BFA !important;
}

/* --------------------------------------------------------------------------
 DYNAMIC BACKGROUND AURA — Premium backdrop effect
-------------------------------------------------------------------------- */
.background-aura{
 position:fixed;
 top:0;
 left:50%;
 width:1200px;
 height:1200px;
 transform:translate(-50%,-50%);
 background:radial-gradient(
 circle,
 rgba(124,58,237,0.4) 0%,
 rgba(236,72,153,0.2) 40%,
 transparent 70%
 );
 filter:blur(140px);
 z-index:0;
 pointer-events:none;
 will-change:transform,filter;
 opacity:0.9;
 animation:aura-hue-cycle 10s linear infinite;
}

@keyframes aura-hue-cycle{
 0%{filter:blur(140px) hue-rotate(0deg);}
 100%{filter:blur(140px) hue-rotate(360deg);}
}