/* =================================================================
   JOSÉ LEONCIO PACHECO PÉREZ — Rediseño Premium Moderno
   Paleta: Navy Medianoche + Cian Eléctrico + Oro + Violeta
   ================================================================= */
:root{
  --bg:      #03091a;
  --bg2:     #060f24;
  --bg3:     #091530;
  --bg4:     #0d1d40;
  --panel:   rgba(9,21,52,0.75);
  --gold:    #f0b44b;
  --gold-2:  #ffd27a;
  --cyan:    #22d3ee;
  --cyan-2:  #67e8f9;
  --purple:  #7c3aed;
  --violet:  #a855f7;
  --cream:   #e8eeff;
  --muted:   #8b97bc;
  --muted-2: #4e5c82;
  --line:    rgba(255,255,255,0.07);
  --serif:   'Cormorant Garamond',Georgia,serif;
  --sans:    'Jost',system-ui,sans-serif;
  --syne:    'Syne','Jost',system-ui,sans-serif;
  --maxw:    1240px;
  --gut:     clamp(1.4rem,5vw,5.5rem);
  --ease:    cubic-bezier(.22,1,.36,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{ background:var(--bg); color:var(--cream); font-family:var(--sans); font-weight:300; line-height:1.7; overflow-x:hidden; cursor:none; }
@media(max-width:900px){ body{ cursor:auto; } }
::selection{ background:var(--cyan); color:var(--bg); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.08; }
.section__title{ font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:500; }

/* ---------- CURSOR ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9999; }
.cursor-dot{ width:7px; height:7px; background:var(--cyan); transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-ring{ width:36px; height:36px; border:1px solid var(--cyan); transform:translate(-50%,-50%); transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s; opacity:.6; }
.cursor-ring.hover{ width:56px; height:56px; background:rgba(34,211,238,.1); border-color:var(--gold); opacity:1; }
@media(max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--gold),var(--cyan),var(--violet)); z-index:1000; transition:width .1s linear; }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:center; justify-content:space-between; padding:1.6rem var(--gut); transition:background .5s var(--ease),padding .5s,border-color .5s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(3,9,26,.85); backdrop-filter:blur(20px) saturate(1.3); padding:.9rem var(--gut); border-bottom:1px solid var(--line); }
.nav__brand{ display:flex; align-items:center; gap:.75rem; }
.nav__monogram{ font-family:var(--serif); font-size:1.4rem; color:var(--gold); border:1px solid rgba(240,180,75,.45); width:44px; height:44px; display:grid; place-items:center; border-radius:50%; transition:.5s var(--ease); background:rgba(240,180,75,.06); }
.nav__brand:hover .nav__monogram{ background:var(--gold); color:var(--bg); transform:rotate(360deg); }
.nav__name{ font-size:.92rem; letter-spacing:.05em; color:var(--cream); font-weight:400; }
.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{ font-family:var(--syne); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); position:relative; transition:color .35s; }
.nav__links a:not(.nav__cta)::after{ content:''; position:absolute; left:0; bottom:-5px; width:0; height:1.5px; background:linear-gradient(90deg,var(--gold),var(--cyan)); transition:width .4s var(--ease); }
.nav__links a:not(.nav__cta):hover{ color:var(--cream); }
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{ border:1px solid rgba(34,211,238,.4); color:var(--cyan)!important; padding:.5rem 1.2rem; border-radius:40px; transition:background .4s var(--ease),box-shadow .4s,color .4s!important; }
.nav__cta:hover{ background:var(--cyan); color:var(--bg)!important; box-shadow:0 0 22px rgba(34,211,238,.3); }
.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav__toggle span{ width:26px; height:1.5px; background:var(--cream); transition:.4s var(--ease); }
.nav__toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2){ opacity:0; }
.nav__toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu{ position:fixed; inset:0; z-index:850; background:rgba(3,9,26,.97); backdrop-filter:blur(14px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; opacity:0; visibility:hidden; transition:opacity .5s var(--ease),visibility .5s; }
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{ font-family:var(--serif); font-size:2.4rem; color:var(--cream); opacity:0; transform:translateY(20px); transition:.5s var(--ease); }
.mobile-menu.open a{ opacity:1; transform:none; }
.mobile-menu.open a:nth-child(1){ transition-delay:.08s; }.mobile-menu.open a:nth-child(2){ transition-delay:.14s; }.mobile-menu.open a:nth-child(3){ transition-delay:.20s; }.mobile-menu.open a:nth-child(4){ transition-delay:.26s; }.mobile-menu.open a:nth-child(5){ transition-delay:.32s; }.mobile-menu.open a:nth-child(6){ transition-delay:.38s; }.mobile-menu.open a:nth-child(7){ transition-delay:.44s; }
@media(max-width:980px){ .nav__links{ display:none; } .nav__toggle{ display:flex; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }

/* Photo background */
.hero__photo-bg{ position:absolute; inset:0; z-index:0; background:url("images/hero-bg.jpg") center 22% / cover no-repeat; transform:scale(1.06); animation:heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom{ 0%{ transform:scale(1.06) translateX(0); } 100%{ transform:scale(1.12) translateX(-1%); } }

/* Video optional */
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s; z-index:1; }
.hero__video.loaded{ opacity:.4; }

/* Dramatic gradient overlay: dark navy left → teal glow center → semi-transparent right */
.hero__overlay{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(108deg, rgba(3,9,26,.97) 0%, rgba(3,9,26,.92) 25%, rgba(3,9,26,.72) 48%, rgba(6,15,36,.4) 65%, rgba(3,9,26,.55) 100%),
    radial-gradient(ellipse 55% 75% at 70% 48%, rgba(34,211,238,.12) 0%, transparent 62%),
    radial-gradient(ellipse 40% 60% at 65% 30%, rgba(109,40,217,.10) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(3,9,26,.62) 0%, transparent 16%),
    linear-gradient(to top, var(--bg) 0%, transparent 28%);
}
.hero__grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Animated glowing orbs */
.hero__orbs{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:orbFloat 12s ease-in-out infinite; }
.orb--1{ width:480px; height:480px; background:radial-gradient(circle, rgba(34,211,238,.25), rgba(34,211,238,.05)); top:5%; right:5%; animation-duration:14s; }
.orb--2{ width:380px; height:380px; background:radial-gradient(circle, rgba(109,40,217,.22), rgba(109,40,217,.04)); bottom:15%; right:25%; animation-duration:18s; animation-delay:-5s; }
.orb--3{ width:280px; height:280px; background:radial-gradient(circle, rgba(240,180,75,.18), rgba(240,180,75,.03)); top:40%; right:42%; animation-duration:10s; animation-delay:-3s; }
@keyframes orbFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(4%,-4%) scale(1.08); } 66%{ transform:translate(-3%,3%) scale(.95); } }

