/* ============================================================
   BRYAN DAVID ACUÑA — PORTFOLIO CSS v2.0
   Premium Dark Mode | Mobile-First
   ============================================================ */
:root {
  --bg:#070710; --bg-card:#0d0d1a; --bg-card-hover:#12122a;
  --border:rgba(255,255,255,0.06);
  --primary:#FFC563; --primary-dim:#EDA600;
  --secondary:#00D4FF; --tertiary:#A68CFF; --success:#22D3A5;
  --text:#F1EFF9; --text-muted:#7C7A8A; --text-dim:#4A4860;
  --nav-h:72px; --max-w:1280px;
  --section-py:clamp(5rem,10vw,9rem); --px:clamp(1.25rem,5vw,3rem);
  --shadow-primary:0 0 40px -8px rgba(255,197,99,0.25);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4);
  --shadow-card-hover:0 8px 40px rgba(0,0,0,0.6),0 0 0 1px rgba(255,197,99,0.15);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:9999px;
  --t-fast:0.15s ease; --t-base:0.3s ease;
  --t-slow:0.6s cubic-bezier(0.23,1,0.32,1);
  /* Profile Card (React Bits) */
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --card-opacity: 0;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --background-x: 50%;
  --background-y: 50%;
  --grain: none;
  --icon: none;
  --behind-gradient: none;
  --behind-glow-color: rgba(255, 197, 99, 0.65);
  --behind-glow-size: 35%;
  --inner-gradient: none;
  --sunpillar-1: hsl(2, 100%, 73%);
  --sunpillar-2: hsl(53, 100%, 69%);
  --sunpillar-3: hsl(93, 100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);
  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
  --sunpillar-clr-4: var(--sunpillar-4);
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);
  --card-radius: 30px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background-color:var(--bg);color:var(--text);font-family:'Manrope',sans-serif;line-height:1.6;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(circle at 15% 20%,rgba(255,197,99,0.04) 0%,transparent 50%),
    radial-gradient(circle at 85% 80%,rgba(0,212,255,0.03) 0%,transparent 50%),
    linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,48px 48px,48px 48px;will-change:transform}
::selection{background:var(--primary);color:#3D2600}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

/* Progress Bar */
#progress-bar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));z-index:200;width:0%;transition:width 0.1s linear;box-shadow:0 0 8px var(--primary)}

/* Cursor Glow */
#cursor-glow{position:fixed;pointer-events:none;z-index:9999;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,197,99,0.05) 0%,transparent 70%);will-change:transform;transition:opacity 0.3s ease;top:0;left:0}

/* ── NAV ── */
#navbar{position:fixed;top:0;width:100%;z-index:100;height:var(--nav-h);transition:background var(--t-base),border-color var(--t-base),box-shadow var(--t-base);background:linear-gradient(180deg, rgba(7,7,16,0.75) 0%, rgba(7,7,16,0) 100%);border-bottom:1px solid transparent}
#navbar.scrolled{background:rgba(7,7,16,0.88);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom-color:var(--border);box-shadow:0 1px 40px rgba(0,0,0,0.3)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-w);margin:0 auto;padding:0 var(--px);height:100%}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-dim));display:flex;align-items:center;justify-content:center;transition:transform var(--t-base),box-shadow var(--t-base)}
.nav-logo:hover .nav-logo-icon{transform:scale(1.1) rotate(-5deg);box-shadow:0 0 20px rgba(255,197,99,0.4)}
.nav-logo-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;letter-spacing:-0.02em;color:var(--text)}
.nav-links{display:none;align-items:center;gap:2.5rem}
@media(min-width:768px){.nav-links{display:flex}}
.nav-link{font-family:'Space Grotesk',sans-serif;font-size:0.875rem;font-weight:500;color:rgba(241,239,249,0.7);letter-spacing:-0.01em;transition:color var(--t-fast);position:relative;padding-bottom:2px}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),transparent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base)}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:0.75rem}
.btn-primary{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.4rem;border-radius:var(--r-full);background:linear-gradient(135deg,var(--primary),var(--primary-dim));color:#3D2600;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.875rem;letter-spacing:-0.01em;border:none;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-base)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-primary)}
.btn-primary:active{transform:translateY(0) scale(0.98)}
.btn-ghost{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.4rem;border-radius:var(--r-full);background:rgba(7,7,16,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);color:rgba(241,239,249,0.9);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.875rem;cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.btn-ghost:hover{border-color:rgba(255,255,255,0.3);color:var(--text);background:rgba(255,255,255,0.08)}
.btn-menu{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:var(--r-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--t-fast)}
.btn-menu:hover{border-color:rgba(255,255,255,0.2);color:var(--text)}
@media(min-width:768px){.btn-menu{display:none}}
#mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(7,7,16,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:1.5rem var(--px);flex-direction:column;gap:1rem}
#mobile-menu.open{display:flex}
.mobile-nav-link{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:600;color:var(--text-muted);padding:0.75rem 0;border-bottom:1px solid var(--border);transition:color var(--t-fast)}
.mobile-nav-link:last-child{border-bottom:none}
.mobile-nav-link:hover{color:var(--primary)}

/* ── LAYOUT ── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--px)}
.section{padding:var(--section-py) 0}
.section-label{display:inline-flex;align-items:center;gap:0.5rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--secondary);margin-bottom:1.25rem}
.section-label::before{content:'';display:inline-block;width:20px;height:1.5px;background:var(--secondary);border-radius:2px}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--text)}
.section-title .accent{color:var(--primary);font-style:italic}
.divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* ── HERO ── */
#inicio{min-height:100svh;display:flex;align-items:center;padding-top:var(--nav-h);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
/* Soft Aurora Background (React Bits) */
.soft-aurora-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden;opacity:0.92;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%)}
#soft-aurora-canvas{width:100%;height:100%;display:block}
.hero-orb{position:absolute;border-radius:50%;opacity:0.09;will-change:transform;animation:floatOrb 8s ease-in-out infinite}
.hero-orb-1{width:600px;height:600px;background:radial-gradient(circle, var(--primary) 0%, transparent 70%);top:-200px;left:-150px;animation-duration:10s}
.hero-orb-2{width:500px;height:500px;background:radial-gradient(circle, var(--secondary) 0%, transparent 70%);bottom:-200px;right:-150px;animation-duration:12s;animation-delay:-4s}
.hero-orb-3{width:300px;height:300px;background:radial-gradient(circle, var(--tertiary) 0%, transparent 70%);top:30%;right:20%;opacity:0.06;animation-duration:9s;animation-delay:-2s}
@keyframes floatOrb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-15px) scale(1.05)}66%{transform:translate(-10px,20px) scale(0.95)}}
.hero-grid{display:grid;grid-template-columns:1fr;gap:4rem;align-items:center;position:relative;z-index:1;padding:clamp(3rem,8vw,6rem) 0}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;gap:5rem}}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.9rem;border-radius:var(--r-full);background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.2);margin-bottom:1.5rem}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.8)}}
.hero-badge-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--secondary)}
.hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(3rem,7vw,5.5rem);font-weight:800;letter-spacing:-0.04em;line-height:0.95;color:var(--text);margin-bottom:1.5rem}
.hero-title .line2{display:block;background:linear-gradient(90deg,var(--primary),#FF9900);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic}
.hero-title .line3{display:block;color:var(--text)}
.hero-subtitle{font-size:1.05rem;color:var(--text-muted);max-width:480px;line-height:1.7;margin-bottom:2.25rem}
.hero-subtitle strong{color:var(--text);font-weight:600}
.hero-subtitle .hl-blue{color:var(--secondary)}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.85rem;margin-bottom:2.5rem}
.hero-social{display:flex;align-items:center;gap:0.75rem}
.social-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim)}
.social-link{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--border);color:var(--text-muted);transition:all var(--t-fast)}
.social-link:hover{border-color:var(--primary);color:var(--primary);background:rgba(255,197,99,0.06);transform:translateY(-2px)}
.hero-stats{display:flex;gap:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.stat-value{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-0.04em;line-height:1}
.stat-value.gold{color:var(--primary)}.stat-value.cyan{color:var(--secondary)}.stat-value.violet{color:var(--tertiary)}
.stat-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);margin-top:0.25rem}

