/* ===================== TOKENS ===================== */
:root{
  --black:#0d0d0d;
  --ink:#101010;
  --cream:#ede7db;
  --cream-2:#e3ddd0;
  --gray:#9a9a9a;
  --gray-card:#c9c4ba;

  --teal:#46c6c0;
  --pink:#ff3e6c;
  --yellow:#f2d411;
  --orange:#ff6a1a;
  --mint:#63e6a0;

  --pad: clamp(20px, 5vw, 70px);
  --radius: 18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black);
  color:var(--cream);
  font-family:"DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:default;               /* text no longer shows the I-beam cursor */
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* only genuinely interactive things get the hand cursor */
a, button, .btn, .card, .brand-card, .cta, .contact__mail,
.hero__scrollhint, [role="button"]{ cursor:pointer; }

/* ---------- custom scrollbars ---------- */
html{ scrollbar-width:thin; scrollbar-color:var(--cream) var(--black); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{
  background:var(--cream);
  border-radius:999px;
  border:3px solid var(--black);
}
::-webkit-scrollbar-thumb:hover{ background:var(--pink); }
::-webkit-scrollbar-corner{ background:var(--black); }

.mono{
  font-family:"DM Sans", sans-serif;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}
.dim{ opacity:.5; }

/* ---------- splash screen ---------- */
.no-scroll{ overflow:hidden; }
.splash{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:var(--black);
  transition:opacity .6s ease, visibility .6s ease;
}
.splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.splash__img{
  width:clamp(72px, 12vw, 104px); height:auto;
  will-change:transform;
  animation:splash-hop 1.5s infinite;
}
/* cartoon hop: squashes, jumps, and SNAPS to a new rotation at each apex */
@keyframes splash-hop{
  0%,  12% { transform:translateY(0)     rotate(-12deg) scale(1, 1);       }
  18%      { transform:translateY(0)     rotate(-12deg) scale(1.12, .82);
             animation-timing-function:cubic-bezier(.2,.7,.3,1); }          /* squash → launch (ease-out up) */
  33%      { transform:translateY(-32px) rotate(-12deg) scale(.9, 1.14);   }
  34%      { transform:translateY(-32px) rotate(14deg)  scale(.9, 1.14);
             animation-timing-function:cubic-bezier(.7,0,.8,.4); }          /* snap rotation at apex, fall (ease-in) */
  45%      { transform:translateY(0)     rotate(14deg)  scale(1.16, .84);   }
  52%, 62% { transform:translateY(0)     rotate(14deg)  scale(1, 1);        }
  68%      { transform:translateY(0)     rotate(14deg)  scale(1.12, .82);
             animation-timing-function:cubic-bezier(.2,.7,.3,1); }          /* squash → launch */
  83%      { transform:translateY(-32px) rotate(14deg)  scale(.9, 1.14);    }
  84%      { transform:translateY(-32px) rotate(-12deg) scale(.9, 1.14);
             animation-timing-function:cubic-bezier(.7,0,.8,.4); }          /* snap back at apex */
  95%      { transform:translateY(0)     rotate(-12deg) scale(1.16, .84);   }
  100%     { transform:translateY(0)     rotate(-12deg) scale(1, 1);        }
}

/* ---------- scroll reveal ---------- */
.js-reveal{ transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.pre-reveal{ opacity:0; transform:translateY(26px); }
/* cards & the hero photo only fade — no translate — to protect hover/flip/bleed */
.card.pre-reveal, .brand-card.pre-reveal, .hero__photo.pre-reveal{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .splash__img{ animation:none; }
  .js-reveal, .pre-reveal,
  .card.pre-reveal, .brand-card.pre-reveal, .hero__photo.pre-reveal{
    transition:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ===================== TOP BAR ===================== */
.topbar{
  position:relative;
  z-index:20;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  padding:18px var(--pad);
  border-bottom:1px solid rgba(237,231,219,.12);
}
.topbar__col{ display:flex; flex-direction:column; gap:3px; }
.topbar__col.center{ align-items:center; justify-content:center; }
.topbar__col.right{ align-items:flex-end; }

/* ===================== HERO ===================== */
.hero-screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.hero{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  padding:var(--pad);
  padding-top:clamp(24px,4vw,44px);
  display:grid;
  grid-template-columns:1.4fr .82fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "top   top"
    "head  photo"
    "intro photo";
  column-gap:clamp(20px,4vw,56px);
  row-gap:clamp(16px,3vw,30px);
  overflow:hidden;
}

.hero__topline{
  grid-area:top;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
}
.brand__name{ font-weight:700; line-height:1; font-size:1rem; }

.hero__headline{ grid-area:head; align-self:center; z-index:2; }
.hero__headline h1{
  font-family:"Anton", sans-serif;
  font-weight:400;
  line-height:.84;
  letter-spacing:.01em;
  text-transform:uppercase;
  font-size:clamp(3.2rem, 13vw, 11rem);
}
.hero__headline .line{ display:block; }
.hero__headline .accent{ color:var(--pink); }

.hero__intro{
  grid-area:intro;
  align-self:end;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:clamp(18px,3vw,40px);
  align-items:end;
  max-width:1100px;
}

/* portrait — sits in the empty right column, no panel */
.hero__photo{
  grid-area:photo;
  position:relative;
  align-self:stretch;
  min-height:clamp(240px, 42vh, 520px);
}
.hero__portrait{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:calc(100% + var(--pad));   /* +pad bleeds to the true bottom edge of 100vh */
  object-fit:contain; object-position:center bottom;
  filter:grayscale(1) contrast(1.03);
}
.hero__portrait-fallback{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; text-align:center;
  color:var(--cream); opacity:.32; z-index:1;
  font-family:"Syne",sans-serif; font-weight:800; font-size:1rem;
}
.hero__photo.noimg .hero__portrait{ display:none; }
.hero__photo.noimg .hero__portrait-fallback{ display:flex; }
.hero__intro p{ font-size:.95rem; line-height:1.45; opacity:.85; max-width:34ch; }
.cta{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.04em; white-space:nowrap;
  border-bottom:2px solid var(--cream);
  padding-bottom:4px;
}
.cta span{ transition:transform .2s; }
.cta:hover span{ transform:translateX(6px); }

.hero__scrollhint{
  position:absolute; left:var(--pad); bottom:16px; z-index:3;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translateY(6px); } }

/* ---------- stickers ---------- */
.sticker{
  display:inline-block;
  font-family:"Syne", sans-serif;
  font-weight:800; text-transform:uppercase;
  font-size:clamp(.72rem,1.05vw,1.02rem);
  line-height:1; letter-spacing:-.01em;
  color:var(--black);
  padding:12px 16px;
  border-radius:12px;
  box-shadow:0 6px 0 rgba(0,0,0,.25);
}
.sticker--teal{ background:var(--teal); }
.sticker--pink{ background:var(--pink); color:var(--cream); }
.sticker--yellow{ background:var(--yellow); }
.sticker--orange{ background:var(--orange); color:var(--cream); }
.sticker--mint{ background:var(--mint); }

.hero .sticker{ position:absolute; z-index:4; }
.s1{ top:26%; left:6%;  transform:rotate(-9deg); }
.s2{ top:20%; right:8%; transform:rotate(6deg); }
.s3{ bottom:30%; left:3%; transform:rotate(7deg); }
.s4{ top:44%; right:4%; transform:rotate(-6deg); }
.s5{ bottom:24%; right:22%; transform:rotate(9deg); }

@media (max-width:640px){
  .hero .sticker{ display:none; }
}

/* ===================== HORIZONTAL SECTIONS ===================== */
.horizontal{ position:relative; background:var(--black); }
.horizontal.alt{ background:var(--cream); color:var(--black); }
.h-sticky{
  position:sticky; top:0;
  height:100vh;
  overflow:hidden;
  display:flex; align-items:center;
}
.h-track{
  display:flex; align-items:stretch; gap:clamp(24px,3vw,48px);
  padding:0 var(--pad);
  will-change:transform;
}

/* intro block inside track */
.h-intro{
  flex:0 0 auto;
  width:min(78vw, 460px);
  align-self:center;
  display:flex; flex-direction:column; gap:18px;
}
.h-intro .sticker.static{ align-self:flex-start; transform:rotate(-4deg); }
.h-title{
  font-family:"Anton", sans-serif; font-weight:400;
  text-transform:uppercase; line-height:.9;
  font-size:clamp(2.6rem,7vw,6rem);
}
.h-title.dark{ color:var(--black); }
.h-sub{ font-size:.95rem; opacity:.8; max-width:32ch; }
.h-sub.dark{ color:var(--black); opacity:.7; }
.dark{ color:var(--black); }

/* product / dev cards */
.card{
  flex:0 0 auto;
  width:clamp(230px, 26vw, 340px);
  min-height:min(64vh,460px);
  border-radius:var(--radius);
  color:var(--black);
  position:relative;
  perspective:1500px;
  transition:transform .3s ease, opacity .55s ease;
  cursor:pointer;
}
.card{ background:none; }   /* colour lives on the faces so the whole box flips */
.card:hover{ transform:translateY(-10px) rotate(-1.6deg); }
.card:nth-of-type(even):hover{ transform:translateY(-10px) rotate(1.6deg); }
/* --c = front colour, --cd = darker back colour (better text contrast) */
.card--teal{   --c:#46c6c0; --cd:#2f9d97; }
.card--pink{   --c:#ff3e6c; --cd:#d62f57; color:var(--cream); }
.card--yellow{ --c:#f2d411; --cd:#c7ac06; }
.card--orange{ --c:#ff6a1a; --cd:#db5410; color:var(--cream); }
.card--mint{   --c:#63e6a0; --cd:#3ec080; }
.card--muted{  --c:#c9c4ba; --cd:#a49f95; }
.card__num{
  font-family:"Anton",sans-serif; font-size:1.1rem;
  opacity:.6; letter-spacing:.05em;
}
.card__name{
  font-family:"Anton", sans-serif; font-weight:400;
  text-transform:uppercase; line-height:.88;
  font-size:clamp(2rem,4.4vw,3.4rem);
}
.card__tag{
  align-self:flex-start;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  background:rgba(13,13,13,.14);
  padding:7px 12px; border-radius:999px;
}
.card--pink .card__tag,
.card--orange .card__tag{ background:rgba(237,231,219,.22); }

/* brand cards (section 2 — light) */
.brand-card{
  flex:0 0 auto;
  width:clamp(220px,24vw,320px);
  min-height:min(60vh,420px);
  border-radius:var(--radius);
  background:none;
  color:var(--black);
  position:relative;
  perspective:1500px;
  transition:transform .3s ease, opacity .55s ease;
  cursor:pointer;
}
.brand-card:hover{ transform:translateY(-10px) rotate(1.6deg); }
.brand-card:nth-of-type(even):hover{ transform:translateY(-10px) rotate(-1.6deg); }
.brand-card h3{
  font-family:"Anton", sans-serif; font-weight:400;
  text-transform:uppercase; line-height:.9;
  font-size:clamp(1.9rem,4vw,3rem);
}
.brand-card__num{ font-family:"Anton",sans-serif; opacity:.5; }
.brand-card__tag{
  align-self:flex-start; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700;
  border:1px solid currentColor; padding:6px 11px; border-radius:999px;
}

/* ---------- flip mechanics (shared) ---------- */
.flip-inner{
  position:relative;
  min-height:inherit;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.05,.2,1);
}
.is-flipped .flip-inner{ transform:rotateY(180deg); }
.flip-face{
  position:absolute; inset:0;
  padding:26px;
  display:flex; flex-direction:column; justify-content:space-between;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius);
}
.flip-back{ transform:rotateY(180deg); gap:14px; }

/* colour on the faces → the whole card turns */
.card .flip-front{ background:var(--c); }
.card .flip-back{ background:var(--cd); }
.brand-card .flip-front{ background:transparent; border:1.5px solid var(--black); }
.flip-hint{
  position:absolute; bottom:12px; right:14px;
  font-family:"Syne",sans-serif; font-weight:800; font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; opacity:.45;
  pointer-events:none;
}
.flip-back-title{
  font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size:1.5rem; line-height:.9;
}
.flip-copy{ font-size:.86rem; line-height:1.5; opacity:.85; overflow:auto; flex:1; }

/* brand card back = solid reveal */
.brand-card .flip-back{ background:var(--black); color:var(--cream); border-radius:var(--radius); }

/* buttons */
.card__btns{ display:flex; gap:10px; margin-top:auto; align-items:stretch; }
.btn{
  text-align:center;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:"Syne",sans-serif; font-weight:800;
  font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  padding:12px 14px; border-radius:999px;
  border:1.6px solid var(--black);
  transition:.18s; cursor:pointer;
}
.btn span{ font-size:.9em; }

/* Web = primary action: filled + wider */
.btn--primary{ flex:1.7; background:var(--black); color:var(--cream); }
.btn--primary:hover{ background:transparent; color:var(--black); }
.card--pink .btn--primary:hover,
.card--orange .btn--primary:hover{ color:var(--cream); border-color:var(--cream); }

/* GitHub = secondary: outline + narrower + lighter */
.btn--ghost{ flex:1; background:transparent; color:inherit; opacity:.8; }
.btn--ghost:hover{ background:var(--black); color:var(--cream); opacity:1; }
.card--pink .btn--ghost:hover,
.card--orange .btn--ghost:hover{ background:var(--cream); color:var(--black); border-color:var(--cream); }

/* single "Ver más": larger of 50% width OR text + symmetric padding */
.card__btns--single .btn{
  flex:0 0 auto;
  width:max(50%, max-content);
  padding-left:12px; padding-right:12px;   /* = vertical padding */
  background:var(--black); color:var(--cream);
}
.card__btns--single .btn:hover{ background:transparent; color:inherit; }

/* brand-card buttons sit on a black back → cream outline */
.brand-card .btn{ background:transparent; color:var(--cream); border-color:var(--cream); }
.brand-card .btn:hover{ background:var(--cream); color:var(--black); }

/* disabled / "Próximamente" buttons — dimmed, no hover shift */
.btn--soon{ opacity:.45; cursor:default; }
.card__btns--single .btn--soon:hover{ background:var(--black); color:var(--cream); }
.brand-card .btn--soon:hover{ background:transparent; color:var(--cream); }

.h-end{
  flex:0 0 auto; align-self:center;
  writing-mode:vertical-rl;
  padding:0 30px; opacity:.5;
}

/* ===================== TEACHING ===================== */
.teach{
  position:relative;
  background:var(--cream);
  color:var(--black);
  padding:clamp(60px,10vw,130px) var(--pad);
  overflow:hidden;
}
.teach__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(13,13,13,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,13,13,.06) 1px, transparent 1px);
  background-size:min(8vw,80px) min(8vw,80px);
  mask-image:radial-gradient(120% 100% at 20% 0%, #000 30%, transparent 90%);
}
.teach > *{ position:relative; z-index:2; }
.teach__head{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:clamp(30px,5vw,60px); }
.teach__head h2{
  font-family:"Anton", sans-serif; font-weight:400;
  text-transform:uppercase; line-height:.98;   /* room for the ñ tilde */
  padding-top:.06em;
  font-size:clamp(3rem,9vw,7rem);
}
.teach__body{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.teach__list{ list-style:none; display:flex; flex-direction:column; }
.teach__list li{
  display:flex; flex-direction:column; gap:6px;
  padding:22px 0;
  border-top:1.5px solid rgba(13,13,13,.2);
}
.teach__list li:last-child{ border-bottom:1.5px solid rgba(13,13,13,.2); }
.teach__k{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  opacity:.75;
}
.teach__org{                       /* institution name — kept prominent so it isn't skipped */
  font-family:"Syne",sans-serif; font-weight:800;
  font-size:1.05rem; letter-spacing:.01em;
  opacity:1;
  box-shadow:inset 0 -.35em 0 rgba(99,230,160,.55);   /* mint highlight */
}
.teach__v{ font-size:clamp(1.1rem,2vw,1.5rem); font-weight:500; }
.teach__v b{ font-weight:700; }

.teach__stats{ display:flex; flex-direction:column; gap:18px; }
.teach__stat{
  background:var(--black); color:var(--cream);
  border-radius:var(--radius);
  padding:clamp(24px,3vw,38px); text-align:center;
  transform:rotate(-2deg);
}
.teach__stat--alt{
  background:var(--mint); color:var(--black);
  transform:rotate(2deg);
}
.teach__big{
  display:block;
  font-family:"Anton",sans-serif;
  font-size:clamp(3rem,8vw,6rem); line-height:.9; color:var(--mint);
}
.teach__stat--alt .teach__big{ color:var(--black); }
.teach__cap{ display:block; margin-top:10px; opacity:.8; }

/* ===================== CONTACT ===================== */
.contact{
  position:relative;
  background:var(--black);
  padding:clamp(50px,8vw,110px) var(--pad);
  display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;
  gap:clamp(30px,5vw,80px);
  align-items:center;
  overflow:hidden;
}
.contact__photo{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
  display:flex; align-items:flex-end; justify-content:center;
}
.contact__photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(1) contrast(1.05);
}
.contact__ph-fallback{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--black);
  font-family:"Anton",sans-serif; font-size:2rem; text-align:center;
  letter-spacing:.04em; opacity:.35; display:none;
}
.contact__photo.noimg img{ display:none; }
.contact__photo.noimg .contact__ph-fallback{ display:block; }

.contact__kicker{ opacity:.6; margin-bottom:14px; }
.contact__title{
  font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(3rem,10vw,8rem); line-height:.85; margin-bottom:26px;
}
.contact__mail{
  display:inline-flex; align-items:center; gap:12px;
  font-size:clamp(1.1rem,2.6vw,2rem); font-weight:700;
  border-bottom:2px solid var(--cream); padding-bottom:6px;
}
.contact__mail span{ transition:transform .2s; }
.contact__mail:hover span{ transform:translateX(8px); }
.contact__meta{ display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; opacity:.65; }
.contact .sticker{ position:absolute; top:20px; right:6%; transform:rotate(8deg); }

/* ===================== FOOTER ===================== */
.foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:22px var(--pad);
  border-top:1px solid rgba(237,231,219,.12);
}
.foot a{ border-bottom:1px solid transparent; }
.foot a:hover{ border-color:var(--cream); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:820px){
  .topbar{ grid-template-columns:1fr 1fr; }
  .topbar__col.center{ display:none; }
  .hero{
    display:flex; flex-direction:column;
    gap:clamp(18px,5vw,32px);
  }
  .hero__headline{ align-self:start; }        /* don't centre/indent on mobile */
  .hero__photo{ order:3; min-height:46vh; }
  .hero__intro{ grid-template-columns:1fr; order:4; }
  .hero__scrollhint{ display:none; }          /* avoids overlapping the intro text */
  .teach__body{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .contact__photo{ max-width:320px; }
  /* horizontal → native swipe on small screens */
  .h-sticky{ position:relative; height:auto; padding:56px 0; }
  .h-track{
    overflow-x:auto;
    scroll-snap-type:x proximity;             /* proximity → section intro stays visible on entry */
    scroll-padding-left:var(--pad);
    padding-bottom:20px;
    transform:none !important;
    -webkit-overflow-scrolling:touch;
  }
  .h-intro, .card, .brand-card{ scroll-snap-align:start; }
  .h-intro{ width:min(84vw, 420px); }
}