.hero__inner{ position:relative; z-index:4; width:100%; max-width:var(--maxw); margin:0 auto; padding:8rem var(--gut) 5rem; min-height:100vh; display:flex; align-items:center; }
.hero__content{ max-width:44rem; }

/* Eyebrow */
.hero__eyebrow{ display:flex; align-items:center; gap:.9rem; margin-bottom:2rem; }
.hero__eyebrow span{ font-family:var(--syne); font-size:.75rem; letter-spacing:.4em; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.hero__eyebrow .sep{ color:var(--gold); font-size:.7rem; }

/* Title */
.hero__title{ display:flex; flex-direction:column; margin-bottom:1.2rem; }
.hero__firstname{ font-size:clamp(3.4rem,7.5vw,6.2rem); font-weight:300; color:var(--cream); letter-spacing:.01em; }
.hero__lastname{ font-size:clamp(3.4rem,7.5vw,6.2rem); font-weight:600; font-style:italic; background:linear-gradient(120deg, var(--gold) 0%, var(--gold-2) 45%, var(--cyan) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.hero__role{ font-size:clamp(1rem,1.8vw,1.3rem); color:var(--cream); letter-spacing:.08em; margin-bottom:1.4rem; font-weight:300; font-family:var(--syne); }
.hero__lead{ color:var(--muted); max-width:33rem; font-size:1.04rem; margin-bottom:2.4rem; line-height:1.75; }
.hero__actions{ display:flex; gap:.9rem; flex-wrap:wrap; }

/* Floating achievement badges */
.hero__badges{ position:absolute; z-index:4; right:5%; bottom:18%; display:flex; flex-direction:column; gap:.8rem; pointer-events:none; }
.hbadge{ background:rgba(9,21,52,.75); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.7rem 1.1rem; display:flex; flex-direction:column; align-items:center; animation:badgeFloat 5s ease-in-out infinite; }
.hbadge--1{ animation-delay:0s; border-top:1px solid rgba(240,180,75,.4); }
.hbadge--2{ animation-delay:-1.7s; border-top:1px solid rgba(34,211,238,.4); }
.hbadge--3{ animation-delay:-3.2s; border-top:1px solid rgba(168,85,247,.4); }
.hb-num{ font-family:var(--serif); font-size:1.8rem; font-weight:600; background:linear-gradient(135deg,var(--gold),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.hb-label{ font-family:var(--syne); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
@keyframes badgeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media(max-width:880px){ .hero__badges{ display:none; } }

/* Scroll cue */
.hero__scroll{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:.7rem; font-family:var(--syne); font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.hero__scroll-line{ width:1px; height:44px; background:linear-gradient(var(--cyan),transparent); overflow:hidden; position:relative; }
.hero__scroll-line::after{ content:''; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--cyan-2); animation:scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(250%); } }

@media(max-width:880px){ .hero__inner{ padding-top:9rem; } .hero__content{ max-width:100%; } .hero__lastname{ -webkit-text-fill-color:unset; background:none; color:var(--gold); } }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{ display:inline-block; font-family:var(--syne); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; padding:.95rem 2rem; border-radius:40px; cursor:pointer; transition:.45s var(--ease); font-weight:700; }
.btn--glow{ background:linear-gradient(120deg,var(--gold),var(--gold-2)); color:var(--bg); border:none; box-shadow:0 0 0 rgba(240,180,75,0); }
.btn--glow:hover{ transform:translateY(-3px); box-shadow:0 12px 32px rgba(240,180,75,.35),0 0 0 3px rgba(240,180,75,.15); }
.btn--glass{ background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.35); color:var(--cyan); backdrop-filter:blur(8px); }
.btn--glass:hover{ background:rgba(34,211,238,.18); border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 8px 28px rgba(34,211,238,.18); }
.btn--outline{ border:1px solid rgba(255,255,255,.15); color:var(--cream); }
.btn--outline:hover{ border-color:rgba(255,255,255,.35); transform:translateY(-3px); }
.btn--full{ width:100%; text-align:center; }

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats__grid{ max-width:var(--maxw); margin:0 auto; padding:3.5rem var(--gut); display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.stat{ text-align:center; padding:.5rem 0; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat__num{ display:block; font-family:var(--serif); font-size:clamp(2.6rem,4.5vw,3.8rem); font-weight:600; line-height:1; background:linear-gradient(135deg,var(--gold),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat__label{ display:block; font-family:var(--syne); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.8rem; }
@media(max-width:780px){ .stats__grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; } .stat{ border-right:none; } .stat:nth-child(odd){ border-right:1px solid var(--line); } .stat:last-child{ grid-column:1/-1; } }

/* ============================================================
   SECCIONES — base
   ============================================================ */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(5rem,10vw,9rem) var(--gut); }
.section__eyebrow{ display:block; font-family:var(--syne); font-size:.72rem; letter-spacing:.4em; color:var(--cyan); text-transform:uppercase; margin-bottom:1.1rem; font-weight:700; }
.section__title{ color:var(--cream); margin-bottom:.8rem; }
.section__head{ margin-bottom:3.5rem; }
.grad-text{ background:linear-gradient(120deg,var(--gold),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ============================================================
   SOBRE MÍ
   ============================================================ */
.about__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
/* Gradient-border portrait frame */
.portrait-frame{ position:relative; }
.portrait-glow{ padding:2px; background:linear-gradient(140deg,var(--gold),var(--cyan),var(--violet)); border-radius:10px; position:relative; }
.portrait-glow img{ width:100%; border-radius:8px; display:block; }
.portrait-glow::after{ content:''; position:absolute; inset:0; border-radius:10px; background:inherit; filter:blur(20px); opacity:.45; z-index:-1; transform:scale(1.05); }
.portrait-tag{ margin-top:1.2rem; font-family:var(--syne); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); text-align:center; }
.about__body p{ color:var(--muted); margin-bottom:1.3rem; }
.about__lead{ font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,1.9rem)!important; line-height:1.42; color:var(--cream)!important; }
.about__lead em{ color:var(--gold); font-style:italic; }
.about__value{ display:flex; gap:1rem; margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--line); }
.value-accent{ width:3px; flex-shrink:0; background:linear-gradient(to bottom,var(--gold),var(--cyan)); border-radius:2px; }
.about__value h3{ font-size:1.3rem; color:var(--gold); margin-bottom:.6rem; }
.about__value p{ color:var(--muted); font-size:.98rem; }
.diff-list{ list-style:none; margin-top:2rem; }
.diff-list li{ display:flex; gap:.9rem; color:var(--muted); margin-bottom:.85rem; align-items:baseline; font-size:.97rem; }
.di{ color:var(--cyan); font-size:.6rem; flex-shrink:0; }
@media(max-width:880px){ .about__grid{ grid-template-columns:1fr; } .portrait-frame{ max-width:340px; margin:0 auto; } }

/* ============================================================
   EXPERIENCIA — Timeline moderno
   ============================================================ */
.experience{ background:var(--bg2); max-width:none!important; }
.experience .section{ max-width:var(--maxw); margin:0 auto; }
.timeline{ position:relative; padding-left:3rem; }
.timeline::before{ content:''; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background:linear-gradient(to bottom,var(--gold),var(--cyan),var(--violet),var(--cyan),var(--gold)); border-radius:2px; }
.tl-item{ position:relative; padding-bottom:3rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-3rem; top:8px; width:20px; height:20px; border-radius:50%; border:2.5px solid; transition:.4s var(--ease); z-index:1; }
.tl-dot--gold{ border-color:var(--gold); background:rgba(240,180,75,.12); }
.tl-dot--cyan{ border-color:var(--cyan); background:rgba(34,211,238,.12); }
.tl-dot--purple{ border-color:var(--violet); background:rgba(168,85,247,.12); }
.tl-item:hover .tl-dot{ transform:scale(1.35); }
.tl-item:hover .tl-dot--gold{ background:var(--gold); box-shadow:0 0 0 8px rgba(240,180,75,.12); }
.tl-item:hover .tl-dot--cyan{ background:var(--cyan); box-shadow:0 0 0 8px rgba(34,211,238,.12); }
.tl-item:hover .tl-dot--purple{ background:var(--violet); box-shadow:0 0 0 8px rgba(168,85,247,.12); }
.tl-card{ background:var(--panel); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:10px; padding:1.8rem 2rem; transition:.4s var(--ease); }
.tl-item:hover .tl-card{ border-color:rgba(255,255,255,.14); transform:translateX(5px); }
.tl-period{ font-family:var(--syne); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.tl-card h3{ font-size:clamp(1.25rem,2vw,1.65rem); color:var(--cream); margin:.5rem 0 .2rem; }
.tl-company{ color:var(--muted); font-size:.92rem; margin-bottom:.9rem; }
.tl-card ul{ list-style:none; }
.tl-card li{ position:relative; padding-left:1.2rem; color:var(--muted); margin-bottom:.5rem; font-size:.96rem; }
.tl-card li::before{ content:'—'; position:absolute; left:0; color:var(--gold); }
.tl-card strong{ color:var(--cream); font-weight:500; }

/* ============================================================
   LOGROS
   ============================================================ */
.ach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.ach-card{ background:var(--panel); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:10px; padding:2rem 1.8rem; transition:.5s var(--ease); position:relative; overflow:hidden; }
.ach-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2.5px; background:linear-gradient(90deg,var(--gold),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.ach-card:hover{ transform:translateY(-7px); box-shadow:0 20px 45px rgba(0,0,0,.4); }
.ach-card:hover::before{ transform:scaleX(1); }
.ach-card h3{ font-size:1.5rem; color:var(--cream); margin-bottom:.7rem; }
.ach-card p{ color:var(--muted); font-size:.95rem; }
.ach-card--feature{ background:linear-gradient(140deg,rgba(240,180,75,.1),rgba(9,21,52,.9)); border:1px solid rgba(240,180,75,.25); }
.ach-card--feature::before{ background:linear-gradient(90deg,var(--gold),var(--gold-2)); }
.ach-card--cyan{ border-top:2px solid var(--cyan); }
.ach-card--purple{ border-top:2px solid var(--violet); }
.ach-card--gold{ border-top:2px solid var(--gold); }
.ach-tag{ display:inline-block; font-family:var(--syne); font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bg); background:linear-gradient(120deg,var(--gold),var(--gold-2)); padding:.3rem .85rem; border-radius:30px; margin-bottom:1rem; font-weight:700; }
@media(max-width:880px){ .ach-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SERVICIOS
   ============================================================ */
.services{ background:var(--bg2); max-width:none!important; }
.services .section{ max-width:var(--maxw); margin:0 auto; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.svc-card{ padding:2.2rem 1.8rem; border:1px solid var(--line); border-radius:10px; transition:.5s var(--ease); background:var(--panel); backdrop-filter:blur(12px); position:relative; overflow:hidden; }
.svc-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:2px 2px 0 0; }
.svc-card--gold::after{ background:linear-gradient(90deg,var(--gold),var(--gold-2)); }
.svc-card--cyan::after{ background:linear-gradient(90deg,var(--cyan),var(--cyan-2)); }
.svc-card--purple::after{ background:linear-gradient(90deg,var(--purple),var(--violet)); }
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.svc-num{ font-family:var(--serif); font-size:1.8rem; font-style:italic; display:block; margin-bottom:1rem; background:linear-gradient(135deg,var(--gold),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.svc-card h3{ font-size:1.3rem; color:var(--cream); margin-bottom:.65rem; line-height:1.28; }
.svc-card p{ color:var(--muted); font-size:.93rem; }
@media(max-width:880px){ .svc-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PORTAFOLIO
   ============================================================ */
/* Scrolling marquee */
.brand-marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.2rem 0; margin-bottom:3rem; background:rgba(6,15,36,.5); }
.marquee-track{ display:flex; gap:0; white-space:nowrap; animation:marquee 28s linear infinite; }
.marquee-track span{ font-family:var(--syne); font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); padding:0 2.4rem; border-right:1px solid var(--line); transition:color .3s; }
.marquee-track span:hover{ color:var(--gold); }
@keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

.folio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.folio-card{ border-radius:10px; padding:2rem 1.8rem; transition:.5s var(--ease); position:relative; overflow:hidden; background:var(--panel); backdrop-filter:blur(12px); border:1px solid var(--line); }
.fc--cyan{ border-left:2.5px solid var(--cyan); }
.fc--gold{ border-left:2.5px solid var(--gold); }
.fc--purple{ border-left:2.5px solid var(--violet); }
.folio-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.folio-kicker{ font-family:var(--syne); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.fc--gold .folio-kicker{ color:var(--gold); }
.fc--purple .folio-kicker{ color:var(--violet); }
.folio-card h3{ font-size:1.45rem; color:var(--cream); margin:.6rem 0 .6rem; }
.folio-card p{ color:var(--muted); font-size:.92rem; }
@media(max-width:880px){ .folio-grid{ grid-template-columns:1fr; } }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testimonials{ background:var(--bg2); max-width:none!important; }
.testimonials .section{ max-width:var(--maxw); margin:0 auto; }
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:2rem; }
.quote-card{ padding:2.4rem 2rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); backdrop-filter:blur(12px); transition:.5s var(--ease); }
.quote-card:hover{ transform:translateY(-5px); box-shadow:0 14px 36px rgba(0,0,0,.35); }
.quote-card blockquote{ font-family:var(--serif); font-size:1.28rem; font-style:italic; color:var(--cream); line-height:1.5; margin-bottom:1.6rem; }
.quote-card figcaption{ display:flex; align-items:center; gap:.9rem; }
.q-avatar{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--syne); font-size:.78rem; font-weight:700; color:var(--bg); flex-shrink:0; }
.q-name{ display:block; color:var(--cream); font-size:.92rem; font-weight:500; }
.q-role{ display:block; color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-top:1px; }
.testimonials-note{ font-size:.82rem; color:var(--muted-2); text-align:center; }
.testimonials-note em{ font-style:italic; }
@media(max-width:880px){ .quote-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{ border-top:1px solid var(--line); max-width:none!important; }
.contact .section{ max-width:none; margin:0; padding:0; }
.contact__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(5rem,10vw,9rem) var(--gut); display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,5.5rem); }
.contact__lead{ color:var(--muted); margin:1.4rem 0 2.2rem; font-size:1.03rem; max-width:28rem; }
.contact__list{ list-style:none; margin-bottom:2.2rem; }
.contact__list li{ display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.ci{ width:40px; height:40px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; font-size:.85rem; border:1px solid; }
.ci--gold{ border-color:rgba(240,180,75,.4); color:var(--gold); background:rgba(240,180,75,.06); }
.ci--cyan{ border-color:rgba(34,211,238,.4); color:var(--cyan); background:rgba(34,211,238,.06); }
.ci--purple{ border-color:rgba(168,85,247,.4); color:var(--violet); background:rgba(168,85,247,.06); }
.contact__list a,.contact__list span{ color:var(--cream); transition:color .35s; font-size:1rem; }
.contact__list a:hover{ color:var(--gold); }
.contact__roles{ display:flex; flex-wrap:wrap; gap:.6rem; }
.contact__roles span{ font-family:var(--syne); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:.45rem .9rem; border-radius:30px; }
.contact__form{ display:flex; flex-direction:column; gap:1.5rem; }
.field{ position:relative; }
.field input,.field textarea{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:1rem 1rem .7rem; color:var(--cream); font-family:var(--sans); font-size:.98rem; font-weight:300; resize:vertical; transition:border-color .4s,background .4s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--cyan); background:rgba(34,211,238,.04); }
.field label{ position:absolute; left:1rem; top:1rem; color:var(--muted); pointer-events:none; transition:.35s var(--ease); letter-spacing:.03em; font-size:.94rem; }
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{ top:.3rem; font-family:var(--syne); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); }
.form-note{ font-size:.84rem; color:var(--gold); min-height:1.2rem; }
@media(max-width:880px){ .contact__inner{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding:3.5rem var(--gut) 2rem; }
.footer__inner{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.footer__brand{ display:flex; align-items:center; gap:1rem; }
.footer__mono{ font-family:var(--serif); font-size:1.3rem; background:linear-gradient(135deg,var(--gold),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; border:1px solid rgba(255,255,255,.1); width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background-clip:text; }
.footer__name{ font-family:var(--serif); font-size:1.2rem; color:var(--cream); }
.footer__role{ font-size:.8rem; color:var(--muted); letter-spacing:.04em; }
.footer__nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer__nav a{ font-family:var(--syne); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .35s; }
.footer__nav a:hover{ color:var(--cyan); }
.footer__copy{ max-width:var(--maxw); margin:2.5rem auto 0; padding-top:2rem; border-top:1px solid var(--line); font-size:.76rem; color:var(--muted-2); letter-spacing:.05em; text-align:center; }

/* ============================================================
   VOLVER ARRIBA
   ============================================================ */
.to-top{ position:fixed; bottom:2rem; right:2rem; z-index:800; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--gold),var(--cyan)); color:var(--bg); font-size:1.15rem; font-weight:700; opacity:0; visibility:hidden; transform:translateY(15px); transition:.4s var(--ease); box-shadow:0 8px 24px rgba(34,211,238,.25); }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-4px) scale(1.08); box-shadow:0 14px 32px rgba(34,211,238,.35); }

/* ============================================================
   REVELADO AL SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity 1s var(--ease),transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.hero .reveal[data-delay="1"]{ transition-delay:.1s; }
.hero .reveal[data-delay="2"]{ transition-delay:.25s; }
.hero .reveal[data-delay="3"]{ transition-delay:.42s; }
.hero .reveal[data-delay="4"]{ transition-delay:.58s; }
.hero .reveal[data-delay="5"]{ transition-delay:.74s; }
.hero .reveal[data-delay="6"]{ transition-delay:.9s; }

@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .reveal{ opacity:1; transform:none; } }