/* ============================================================
   GNZLO — Portafolio Profesional
   Basado en el diseño Figma "portafolio ejemplo"
   ============================================================ */

@font-face{
  font-family:'BBH Bartle';
  src:url('fonts/BBHBartle-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --black: #060707;
  --white: #FFFFFF;
  --cream: #F7FEEC;
  --green: #AEF33E;
  --green-dark: #9DDB38;

  --font-display: 'BBH Bartle', 'Fredoka', sans-serif;
  --font-body: 'Work Sans', sans-serif;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background:var(--black);
  color:var(--cream);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }

/* ---------- reveal-on-load ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* staggered entrance for hero children */
.hero > .reveal:nth-child(1){ transition-delay:.05s; }
.hero > .reveal:nth-child(2){ transition-delay:.18s; }
.hero > .reveal:nth-child(3){ transition-delay:.32s; }
.hero > .reveal:nth-child(4){ transition-delay:.44s; }

/* gentle stagger for stacked project-media blocks on interior pages */
.project-media > .reveal:nth-child(1){ transition-delay:0s; }
.project-media > .reveal:nth-child(2){ transition-delay:.08s; }
.project-media > .reveal:nth-child(3){ transition-delay:.16s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .wordmark-img, .badge .dot, footer.site-footer .foot-bubble-img{ animation:none !important; }
}

/* ---------- header ---------- */
header.site-header{
  background:var(--black);
  border-bottom:1px solid rgba(247,254,236,0.12);
  position:sticky; top:0; z-index:100;
}
header.site-header .wrap{
  max-width:1440px; padding:26px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo-lockup{ display:flex; align-items:center; }
.logo-lockup .logo-img{ height:24px; width:auto; display:block; }
@media (max-width:640px){ .logo-lockup .logo-img{ height:19px; } }

nav.site-nav{ display:flex; gap:36px; }
nav.site-nav a{ font-size:16px; color:var(--cream); position:relative; padding-bottom:3px; transition:color .25s ease; }
nav.site-nav a.active{ color:var(--green); font-weight:600; }
nav.site-nav a:hover{ color:var(--green); }
@media (max-width:760px){ nav.site-nav{ display:none; } }

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:36px; height:36px; flex-shrink:0;
}
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--cream); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:760px){ .menu-toggle{ display:flex; } }

.mobile-nav{
  display:none; flex-direction:column; background:var(--black);
  border-bottom:1px solid rgba(247,254,236,0.12); padding:8px 22px 24px;
  position:sticky; top:0; z-index:99;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{ font-size:18px; color:var(--cream); padding:14px 0; border-bottom:1px solid rgba(247,254,236,0.1); }
.mobile-nav a.active{ color:var(--green); font-weight:600; }
.mobile-nav a.btn{ border-bottom:none; text-align:center; margin-top:6px; }
@media (min-width:761px){ .mobile-nav{ display:none !important; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; border-radius:24px; font-family:var(--font-body); font-weight:800; font-size:16px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-outline{ background:var(--cream); border:2px solid var(--green); color:var(--black); }
.btn-outline:hover{ border-color:var(--green-dark); }
.btn-solid{ background:var(--green); color:var(--black); }
.btn-solid:hover{ background:var(--green-dark); }

/* ---------- chips ---------- */
.chip{
  font-size:13px; padding:9px 16px; border-radius:16px; border:2px solid var(--green-dark);
  background:var(--cream); color:var(--black); white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
}
.chip.active{ background:var(--green-dark); border-color:var(--green-dark); }
.chips-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* clickable category filter chips (Portafolio) */
button.chip[data-filter]{
  cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}
button.chip[data-filter]:hover{ transform:translateY(-2px); border-color:var(--green); }
button.chip[data-filter].active{ color:var(--black); }
.project-card[data-cats]{ transition:opacity .22s ease, transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease; }

/* ---------- hero ---------- */
.hero{
  padding:100px 40px 80px; display:flex; flex-direction:column; align-items:center; gap:48px; text-align:center;
}
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px;
  background:var(--cream); border:2px solid var(--green); border-radius:24px;
}
.badge .dot{
  width:8px; height:8px; border-radius:50%; background:var(--green-dark);
  animation:pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ box-shadow:0 0 0 0 rgba(157,219,56,0.55); }
  50%{ box-shadow:0 0 0 7px rgba(157,219,56,0); }
}
.badge span{ font-size:16px; color:var(--black); }

.wordmark{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(64px, 14vw, 190px); line-height:0.85; letter-spacing:-0.02em;
  display:flex; align-items:center; gap:0.02em;
}
.wordmark-img{
  width:min(760px, 82vw); height:auto; display:block; margin:0 auto;
  animation:float-logo 6s ease-in-out 1.2s infinite;
}
@keyframes float-logo{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(-1deg); }
}
@media (max-width:640px){ .wordmark-img{ width:88vw; } }

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* ---------- section shell ---------- */
.section{ padding:90px 40px; }
.section-title{
  font-family:var(--font-display); font-weight:700; color:var(--green-dark);
  font-size:clamp(24px, 5.5vw, 42px); text-align:center; line-height:1.05; letter-spacing:-0.03em;
}
.section-sub{ font-size:20px; color:var(--cream); text-align:center; margin-top:12px; opacity:0.8; }

