/* =====================================================
   MAJOVIVAS — Premium Dark Mode Stylesheet
   Color: #A855F7 (Purple)  |  RGB: 168, 85, 247
   ===================================================== */

/* ── RESET & BASE ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* White / Gray scale */
  --primary-50:  #fafafa;
  --primary-100: #f4f4f5;
  --primary-200: #e4e4e7;
  --primary-300: #d4d4d8;
  --primary-400: #e4e4e7;
  --primary-500: #ffffff;
  --primary-600: #d4d4d8;
  --primary-700: #a1a1aa;
  --primary-800: #71717a;
  --primary-900: #52525b;
  --primary-rgb: 220, 220, 220;

  /* Backgrounds */
  --bg-primary:   #000000;
  --bg-secondary: #09090b;
  --bg-tertiary:  #18181b;

  /* Texts */
  --text-primary:   #ffffff;
  --text-secondary: #e4e4e7;
  --text-tertiary:  #a1a1aa;
  --text-quaternary:#71717a;

  /* Accents */
  --success: #22c55e;
  --info:    #3b82f6;
  --warning: #f59e0b;

  /* Spacing & radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.7;
}

/* Didot display font helper */
.font-didot {
  font-family: 'GFS Didot', 'Cormorant Garamond', 'Didot', 'Bodoni MT', Georgia, serif;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ── TYPOGRAPHY ───────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'GFS Didot', 'Cormorant Garamond', 'Didot', 'Bodoni MT', Georgia, serif;
  line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 6vw, 5rem);   font-weight: 400; letter-spacing: 0.01em; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem);   font-weight: 400; letter-spacing: 0.02em; }
h3 { font-size: 1.5rem;  font-weight: 400; letter-spacing: 0.03em; }

.gradient-text {
  background: linear-gradient(135deg, #a1a1aa 0%, #ffffff 45%, #d4d4d8 75%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow-text {
  filter: drop-shadow(0 0 16px rgba(255,255,255, 0.45))
          drop-shadow(0 0 32px rgba(255,255,255, 0.2));
}

/* ── CONTAINER ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── GLASS CARD ───────────────────────────────────── */
.glass-card {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.08) 0%,
    rgba(var(--primary-rgb), 0.04) 50%,
    rgba(var(--primary-rgb), 0.08) 100%
  );
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,0.4),
    inset 0 1px 0 0 rgba(255,255,255,0.05);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.glass-card:hover {
  border-color: rgba(var(--primary-rgb), 0.35);
  box-shadow: 0 20px 48px rgba(var(--primary-rgb), 0.2);
  transform: translateY(-4px);
}

/* ── BUTTONS ──────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #52525b 0%, #a1a1aa 40%, #ffffff 70%, #d4d4d8 100%);
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
  color: #000000;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 32px;
  border-radius: var(--radius-md);
  border: none;
  box-shadow:
    0 0 0 1px rgba(220,220,220, 0.4),
    0 4px 24px rgba(220,220,220, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.3s var(--ease-out), filter 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 2px rgba(255,255,255, 0.6),
    0 8px 40px rgba(220,220,220, 0.3);
}
.btn-primary.btn-full { width: 100%; justify-content: center; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 32px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  transition: all 0.3s var(--ease-out);
}
.btn-outline:hover {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: rgba(var(--primary-rgb), 0.6);
  color: var(--primary-400);
  transform: translateY(-2px);
}

/* ── SECTION COMMON ───────────────────────────────── */
section { padding: 100px 0; }

.section-header { text-align: center; margin-bottom: 64px; }

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-400);
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  margin-bottom: 20px;
}

