/* ══════════════════════════════════════════════════
   Estructura del archivo:
   1. Reset y variables
   2. Nav
   3. Hero
   4. Servicios
   5. Proyectos
   6. Stats
   7. CTA
   8. Footer
   9. Animaciones reveal
   10. Responsive
══════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────
   1. RESET Y VARIABLES
────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:      #0a0a0a;   /* fondo principal */
  --bg2:     #111111;   /* fondo de secciones con tarjeta */
  --bg3:     #161616;   /* fondo de cards */
  --white:   #f5f5f5;
  --yellow:  #f5c518;
  --purple:  #8b5cf6;
  --magenta: #e040fb;
  --cyan:    #00e5ff;
  --gray:    #555;
  --gray2:   #333;
  --radius:  16px;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}


/* ──────────────────────────────────────────────────
   2. NAV
────────────────────────────────────────────────── */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 60px;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: padding .3s;
}

/* clase que agrega JS al hacer scroll */
nav.scrolled {
  padding: 14px 60px;
}

.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: .12em;
  color: var(--white);
}

.logo{
  height: 50px;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-family: 'Syne', sans-serif;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--white);
}

.btn-nav {
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 100px;
  padding: 10px 22px;
  font-family: 'Syne', sans-serif;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, color .2s;
}

.btn-nav:hover {
  background: var(--white);
  color: #000;
}

.btn-nav svg {
  width: 12px;
  height: 12px;
}

/* botón CTA (tamaño un poco más grande) */
.btn-cta {
  font-size: .85rem;
  padding: 14px 28px;
}


/* ──────────────────────────────────────────────────
   3. HERO
────────────────────────────────────────────────── */

#hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 120px 60px 80px;
  position: relative;
  overflow: hidden;
}

/* orbs decorativos de fondo */
.hero-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.orb1 {
  width: 500px; height: 500px;
  background: rgba(139,92,246,0.18);
  top: -100px; right: -100px;
}

.orb2 {
  width: 350px; height: 350px;
  background: rgba(0,229,255,0.1);
  bottom: -50px; left: 200px;
}

/* etiqueta "Estudio de Diseño Digital" */
.hero-tag {
  display: inline-block;
  border: 2px solid rgb(255, 0, 234);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 28px;
}

/* título principal */
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 7vw, 7rem);
  line-height: .95;
  letter-spacing: -.01em;
  margin-bottom: 24px;
}

.hero-title .line2 {
  background: linear-gradient(90deg, var(--purple), var(--yellow), var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* subtítulo */
.hero-sub {
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 340px;
  margin-bottom: 40px;
}

/* botones CTA del hero */
.hero-ctas {
  display: flex;
  gap: 14px;
}

.btn-primary {
  background: var(--yellow);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s, opacity .2s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  opacity: .9;
}

.btn-secondary {
  background: rgba(255,255,255,0.07);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 14px 28px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .2s;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.13);
}

a {
  text-decoration: none !important;
}

/* lado derecho del hero: dispositivo */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.device-shell {
  width: 260px; height: 480px;
  background: #1c1c1c;
  border-radius: 36px;
  border: 2px solid rgba(255,255,255,0.1);
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-18px) rotate(-2deg); }
}

.device-inner {
  background: #0d0d0d;
  width: 100%; height: 100%;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.device-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Syne', sans-serif;
  font-size: .65rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: .1em;
}

.device-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  line-height: 1;
  margin-top: 6px;
}

.device-headline span      { color: var(--magenta); }
.device-headline span.s2   { color: var(--cyan); }

.device-card {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}

.device-card-label {
  font-size: .6rem;
  color: rgba(255,255,255,.4);
  font-family: 'Syne', sans-serif;
  letter-spacing: .1em;
}

.device-card-bar {
  width: 60%;
  height: 4px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  border-radius: 4px;
  margin-top: 8px;
}

.device-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.dstat {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 12px;
}

.dstat .num {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
}

.dstat .num.y { color: var(--yellow); }
.dstat .num.c { color: var(--cyan); }
.dstat .num.p { color: var(--purple); }

