/* Complemento de main.css. Solo lo que el sitio de AmirenLabs no tiene:
   avatar del hero, tarjeta con portada, case study, diagrama, stack y
   experiencia. Mismos tokens, misma tipografia, mismo ritmo. */

/* Salto de contenido para teclado: invisible hasta que recibe foco. */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:#fff; color:var(--ink);
  padding:12px 18px; border-radius:0 0 10px 0;
  font-size:14px; z-index:100;
}
.skip-link:focus{ left:0; }

:where(a, button):focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Las secciones son destino de anclas: un respiro arriba al saltar. */
section[id]{ scroll-margin-top: 24px; }

/* La marca del nav de AmirenLabs lleva logo SVG; esta es solo texto. */
.nav-mark span span{ color: var(--red); }

/* ---------- HERO ---------- */
.hero{
  min-height:max(620px, calc(100svh - 88px));
  align-items:stretch;
}
.hero > .wrap{
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}
.hero-content{
  margin:auto 0;
  padding:clamp(34px, 6vh, 62px) 0;
}
/* La foto entra como identidad, no como protagonista: acompana al rol,
   nunca compite con el nombre. */
.hero-rol{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 18px;
}
.hero-rol .tagline{ margin-top: 0; }

.avatar{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  display:block;
  /* Aro finisimo en vez de sombra: el resto de la pagina se sostiene con
     lineas finas, no con relieve. */
  box-shadow: 0 0 0 1px rgba(17,18,20,0.10);
}

/* Entrada inicial discreta. Solo modifica opacidad y composicion visual. */
.hero-reveal{
  opacity:0;
  transform:translateY(14px);
  animation:heroReveal .52s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-reveal-1{ animation-delay:.08s; }
.hero-reveal-2{ animation-delay:.18s; }
.hero-reveal-3{ animation-delay:.28s; }
.hero-reveal-4{ animation-delay:.38s; }
.hero::before{ animation:dandelionReveal .9s ease .08s both; }

@keyframes heroReveal{
  to{ opacity:1; transform:translateY(0); }
}
@keyframes dandelionReveal{
  from{ opacity:0; }
  to{ opacity:.38; }
}
.hero-motion-complete .hero-reveal{
  opacity:1;
  transform:none;
  animation:none;
}

.hero-links{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  border-top:1px solid rgba(17,18,20,.14);
  border-bottom:1px solid rgba(17,18,20,.08);
}
.hero-link{
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0, 1fr);
  align-items:start;
  gap:10px;
  min-width:0;
  padding:19px 18px 18px;
  color:var(--ink);
  text-decoration:none;
}
.hero-link + .hero-link{ border-left:1px solid rgba(17,18,20,.09); }
.hero-link::after{
  content:'';
  position:absolute;
  left:18px;
  right:18px;
  bottom:-1px;
  height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .23s ease;
}
.hero-link-icon{
  width:17px;
  height:17px;
  color:var(--gray-mid);
  transition:color .23s ease;
}
.hero-link-title{
  display:block;
  font-family:'Syne', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:color .23s ease;
}
.hero-link-desc{
  display:block;
  margin-top:4px;
  color:var(--gray-mid);
  font-size:12.5px;
  line-height:1.35;
}
.hero-link-arrow{
  display:inline-block;
  transition:transform .23s ease;
}
.hero-link:hover .hero-link-title,
.hero-link:hover .hero-link-icon{ color:var(--red); }
.hero-link:hover::after{ transform:scaleX(1); }
.hero-link:hover .hero-link-arrow{ transform:translate(3px,-2px); }
.hero-link-download:hover .hero-link-arrow{ transform:translateY(2px); }

/* ---------- PROYECTO ---------- */
.proyecto-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items:start;
}

/* Tarjeta con portada: hereda el lenguaje de .card pero sin padding, para
   que la imagen llegue al borde y sea ella la que hable. */
.media-card{
  display:block;
  background:#fff;
  border-radius: 20px;
  overflow:hidden;
  text-decoration:none;
  border: 1.5px solid rgba(255,77,77,0.25);
  box-shadow: 0 1px 2px rgba(17,18,20,0.04), 0 6px 20px rgba(17,18,20,0.05);
  transition: border-color .28s ease;
}
.media-card:hover{ border-color:rgba(245,59,59,.52); }
.media-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.media-card:hover img{ transform:scale(1.015); }
.media-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid rgba(17,18,20,0.07);
}
.media-name{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size: 20px;
  color: var(--ink);
}
.media-meta{
  font-size: 13px;
  color: var(--gray-mid);
  margin-top: 2px;
}
.media-card .cta{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.media-card .arrow,
.via .arrow{
  display:inline-block;
  transition:transform .25s ease;
}
.media-card:hover .cta{ color: var(--red); }
.media-card:hover .arrow{ transform:translateX(4px); }

/* Informacion del proyecto en filas, no en tarjetas: tres cajas de texto
   pesaban mas que el proyecto mismo. */
.proyecto-info{
  border-top: 1px solid rgba(17,18,20,0.10);
}
.info-row{
  padding: 22px 0;
  border-bottom: 1px solid rgba(17,18,20,0.10);
}
.info-key{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red-strong);
  margin-bottom: 8px;
}
.info-val{
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gray-mid);
}