.section-title { color: var(--text-primary); margin-bottom: 16px; }
.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-tertiary);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── ANIMATIONS ───────────────────────────────────── */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%       { transform: translateY(-18px) rotate(2deg); }
  50%       { transform: translateY(-8px) rotate(-1.5deg); }
  75%       { transform: translateY(-26px) rotate(1deg); }
}
@keyframes float-particle {
  0%, 100% { transform: translate(0,0); opacity: 0.35; }
  25%       { transform: translate(80px, -80px); opacity: 0.7; }
  50%       { transform: translate(-40px, -180px); opacity: 0.5; }
  75%       { transform: translate(-90px, -90px); opacity: 0.7; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--primary-rgb),.5), 0 4px 24px rgba(var(--primary-rgb),.4); }
  50%       { box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.8), 0 8px 40px rgba(var(--primary-rgb),.7); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fade-in-rotate {
  from { opacity: 0; transform: rotate(-6deg) scale(0.92); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes scroll-wheel {
  0%   { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(8px); opacity: 0; }
}
@keyframes spin-ring {
  to { transform: rotate(360deg); }
}

.animate-fade-in-up    { opacity: 0; animation: fade-in-up    0.8s var(--ease-out) forwards; }
.animate-scale-in      { opacity: 0; animation: scale-in      0.6s var(--ease-spring) forwards; }
.animate-fade-in-rotate{ opacity: 0; animation: fade-in-rotate 1.2s var(--ease-out) forwards; }
.float-animation       { animation: float 6s ease-in-out infinite; }

/* Scroll reveal */
.reveal-element {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-element.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── PARTICLES ────────────────────────────────────── */
.particles-container {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--primary-400);
  opacity: 0.35;
  animation: float-particle 20s infinite ease-in-out;
}

/* ── NAVBAR ───────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  padding: 20px 0;
  transition: all 0.3s ease;
}
.navbar.scrolled {
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  padding: 12px 0;
}
.nav-container {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400; font-size: 1.4rem; letter-spacing: 0.06em;
}
.logo-icon { font-size: 1.5rem; }
.logo-text  { color: var(--text-primary); }

.nav-links {
  display: flex; align-items: center; gap: 8px;
}
.nav-link {
  font-size: 0.9rem; font-weight: 500;
  color: var(--text-tertiary);
  padding: 8px 14px; border-radius: var(--radius-sm);
  position: relative; transition: color 0.3s;
}
.nav-link::after {
  content:''; position:absolute; bottom:4px; left:14px; right:14px;
  height:2px; background:var(--primary-500);
  transform:scaleX(0); transition:transform 0.3s ease; border-radius:2px;
}
.nav-link:hover { color: var(--text-primary); }
.nav-link:hover::after { transform:scaleX(1); }

.nav-cta {
  background: rgba(var(--primary-rgb), 0.15);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  color: var(--primary-400) !important;
  border-radius: var(--radius-sm);
  transition: all 0.3s !important;
}
.nav-cta:hover {
  background: rgba(var(--primary-rgb), 0.25) !important;
  color: var(--primary-300) !important;
}
.nav-cta::after { display:none !important; }

.mobile-menu-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 6px;
}
.hamburger-line {
  display: block; width: 24px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px; transition: all 0.3s;
}
.mobile-menu-toggle.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-toggle.open .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.mobile-menu-overlay {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,0.96);
  backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: all; }
.mobile-nav-links { display:flex; flex-direction:column; gap:8px; text-align:center; }
.mobile-nav-link {
  font-size: 2rem; font-weight: 400;
  font-family: 'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.05em;
  color: var(--text-tertiary); padding: 12px 32px;
  transition: color 0.3s;
}
.mobile-nav-link:hover { color: var(--primary-400); }
.mobile-nav-cta {
  background: rgba(var(--primary-rgb), 0.15);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  color: var(--primary-400) !important;
  border-radius: var(--radius-lg); margin-top: 12px;
}

/* ── HERO ─────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at top center, rgba(var(--primary-rgb),.09) 0%, transparent 55%);
}
.hero-glow {
  position:absolute; top:20%; left:50%; transform:translateX(-50%);
  width:700px; height:700px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(var(--primary-rgb),.1) 0%, transparent 70%);
  pointer-events:none;
}
.hero-container {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:120px 24px 80px;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px;
}
.hero-content { display:flex; flex-direction:column; gap:28px; }

.hero-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--primary-300);
  background:rgba(var(--primary-rgb),.1);
  border:1px solid rgba(var(--primary-rgb),.25);
  border-radius:var(--radius-full);
  padding:8px 18px; width:fit-content;
}
.label-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--primary-400);
  box-shadow:0 0 8px rgba(var(--primary-rgb),.8);
  animation: pulse-glow 2s ease-in-out infinite;
}

.hero-title { color:var(--text-primary); }
.hero-subtitle { font-size:1.125rem; color:var(--text-tertiary); max-width:480px; line-height:1.7; }
.hero-ctas { display:flex; gap:16px; flex-wrap:wrap; }

.hero-stats {
  display:flex; align-items:center; gap:24px;
  padding-top:8px;
}
.hero-stat { display:flex; flex-direction:column; }
.stat-number {
  font-family:'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-size:1.75rem; font-weight:400;
  color:var(--primary-400);
  line-height:1;
}
.stat-suffix { font-size:1.25rem; font-weight:800; color:var(--primary-400); }
.stat-label { font-size:0.75rem; color:var(--text-quaternary); margin-top:4px; }
.hero-stat-divider { width:1px; height:40px; background:rgba(255,255,255,0.1); }

/* Hero visual */
.hero-visual { display:flex; justify-content:center; }
.hero-image-wrapper { position:relative; width:480px; max-width:100%; }

.hero-glow-ring {
  position:absolute; inset:-20px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(var(--primary-rgb),.25) 0%, transparent 70%);
  pointer-events:none;
}
.hero-img {
  width:100%; height:540px; object-fit:cover;
  border-radius: var(--radius-xl);
  border:1px solid rgba(var(--primary-rgb),.2);
  box-shadow:
    0 0 40px rgba(var(--primary-rgb),.3),
    0 0 80px rgba(var(--primary-rgb),.15);
}

/* Floating badges on hero */
.floating-badge {
  position:absolute;
  display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(16px);
  border:1px solid rgba(var(--primary-rgb),.3);
  border-radius:var(--radius-full);
  padding:10px 16px;
  font-size:0.85rem; font-weight:600;
  color:var(--text-secondary);
  animation:float 6s ease-in-out infinite;
}
.badge-icon { font-size:1.1rem; }
.badge-1 { bottom:10%; left:-10%; animation-delay:0s; }
.badge-2 { top:10%;   right:-8%; animation-delay:2s; }
.badge-3 { bottom:35%;right:-12%;animation-delay:4s; }

/* Scroll indicator */
.scroll-indicator {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-quaternary);
}
.scroll-mouse {
  width:22px; height:36px; border:2px solid rgba(var(--primary-rgb),.4);
  border-radius:12px; display:flex; justify-content:center; padding-top:6px;
}
.scroll-wheel {
  width:4px; height:8px; background:var(--primary-400);
  border-radius:2px; animation:scroll-wheel 1.5s ease-in-out infinite;
}