.dstat p {
  font-size: .65rem;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.dstat.wide {
  grid-column: span 2;
}

/* bolitas flotantes alrededor del dispositivo */
.fball {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.fb1 { width: 18px; height: 18px; background: var(--yellow);  top: 20%;    left: 5%;   animation: orbit 7s  linear infinite; }
.fb2 { width: 24px; height: 24px; background: var(--cyan);    bottom: 30%; right: 8%;  animation: orbit 9s  linear infinite reverse; }
.fb3 { width: 14px; height: 14px; background: var(--magenta); top: 60%;    left: 8%;   animation: orbit 6s  linear infinite; }
.fb4 { width: 30px; height: 30px; background: var(--purple);  top: 10%;    right: 20%; animation: orbit 11s linear infinite reverse; }

@keyframes orbit {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(12px,-12px); }
  50%  { transform: translate(0,-24px); }
  75%  { transform: translate(-12px,-12px); }
  100% { transform: translate(0,0); }
}


/* ──────────────────────────────────────────────────
   BASE PARA TODAS LAS SECCIONES
────────────────────────────────────────────────── */

section {
  padding: 100px 60px;
}

/* etiqueta de categoría encima de títulos */
.section-eyebrow {
  font-family: 'Syne', sans-serif;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}


/* ──────────────────────────────────────────────────
   4. SERVICIOS
────────────────────────────────────────────────── */

#servicios {
  background: var(--bg2);
  border-radius: 24px;
  margin: 0 14px;
}

.servicios-grid {
  display: grid;
  grid-template-columns: 260px repeat(5, 1fr);
  gap: 10px;
  align-items: start;
  padding: 0;
}

.servicios-grid > div:first-child {
  border-left: none;
  padding: 0 40px 0 0;
}

.servicios-heading {
  font-family: 'Syne', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.servicio-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 28px;
  border-left: 1px solid rgba(255,255,255,0.08);
}

.servicio-icon {
  width: 72px; height: 72px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  transition: background .2s, transform .2s;
}

.servicio-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.servicio-item:hover .servicio-icon {
  background: rgba(139,92,246,0.25);
  transform: scale(1.08);
}

.servicio-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: .95rem;
}

.servicio-desc {
  font-size: .82rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}


/* ──────────────────────────────────────────────────
   5. PROYECTOS
────────────────────────────────────────────────── */

#proyectos {
  padding: 100px 60px;
}

.proyectos-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin-bottom: 48px;
}

.proyectos-title {
  font-family: 'Syne', sans-serif;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.15;
}

.proyectos-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Syne', sans-serif;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  cursor: pointer;
  justify-self: end;
  text-decoration: none;
  transition: gap .2s;
}

.proyectos-link:hover {
  gap: 14px;
}

.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.proyecto-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
  cursor: pointer;
  background: var(--bg3);
}

