@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --cream:#efe9e1;
  --ink:#231f20;
  --purple:#7a5cd1;
  --pink:#e469b0;
  --orange:#f2934d;
  --yellow:#f5cf4e;
  --green:#8fd0a0;
  --blue:#5b8dd6;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Poppins',sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.hero-block img{width:100%;}

/* ---------- Fondo continuo de la landing con overlays posicionados ---------- */
.page-wrap{
  max-width:none;
  margin:0 auto;
  background:var(--cream);
}
.page-bg{
  position:relative;
  width:100%;
  line-height:0;
}
.page-bg > img{
  width:100%;
  display:block;
}

/* Cluster de foto de infancia — posiciones medidas a partir de la captura de referencia */
.mifoto-cluster{
  position:absolute;
  top:20%;
  right:15%;
  width:34%;
  aspect-ratio:1/0.99;
  cursor:pointer;
}
.mifoto-cluster img{
  position:absolute;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.12));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* papel cuadriculado de fondo */
.mifoto-cluster .capa-papel{
  z-index:1;
  left:7.7%; top:1%;
  width:92.3%; height:99%;
  transform:rotate(3deg);
}
/* foto polaroid, encima del papel */
.mifoto-cluster .capa-foto{
  z-index:2;
  left:0%; top:8.6%;
  width:74%; aspect-ratio:635.05/545.07;
  transform:rotate(-3deg);
}
/* post-it, encima de la foto */
.mifoto-cluster .capa-postit{
  z-index:3;
  left:58%; top:41%;
  width:37%; aspect-ratio:267/279.48;
  transform:rotate(4deg);
}
/* clip, sujetando todo, va adelante de todo */
.mifoto-cluster .capa-clip{
  z-index:4;
  left:41%; top:-2%;
  width:13%; aspect-ratio:1028.77/985.18;
  transform:rotate(-6deg);
  transform-origin:top center;
}
.mifoto-cluster:hover .capa-foto{transform:rotate(-1deg) scale(1.02);}
.mifoto-cluster:hover .capa-postit{transform:rotate(6deg) translateY(-2%);}
.mifoto-cluster:hover .capa-clip{transform:rotate(-3deg);}

/* Enlaces invisibles sobre los bloques de contacto (email, behance, instagram, linkedin) */
.contact-link{
  position:absolute;
  display:block;
  cursor:pointer;
}
.subpage-img{position:relative;}

/* Ícono de Claude tapando el de ChatGPT en la sección Herramientas */
.page-bg > img.icon-claude-overlay{
  position:absolute;
  left:55.44%;
  top:51.05%;
  width:5.35%;
  aspect-ratio:157.99/182.07;
  pointer-events:none;
}

/* ---------- Proyectos ---------- */
.proyectos-grid{
  position:absolute;
  top:69.5%;
  height:22%;
  left:0;right:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  gap:1.2vw 3vw;
  margin:0 auto;
  padding:0 7.5%;
}
.proyecto-card{
  position:relative;
  width:100%;
  margin:0 auto;
  aspect-ratio:586/638;
  cursor:pointer;
  transform:rotate(var(--rot,-3deg));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.proyecto-card img{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.proyecto-card .capa-papel{z-index:1;}
.proyecto-card .capa-grid{z-index:2;}
.proyecto-card .capa-polaroid{z-index:3;}
.proyecto-card .capa-extra{z-index:4;}
.proyecto-card img{
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.10));
}

.proyecto-card:hover,
.proyecto-card:focus-visible{
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.12));
}
.proyecto-card:nth-child(9n+1){--rot:-4deg;}
.proyecto-card:nth-child(9n+2){--rot:2deg;}
.proyecto-card:nth-child(9n+3){--rot:-2deg;}
.proyecto-card:nth-child(9n+4){--rot:3deg;}
.proyecto-card:nth-child(9n+5){--rot:-3deg;}
.proyecto-card:nth-child(9n+6){--rot:1.5deg;}
.proyecto-card:nth-child(9n+7){--rot:-2.5deg;}
.proyecto-card:nth-child(9n+8){--rot:2.5deg;}
.proyecto-card:nth-child(9n+9){--rot:-1.5deg;}

.proyecto-card:nth-child(9n+1):hover{transform:rotate(calc(var(--rot) * 0.3)) translateY(-5px) scale(1.045);}
.proyecto-card:nth-child(9n+2):hover{transform:rotate(calc(var(--rot) * -0.4)) translateY(-7px) scale(1.03);}
.proyecto-card:nth-child(9n+3):hover{transform:rotate(calc(var(--rot) * 0.5)) translateY(-4px) scale(1.05);}
.proyecto-card:nth-child(9n+4):hover{transform:rotate(calc(var(--rot) * -0.3)) translateY(-6px) scale(1.035);}
.proyecto-card:nth-child(9n+5):hover{transform:rotate(calc(var(--rot) * 0.4)) translateY(-5px) scale(1.04);}
.proyecto-card:nth-child(9n+6):hover{transform:rotate(calc(var(--rot) * -0.5)) translateY(-6px) scale(1.03);}
.proyecto-card:nth-child(9n+7):hover{transform:rotate(calc(var(--rot) * 0.3)) translateY(-4px) scale(1.045);}
.proyecto-card:nth-child(9n+8):hover{transform:rotate(calc(var(--rot) * -0.4)) translateY(-7px) scale(1.03);}
.proyecto-card:nth-child(9n+9):hover{transform:rotate(calc(var(--rot) * 0.5)) translateY(-5px) scale(1.04);}

.proyecto-card.proximamente{filter:grayscale(0.08);}

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

/* toast */
.toast{
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  border-radius:999px;
  font-family:'Baloo 2',sans-serif;
  font-size:.95rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* subpage */
.subpage-nav{
  position:fixed;
  top:18px;left:18px;
  z-index:20;
  background:var(--ink);
  color:#fff;
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  padding:10px 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
  transition:transform .2s ease;
}
.subpage-nav:hover{transform:translateY(-2px) scale(1.03);}
.subpage-img{max-width:none;margin:0 auto;background:var(--cream);}
.subpage-img img{width:100%;}

@media (max-width:640px){
  .proyectos-grid{gap:3vw 2vw; padding:0 6%;}
  .mifoto-cluster{width:40%;}
}