/* ── SOCIAL PROOF ─────────────────────────────────── */
.social-proof {
  padding: 48px 0;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  background: var(--bg-secondary);
}
.proof-label {
  text-align:center; font-size:0.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-quaternary); margin-bottom:28px;
}
.proof-logos {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px;
}
.proof-logo {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-full);
  padding:10px 20px;
  font-size:0.85rem; font-weight:500; color:var(--text-quaternary);
  transition:all 0.3s;
}
.proof-logo:hover { color:var(--text-secondary); border-color:rgba(var(--primary-rgb),.3); background:rgba(var(--primary-rgb),.06); }
.proof-logo-icon { font-size:1.1rem; }

/* ── SERVICES / FLIP CARDS ────────────────────────── */
.servicios { background:var(--bg-secondary); }
.services-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

/* Flip card mechanics */
.service-card-flip {
  height:380px; perspective:1400px;
}
.service-card-inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card-flip:hover .service-card-inner,
.service-card-flip.flipped .service-card-inner {
  transform:rotateY(180deg);
}

.service-card-front,
.service-card-back {
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:var(--radius-lg); overflow:hidden;
}
.service-card-back { transform:rotateY(180deg); }

/* Front face */
.service-card-front { background:var(--bg-tertiary); }

.service-image-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  border-radius:var(--radius-lg);
}
.service-placeholder-icon { font-size:3rem; }
.service-placeholder-hint {
  font-size:0.72rem; color:rgba(255,255,255,0.4);
  text-align:center; line-height:1.5;
}
.service-placeholder-hint code {
  color:var(--primary-300); font-family:monospace; font-size:0.68rem;
}

.service-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%);
  display:flex; align-items:flex-end; padding:24px;
  border-radius:var(--radius-lg);
}
.service-title-front {
  font-family:'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-size:1.25rem; font-weight:400; letter-spacing:0.04em; color:#fff;
}