/* ---------- CASE STUDY ---------- */
.case-main{
  display:grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 28px;
  align-items:start;
  margin-bottom: 20px;
}

.shot{
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(17,18,20,0.08);
}
.shot img{
  display:block;
  width:100%;
  height:auto;
  /* width/height en el HTML reservan el hueco antes de descargarla, para que
     el texto de al lado no salte cuando entra. */
}

.motion-ready .shot{
  opacity:0;
  transform:translateY(10px) scale(.99);
}
.motion-ready .case-main.is-visible .shot{
  animation:softReveal .52s cubic-bezier(.22,.61,.36,1) forwards;
}

.case-aside .section-label{ margin-bottom: 16px; }

.part-list{
  list-style:none;
  display:grid;
  gap: 0;
  border-top: 1px solid rgba(17,18,20,0.10);
}
.part-list li{
  position:relative;
  padding: 13px 0 13px 18px;
  border-bottom: 1px solid rgba(17,18,20,0.10);
  font-size: 14.5px;
  color: var(--ink);
}
.part-list li::before{
  content:'';
  position:absolute;
  left:0; top: 20px;
  width: 5px; height: 5px;
  border-radius:50%;
  background: var(--red);
  opacity: .7;
}
.motion-ready .part-list li.reveal-item{
  opacity:0;
  transform:translateY(10px);
}
.motion-ready .part-list li.reveal-item.is-visible{
  animation:softReveal .46s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--reveal-order) * 60ms);
}

/* ---------- ARQUITECTURA ---------- */
.arq{ margin-top: 64px; }
.arq-standalone{ margin-top:0; }
.arq .section-label{ margin-bottom: 18px; }

.arq-frame{
  background:#fff;
  border: 1px solid rgba(17,18,20,0.08);
  border-radius: 20px;
  padding: 30px 26px;
}
.arq-frame svg{ display:block; width:100%; height:auto; }

/* Diagrama: lineas finas, tinta y gris, rojo solo en el camino principal. */
.arq-frame .n rect{
  fill:#fff;
  stroke: rgba(17,18,20,0.20);
  stroke-width: 1;
}
.arq-frame .n.core rect{
  stroke: rgba(17,18,20,0.42);
}
.arq-frame .base{
  fill: rgba(17,18,20,0.025);
  stroke: rgba(17,18,20,0.12);
  stroke-width: 1;
}
.arq-frame .t{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size: 15px;
  fill: var(--ink);
  text-anchor: middle;
}
.arq-frame .s{
  font-family:'Inter', sans-serif;
  font-size: 12px;
  fill: var(--gray-mid);
  text-anchor: middle;
}
.arq-frame .ln{
  stroke: rgba(17,18,20,0.28);
  stroke-width: 1;
  fill:none;
}
.arq-frame .ln.acc{ stroke: var(--red); opacity: .55; }
.arq-frame .dot{ fill: rgba(17,18,20,0.35); }
.arq-frame .acc-dot{ fill: var(--red); opacity: .75; }

/* El SVG ya contiene el diagrama completo; estas reglas solo secuencian su
   primera aparicion sin alterar nodos, medidas ni jerarquia. */