/* Profile Card (React Bits) */
.pc-card-wrapper {
  perspective: 500px;
  transform: translate3d(0, 0, 0.1px);
  position: relative;
  touch-action: none;
  margin: 0 auto;
  width: max-content;
}

.pc-behind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    var(--behind-glow-color) 0%,
    transparent var(--behind-glow-size)
  );
  filter: blur(50px) saturate(1.1);
  opacity: calc(0.8 * var(--card-opacity));
  transition: opacity 200ms ease;
}

.pc-card-wrapper:hover,
.pc-card-wrapper.active {
  --card-opacity: 1;
}

.pc-card {
  height: 80svh;
  max-height: 540px;
  display: grid;
  aspect-ratio: 0.718;
  border-radius: var(--card-radius);
  position: relative;
  background-blend-mode: color-dodge, normal, normal, normal;
  animation: glow-bg 12s linear infinite;
  box-shadow: rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left) * 10px) - 3px)
    calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;
  transition: transform 1s ease;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  background: rgba(0, 0, 0, 0.9);
  backface-visibility: hidden;
  overflow: hidden;
}

.pc-card:hover,
.pc-card.active {
  transition: none;
  transform: translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
}

.pc-card-shell.entering .pc-card {
  transition: transform 180ms ease-out;
}

.pc-card-shell {
  position: relative;
  z-index: 1;
}

.pc-card * {
  display: grid;
  grid-area: 1/-1;
  border-radius: var(--card-radius);
  pointer-events: none;
}

.pc-inside {
  inset: 0;
  position: absolute;
  background-image: var(--inner-gradient);
  background-color: #0b1120;
  transform: none;
}

.pc-shine {
  -webkit-mask-image: var(--icon);
  -webkit-mask-mode: luminance;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  mask-image: var(--icon);
  mask-mode: luminance;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  transition: filter 0.8s ease;
  filter: brightness(0.8) contrast(1.4) saturate(0.6) opacity(0.9);
  animation: holo-bg 18s linear infinite;
  animation-play-state: running;
  mix-blend-mode: color-dodge;
}

.pc-shine,
.pc-shine::after {
  --space: 5%;
  --angle: -45deg;
  transform: translate3d(0, 0, 1px);
  overflow: hidden;
  z-index: 3;
  background: transparent;
  background-size: cover;
  background-position: center;
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--sunpillar-clr-1) calc(var(--space) * 1),
      var(--sunpillar-clr-2) calc(var(--space) * 2),
      var(--sunpillar-clr-3) calc(var(--space) * 3),
      var(--sunpillar-clr-4) calc(var(--space) * 4),
      var(--sunpillar-clr-5) calc(var(--space) * 5),
      var(--sunpillar-clr-6) calc(var(--space) * 6),
      var(--sunpillar-clr-1) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%
    );
  background-position:
    0 var(--background-y),
    var(--background-x) var(--background-y),
    center;
  background-blend-mode: color, hard-light;
  background-size:
    500% 500%,
    300% 300%,
    200% 200%;
  background-repeat: repeat;
}

