:root {
  --vino: #830046;
  --vino-dark: #5e0033;
  --vino-soft: #a3336f;
  --rosa: #f9ecf1;
  --rosa-2: #f1d6e2;
  --crema: #fcf8f3;
  --arena: #f4ece2;
  --oro: #c49a5c;
  --tinta: #2b1720;
}

html { scroll-behavior: smooth; }
body { overflow-x: clip; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--crema); color: var(--tinta); -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100, 'WONK' 0; letter-spacing: -.01em; }
.font-display em, .font-display i { font-variation-settings: 'SOFT' 100, 'WONK' 1; }

/* Navbar */
#nav { transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease; }
#nav.solid { background: rgba(252, 248, 243, .9); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -20px rgba(131, 0, 70, .35); }

/* Formas */
.arch { border-radius: 999px 999px 28px 28px; }
.arch-sm { border-radius: 400px 400px 22px 22px; }
.blob { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; }
.grain { position: relative; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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"); }

/* Subrayado a mano en títulos */
.scribble { position: relative; white-space: nowrap; }
.scribble svg { position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .42em; color: var(--oro); }
.scribble path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.4s .6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Revelado al hacer scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; } .reveal-d3 { transition-delay: .3s; }

/* Flotar suave */
.float { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 7s ease-in-out -2s infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* Tarjetas */
.dev-card .img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.dev-card:hover .img { transform: scale(1.06); }
.dev-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.dev-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(131, 0, 70, .45); }
.dev-card .go { transition: background-color .3s ease, color .3s ease, transform .4s ease; }
.dev-card:hover .go { background: var(--vino); color: #fff; transform: rotate(-45deg); }

/* Filtros */
.chip { transition: all .25s ease; }
.chip.active { background: var(--vino); color: #fff; border-color: var(--vino); }

/* Carruseles infinitos */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track.slow { animation-duration: 55s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Slider del simulador */
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--oro); border: 5px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--oro); border: 5px solid #fff; cursor: pointer; }

/* Lightbox */
#lightbox { transition: opacity .3s ease; }
#lightbox.hidden-lb { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float, .float-2, .marquee-track, .scribble path { animation: none; stroke-dashoffset: 0; }
}