.motion-ready .arq-frame .n,
.motion-ready .arq-frame .base,
.motion-ready .arq-frame > svg > .s:last-child{
  opacity:0;
}
.motion-ready .arq-frame .ln{
  stroke-dasharray:36;
  stroke-dashoffset:36;
}
.motion-ready .arq-frame .dot,
.motion-ready .arq-frame .acc-dot{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.6);
}
.motion-ready .arq-frame.is-visible .n{
  animation:nodeReveal .28s ease forwards;
}
.motion-ready .arq-frame.is-visible .n:nth-of-type(1),
.motion-ready .arq-frame.is-visible .n:nth-of-type(2){ animation-delay:.04s; }
.motion-ready .arq-frame.is-visible .n:nth-of-type(3),
.motion-ready .arq-frame.is-visible .n:nth-of-type(4){ animation-delay:.28s; }
.motion-ready .arq-frame.is-visible .n:nth-of-type(5){ animation-delay:.55s; }
.motion-ready .arq-frame.is-visible .n:nth-of-type(n+6){ animation-delay:.82s; }
.motion-ready .arq-frame.is-visible .ln{
  animation:drawConnection .22s ease forwards;
}
.motion-ready .arq-frame.is-visible .ln:nth-of-type(1),
.motion-ready .arq-frame.is-visible .ln:nth-of-type(2){ animation-delay:.16s; }
.motion-ready .arq-frame.is-visible .ln:nth-of-type(3),
.motion-ready .arq-frame.is-visible .ln:nth-of-type(4){ animation-delay:.43s; }
.motion-ready .arq-frame.is-visible .ln:nth-of-type(n+5){ animation-delay:.70s; }
.motion-ready .arq-frame.is-visible .dot,
.motion-ready .arq-frame.is-visible .acc-dot{
  animation:dotReveal .16s ease forwards;
  animation-delay:.34s;
}
.motion-ready .arq-frame.is-visible circle:nth-of-type(n+3){
  animation-delay:.61s;
}
.motion-ready .arq-frame.is-visible .base,
.motion-ready .arq-frame.is-visible > svg > .s:last-child{
  animation:nodeReveal .28s ease .99s forwards;
}

@keyframes drawConnection{ to{ stroke-dashoffset:0; } }
@keyframes nodeReveal{
  from{ opacity:0; transform:translateY(5px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes dotReveal{
  to{ opacity:1; transform:scale(1); }
}
.motion-ready .arq-frame.motion-complete .n,
.motion-ready .arq-frame.motion-complete .base,
.motion-ready .arq-frame.motion-complete > svg > .s:last-child{
  opacity:1;
  transform:none;
  animation:none;
}
.motion-ready .arq-frame.motion-complete .ln{
  stroke-dashoffset:0;
  animation:none;
}
.motion-ready .arq-frame.motion-complete .dot{
  opacity:1;
  transform:none;
  animation:none;
}
.motion-ready .arq-frame.motion-complete .acc-dot{
  opacity:.75;
  transform:none;
  animation:none;
}

.arq-cap{
  margin-top: 14px;
  font-size: 13px;
  color: var(--gray-mid);
}

/* ---------- STACK ---------- */
.stack-grid{ border-top: 1px solid rgba(17,18,20,0.10); }
.stack-row{
  display:grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(17,18,20,0.10);
}
.stack-key{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Iconos monocromos: heredan el color del texto y solo se tinen al pasar
   por encima. Nada de colores oficiales de marca. */
.ico{
  width: 19px; height: 19px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--gray-mid);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s ease;
}
.stack-row:hover .ico{ stroke: var(--red); }
.stack-val{
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-mid);
}
.tech{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  color:var(--gray-mid);
  transition:color .2s ease;
}
.tech-icon{
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:currentColor;
  -webkit-mask-image:url('../icons/stack-icons-sheet.svg');
  mask-image:url('../icons/stack-icons-sheet.svg');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:2100% 100%;
  mask-size:2100% 100%;
  -webkit-mask-position:var(--icon-position) center;
  mask-position:var(--icon-position) center;
}
.tech-icon-extra{
  -webkit-mask-image:url('../icons/stack-icons-extra.svg');
  mask-image:url('../icons/stack-icons-extra.svg');
  -webkit-mask-size:300% 100%;
  mask-size:300% 100%;
}
.tech-inline-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.tech:hover{ color:var(--red); }

.motion-ready .stack-row.reveal-item{
  opacity:0;
  transform:translateY(10px);
}
.motion-ready .stack-row.reveal-item.is-visible{
  animation:softReveal .46s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--reveal-order) * 65ms);
}

/* Reveal general, aplicado una sola vez por IntersectionObserver. */
.motion-ready .reveal{
  opacity:0;
  transform:translateY(14px);
}
.motion-ready .reveal.is-visible{
  animation:softReveal .52s cubic-bezier(.22,.61,.36,1) forwards;
}
.motion-ready .motion-complete{
  opacity:1;
  transform:none;
  animation:none;
}
@keyframes softReveal{
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---------- EXPERIENCIA ---------- */
.exp-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.exp-head h3{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size: 19px;
  letter-spacing:-0.01em;
}
.exp-when{
  font-size: 13px;
  color: var(--gray-mid);
  letter-spacing: 0.02em;
}
.exp-list{
  list-style:none;
  display:grid;
  gap: 10px;
}
.exp-list li{
  position:relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-mid);
}
.exp-list li::before{
  content:'';
  position:absolute;
  left:0; top: 0.62em;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--red);
  opacity:.65;
}