/* ---------- work grid (home teaser + portfolio) ---------- */
.work-grid{ display:flex; flex-direction:column; gap:24px; max-width:1240px; margin:56px auto 0; }
.work-row{ display:flex; gap:24px; }
.work-row.single{ flex-direction:column; }
@media (max-width:860px){ .work-row{ flex-direction:column; } }

.project-card{
  position:relative; border-radius:16px; overflow:hidden; flex:1; display:block;
  min-height:400px; background:#111; border:1px solid rgba(247,254,236,0.08);
  transition:transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
}
.work-row.single .project-card{ min-height:520px; }
.project-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.project-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,0.4); }
.project-card:hover img{ transform:scale(1.05); }
.project-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,7,7,0) 45%, rgba(6,7,7,0.75) 100%);
}
.project-card .card-body{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; gap:10px;
}
.project-card .year{ font-size:13px; color:var(--white); }
.project-card .title{ font-family:var(--font-body); font-weight:800; font-size:23px; color:var(--white); }
.project-card .cats{ font-size:15px; color:var(--white); opacity:0.85; }
.project-card.soon .card-body{ justify-content:center; align-items:center; text-align:center; }
.project-card.soon .soon-tag{
  font-size:13px; letter-spacing:.05em; text-transform:uppercase; background:var(--green); color:var(--black);
  padding:6px 14px; border-radius:16px; font-weight:700; margin-bottom:10px;
}

.grid-cta{ display:flex; justify-content:center; margin-top:48px; }

/* ---------- specialization cards ---------- */
.spec-grid{ display:flex; gap:24px; margin-top:56px; }
@media (max-width:860px){ .spec-grid{ flex-direction:column; } }
.spec-card{
  position:relative; border-radius:16px; overflow:hidden; flex:1; min-height:400px;
  border:1px solid rgba(247,254,236,0.08);
  transition:transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
}
.spec-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,0.4); }
.spec-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.spec-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,7,7,0) 45%, rgba(6,7,7,0.7) 100%); }
.spec-card span{ position:relative; z-index:1; display:block; padding:24px; align-self:flex-end; margin-top:auto; font-family:var(--font-body); font-weight:800; font-size:23px; color:var(--white); }
.spec-card{ display:flex; }

/* ---------- footer CTA ---------- */
footer.site-footer{
  background:var(--black); border-top:2px solid var(--green);
  padding:80px 40px 56px; text-align:center;
}
footer.site-footer .cta-label{ font-size:18px; color:var(--green); margin-bottom:20px; }
footer.site-footer .cta-email{
  font-family:var(--font-display); font-weight:700; color:var(--white);
  font-size:clamp(67px, 7vw, 67px); word-break:break-word; display:inline-block;
  transition:opacity .25s ease;
}
footer.site-footer .cta-email:hover{ opacity:0.75; }
footer.site-footer .foot-bubble{
  width:84px; height:auto; margin:36px auto 0;
}
footer.site-footer .foot-bubble-img{
  width:100%; height:auto; display:block;
  animation:mascot-bounce 3.4s ease-in-out infinite;
  transform-origin:50% 85%;
}
@keyframes mascot-bounce{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  30%{ transform:translateY(-7px) rotate(-5deg); }
  60%{ transform:translateY(0) rotate(4deg); }
}
footer.site-footer .foot-bubble:hover .foot-bubble-img{ animation-duration:.9s; }
@media (max-width:640px){ footer.site-footer .foot-bubble{ width:64px; } }
.foot-meta{ margin-top:36px; font-size:13px; color:rgba(247,254,236,0.5); display:flex; justify-content:center; gap:24px; flex-wrap:wrap; }
.foot-meta a{ color:rgba(247,254,236,0.7); }
.foot-meta a:hover{ color:var(--green); }

