/* ===== Gio Gutiérrez — Estudio 610 (paginated, editorial, Afropop loop) ===== */

:root{
  --bg: #0a0a0c;
  --bg-soft: #14151a;
  --ink: #f5f4f1;
  --ink-soft: rgba(245,244,241,0.6);
  --accent: #7c6cf6;
  --cream: #f0ece3;
  --cream-ink: #1b1a17;
  --line: rgba(245,244,241,0.13);
  --pad: clamp(24px, 6vw, 88px);
  font-size: 16px;
}

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

body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3{ font-weight:800; letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }

.kicker{
  display:block; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--accent); font-weight:600; margin-bottom: 0.9rem;
}

/* ===== NAV (minimal, editorial) ===== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.8rem var(--pad);
}
.nav__logo{ font-weight:700; font-size:0.95rem; }
.nav__links{ display:flex; gap: 2rem; }
.nav__links a{ font-size:0.88rem; color: var(--ink-soft); transition: color .2s ease; }
.nav__links a:hover{ color: var(--ink); }

/* ===== VIEW SYSTEM (pages, not scroll) ===== */
.view{
  display:none; min-height:100vh; width:100%;
  padding: clamp(7rem,12vw,9rem) var(--pad) 5rem;
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity .4s ease, transform .4s ease;
}
.view.is-active{ display:block; }
.view.is-entering{ opacity:0; transform: translateY(18px) scale(0.99); }

