/* Los proyectos llevan el movimiento; el mensaje permanece estable. */
.hero .client-stage { position:absolute; inset:100px 3% 100px 50%; overflow:hidden; border-radius:4px; background:#203b34; isolation:isolate; }
.client-stage { --stage-ease:cubic-bezier(.77,0,.175,1); }
.stage-orbit { position:absolute; width:650px; height:650px; border:1px solid #b8cdb52b; border-radius:50%; left:15%; top:8%; box-shadow:0 0 0 70px #b8cdb507,0 0 0 140px #b8cdb504; }
.client-scene { position:absolute; inset:0; animation:client-scene 18s var(--stage-ease) infinite; }
.scene-david { animation-delay:-9s; }
.stage-label { position:absolute; top:25px; left:28px; right:28px; display:flex; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:.12em; color:#c6d5c3; }
.stage-browser { position:absolute; top:17%; left:7%; width:91%; border:1px solid #b8cdb550; border-radius:7px; overflow:hidden; transform:perspective(1100px) rotateY(-9deg) rotate(-4deg); box-shadow:0 25px 60px #061b2350; }
.browser-chrome { height:26px; background:#eee9dd; display:flex; gap:5px; align-items:center; padding:0 10px; color:#445951; }
.browser-chrome i { width:4px;height:4px;border-radius:50%;background:#84968a; }
.browser-chrome span { margin:auto; font-size:9px; }
.stage-browser img { display:block;width:100%;height:auto; }
.stage-caption { position:absolute; bottom:35px; left:32px; color:#eee9dd; }
.stage-caption>span { display:block;font-size:11px;letter-spacing:.06em;margin-bottom:12px;color:#b8cdb5; }
.stage-caption strong { display:block;font:400 clamp(32px,3.2vw,52px)/1.04 Georgia,serif;letter-spacing:-.04em; }
.stage-caption small { display:block;font-size:12px;margin-top:14px;color:#c0cdc4; }
.stage-seal { position:absolute;right:24px;bottom:42px;font-size:8px;line-height:1.7;letter-spacing:.1em;border-top:1px solid #b8cdb560;padding-top:10px; }
.stage-phone { position:absolute;right:10%;top:14%;width:36%;height:72%;overflow:hidden;border:6px solid #142329;border-radius:26px;transform:rotate(6deg);box-shadow:0 24px 45px #061b2360; }
.stage-phone img { width:100%;height:auto;display:block; }
.stage-qr { position:absolute;left:12%;top:19%;width:110px;background:#eee9dd;padding:12px;color:#203b34;transform:rotate(-8deg);box-shadow:0 15px 35px #061b2330; }
.stage-qr img { display:block;width:100%;height:auto; }.stage-qr span { display:block;text-align:center;font-size:11px;line-height:1.35;margin-top:8px; }
@keyframes client-scene { 0%,43% {opacity:1;transform:translateY(0);visibility:visible} 49%,94% {opacity:0;transform:translateY(-22px);visibility:hidden} 95% {opacity:0;transform:translateY(22px);visibility:hidden} 100% {opacity:1;transform:translateY(0);visibility:visible} }
.motion-paused .client-scene { animation-play-state:paused; }
.client-stage:focus-within .client-scene { animation-play-state:paused; }
.client-stage a:focus-visible { outline:3px solid #eee9dd;outline-offset:4px; }
@media(max-width:800px) {
 .hero .client-stage { position:relative;inset:auto;margin:35px 6% 90px;height:510px; }
 .hero { height:auto!important; min-height:0!important;padding-bottom:45px!important; }
 .hero .hero-copy { position:relative;top:auto;left:auto;width:auto;max-width:none;margin:0 6%;padding-top:125px; }
 .hero .hero-foot { position:relative;inset:auto;margin:0 6%; }
 .hero .motion-toggle { bottom:85px;right:6%; }
 .stage-label {left:20px;right:20px;font-size:8px;}
 .stage-browser {top:19%;left:5%;width:96%;}
 .stage-caption {left:22px;bottom:30px;}.stage-caption strong {font-size:36px;}.stage-seal {right:18px;font-size:7px;bottom:35px;}
 .stage-phone {right:7%;width:40%;top:15%;height:69%;}.stage-qr {left:10%;width:85px;top:20%;padding:10px;}
 .scene-david .stage-caption strong {font-size:32px;}
 .scene-david .stage-caption small {max-width:125px;line-height:1.5;}
}
@media(prefers-reduced-motion:reduce) {
 .client-scene {animation:none;transform:none;}.scene-david {display:none;}
 .stage-browser,.stage-phone,.stage-qr {transform:none;}
}
/* Mantener la proporción del teléfono independiente de la altura del escenario. */
.hero .stage-phone {
  width: clamp(150px, 17vw, 220px);
  height: auto;
  aspect-ratio: 375 / 812;
  max-height: none;
  top: 12%;
}
@media (max-width:800px) {
  .hero .stage-phone {
    width: 142px;
    height: auto;
    aspect-ratio: 375 / 812;
    top: 17%;
    right: 7%;
  }
}
/* Un dispositivo reconocible: marco, cámara y pantalla recortada, sin deformar la carta. */
.hero .stage-phone {
  width: clamp(176px, 18vw, 232px);
  aspect-ratio: 1 / 1.88;
  height: auto;
  top: 14%;
  right: 9%;
  border: 7px solid #10191e;
  border-radius: 30px;
  background: #f5f1e6;
  box-shadow: 0 0 0 1px #a9b0a866, 0 22px 40px #061b2340;
  transform: rotate(3deg);
  box-sizing: border-box;
  padding-top: 14px;
}
.hero .stage-phone::before {
  content: ''; position: absolute; z-index: 2;
  width: 48px; height: 7px; border-radius: 8px;
  background: #10191e; top: 3px; left: calc(50% - 24px);
}
.hero .stage-phone img {
  width: 100%; height: auto; object-fit: initial;
  border-radius: 0; display: block;
}
.hero .stage-qr { top: 24%; left: 8%; width: 95px; }
@media(max-width:800px) {
 .hero .stage-phone { width: 164px; top: 15%; right: 6%; aspect-ratio: 1 / 1.88; }
 .hero .stage-qr { width: 70px; left: 5%; top: 23%; }
 .hero .scene-david .stage-caption { bottom: 26px; }
}
@media(prefers-reduced-motion:reduce) { .hero .stage-phone { transform:none; } }
/* Portada compacta: imagen y explicación forman una sola composición. */
@media(min-width:801px) {
 .hero .client-stage { bottom:auto; height:620px; max-height:calc(100% - 180px); }
 .hero .stage-browser { top:16%; }
 .hero .stage-phone { top:14%; }
 .hero .stage-caption { bottom:28px; }
 .hero .stage-seal { bottom:34px; }
}
@media(max-width:800px) {
 .hero .client-stage { height:460px; margin-bottom:80px; }
 .hero .stage-browser { top:17%; }
 .hero .stage-caption { bottom:24px; }
 .hero .stage-phone { top:14%; width:154px; }
 .hero .scene-david .stage-caption { bottom:22px; }
 .hero .scene-david .stage-caption strong { font-size:29px; }
 .hero .scene-david .stage-caption small { max-width:125px; }
 .hero .stage-seal { bottom:30px; }
}
@media(min-width:801px) {
 .hero { min-height:800px!important; height: min(900px, 100svh)!important; }
 .hero .client-stage { height:calc(100% - 190px); max-height:620px; }
}