.proyecto-card .card-bg {
  width: 100%; height: 100%;
  transition: transform .4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.proyecto-card .card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.proyecto-card:hover .card-bg {
  transform: scale(1.06);
}

/* gradientes de fondo para cada card */
.pc1 .card-bg { background: linear-gradient(135deg, #2d0057, #7b00d4); }
.pc2 .card-bg { background: linear-gradient(135deg, #1a0a0a, #8b0000); }
.pc3 .card-bg { background: linear-gradient(135deg, #1a1500, #b38600); }
.pc4 .card-bg { background: linear-gradient(135deg, #001a1a, #006666); }

.card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 18px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

.card-tag {
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-family: 'Syne', sans-serif;
}

.card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .06em;
  margin-top: 2px;
}

.card-arrow {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  transition: background .2s;
}

.proyecto-card:hover .card-arrow {
  background: var(--yellow);
  color: #000;
}


/* ──────────────────────────────────────────────────
   6. STATS
────────────────────────────────────────────────── */

#stats {
  background: var(--bg2);
  border-radius: 24px;
  margin: 0 24px;
  padding: 70px 80px;
}

.stats-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}

.stats-quote {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  max-width: 480px;
  position: relative;
  padding-left: 28px;
}

/* comilla decorativa */
.stats-quote::before {
  content: '"';
  position: absolute;
  left: 0; top: -10px;
  font-size: 5rem;
  line-height: 1;
  color: var(--purple);
  font-family: 'Bebas Neue', sans-serif;
}

.stats-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  line-height: 1;
}

/* colores de cada número */
.stat-num.y { color: var(--yellow); }
.stat-num.p { color: var(--magenta); }
.stat-num.c { color: var(--cyan); }
.stat-num.g { color: #a3e635; }

.stat-label {
  font-size: .78rem;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
  line-height: 1.4;
}


/* ──────────────────────────────────────────────────
   7. CTA
────────────────────────────────────────────────── */

#cta {
  background: var(--bg2);
  border-radius: 24px;
  margin: 24px 24px;
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* orbs decorativos del CTA */
.cta-orb1 {
  position: absolute;
  width: 300px; height: 300px;
  background: rgba(139,92,246,0.15);
  border-radius: 50%;
  filter: blur(80px);
  left: -100px; bottom: -100px;
}

.cta-orb2 {
  position: absolute;
  width: 200px; height: 200px;
  background: rgba(0,229,255,0.1);
  border-radius: 50%;
  filter: blur(60px);
  left: 100px; top: -60px;
}

.cta-left {
  position: relative;
}

/* forma orgánica animada */
.cta-shape {
  width: 200px; height: 200px;
  border-radius: 50% 50% 50% 20%;
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  opacity: .7;
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%,  100% { border-radius: 50% 50% 50% 20%; }
  33%        { border-radius: 20% 50% 50% 50%; }
  66%        { border-radius: 50% 20% 50% 50%; }
}

.cta-right {
  position: relative;
}

.cta-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: .95;
  margin-bottom: 18px;
  letter-spacing: .02em;
}

.cta-title span {
  color: var(--cyan);
}

.cta-sub {
  color: rgba(255,255,255,0.5);
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 340px;
}


/* ──────────────────────────────────────────────────
   8. FOOTER
────────────────────────────────────────────────── */

footer {
  padding: 40px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 40px;
}

.footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .12em;
}

.footer-copy {
  font-size: .75rem;
  color: rgba(255,255,255,0.3);
}

.footer-socials {
  display: flex;
  gap: 28px;
}

.footer-socials a {
  font-family: 'Syne', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color .2s;
}

.footer-socials a:hover {
  color: var(--white);
}


/* ──────────────────────────────────────────────────
   9. ANIMACIONES REVEAL (manejadas por JS)
────────────────────────────────────────────────── */

/* estado inicial: invisible y desplazado hacia abajo */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}

/* estado final: visible (clase agregada por JS) */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ──────────────────────────────────────────────────
   10. RESPONSIVE
────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────
   10. RESPONSIVE
────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  nav                       { padding: 18px 30px; }
  #hero                     { grid-template-columns: 1fr; padding: 120px 30px 60px; }
  .hero-visual              { display: none; }
  .servicios-grid           { grid-template-columns: 1fr; padding: 0 10px; }
  .proyectos-grid           { grid-template-columns: 1fr 1fr; }
  .stats-inner              { grid-template-columns: 1fr; }
  .stats-numbers            { grid-template-columns: repeat(2, 1fr); }
  #cta                      { grid-template-columns: 1fr; }
  .cta-left                 { display: none; }
  section                   { padding: 70px 30px; }
  #servicios, #stats, #cta  { margin: 0 10px; }
  footer                    { flex-direction: column; gap: 20px; text-align: center; }
  .proyectos-header         { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {

  /* --- NAV: ocultar links, solo logo + botón --- */
  .nav-links          { display: none; }
  nav                 { padding: 16px 20px; }

  /* --- HERO --- */
  #hero               { padding: 100px 20px 60px; }
  .hero-title         { font-size: 3.2rem; }
  .hero-sub           { font-size: .9rem; max-width: 100%; }
  .hero-ctas          { flex-direction: column; }
  .btn-primary,
  .btn-secondary      { justify-content: center; width: 100%; }

  /* --- SERVICIOS --- */
  #servicios          { margin: 0; border-radius: 0; padding: 60px 20px; }
  .servicios-grid     { grid-template-columns: 1fr; gap: 28px; }
  .servicios-heading  { font-size: 1.8rem; }

  /* --- PROYECTOS --- */
  #proyectos          { padding: 60px 20px; }
  .proyectos-grid     { grid-template-columns: 1fr; }
  .proyectos-title    { font-size: 2rem; }

  /* --- STATS --- */
  #stats              { margin: 0; border-radius: 0; padding: 60px 20px; }
  .stats-inner        { grid-template-columns: 1fr; gap: 40px; }
  .stats-quote        { font-size: 1.15rem; }
  .stats-numbers      { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .stat-num           { font-size: 2.8rem; }

  /* --- CTA --- */
  #cta                { margin: 0; border-radius: 0; padding: 60px 20px; grid-template-columns: 1fr; }
  .cta-title          { font-size: 2rem; }

  /* --- FOOTER --- */
  footer              { padding: 30px 20px; flex-direction: column; gap: 16px; text-align: center; }
}