/* ===== HERO (inicio) ===== */
.view--inicio.is-active{ display:flex; }
.hero{
  margin: auto; width:100%; max-width: 720px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero__mark{
  position:relative; width:260px; height:260px; margin-bottom: 2.6rem;
  display:flex; align-items:center; justify-content:center;
  --orbit-r: 128px;
}
.stage{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.stage__card{
  position:relative; z-index:2; width:74%; height:74%; border-radius:50%;
  background: var(--cream); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.55);
}
.sticker__img{
  width:64%; height:64%; object-fit:contain; display:block;
  /* intencionalmente sin transform ni filtros: el sticker se muestra intacto */
}
.hero__fallback{
  display:none; position:absolute; inset:0; z-index:2;
  align-items:center; justify-content:center;
  font-size:3.4rem; font-weight:800; color: var(--cream-ink);
}
.stage__ring{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  animation: ringSpin 22s linear infinite;
}
.stage__ring circle{ fill:none; stroke: var(--accent); stroke-width:1.2; stroke-dasharray: 3 11; opacity:0.4; }
.stage__dot{
  position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%;
  background: var(--accent); z-index:1;
  transform: rotate(var(--a)) translateX(var(--orbit-r));
  animation: dotOrbit 22s linear infinite, dotPulse 3.6s ease-in-out infinite;
}
@keyframes ringSpin{ to{ transform: rotate(360deg); } }
@keyframes dotOrbit{ to{ transform: rotate(calc(var(--a) + 360deg)) translateX(var(--orbit-r)); } }
@keyframes dotPulse{ 0%, 100%{ opacity:0.3; } 50%{ opacity:0.8; } }

.hero__kicker{ justify-content:center; display:flex; }
.hero__title{ font-size: clamp(2.2rem, 6vw, 3.6rem); line-height:1.15; margin-bottom:1rem; }
.hero__sub{ color: var(--ink-soft); font-size:1rem; }

/* ===== WORK list ===== */
.view__head{ max-width: 900px; margin: 0 auto 3rem; text-align:center; }
.view__head h2{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom:0.6rem; }
.view__head p{ color: var(--ink-soft); font-size:0.95rem; }

.work__list{ max-width: 980px; margin: 0 auto; border-top:1px solid var(--line); list-style:none; }
.work__item{
  display:flex; align-items:baseline; gap:1.6rem; padding: 1.7rem 0.5rem;
  border-bottom:1px solid var(--line); cursor:pointer; transition: padding-left .25s ease;
}
.work__item:hover{ padding-left: 1.2rem; }
.work__num{ font-size:0.78rem; color: var(--ink-soft); width:1.6rem; flex-shrink:0; }
.work__name{ font-size: clamp(1.8rem,4vw,3rem); font-weight:800; line-height:1; transition: color .25s ease; }
.work__item:hover .work__name{ color: var(--accent); }
.work__cat{ margin-left:auto; font-size:0.78rem; color: var(--ink-soft); text-transform:uppercase; align-self:center; }
.work__mark{ display:none; }

.logoreveal{
  position: fixed; top:0; left:0; width:200px; height:200px; z-index:60;
  pointer-events:none; opacity:0; transition: opacity .22s ease;
  border-radius: 22px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(155deg, var(--m-brand-soft, #14151a), var(--m-brand, #0a0a0c));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.logoreveal.is-active{ opacity:1; }
.logoreveal svg{ width:84px; height:84px; color: var(--m-accent, var(--accent)); }
@media (max-width: 880px), (pointer: coarse){ .logoreveal{ display:none; } }

/* ===== PROYECTO detail ===== */
.proyecto{ max-width: 1080px; margin: 0 auto; }
.proyecto__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 3rem; }
.proyecto__back{ font-size:0.85rem; color: var(--ink-soft); }
.proyecto__back:hover{ color: var(--ink); }
.proyecto__count{ font-size:0.78rem; color: var(--ink-soft); letter-spacing:0.06em; }
.proyecto__head{ text-align:center; max-width:640px; margin:0 auto 3.5rem; }
.proyecto__mark{ width:52px; height:52px; margin: 0 auto 1.4rem; display:block; }
.proyecto__head h1{ font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom:1.3rem; }
.proyecto__desc{ color: var(--ink-soft); font-size:1rem; line-height:1.75; }

.proyecto__gallery{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; margin-bottom: 3.5rem; }
.proyecto__pager{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:1.6rem; }
.pager__btn{ font-size:1rem; font-weight:600; color: var(--ink-soft); transition: color .2s ease; }
.pager__btn:hover{ color: var(--accent); }
.pager__btn--next{ text-align:right; }

.pop{ opacity:0; transform: translateY(14px) scale(0.97); animation: popIn .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes popIn{ to{ opacity:1; transform:none; } }

/* ===== applied-identity mockups (8 templates) ===== */
.mock{
  flex-shrink:0; box-shadow: 0 26px 50px -20px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(155deg, var(--m-brand-soft), var(--m-brand));
}
.mock-mark{ color: var(--m-accent); }
.mock-mark--sm{ width:22px !important; height:22px !important; }
.mock-foot{ display:flex; flex-direction:column; gap:0.3rem; }
.mock-name{ font-weight:700; }
.mock-sub{ font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--m-accent); }

.mock-card{ width:210px; height:132px; border-radius:10px; padding:1.1rem; display:flex; flex-direction:column; justify-content:space-between; }
.mock-card .mock-mark{ width:24px; height:24px; }
.mock-card .mock-name{ font-size:1.1rem; color: var(--ink); }

.mock-tag{ width:140px; height:190px; border-radius:16px 16px 10px 10px; padding:1.6rem 1.1rem 1.2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.7rem; text-align:center; position:relative; }
.mock-tag::before{ content:''; position:absolute; top:11px; left:50%; transform:translateX(-50%); width:13px; height:13px; border-radius:50%; border:2px solid var(--m-accent); }
.mock-tag .mock-mark{ width:30px; height:30px; }
.mock-tag .mock-name{ font-size:1.05rem; color: var(--ink); }

.mock-plaque{ width:180px; height:180px; border-radius:12px; padding:1.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.8rem; text-align:center; }
.mock-plaque .mock-mark{ width:36px; height:36px; }
.mock-plaque .mock-name{ font-size:1.2rem; color: var(--ink); }

.mock-screen{ width:150px; height:300px; border-radius:24px; padding:1.3rem; border:6px solid #050506; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; position:relative; }
.mock-screen::before{ content:''; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:40px; height:5px; border-radius:4px; background: rgba(255,255,255,0.18); }
.mock-screen .mock-mark{ width:36px; height:36px; }
.mock-screen .mock-name{ font-size:0.95rem; color: var(--ink); }
.mock-bars{ width:72%; display:flex; flex-direction:column; gap:6px; }
.mock-bars span{ display:block; height:5px; border-radius:3px; background: rgba(255,255,255,0.12); }
.mock-bars span:nth-child(2){ width:65%; }

.mock-paper{ width:160px; height:210px; border-radius:6px; padding:1.4rem 1.2rem; display:flex; flex-direction:column; gap:1.4rem; }
.mock-lines{ display:flex; flex-direction:column; gap:8px; flex:1; }
.mock-lines span{ display:block; height:4px; border-radius:2px; background: rgba(255,255,255,0.1); }
.mock-lines span:nth-child(2){ width:80%; }
.mock-lines span:nth-child(3){ width:55%; }

.mock-social{ width:170px; height:170px; border-radius:8px; padding:1.4rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
.mock-social .mock-mark{ width:46px; height:46px; }

.mock-palette{ width:190px; height:130px; border-radius:10px; padding:1.2rem; display:flex; flex-direction:column; justify-content:space-between; }
.mock-palette .swatches{ display:flex; gap:6px; }
.mock-palette .swatches span{ flex:1; height:34px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); }

.mock-tote{ width:160px; height:190px; border-radius:0 0 14px 14px; padding:2.4rem 1.2rem 1.3rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.8rem; text-align:center; position:relative; }
.mock-tote::before{ content:''; position:absolute; top:-22px; left:32px; width:30px; height:36px; border-radius:16px 16px 0 0; border:5px solid var(--m-brand-soft); border-bottom:none; }
.mock-tote::after{ content:''; position:absolute; top:-22px; right:32px; width:30px; height:36px; border-radius:16px 16px 0 0; border:5px solid var(--m-brand-soft); border-bottom:none; }
.mock-tote .mock-mark{ width:34px; height:34px; }
.mock-tote .mock-sub{ color: var(--m-accent); }

/* ===== CONTACT ===== */
.contact{ max-width:560px; margin: auto; text-align:center; }
.contact h2{ font-size: clamp(2rem,4.5vw,3rem); margin-bottom:1.4rem; }
.contact__email{ display:block; font-size: clamp(1.3rem,2.4vw,1.9rem); font-weight:700; color: var(--accent); margin-bottom:2rem; }
.contact__email:hover{ text-decoration:underline; }
.contact__social{ display:flex; gap:1.6rem; justify-content:center; font-size:0.85rem; color: var(--ink-soft); }
.contact__social a:hover{ color: var(--ink); }

/* ===== FOOTER ===== */
.footer{
  position: fixed; bottom:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between;
  padding: 1.2rem var(--pad); font-size:0.72rem; color: var(--ink-soft);
  pointer-events:none;
}

/* ===== reveal ===== */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ===== responsive ===== */
@media (max-width: 700px){
  .work__name{ font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .work__cat{ display:none; }
  .proyecto__gallery{ gap:1rem; }
  .proyecto__top{ margin-bottom:2rem; }
  .hero__mark{ width:170px; height:170px; --orbit-r: 84px; }
}