.pc-shine::before,
.pc-shine::after {
  content: '';
  background-position: center;
  background-size: cover;
  grid-area: 1/1;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.pc-card:hover .pc-shine,
.pc-card.active .pc-shine {
  filter: brightness(0.85) contrast(1.5) saturate(0.5);
  animation-play-state: paused;
}

.pc-card:hover .pc-shine::before,
.pc-card.active .pc-shine::before,
.pc-card:hover .pc-shine::after,
.pc-card.active .pc-shine::after {
  opacity: 1;
}

.pc-shine::before {
  background-image:
    linear-gradient(
      45deg,
      var(--sunpillar-4),
      var(--sunpillar-5),
      var(--sunpillar-6),
      var(--sunpillar-1),
      var(--sunpillar-2),
      var(--sunpillar-3)
    ),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%),
    var(--grain);
  background-size:
    250% 250%,
    100% 100%,
    220px 220px;
  background-position:
    var(--pointer-x) var(--pointer-y),
    center,
    calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);
  background-blend-mode: color-dodge;
  filter: brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2))
    saturate(calc(0.5 + var(--pointer-from-center)));
  mix-blend-mode: luminosity;
}

.pc-shine::after {
  background-position:
    0 var(--background-y),
    calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5),
    center;
  background-size:
    200% 300%,
    700% 700%,
    100% 100%;
  mix-blend-mode: difference;
  filter: brightness(0.8) contrast(1.5);
}

.pc-glare {
  transform: translate3d(0, 0, 1.1px);
  overflow: hidden;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(248, 25%, 80%) 12%,
    hsla(207, 40%, 30%, 0.8) 90%
  );
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.2);
  z-index: 4;
}

.pc-avatar-content {
  mix-blend-mode: luminosity;
  overflow: visible;
  transform: translateZ(2);
  backface-visibility: hidden;
}

.pc-avatar-content .avatar {
  width: 100%;
  position: absolute;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(calc(-50% + (var(--pointer-from-left) - 0.5) * 6px)) translateZ(0)
    scaleY(calc(1 + (var(--pointer-from-top) - 0.5) * 0.02)) scaleX(calc(1 + (var(--pointer-from-left) - 0.5) * 0.01));
  bottom: -1px;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 120ms ease-out;
}

.pc-avatar-content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: none;
  pointer-events: none;
}

.pc-user-info {
  position: absolute;
  --ui-inset: 20px;
  --ui-radius-bias: 6px;
  bottom: var(--ui-inset);
  left: var(--ui-inset);
  right: var(--ui-inset);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(max(0px, var(--card-radius) - var(--ui-inset) + var(--ui-radius-bias)));
  padding: 12px 14px;
  pointer-events: auto;
}

.pc-user-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pc-mini-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.pc-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.pc-user-text {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}

.pc-handle {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.pc-status {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
}

.pc-contact-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  background: rgba(255, 197, 99, 0.15);
}

.pc-contact-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  transition: all 0.2s ease;
  background: rgba(255, 197, 99, 0.3);
}

.pc-content:not(.pc-avatar-content) {
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  transform: translate3d(
    calc(var(--pointer-from-left) * -6px + 3px),
    calc(var(--pointer-from-top) * -6px + 3px),
    0.1px
  );
  z-index: 5;
  mix-blend-mode: luminosity;
}

.pc-details {
  width: 100%;
  position: absolute;
  top: 2.2rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}