/* Back face */
.service-card-back.glass-card {
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:28px; transform:rotateY(180deg);
}
.service-back-icon { font-size:2rem; }
.service-title-back {
  font-family:'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-size:1.25rem; font-weight:400; letter-spacing:0.04em; color:var(--text-primary);
}
.service-description { font-size:0.9rem; color:var(--text-tertiary); line-height:1.6; }
.service-features { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.feature-tag {
  font-size:0.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary-300);
  background:rgba(var(--primary-rgb),.12);
  border:1px solid rgba(var(--primary-rgb),.25);
  border-radius:var(--radius-full);
  padding:4px 12px;
}

/* ── PORTFOLIO ────────────────────────────────────── */
.portfolio { background:var(--bg-primary); }

.portfolio-filters {
  display:flex; justify-content:center; gap:12px;
  margin-bottom:48px; flex-wrap:wrap;
}
.filter-btn {
  font-size:0.85rem; font-weight:600;
  color:var(--text-quaternary);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-full);
  padding:10px 24px; transition:all 0.3s;
}
.filter-btn:hover, .filter-btn.active {
  color:var(--primary-300);
  background:rgba(var(--primary-rgb),.12);
  border-color:rgba(var(--primary-rgb),.3);
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.portfolio-item {
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:3/4; background:var(--bg-tertiary);
  cursor:pointer; transition:transform 0.4s var(--ease-out);
}
.portfolio-item:hover { transform:scale(1.02); }
.portfolio-item:nth-child(2) { aspect-ratio:3/5; }

.portfolio-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.06), rgba(var(--primary-rgb),.02));
}
.ph-icon { font-size:2.5rem; opacity:0.5; }
.ph-text { font-size:0.7rem; color:var(--text-quaternary); text-align:center; line-height:1.6; }
.ph-text code { color:var(--primary-400); font-size:0.65rem; }

.portfolio-item-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px; opacity:0; transition:opacity 0.4s;
}
.portfolio-item:hover .portfolio-item-overlay { opacity:1; }
.portfolio-item-overlay h4 { font-size:1rem; font-weight:700; color:#fff; }
.portfolio-item-overlay p  { font-size:0.8rem; color:var(--primary-300); }
.portfolio-item-overlay img { width:100%; height:100%; object-fit:cover; }

.portfolio-cta { text-align:center; margin-top:48px; }

/* ── PROCESO ──────────────────────────────────────── */
.proceso {
  background:linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
.proceso-steps {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative;
}
.proceso-step { display:flex; flex-direction:column; align-items:center; gap:16px; }

.step-number {
  font-family:'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-size:3.5rem; font-weight:400;
  color:rgba(var(--primary-rgb),.18);
  line-height:1;
}
.step-content.glass-card {
  text-align:center; padding:24px; flex:1; width:100%;
}
.step-icon { font-size:2rem; margin-bottom:8px; }
.step-content h3 { font-size:1rem; margin-bottom:8px; color:var(--text-primary); }
.step-content p  { font-size:0.85rem; color:var(--text-tertiary); line-height:1.6; }

.step-connector {
  display:none;
  position:absolute;top:50%;
  width:60px; height:2px;
  background:linear-gradient(90deg, var(--primary-700), var(--primary-500));
}

/* ── TESTIMONIOS ──────────────────────────────────── */
.testimonios { background:var(--bg-secondary); }
.testimonios-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.testimonio-card.glass-card { display:flex; flex-direction:column; gap:20px; }
.testimonio-stars { font-size:1.2rem; color:var(--warning); letter-spacing:2px; }
.testimonio-quote {
  font-size:0.95rem; color:var(--text-secondary);
  line-height:1.7; font-style:italic; flex:1;
}
.testimonio-quote::before { content:'"'; color:var(--primary-400); font-size:2rem; line-height:0.5; vertical-align:-0.6em; }
.testimonio-author { display:flex; align-items:center; gap:14px; }
.author-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary-700), var(--primary-500));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; color:#fff; flex-shrink:0;
  border:2px solid rgba(var(--primary-rgb),.4);
}
.author-info { display:flex; flex-direction:column; }
.author-name { font-weight:700; font-size:0.9rem; color:var(--text-primary); }
.author-role { font-size:0.78rem; color:var(--text-quaternary); }

