/* Refinamiento compartido: trabajo real, superficies discretas y respuesta visible. */
:root{
  --ui-accent:var(--ambar);
  --ui-accent-soft:rgba(255,176,32,.19);
  --ui-line:rgba(255,176,32,.42);
}
.page-landing .cabecera .grad,.page-cv .section-head .grad{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--acento-texto);
}
.page-landing .hero .grad,.page-cv .hero .grad{
  background:var(--grad-texto);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Portada con una pieza publicada, en lugar de cifras abstractas. */
.page-landing .hero{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr);
  align-items:center;gap:clamp(28px,5vw,72px);padding-block:72px 42px;min-height:640px;
}
.page-landing .hero-copy{min-width:0}
.page-landing .hero h1{max-width:11.5ch;font-size:clamp(54px,6.1vw,84px)}
.page-landing .hero .lead{max-width:48ch}
.page-landing .hero-work{
  align-self:stretch;min-width:0;max-height:530px;
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--sup-borde);border-radius:18px;
  background:var(--vidrio-solido);
  box-shadow:0 34px 65px -40px rgba(0,0,0,.75);
}
.page-landing .hero-work-head{
  display:flex;justify-content:space-between;gap:18px;padding:18px 20px;
  border-bottom:1px solid var(--linea);color:var(--tinta-3);
  font-size:11px;font-weight:720;letter-spacing:.11em;text-transform:uppercase;
}
.page-landing .hero-work-body{
  display:grid;grid-template-columns:minmax(140px,.95fr) minmax(0,1fr);
  align-items:center;gap:20px;flex:1;padding:25px 24px 18px;
}
.page-landing .hero-work-phone{
  position:relative;justify-self:center;width:min(100%,175px);max-height:365px;
  border:5px solid #302c28;border-radius:24px;overflow:hidden;background:#fff;
  box-shadow:12px 21px 34px -18px #000c,0 0 0 1px #ffffff24;
  cursor:zoom-in;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.page-landing .hero-work-phone img{display:block;width:100%;height:auto;max-height:355px;object-fit:contain}
.page-landing .hero-work-phone:hover,.page-landing .hero-work-phone:focus-visible{
  transform:translateY(-7px) rotate(-2deg) scale(1.035);
  box-shadow:16px 30px 45px -20px #000e,0 0 0 2px var(--ui-accent);
}
.page-landing .hero-work-copy{display:flex;flex-direction:column;gap:13px;min-width:0}
.page-landing .hero-work-copy span{color:var(--acento-texto);font-size:12px;font-weight:760}
.page-landing .hero-work-copy strong{
  font-size:clamp(22px,2.4vw,31px);line-height:1.12;letter-spacing:-.055em;font-weight:710;
}
.page-landing .hero-work-copy small{color:var(--tinta-3);font-size:13px}
.page-landing .hero-work-link{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-top:1px solid var(--linea);text-decoration:none;
  color:var(--acento-texto);font-size:13px;font-weight:750;
  transition:background .2s,color .2s;
}
.page-landing .hero-work-link span{transition:transform .2s}
.page-landing .hero-work-link:hover{background:var(--ui-accent-soft)}
.page-landing .hero-work-link:hover span{transform:translate(3px,-3px)}
.page-landing .proof-strip{
  display:flex;align-items:baseline;gap:18px 30px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.page-landing .proof-strip strong{
  color:var(--acento-texto);font-size:11px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.page-landing .proof-strip span{color:var(--tinta-2);font-size:14px;line-height:1.8}
.page-landing .proof-strip i{color:var(--acento-texto);font-style:normal;margin:0 6px}

/* El mismo gesto tiene la misma respuesta en ambas páginas. */
.page-landing .btn:hover,.page-cv .btn:hover{transform:translateY(-3px) scale(1.015)}
.page-landing .btn:active,.page-cv .btn:active{transform:translateY(1px) scale(.97)}
.page-landing .barra nav a:not(.btn):hover,.page-cv .barra nav a:not(.btn):hover{
  color:var(--tinta);background:var(--ui-accent-soft);
}
.page-landing .tema:hover,.page-cv .tema:hover{transform:rotate(18deg)}
.page-landing .tema:active,.page-cv .tema:active{transform:scale(.9)}
.page-landing .svc,.page-landing .trabajo,.page-landing .demo,.page-landing .pregunta{
  border-radius:17px;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .3s;
}
.page-landing .svc:hover,.page-landing .trabajo:hover,.page-landing .demo:hover,.page-landing .pregunta:hover{
  transform:translateY(-4px);border-color:var(--ui-line);
  box-shadow:0 26px 48px -34px #000b;
}
.page-landing .trabajo{background:var(--vidrio-2)}
.page-landing .demo:hover .demo-preview img{transform:scale(1.06)}
.page-landing .vista .marco{
  cursor:zoom-in;outline-offset:6px;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s;
}
.page-landing .vista:hover figcaption strong,.page-landing .vista:focus-within figcaption strong{
  color:var(--acento-texto);
}
.page-landing .vista .marco:hover,.page-landing .vista .marco:focus-visible{
  transform:translateY(-8px) scale(1.025);
  box-shadow:0 32px 54px -24px #000e,0 0 0 2px var(--ui-line);
}
.page-landing .vista .marco:active{transform:translateY(-2px) scale(.985)}
.page-landing .vista .pantalla img{transition:filter .25s}
.page-landing .vista .marco:hover img{filter:brightness(1.06)}
.zoom-hint{
  position:absolute;right:14px;bottom:15px;z-index:4;
  padding:5px 8px;border-radius:6px;background:#141210dc;color:#fff;
  font-size:10px;font-weight:750;letter-spacing:.02em;
  opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;
  pointer-events:none;
}
.zoomable:hover .zoom-hint,.zoomable:focus-visible .zoom-hint{
  opacity:1;transform:none;
}

/* El CV conserva su orden, con capturas suficientemente grandes para verse. */
.page-cv .project{border-radius:17px;transition:transform .3s,border-color .25s,box-shadow .3s}
.page-cv .project:hover{border-color:var(--ui-line);transform:translateY(-5px)}
.page-cv .project-media{
  display:grid;place-items:center;position:relative;width:100%;height:560px;
  padding:20px 18px 28px;border:0;border-bottom:1px solid var(--linea);
  background:var(--vidrio-solido);color:var(--tinta-2);cursor:zoom-in;
  overflow:hidden;isolation:isolate;
}
.page-cv .project-media::before{
  content:"";position:absolute;inset:15% 8%;z-index:-1;
  border:1px solid var(--linea);border-radius:50%;transform:scaleX(1.5);
}
.page-cv .project-media img{
  width:auto;max-width:83%;height:100%;max-height:520px;object-fit:contain;
  box-shadow:0 16px 29px -14px #0009;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.page-cv .project-media:hover img,.page-cv .project-media:focus-visible img{
  transform:translateY(-5px) scale(1.07);box-shadow:0 25px 37px -12px #000b;
}
.page-cv .project-media:active img{transform:scale(.97)}
.page-cv .project-media-hint{
  position:absolute;right:17px;bottom:13px;color:var(--acento-texto);
  font-size:11px;font-weight:760;opacity:.82;
  transition:transform .2s,opacity .2s;
}
.page-cv .project-media:hover .project-media-hint{transform:translate(2px,-2px);opacity:1}
.page-cv .project-foot a,.page-cv .project-note a{transition:color .2s,text-decoration-color .2s}
.page-cv .project-foot a:hover,.page-cv .project-note a:hover{
  color:var(--tinta);text-decoration-thickness:2px;text-underline-offset:4px;
}
.page-cv .tool-group{border-radius:17px}
.page-cv .tool{
  transition:transform .24s cubic-bezier(.2,.8,.2,1),background .24s,border-color .24s;
}
.page-cv .tool img{transition:transform .26s cubic-bezier(.2,.8,.2,1),filter .26s}
.page-cv .tool:hover{
  transform:translateY(-3px);background:var(--ui-accent-soft);border-color:var(--ui-line);
}
.page-cv .tool:hover img{transform:scale(1.18) rotate(-3deg);filter:saturate(1.15)}
.page-cv .language{transition:transform .24s,border-color .24s,background .24s}
.page-cv .language img{transition:transform .24s}
.page-cv .language:hover{transform:translateY(-3px);border-color:var(--ui-line);background:var(--ui-accent-soft)}
.page-cv .language:hover img{transform:scale(1.12)}
.page-cv .artstation:hover img{transform:scale(1.08)}
.page-cv .artstation img{transition:transform .25s}
.page-cv .format-buttons button{transition:background .2s,color .2s,transform .2s}
.page-cv .format-buttons button:hover{transform:translateY(-2px);color:var(--tinta)}
.page-cv .format-buttons button[aria-pressed=true]:hover{color:#140f08}
.page-cv .barra,.page-landing .barra{
  transition:transform .26s ease,opacity .26s ease,background .2s;
}
.page-cv .barra.is-hidden,.page-landing .barra.is-hidden{
  transform:translateY(calc(-100% - 35px));opacity:0;pointer-events:none;
}

/* Visor de capturas: la imagen mantiene su proporción y tiene salida clara. */
.shot-dialog{
  max-width:min(94vw,930px);max-height:94dvh;width:max-content;
  margin:auto;padding:0;border:1px solid var(--sup-borde);border-radius:16px;
  background:var(--vidrio-solido);color:var(--tinta);box-shadow:0 35px 90px #000c;
}
.shot-dialog::backdrop{background:#050403d9;backdrop-filter:blur(9px)}
.shot-dialog-inner{display:flex;flex-direction:column;max-height:94dvh}
.shot-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 16px;border-bottom:1px solid var(--linea);
}
.shot-dialog-title{font-size:14px;font-weight:750}
.shot-dialog-close{
  min-width:38px;min-height:38px;border-radius:50%;border:1px solid var(--sup-borde);
  background:var(--sup-1);color:var(--tinta);font-size:24px;line-height:1;cursor:pointer;
  transition:background .2s,transform .2s;
}
.shot-dialog-close:hover{background:var(--ui-accent-soft);transform:rotate(90deg)}
.shot-dialog-image{display:block;min-width:0;max-width:100%;max-height:calc(94dvh - 114px);height:auto;object-fit:contain;margin:auto}
.shot-dialog-foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px 16px;border-top:1px solid var(--linea);
  color:var(--tinta-3);font-size:12px;
}
.shot-dialog-foot a{color:var(--acento-texto);font-weight:750;text-decoration:none}
.shot-dialog-foot a:hover{text-decoration:underline}
@media(max-width:900px){
  .page-landing .hero{grid-template-columns:1fr;min-height:0;gap:34px}
  .page-landing .hero h1{max-width:13ch}
  .page-landing .hero-work{max-width:650px;width:100%;max-height:460px}
}
@media(max-width:620px){
  .page-landing .hero{padding-block:52px 30px}
  .page-landing .hero h1{font-size:clamp(49px,11vw,65px)}
  .page-landing .hero-work{max-height:none}
  .page-landing .hero-work-body{grid-template-columns:minmax(118px,.8fr) minmax(0,1fr);gap:15px;padding:20px 17px}
  .page-landing .hero-work-phone{width:128px;max-height:285px}
  .page-landing .hero-work-phone img{max-height:275px}
  .page-landing .hero-work-copy strong{font-size:21px}
  .page-landing .proof-strip{padding:17px 0}
  .page-cv .project-media{height:auto;min-height:0;padding:22px 12px 35px}
  .page-cv .project-media img{display:block;width:min(80%,340px);max-width:none;height:auto;max-height:none}
  .shot-dialog{max-width:96vw}
}
@media(max-width:370px){
  .page-landing .hero-work-body{grid-template-columns:1fr}
  .page-landing .hero-work-phone{width:140px}
}
@media(prefers-reduced-motion:reduce){
  .page-cv .barra,.page-landing .barra,.page-cv .tool,.page-cv .tool img,
  .page-cv .project-media img,.page-landing .vista .marco,
  .page-landing .hero-work-phone{transition:none!important}
}
@media(max-width:620px){.page-landing .chat-abrir{width:52px;min-width:52px;min-height:52px;padding:0;justify-content:center;font-size:0;border-radius:50%}.page-landing .chat-abrir svg{width:21px;height:21px}}

/* Un solo acento en los titulares; el color deja de competir con el trabajo. */
.page-landing .hero .grad,.page-cv .hero .grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--acento-texto)}
.page-landing .hero .grad,.page-cv .hero .grad{-webkit-text-fill-color:var(--acento-texto)}
.page-landing .cabecera .grad,.page-cv .section-head .grad{-webkit-text-fill-color:var(--acento-texto)}

/* El fondo de la portada usa las mismas capas discretas que el CV. */
.page-landing{isolation:isolate}
.page-landing .ambiente{inset:0;z-index:0;opacity:1}
.page-landing .ambiente i{
  position:absolute;display:block;width:48vw;height:48vw;border-radius:50%;
  filter:blur(85px);opacity:.22;animation:deriva 18s ease-in-out infinite alternate;
}
.page-landing .ambiente i:nth-child(1){left:-23vw;top:10vh;right:auto;bottom:auto;background:#b65c27;animation-delay:0s}
.page-landing .ambiente i:nth-child(2){right:-22vw;top:0;left:auto;bottom:auto;background:#a63b70;animation-delay:-7s}
.page-landing .ambiente i:nth-child(3){left:30vw;bottom:-35vw;top:auto;right:auto;background:#a3691b;animation-delay:-12s}
.page-landing .grano{
  z-index:0;opacity:.09;background-image:radial-gradient(#fff .55px,transparent .8px);
  background-size:4px 4px;mix-blend-mode:overlay;
}
.page-landing main,.page-landing footer{position:relative;z-index:1}
@keyframes deriva{to{transform:translate(9%,8%) scale(1.16)}}
@media(prefers-reduced-motion:reduce){.page-landing .ambiente i{animation:none}}