.pc-details h3 {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: -0.02em;
  background-image: linear-gradient(180deg, #ffffff 40%, #cad8f0 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}

.pc-details p {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  position: relative;
  top: 0;
  white-space: nowrap;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  margin: 0.45rem auto 0;
  width: auto;
  color: #9cb3d6;
  background-image: linear-gradient(180deg, #b8cced 0%, #768ea8 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes glow-bg {
  0% {
    --bgrotate: 0deg;
  }
  100% {
    --bgrotate: 360deg;
  }
}

@keyframes holo-bg {
  0% {
    background-position:
      0 var(--background-y),
      0 0,
      center;
  }
  100% {
    background-position:
      0 var(--background-y),
      90% 90%,
      center;
  }
}

@media (max-width: 768px) {
  .pc-card {
    height: 70svh;
    max-height: 450px;
  }
  .pc-details {
    top: 1.8rem;
  }
  .pc-details h3 {
    font-size: 1.5rem;
  }
  .pc-details p {
    font-size: 0.8rem;
    top: 0;
  }
}

@media (max-width: 480px) {
  .pc-card {
    height: 60svh;
    max-height: 380px;
  }
  .pc-details {
    top: 1.4rem;
  }
  .pc-details h3 {
    font-size: 1.25rem;
  }
  .pc-details p {
    font-size: 0.75rem;
    top: 0;
  }
  .pc-user-info {
    --ui-inset: 12px;
    padding: 8px 10px;
  }
  .pc-mini-avatar {
    width: 24px;
    height: 24px;
  }
  .pc-user-details {
    gap: 8px;
  }
  .pc-handle {
    font-size: 12px;
  }
  .pc-status {
    font-size: 9px;
  }
  .pc-contact-btn {
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 50px;
  }
}

@media (max-width: 320px) {
  .pc-card {
    height: 55svh;
    max-height: 320px;
  }
  .pc-details h3 {
    font-size: min(3svh, 1.5em);
  }
  .pc-details p {
    font-size: 11px;
  }
  .pc-user-info {
    padding: 6px 8px;
  }
  .pc-mini-avatar {
    width: 20px;
    height: 20px;
  }
  .pc-user-details {
    gap: 6px;
  }
  .pc-handle {
    font-size: 11px;
  }
  .pc-status {
    font-size: 8px;
  }
  .pc-contact-btn {
    padding: 4px 8px;
    font-size: 9px;
    border-radius: 50px;
  }
}

/* ── STACK ── */
.stack-section{background:var(--bg);padding:var(--section-py) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stack-header{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:3rem}
@media(min-width:768px){.stack-header{grid-template-columns:1fr 1fr;align-items:end}}
.stack-desc{font-size:1rem;color:var(--text-muted);line-height:1.7;max-width:40ch}
.stack-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:768px){.stack-grid{grid-template-columns:repeat(3,1fr)}}
.stack-column{background:var(--bg-card);padding:2rem;transition:background var(--t-base)}
.stack-column:hover{background:var(--bg-card-hover)}
.stack-col-header{display:flex;align-items:center;gap:0.625rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.stack-col-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.875rem}
.stack-col-icon.gold{background:rgba(255,197,99,0.12);color:var(--primary)}
.stack-col-icon.cyan{background:rgba(0,212,255,0.1);color:var(--secondary)}
.stack-col-icon.violet{background:rgba(166,140,255,0.1);color:var(--tertiary)}
.stack-col-title{font-family:'Space Grotesk',sans-serif;font-size:0.875rem;font-weight:700;letter-spacing:-0.01em}
.stack-tags{display:flex;flex-wrap:wrap;gap:0.5rem}
.stack-tag{display:inline-flex;align-items:center;gap:0.375rem;padding:0.35rem 0.75rem;border-radius:var(--r-full);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--text-muted);cursor:default;transition:all var(--t-fast)}
.stack-tag:hover{border-color:rgba(255,255,255,0.15);color:var(--text);background:rgba(255,255,255,0.06)}
.stack-tag.featured{border-color:rgba(255,197,99,0.2);background:rgba(255,197,99,0.06);color:var(--primary)}

/* ── PROJECTS ── */
.projects-header{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:4rem}
@media(min-width:768px){.projects-header{grid-template-columns:2fr 1fr;align-items:end}}
.projects-desc{color:var(--text-muted);line-height:1.7}
.project-featured{border-radius:var(--r-xl);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);cursor:pointer;transition:border-color var(--t-base),transform var(--t-slow),box-shadow var(--t-base);margin-bottom:1.5rem;position:relative}
.project-featured:hover{border-color:rgba(255,197,99,0.2);transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.project-img-wrap{position:relative;overflow:hidden;height:320px}
@media(min-width:768px){.project-img-wrap{height:400px}}
.project-img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform 0.8s cubic-bezier(0.23,1,0.32,1)}
.project-featured:hover .project-img{transform:scale(1.03)}
.project-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,7,16,0) 40%,rgba(7,7,16,0.95) 100%)}
.project-badge{position:absolute;top:1.25rem;left:1.25rem;display:flex;gap:0.5rem}
.badge{display:inline-flex;align-items:center;padding:0.3rem 0.7rem;border-radius:var(--r-full);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
.badge-gold{background:rgba(255,197,99,0.15);border:1px solid rgba(255,197,99,0.3);color:var(--primary);backdrop-filter:blur(8px)}
.badge-cyan{background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.25);color:var(--secondary);backdrop-filter:blur(8px)}
.badge-violet{background:rgba(166,140,255,0.1);border:1px solid rgba(166,140,255,0.25);color:var(--tertiary);backdrop-filter:blur(8px)}
.badge-green{background:rgba(34,211,165,0.1);border:1px solid rgba(34,211,165,0.25);color:var(--success);backdrop-filter:blur(8px)}
.project-body{padding:2rem 2.25rem 2.25rem}
.project-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}
.project-tag{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid var(--border);padding:0.25rem 0.6rem;border-radius:var(--r-full)}
.project-name{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;letter-spacing:-0.04em;color:var(--text);margin-bottom:0.75rem;transition:color var(--t-fast)}
.project-featured:hover .project-name{color:var(--primary)}
.project-desc{font-size:0.95rem;color:var(--text-muted);line-height:1.7;margin-bottom:1.5rem;max-width:60ch}
.project-meta{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.75rem;padding-bottom:1.75rem;border-bottom:1px solid var(--border)}
.project-metric{display:flex;align-items:center;gap:0.4rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim)}
.project-metric .material-symbols-outlined{font-size:14px}
.project-metric.cyan-m{color:var(--secondary)}.project-metric.gold-m{color:var(--primary)}.project-metric.violet-m{color:var(--tertiary)}.project-metric.green-m{color:var(--success)}
.project-tech-stack{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.5rem}
.tech-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.3rem 0.65rem;border-radius:var(--r-full);background:rgba(255,255,255,0.04);border:1px solid var(--border);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);transition:all var(--t-fast)}
.tech-chip:hover{border-color:var(--secondary);color:var(--secondary);background:rgba(0,212,255,0.06)}
.project-actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.btn-project{display:inline-flex;align-items:center;gap:0.4rem;padding:0.6rem 1.25rem;border-radius:var(--r-md);font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:-0.01em;cursor:pointer;transition:all var(--t-fast);border:none}
.btn-project .material-symbols-outlined{font-size:16px}
.btn-project-primary{background:rgba(255,197,99,0.12);border:1px solid rgba(255,197,99,0.25);color:var(--primary)}
.btn-project-primary:hover{background:rgba(255,197,99,0.2);border-color:rgba(255,197,99,0.5);transform:translateY(-1px)}
.btn-project-ghost{background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-muted)}
.btn-project-ghost:hover{border-color:rgba(255,255,255,0.15);color:var(--text);transform:translateY(-1px)}
.project-views-toggle{position:absolute;bottom:1rem;right:1.25rem;display:flex;gap:0.4rem;z-index:5}
.view-pill{background:rgba(7,7,16,0.75);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.18);color:var(--text-muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.68rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:var(--r-full);cursor:pointer;transition:all var(--t-fast)}
.view-pill:hover{color:var(--text);border-color:rgba(255,255,255,0.35);transform:translateY(-1px)}
.view-pill.active{background:var(--primary);color:#1A1000;border-color:var(--primary);font-weight:800;box-shadow:0 0 12px rgba(255,197,99,0.35)}
.project-grid-2{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.5rem}
@media(min-width:640px){.project-grid-2{grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}}
.project-card{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);cursor:pointer;transition:all var(--t-slow);display:flex;flex-direction:column}
.project-card:hover{border-color:rgba(255,197,99,0.2);transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.project-card .project-img-wrap{height:200px}
.project-card .project-img{object-position:top center}
.project-card .project-body{flex:1;padding:1.5rem}
.project-card .project-name{font-size:1.2rem}
.project-card .project-desc{font-size:0.875rem;max-width:none}
.project-card .project-meta{gap:1rem;margin-bottom:1.25rem;padding-bottom:1.25rem}
.project-cta{margin-top:3rem;border-radius:var(--r-xl);background:var(--bg-card);border:1px solid var(--border);padding:3rem;text-align:center;position:relative;overflow:hidden}
.project-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,197,99,0.06) 0%,transparent 70%);pointer-events:none}
.project-cta-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-0.04em;margin-bottom:0.75rem}
.project-cta-text{color:var(--text-muted);margin-bottom:1.75rem}
.project-cta-actions{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:1024px){.about-grid{grid-template-columns:5fr 7fr;gap:4rem;align-items:start}}
.about-big-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(3rem,7vw,5.5rem);font-weight:800;letter-spacing:-0.05em;line-height:0.92;color:var(--text);margin-bottom:2rem}
.about-big-title .gradient-text{background:linear-gradient(135deg,var(--primary),#FF9900);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-location{display:flex;align-items:center;gap:0.5rem;color:var(--text-dim);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase}
.about-location .material-symbols-outlined{font-size:14px;color:var(--secondary)}
.about-bio{font-size:1rem;color:var(--text-muted);line-height:1.8;margin-bottom:2rem}
.about-bio strong{color:var(--text);font-weight:600}
.about-bio .hl{color:var(--primary);font-weight:600}
.about-bio .hl-cyan{color:var(--secondary);font-weight:600}
.about-philosophy{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--primary);padding:1.5rem;border-radius:0 var(--r-md) var(--r-md) 0;margin-bottom:2.5rem}
.about-philosophy-title{font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);margin-bottom:0.625rem}
.about-philosophy-text{font-style:italic;color:var(--text-muted);font-size:0.95rem;line-height:1.7}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:2.5rem}
@media(min-width:480px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-box{background:var(--bg-card);padding:1.25rem;text-align:center;transition:background var(--t-fast)}
.stat-box:hover{background:var(--bg-card-hover)}
.stat-box-value{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;font-weight:800;letter-spacing:-0.04em}
.stat-box-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);margin-top:0.25rem}
.timeline-title{font-family:'Space Grotesk',sans-serif;font-size:1.125rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:1.75rem;color:var(--text)}
.timeline-item{padding-left:1.75rem;border-left:2px solid var(--border);padding-bottom:2rem;position:relative;transition:border-color var(--t-base)}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:'';position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--text-dim);border:2px solid var(--bg);transition:background var(--t-base),box-shadow var(--t-base)}
.timeline-item:hover{border-left-color:var(--primary)}
.timeline-item:hover::before{background:var(--primary);box-shadow:0 0 8px var(--primary)}
.timeline-date{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--secondary);margin-bottom:0.35rem}
.timeline-role{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:0.25rem}
.timeline-org{font-size:0.8rem;color:var(--text-muted);margin-bottom:0.5rem}
.timeline-text{font-size:0.875rem;color:var(--text-dim);line-height:1.6}