/* ── SOBRE MÍ ─────────────────────────────────────── */
.sobre-mi { background:var(--bg-primary); }
.sobre-mi-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:center; }
.sobre-mi-image { display:flex; justify-content:center; }
.sobre-mi-image-wrapper { position:relative; width:380px; max-width:100%; }

.sobre-mi-glow-ring {
  position:absolute; inset:-24px; border-radius:var(--radius-xl);
  background:radial-gradient(ellipse, rgba(var(--primary-rgb),.2) 0%, transparent 70%);
  pointer-events:none;
}
.sobre-mi-placeholder {
  width:100%; aspect-ratio:4/5;
  background:linear-gradient(135deg, #1a0533, #3b1060, #1a0533);
  border-radius:var(--radius-xl);
  border:1px solid rgba(var(--primary-rgb),.2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  box-shadow:0 0 40px rgba(var(--primary-rgb),.2);
}
.sm-placeholder-icon { font-size:3rem; opacity:0.5; }
.sm-placeholder-text { font-size:0.75rem; color:var(--text-quaternary); text-align:center; line-height:1.6; }
.sm-placeholder-text code { color:var(--primary-400); }

.sobre-mi-img {
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius-xl);
  border:1px solid rgba(var(--primary-rgb),.2);
  box-shadow:0 0 40px rgba(var(--primary-rgb),.2);
}

.achievement-badge {
  position:absolute; display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,0.8); backdrop-filter:blur(16px);
  border:1px solid rgba(var(--primary-rgb),.3);
  border-radius:var(--radius-md); padding:12px 16px;
  font-size:1.2rem;
}
.achievement-badge > div { display:flex; flex-direction:column; }
.achievement-badge strong { font-size:0.95rem; font-weight:700; color:var(--primary-300); }
.achievement-badge small  { font-size:0.7rem; color:var(--text-quaternary); }
.badge-top    { top:-16px;    right:-16px; animation:float 5s ease-in-out infinite; }
.badge-bottom { bottom:-16px; left:-16px;  animation:float 7s ease-in-out 1s infinite; }

.sobre-mi-content { display:flex; flex-direction:column; gap:28px; }
.sobre-mi-content .section-label { align-self:flex-start; }
.sobre-mi-text { font-size:1rem; color:var(--text-tertiary); line-height:1.8; }

.sobre-mi-skills {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.skill-item {
  display:flex; align-items:center; gap:12px;
  background:rgba(var(--primary-rgb),.06);
  border:1px solid rgba(var(--primary-rgb),.12);
  border-radius:var(--radius-sm);
  padding:12px 16px; font-size:0.9rem; font-weight:500;
  transition:all 0.3s;
}
.skill-item:hover { border-color:rgba(var(--primary-rgb),.3); background:rgba(var(--primary-rgb),.12); }
.skill-icon { font-size:1.2rem; }

.social-links { display:flex; gap:12px; flex-wrap:wrap; }
.social-link {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-full);
  padding:10px 20px; font-size:0.85rem;
  color:var(--text-tertiary); transition:all 0.3s;
}
.social-link:hover {
  color:var(--primary-300);
  border-color:rgba(var(--primary-rgb),.3);
  background:rgba(var(--primary-rgb),.08);
  transform:translateY(-2px);
}
.social-icon { font-size:1rem; }

/* ── CTA FINAL / CONTACT ──────────────────────────── */
.cta-final {
  position:relative; overflow:hidden;
  background:var(--bg-secondary);
}
.cta-glow {
  position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:800px; height:800px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(var(--primary-rgb),.15) 0%, transparent 65%);
  pointer-events:none;
}
.cta-content { position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center; }
.cta-title { font-size:clamp(2rem,4vw,3rem); margin:16px 0; }
.cta-subtitle { font-size:1.1rem; color:var(--text-tertiary); margin-bottom:48px; }