/* Separacion clara entre trayectoria profesional y formacion. */
.exp-sep{
  height:1px;
  background: rgba(17,18,20,0.10);
  margin: 40px 0;
}
.exp-edu .exp-head{ margin-bottom: 0; }

/* ---------- CONTACTO ---------- */
/* Cuatro accesos en una fila: con flex y min-width 240 quedaban 3+1 y
   sobraba un hueco enorme a la derecha. */
.contacto-vias{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.contacto-vias .via{
  min-width: 0;
  border: 1px solid rgba(17,18,20,0.07);
  transition:transform .25s ease, border-color .25s ease;
}
.contacto-vias .via:hover{
  transform:translateY(-2px);
  border-color:rgba(245,59,59,.40);
}
.contacto-vias .via:hover .arrow{ transform:translateX(4px); }
.contacto-vias .via-valor{
  overflow-wrap: anywhere;
  font-size: 14.5px;
}

/* ---------- FOOTER ---------- */
/* Los enlaces iban sueltos y se leian como una frase corrida. */
.footer-col ul{ list-style:none; }

/* ---------- VISOR MOVIL ---------- */
.image-viewer{
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:rgba(17,18,20,.96);
  overflow:hidden;
}
.image-viewer::backdrop{ background:rgba(17,18,20,.96); }
.image-viewer-stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  touch-action:none;
  user-select:none;
}
.image-viewer-img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  transform-origin:center;
  will-change:transform;
  -webkit-user-drag:none;
}
.image-viewer-close{
  position:absolute;
  z-index:2;
  top:max(16px, env(safe-area-inset-top));
  right:max(16px, env(safe-area-inset-right));
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(241,241,239,.10);
  color:var(--paper);
}
.image-viewer-close svg{ width:20px; height:20px; }
body.viewer-open{ overflow:hidden; }

/* ---------- RESPONSIVE ---------- */

/* "jhonatan cisneros" es mucho mas largo que "amirenlabs", para quien se
   escribio el nowrap de main.css. A 64px necesita 878px y por debajo de
   ~1000px de viewport ya no entra: como .hero tiene overflow:hidden, el
   apellido se recortaba sin dejar rastro (no genera scroll horizontal, asi
   que no se detecta mirando el ancho del documento). Se deja partir en dos
   lineas, que ademas se lee bien en una pieza editorial. */
@media (max-width: 1000px){
  .hero h1{ white-space: normal; overflow-wrap: break-word; }
}

@media (max-width: 1000px){
  .contacto-vias{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .proyecto-grid{ grid-template-columns: 1fr; }
  /* La captura primero y el detalle debajo. */
  .case-main{ grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 760px){
  .hero{ min-height:max(680px, calc(100svh - 102px)); }
  .hero-content{ padding:34px 0 30px; }
  .hero-links{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hero-link{
    grid-template-columns:17px minmax(0, 1fr);
    gap:8px;
    padding:16px 10px;
  }
  .hero-link-title{
    font-size:12.5px;
    letter-spacing:.03em;
    white-space:nowrap;
  }
  .hero-link:nth-child(odd){ border-left:0; }
  .hero-link:nth-child(n+3){ border-top:1px solid rgba(17,18,20,.09); }
  .hero-link::after{ left:10px; right:10px; }
  .stack-row{ grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .exp-when{ white-space: normal; }
  .arq-frame{ padding: 20px 14px; }
  .arq{ margin-top: 48px; }
  .media-foot{ padding: 18px 20px; }
  .mobile-zoomable{ touch-action:manipulation; }
}

/* El diagrama tiene tres cajas en fila: comprimido a 306px su texto queda en
   ~6px, ilegible. Se le da scroll al marco (no a la pagina) y un ancho minimo
   que mantiene hasta el texto secundario por encima de 10px. Se arrastra con el dedo. */
@media (max-width: 620px){
  .arq-frame{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .arq-frame svg{ min-width: 660px; }
}

@media (max-width: 560px){
  .contacto-vias{ grid-template-columns: 1fr; }
  .avatar{ width: 46px; height: 46px; }
  .media-foot{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .media-card .cta{ white-space: normal; }
}

@media (prefers-reduced-motion: reduce){
  .hero-reveal,
  .media-card,
  .media-card img,
  .media-card .arrow,
  .via,
  .via .arrow,
  .ico,
  .tech{
    animation:none;
    transition:none;
    transform:none;
    opacity:1;
  }
  .hero-link,
  .hero-link-icon,
  .hero-link-title,
  .hero-link-arrow,
  .hero-link::after{
    transition:none;
  }
  .hero::before{ animation:none; opacity:.38; }
}