/* ── CONTACT ── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:5fr 7fr;gap:4rem;align-items:start}}
.contact-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:800;letter-spacing:-0.04em;line-height:1;margin-bottom:1rem}
.contact-subtitle{color:var(--text-muted);line-height:1.7;margin-bottom:2rem}
.contact-info-items{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.contact-info-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:var(--r-md);background:var(--bg-card);border:1px solid var(--border);transition:border-color var(--t-fast),background var(--t-fast)}
.contact-info-item:hover{border-color:rgba(0,212,255,0.2);background:var(--bg-card-hover)}
.contact-info-icon{width:40px;height:40px;border-radius:10px;background:rgba(0,212,255,0.08);color:var(--secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.2rem}
.contact-info-value{font-family:'Space Grotesk',sans-serif;font-size:0.9rem;font-weight:600;color:var(--text);letter-spacing:-0.01em;transition:color var(--t-fast)}
a.contact-info-item:hover .contact-info-value{color:var(--primary)}
.contact-socials{display:flex;gap:0.625rem}
.contact-form-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:0 0 60px -20px rgba(255,197,99,0.08)}
.form-title{font-family:'Space Grotesk',sans-serif;font-size:1.125rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:1.5rem}
.form-field{margin-bottom:1.25rem}
.form-label{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.5rem}
.field-input{width:100%;padding:0.85rem 1rem;background:rgba(0,0,0,0.4) !important;border:1px solid var(--border) !important;border-radius:var(--r-md) !important;color:var(--text) !important;font-family:'Manrope',sans-serif;font-size:0.9rem;outline:none;display:block;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.field-input:focus{border-color:var(--secondary) !important;background:rgba(0,212,255,0.03) !important;box-shadow:0 0 0 3px rgba(0,212,255,0.08)}
.field-input::placeholder{color:var(--text-dim) !important}
select.field-input option{background:#111122 !important;color:var(--text) !important}
.form-row{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:480px){.form-row{grid-template-columns:1fr 1fr}}
.btn-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:1rem;border-radius:var(--r-md);background:linear-gradient(135deg,var(--primary),var(--primary-dim));color:#3D2600;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1rem;letter-spacing:-0.01em;border:none;cursor:pointer;transition:all var(--t-base);box-shadow:0 4px 24px rgba(255,197,99,0.2);margin-top:0.5rem}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(255,197,99,0.35)}
.btn-submit:active{transform:translateY(0)}
.availability-pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1.25rem;border-radius:var(--r-full);background:rgba(34,211,165,0.08);border:1px solid rgba(34,211,165,0.2);margin-top:1.5rem}
.availability-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:pulse 2s ease infinite}
.availability-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--success)}

/* ── CTA FINAL ── */
.cta-final{text-align:center;padding:5rem 2rem;position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-card)}
.cta-final::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,197,99,0.06) 0%,transparent 60%)}
.cta-final-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.5rem,6vw,5rem);font-weight:800;letter-spacing:-0.05em;line-height:0.95;margin-bottom:1.25rem;position:relative}
.cta-final-sub{color:var(--text-muted);font-size:1.05rem;margin-bottom:2rem;position:relative}
.cta-final-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:relative}