/* Form */
.contact-form { display:flex; flex-direction:column; gap:20px; text-align:left; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label { font-size:0.85rem; font-weight:600; color:var(--text-tertiary); }
.form-group input,
.form-group select,
.form-group textarea {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-sm);
  padding:14px 16px; color:var(--text-primary);
  font-family:'Inter',sans-serif; font-size:0.95rem;
  outline:none; transition:border-color 0.3s, box-shadow 0.3s;
  width:100%;
}
.form-group select { appearance:none; -webkit-appearance:none; cursor:pointer; }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-quaternary); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:rgba(var(--primary-rgb),.5);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12);
}
.form-group textarea { resize:vertical; min-height:110px; }
.form-disclaimer { text-align:center; font-size:0.8rem; color:var(--text-quaternary); }

.alt-contact { margin-top:36px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.alt-contact p { font-size:0.9rem; color:var(--text-quaternary); }
.alt-contact-links { display:flex; gap:12px; }
.alt-link {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-full);
  padding:10px 20px; font-size:0.85rem; font-weight:600;
  color:var(--text-tertiary); transition:all 0.3s;
}
.alt-link:hover {
  color:var(--primary-300);
  border-color:rgba(var(--primary-rgb),.3);
  background:rgba(var(--primary-rgb),.08);
}

/* ── FOOTER ───────────────────────────────────────── */
.footer {
  background:var(--bg-primary);
  border-top:1px solid rgba(255,255,255,0.06);
  padding:72px 0 32px;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:64px;
}
.footer-brand { display:flex; flex-direction:column; gap:16px; }
.footer-logo {
  display:flex; align-items:center; gap:10px;
  font-family:'GFS Didot', 'Cormorant Garamond', Georgia, serif;
  font-weight:400; font-size:1.4rem; letter-spacing:0.06em;
}
.footer-tagline { font-size:0.9rem; color:var(--text-quaternary); line-height:1.7; max-width:240px; }
.footer-social { display:flex; gap:12px; margin-top:8px; }
.footer-social-link {
  width:40px; height:40px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:all 0.3s;
}
.footer-social-link:hover {
  background:rgba(var(--primary-rgb),.12);
  border-color:rgba(var(--primary-rgb),.3);
  transform:translateY(-3px);
}
.footer-links-col h4 {
  font-size:0.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-secondary); margin-bottom:20px;
}
.footer-links-col ul { display:flex; flex-direction:column; gap:12px; }
.footer-links-col a,
.footer-location {
  font-size:0.875rem; color:var(--text-quaternary);
  transition:color 0.3s;
}
.footer-links-col a:hover { color:var(--primary-400); }
.footer-location { font-size:0.875rem; color:var(--text-quaternary); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:24px; display:flex;
  justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom p { font-size:0.85rem; color:var(--text-quaternary); }
.footer-bottom-links { display:flex; gap:16px; }
.footer-bottom-links a { font-size:0.85rem; color:var(--text-quaternary); transition:color 0.3s; }
.footer-bottom-links a:hover { color:var(--primary-400); }
.footer-bottom-links span { color:rgba(255,255,255,0.2); }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width:1023px) {
  .hero-container { grid-template-columns:1fr; text-align:center; padding:120px 24px 80px; }
  .hero-content { align-items:center; }
  .hero-subtitle { text-align:center; }
  .hero-ctas { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-visual { display:none; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .proceso-steps { grid-template-columns:repeat(2,1fr); }
  .testimonios-grid { grid-template-columns:1fr 1fr; }
  .sobre-mi-grid { grid-template-columns:1fr; gap:48px; }
  .sobre-mi-image { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:767px) {
  section { padding:72px 0; }
  h1 { font-size:2.4rem; }
  h2 { font-size:1.8rem; }
  .nav-links { display:none; }
  .mobile-menu-toggle { display:flex; }
  .services-grid { grid-template-columns:1fr; }
  .service-card-flip { height:340px; }
  .portfolio-grid { grid-template-columns:1fr 1fr; }
  .proceso-steps { grid-template-columns:1fr; }
  .testimonios-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .alt-contact-links { flex-direction:column; align-items:center; }
  .badge-1, .badge-2, .badge-3 { display:none; }
  .particle:nth-child(n+25) { display:none; }
}
@media (max-width:480px) {
  .portfolio-grid { grid-template-columns:1fr; }
  .hero-stats { flex-direction:column; gap:16px; }
  .hero-stat-divider { width:40px; height:1px; }
}