/* ── Custom portfolio styles ─────────────────────────────────────────────── */

:root {
  --accent:     #FF3B5C;
  --accent-dim: rgba(255,59,92,0.10);
  --bg-dark:    #080C10;
  --bg-dark2:   #0D1117;
}

/* ── Reset / Global ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;        /* evita scroll horizontal global */
}
body {
  overflow-x: hidden;
  min-width: 320px;          /* mínimo soportado */
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,59,92,0.25); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,59,92,0.45); }

/* Scrollbar horizontal oculto (hint buttons) */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Selection */
::selection { background: rgba(255,59,92,0.2); color: inherit; }

/* ── xs breakpoint (320-374px) ─────────────────────────────────────────────── */
@media (min-width: 375px) {
  .xs\:text-5xl { font-size: 3rem; line-height: 1; }
}

/* ── Navbar ────────────────────────────────────────────────────────────────── */
#navbar.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 20px rgba(0,0,0,0.05);
}
.dark #navbar.scrolled {
  background: rgba(8,12,16,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── Mobile menu ───────────────────────────────────────────────────────────── */
#mobile-menu {
  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#mobile-menu.mmopen {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 768px) {
  #mobile-menu { display: none !important; }
}

/* ── Hamburger lines animation ─────────────────────────────────────────────── */
.hamburger-line {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ── Custom cursor (solo desktop) ──────────────────────────────────────────── */
#cursor {
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
#cursor-dot {
  transform: translate(-50%, -50%);
  transition: transform 0.05s ease;
}
body.cursor-hover #cursor {
  transform: translate(-50%, -50%) scale(2.2);
  background: rgba(255,59,92,0.12);
  border-color: var(--accent);
}

/* ── Reveal animations ─────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* Reduced motion: mostrar todo sin animación */
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Hero canvas ───────────────────────────────────────────────────────────── */
#hero-canvas { opacity: 0.6; }
.dark #hero-canvas { opacity: 0.9; }

/* ── Float animation (tags hero) ───────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ── Terminal ──────────────────────────────────────────────────────────────── */
#terminal-output {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,59,92,0.2) transparent;
  word-break: break-word;
  overflow-wrap: break-word;
}
#terminal-output::-webkit-scrollbar { width: 3px; }
#terminal-output::-webkit-scrollbar-thumb { background: rgba(255,59,92,0.2); border-radius: 2px; }

.terminal-line { animation: termFadeIn 0.12s ease forwards; }
@keyframes termFadeIn { from { opacity: 0; transform: translateX(-3px); } to { opacity: 1; transform: none; } }

.terminal-cmd   { color: var(--accent); }
.terminal-out   { color: #c9d1d9; }
.terminal-err   { color: #f85149; }
.terminal-muted { color: #6e7681; }
.terminal-link  { color: #58a6ff; text-decoration: underline; cursor: pointer; }

/* ── Process circles ───────────────────────────────────────────────────────── */
.process-circle.active {
  border-color: var(--step-color, var(--accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--step-color, var(--accent)) 15%, transparent);
  background: color-mix(in srgb, var(--step-color, var(--accent)) 6%, transparent);
}
.process-circle.active .process-icon { color: var(--step-color, var(--accent)); }

/* ── Service card spotlight ────────────────────────────────────────────────── */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(350px at var(--mouse-x,50%) var(--mouse-y,50%), rgba(255,59,92,0.05), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.service-card:hover::before { opacity: 1; }

/* ── Select arrow ──────────────────────────────────────────────────────────── */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.2em;
  padding-right: 2.5rem;
}

/* ── Blink cursor ──────────────────────────────────────────────────────────── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.animate-blink { animation: blink 1s step-end infinite; }

/* ── Focus ─────────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  #cursor, #cursor-dot, #hero-canvas, #mobile-menu-btn { display: none !important; }
  .reveal, .hero-reveal { opacity: 1 !important; transform: none !important; }
}