/* ── FOOTER ── */
.footer{padding:2rem 0;background:var(--bg)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}
@media(min-width:768px){.footer-inner{flex-direction:row;justify-content:space-between;text-align:left}}
.footer-logo{display:flex;align-items:center;gap:0.625rem}
.footer-logo-icon{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-dim));display:flex;align-items:center;justify-content:center}
.footer-logo-text{font-family:'Space Grotesk',sans-serif;font-size:0.875rem;font-weight:700;letter-spacing:-0.02em}
.footer-copy{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim)}
.footer-links{display:flex;gap:1.5rem}
.footer-link{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);transition:color var(--t-fast)}
.footer-link:hover{color:var(--primary)}

/* ── WHATSAPP ── */
.whatsapp-btn{position:fixed;bottom:1.75rem;right:1.75rem;z-index:90;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dim));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(255,197,99,0.4);transition:all var(--t-base)}
.whatsapp-btn:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(255,197,99,0.5)}
.whatsapp-btn:active{transform:scale(0.95)}
.whatsapp-ping{position:absolute;inset:0;border-radius:50%;background:var(--primary);animation:ping 2s cubic-bezier(0,0,0.2,1) infinite;opacity:0}
@keyframes ping{75%,100%{transform:scale(1.8);opacity:0}0%{transform:scale(1);opacity:0.2}}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s cubic-bezier(0.23,1,0.32,1),transform 0.7s cubic-bezier(0.23,1,0.32,1)}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}.reveal-delay-2{transition-delay:0.2s}.reveal-delay-3{transition-delay:0.3s}.reveal-delay-4{transition-delay:0.4s}

@media(max-width:640px){.hero-stats{gap:1.5rem}.stat-value{font-size:1.75rem}.about-big-title{font-size:clamp(2.5rem,10vw,4rem)}}

/* ============================================================
   LEGAL ARCHITECTURE, RGPD & CMP STYLES
   Optimized for Core Web Vitals (Zero CLS, GPU-Accelerated)
   ============================================================ */

/* ── LEGAL PAGES (Aviso Legal, Privacidad, Cookies) ── */
.legal-page{padding-top:calc(var(--nav-h) + 2.5rem);padding-bottom:5rem;min-height:90vh}
.legal-header{max-width:860px;margin:0 auto 3rem auto;text-align:left}
.legal-badge{display:inline-flex;align-items:center;gap:0.4rem;padding:0.35rem 0.85rem;border-radius:var(--r-full);background:rgba(255,197,99,0.08);border:1px solid rgba(255,197,99,0.22);color:var(--primary);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.25rem}
.legal-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;letter-spacing:-0.04em;line-height:1.1;color:var(--text);margin-bottom:1rem}
.legal-subtitle{font-size:1.05rem;color:var(--text-muted);line-height:1.7;margin-bottom:1.5rem}
.legal-meta{display:flex;align-items:center;gap:0.75rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.75rem;color:var(--text-dim);flex-wrap:wrap}
.legal-meta strong{color:var(--text-muted)}
.meta-separator{color:var(--border)}

.legal-content{max-width:860px;margin:0 auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(1.75rem,5vw,3.5rem);box-shadow:var(--shadow-card)}
.legal-section{margin-bottom:2.75rem}
.legal-section:last-child{margin-bottom:0}
.legal-section h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.25rem,2.5vw,1.6rem);font-weight:700;letter-spacing:-0.02em;color:var(--primary);margin-bottom:1.1rem;padding-bottom:0.6rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.legal-section h3{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:600;color:var(--text);margin:1.25rem 0 0.5rem 0}
.legal-section p{color:var(--text-muted);font-size:0.95rem;line-height:1.75;margin-bottom:1rem}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul,.legal-section ol{margin:0.75rem 0 1.25rem 1.25rem;color:var(--text-muted);font-size:0.95rem;line-height:1.75}
.legal-section li{margin-bottom:0.5rem}
.legal-section li strong{color:var(--text)}

.legal-highlight-box{background:rgba(255,255,255,0.02);border:1px solid rgba(255,197,99,0.18);border-left:3px solid var(--primary);border-radius:0 var(--r-md) var(--r-md) 0;padding:1.25rem 1.5rem;margin:1.25rem 0}
.legal-data-list{list-style:none;margin:0 !important;padding:0 !important}
.legal-data-list li{margin-bottom:0.6rem;font-size:0.92rem;color:var(--text-muted)}
.legal-data-list li strong{color:var(--text);display:inline-block;min-width:160px}
.legal-inline-link{color:var(--primary);text-decoration:underline;text-underline-offset:3px;transition:color var(--t-fast)}
.legal-inline-link:hover{color:var(--secondary)}