/* ============================================================
   Project detail pages (dark canvas)
   ============================================================ */
.project-hero{
  background:var(--black); color:var(--cream); padding:80px 40px 48px; text-align:center;
}
.project-hero .eyebrow{ font-family:var(--font-display); font-weight:700; color:var(--green-dark); font-size:clamp(30px,6vw,46px); }
.project-hero .tagline{ font-size:20px; color:var(--cream); margin-top:16px; max-width:640px; margin-left:auto; margin-right:auto; }
.project-hero .chips-row{ margin-top:28px; }
.project-hero .chip{ background:var(--cream); }

.project-body{ background:var(--black); padding:0 40px 90px; }
.project-media{ max-width:1035px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.project-media .full{ width:100%; border-radius:8px; overflow:hidden; }
.project-media .full img{ width:100%; height:auto; display:block; object-fit:cover; }
.project-media .split{ display:flex; gap:24px; }
@media (max-width:800px){ .project-media .split{ flex-direction:column; } }
.project-media .split img{ width:100%; height:400px; object-fit:cover; border-radius:8px; }
.project-media .pair img{ width:100%; height:400px; object-fit:cover; border-radius:8px; }

.project-copy{ display:flex; flex-direction:column; gap:24px; color:var(--cream); flex:1; min-width:280px; }
.project-copy .label{ font-family:var(--font-display); font-weight:700; color:var(--green); font-size:18px; }
.project-copy p{ font-size:16px; line-height:1.65; color:var(--cream); opacity:0.92; }
.project-copy .url-link{ font-weight:800; color:var(--green); text-decoration:underline; font-size:22px; word-break:break-word; }

.project-actions{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:56px; max-width:1035px; margin-left:auto; margin-right:auto; }

/* ---------- placeholder "coming soon" project page ---------- */
.soon-wrap{ background:var(--black); color:var(--cream); padding:140px 40px; text-align:center; min-height:50vh; display:flex; flex-direction:column; align-items:center; gap:20px; }
.soon-wrap h1{ font-family:var(--font-display); font-weight:700; color:var(--green); font-size:clamp(30px,6vw,46px); }
.soon-wrap p{ max-width:480px; opacity:0.85; font-size:17px; line-height:1.6; }

/* ---------- contact form ---------- */
.contact-form-wrap{ background:var(--black); padding:70px 40px 20px; display:flex; justify-content:center; }
.contact-form{ width:100%; max-width:560px; display:flex; flex-direction:column; gap:20px; }
.contact-form .field{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.contact-form label{ font-size:14px; color:var(--green); font-weight:600; }
.contact-form input,
.contact-form textarea{
  font-family:var(--font-body); font-size:16px; color:var(--black);
  background:var(--cream); border:2px solid transparent; border-radius:12px;
  padding:14px 16px; outline:none; transition:border-color .2s ease;
  width:100%; resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{ border-color:var(--green); }
.contact-form textarea{ min-height:140px; }
.contact-form .btn{ align-self:flex-start; margin-top:4px; }
.contact-form .form-note{ font-size:13px; color:rgba(247,254,236,0.55); margin-top:-4px; }
@media (max-width:640px){
  .contact-form-wrap{ padding:56px 22px 10px; }
  .contact-form .btn{ align-self:stretch; }
}
/* ---------- tablet ---------- */
@media (max-width:1024px){
  .hero{ padding:84px 32px 64px; gap:36px; }
  .section{ padding:72px 32px; }
  header.site-header .wrap{ padding:22px 32px; }
  .work-row.single .project-card{ min-height:420px; }
  .project-card{ min-height:320px; }
}

/* ---------- phone ---------- */
@media (max-width:640px){
  .hero{ padding:64px 22px 56px; }
  .section{ padding:64px 22px; }
  .project-hero{ padding:56px 22px 36px; }
  .project-body{ padding:0 22px 64px; }
  .btn{ padding:9px 16px; font-size:15px; }
  .chip{ font-size:12px; padding:7px 13px; }
  header.site-header .wrap{ padding:18px 22px; }
}

/* ---------- small phone ---------- */
@media (max-width:400px){
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  .project-actions{ flex-direction:column; align-items:stretch; }
}