.legal-action-card{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:linear-gradient(135deg,rgba(255,197,99,0.05),rgba(0,212,255,0.03));border:1px solid rgba(255,197,99,0.2);border-radius:var(--r-lg);padding:1.5rem;margin:1.5rem 0;flex-wrap:wrap}
.legal-action-text h3{margin-top:0;font-size:1.05rem;color:var(--text)}
.legal-action-text p{margin:0.25rem 0 0 0;font-size:0.88rem;color:var(--text-muted)}

.cookie-types-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.5rem 0}
@media(min-width:640px){.cookie-types-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.cookie-type-card{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--r-md);padding:1.25rem}
.cookie-type-header{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:0.75rem}
.cookie-type-header h3{margin:0;font-size:0.95rem;font-weight:700}
.cookie-badge{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:0.2rem 0.55rem;border-radius:var(--r-full)}
.cookie-badge.essential{background:rgba(34,211,165,0.12);color:var(--success);border:1px solid rgba(34,211,165,0.25)}
.cookie-badge.optional{background:rgba(0,212,255,0.1);color:var(--secondary);border:1px solid rgba(0,212,255,0.2)}

.table-responsive{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--border);border-radius:var(--r-md);background:rgba(0,0,0,0.25)}
.legal-table{width:100%;border-collapse:collapse;text-align:left;font-size:0.875rem}
.legal-table th{background:rgba(255,255,255,0.03);padding:0.85rem 1rem;font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--text);border-bottom:1px solid var(--border)}
.legal-table td{padding:0.85rem 1rem;border-bottom:1px solid var(--border);color:var(--text-muted);vertical-align:top}
.legal-table tr:last-child td{border-bottom:none}
.legal-table code{background:rgba(255,197,99,0.1);color:var(--primary);padding:0.15rem 0.4rem;border-radius:4px;font-family:monospace;font-size:0.82rem}
.table-badge{display:inline-block;font-size:0.7rem;font-weight:700;padding:0.15rem 0.5rem;border-radius:var(--r-full)}
.table-badge.essential{background:rgba(34,211,165,0.12);color:var(--success)}
.table-badge.optional{background:rgba(0,212,255,0.1);color:var(--secondary)}
.table-caption{font-size:0.8rem;color:var(--text-dim);font-style:italic;margin-top:0.5rem}

.browser-links-grid{display:grid;grid-template-columns:1fr;gap:0.75rem;margin:1.25rem 0}
@media(min-width:480px){.browser-links-grid{grid-template-columns:repeat(2,1fr)}}
.browser-card{display:flex;flex-direction:column;gap:0.25rem;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem;transition:all var(--t-fast)}
.browser-card:hover{border-color:rgba(255,197,99,0.3);background:rgba(255,197,99,0.03);transform:translateY(-2px)}
.browser-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.95rem;color:var(--text)}
.browser-action{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.72rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.04em}

.legal-footer-nav{display:grid;grid-template-columns:1fr;gap:1.25rem;max-width:860px;margin:2.5rem auto 0 auto}
@media(min-width:640px){.legal-footer-nav{grid-template-columns:1fr 1fr}}
.legal-nav-card{display:flex;flex-direction:column;gap:0.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;transition:all var(--t-fast)}
.legal-nav-card:hover{border-color:rgba(255,197,99,0.3);transform:translateY(-2px);background:var(--bg-card-hover)}
.legal-nav-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim)}
.legal-nav-title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:var(--text)}

/* ── FORM RGPD 1ª CAPA (INDEX.HTML) ── */
.form-checkbox-wrap{margin:1.25rem 0 0.75rem 0}
.custom-checkbox-label{display:flex;align-items:flex-start;gap:0.75rem;cursor:pointer;user-select:none}
.custom-checkbox-input{position:absolute;opacity:0;width:0;height:0}
.custom-checkbox-box{width:20px;height:20px;min-width:20px;border-radius:6px;background:rgba(0,0,0,0.5);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);margin-top:2px}
.custom-checkbox-box .check-icon{font-size:14px;color:#1A1000;opacity:0;transform:scale(0.5);transition:all var(--t-fast);font-weight:700}
.custom-checkbox-input:checked + .custom-checkbox-box{background:var(--primary);border-color:var(--primary);box-shadow:0 0 10px rgba(255,197,99,0.4)}
.custom-checkbox-input:checked + .custom-checkbox-box .check-icon{opacity:1;transform:scale(1)}
.custom-checkbox-input:focus-visible + .custom-checkbox-box{outline:2px solid var(--secondary);outline-offset:2px}
.custom-checkbox-wrap.has-error .custom-checkbox-box{border-color:#ff5555;box-shadow:0 0 10px rgba(255,85,85,0.3);animation:shakeBox 0.4s ease}
@keyframes shakeBox{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.custom-checkbox-text{font-size:0.82rem;color:var(--text-muted);line-height:1.5}
.custom-checkbox-text .legal-link{color:var(--primary);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.custom-checkbox-text .legal-link:hover{color:var(--secondary)}
.required-star{color:var(--primary);font-weight:700}

.rgpd-first-layer{background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:1.25rem;overflow:hidden;transition:border-color var(--t-fast)}
.rgpd-first-layer:hover{border-color:rgba(255,255,255,0.12)}
.rgpd-first-layer-header{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.75rem 1rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;user-select:none}
.rgpd-icon{font-size:16px;color:var(--secondary)}
.rgpd-title{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);flex:1}
.rgpd-chevron{font-size:18px;color:var(--text-dim);transition:transform var(--t-base)}
.rgpd-first-layer.open .rgpd-chevron{transform:rotate(180deg);color:var(--primary)}
.rgpd-first-layer-body{display:none;padding:0.75rem 1rem 1rem 1rem;border-top:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.15)}
.rgpd-first-layer.open .rgpd-first-layer-body{display:block}
.rgpd-info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.45rem}
.rgpd-info-list li{font-size:0.76rem;color:var(--text-muted);line-height:1.5}
.rgpd-info-list li strong{color:var(--text);font-weight:600}
.rgpd-info-list a{color:var(--primary);text-decoration:underline}

.form-error-feedback{font-size:0.78rem;color:#ff6b6b;display:none;align-items:center;gap:0.35rem;margin-top:0.4rem;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600}
.form-error-feedback.visible{display:flex}

/* ── COOKIE CONSENT BANNER & CMP ── */
.cookie-banner{position:fixed;bottom:1.5rem;left:1.5rem;right:1.5rem;max-width:540px;background:rgba(13,13,26,0.94);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,197,99,0.22);border-radius:var(--r-xl);box-shadow:0 12px 48px rgba(0,0,0,0.65),0 0 28px rgba(255,197,99,0.1);z-index:9998;padding:1.5rem;display:none;opacity:0;transform:translateY(20px);transition:opacity 0.35s ease,transform 0.35s cubic-bezier(0.23,1,0.32,1)}
.cookie-banner.visible{display:block;opacity:1;transform:translateY(0)}
.cookie-banner-inner{display:flex;flex-direction:column;gap:1.15rem}
.cookie-banner-header{display:flex;align-items:flex-start;gap:0.75rem}
.cookie-banner-icon{width:36px;height:36px;min-width:36px;border-radius:10px;background:rgba(255,197,99,0.12);color:var(--primary);display:flex;align-items:center;justify-content:center}
.cookie-banner-title{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-0.02em;color:var(--text);margin-bottom:0.25rem}
.cookie-banner-text{font-size:0.82rem;color:var(--text-muted);line-height:1.6}
.cookie-banner-text a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.cookie-banner-actions{display:flex;gap:0.5rem;flex-wrap:wrap}
.cookie-btn-accept{flex:1;min-width:130px;background:linear-gradient(135deg,var(--primary),var(--primary-dim));color:#1A1000;border:none;border-radius:var(--r-full);padding:0.65rem 1rem;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.82rem;cursor:pointer;transition:all var(--t-fast);text-align:center;box-shadow:0 2px 14px rgba(255,197,99,0.25)}
.cookie-btn-accept:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(255,197,99,0.4)}
.cookie-btn-reject{flex:1;min-width:130px;background:rgba(255,255,255,0.05);color:var(--text);border:1px solid rgba(255,255,255,0.15);border-radius:var(--r-full);padding:0.65rem 1rem;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.82rem;cursor:pointer;transition:all var(--t-fast);text-align:center}
.cookie-btn-reject:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3)}
.cookie-btn-config{width:100%;background:transparent;color:var(--text-dim);border:none;padding:0.4rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.74rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;cursor:pointer;transition:color var(--t-fast);text-align:center}
.cookie-btn-config:hover{color:var(--secondary)}

/* ── CMP PREFERENCES MODAL ── */
.cookie-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:9999;display:none;align-items:center;justify-content:center;padding:1.25rem;opacity:0;transition:opacity 0.3s ease}
.cookie-modal-backdrop.open{display:flex;opacity:1}
.cookie-modal{background:var(--bg-card);border:1px solid rgba(255,197,99,0.25);border-radius:var(--r-xl);max-width:580px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.8),0 0 35px rgba(255,197,99,0.1);overflow:hidden;transform:scale(0.95);transition:transform 0.3s cubic-bezier(0.23,1,0.32,1)}
.cookie-modal-backdrop.open .cookie-modal{transform:scale(1)}
.cookie-modal-header{padding:1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cookie-modal-title{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:var(--text)}
.cookie-modal-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;transition:all var(--t-fast)}
.cookie-modal-close:hover{color:var(--text);background:rgba(255,255,255,0.06)}
.cookie-modal-body{padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.cookie-category-item{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem}
.cookie-category-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.4rem}
.cookie-category-name{font-family:'Space Grotesk',sans-serif;font-size:0.95rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:0.5rem}
.cookie-category-desc{font-size:0.8rem;color:var(--text-muted);line-height:1.5}

/* Switch UI */
.switch-ui{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.switch-ui input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;cursor:pointer;inset:0;background-color:rgba(255,255,255,0.12);transition:0.3s;border-radius:24px;border:1px solid var(--border)}
.switch-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;transition:0.3s;border-radius:50%}
.switch-ui input:checked + .switch-slider{background:linear-gradient(135deg,var(--primary),var(--primary-dim));border-color:var(--primary)}
.switch-ui input:checked + .switch-slider:before{transform:translateX(20px);background-color:#1A1000}
.switch-ui input:disabled + .switch-slider{opacity:0.6;cursor:not-allowed}

.cookie-modal-footer{padding:1.25rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:0.75rem;justify-content:flex-end;flex-wrap:wrap;background:rgba(0,0,0,0.2)}

/* ── FLOATING TRIGGER & FOOTER TRIGGER ── */
.cookie-floating-btn{position:fixed;bottom:1.75rem;left:1.75rem;z-index:89;width:44px;height:44px;border-radius:50%;background:rgba(13,13,26,0.85);backdrop-filter:blur(10px);border:1px solid var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t-fast);box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.cookie-floating-btn:hover{color:var(--primary);border-color:rgba(255,197,99,0.3);transform:scale(1.08)}
.cookie-trigger-btn{background:none;border:none;padding:0;cursor:pointer;font:inherit}