/* ============================================================
   SMART DEVELOPMENT — Shalom Orange Edition
   Sección aislada: todo va prefijado con .sd- / #smart-dev
   ============================================================ */

#smart-dev{
  --sd-brand:#FB923C;
  --sd-brand-rgb: 251,146,60;
  --sd-paper:#ffffff;
  --sd-ease:cubic-bezier(.16,1,.3,1);
  display:grid;
  place-items:center;
  background:#f0f0f0;
  padding:0;
  font-family:var(--font-sans);
  overflow-x:hidden;
}
#smart-dev *{box-sizing:border-box}

.sd-hero{
  position:relative;
  width:min(1536px,100vw);
  aspect-ratio:1536/868;
  overflow:hidden;
  background:var(--sd-paper);
  border-radius:18px;
  border:1px solid rgba(var(--sd-brand-rgb),.18);
  isolation:isolate;
}

/* ---------- LARGE BACKGROUND TYPE ---------- */
.sd-marquee{
  position:absolute;
  left:-10%;
  top:48%;
  width:160%;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
  opacity:.075;
  transform:translateY(-50%);
  white-space:nowrap;
}
.sd-marquee-track{
  display:inline-flex;
  gap:70px;
  width:max-content;
  font-size:clamp(82px,10.6vw,164px);
  line-height:.9;
  font-weight:400;
  letter-spacing:-.055em;
  color:var(--sd-brand);
  animation:sd-marquee 18s linear infinite;
  will-change:transform;
}
@keyframes sd-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-31%)}
}

/* ---------- CURVED ORBIT LINES ---------- */
.sd-orbits{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.sd-orbits path{
  fill:none;
  stroke:rgba(var(--sd-brand-rgb),.18);
  stroke-width:1.2;
}

/* ---------- HEADLINE ---------- */
.sd-headline{
  position:absolute;
  left:3.1%;
  top:4.8%;
  z-index:5;
  color:var(--sd-brand);
  letter-spacing:-.055em;
  user-select:none;
  margin:0;
  padding:0;
  background:none;
}
.sd-headline .sd-row1,
.sd-headline .sd-row2{
  display:block;
  font-weight:350;
  line-height:.95;
  opacity:0;
  transform:translateY(42px);
  filter:blur(8px);
  animation:sd-titleIn 1.25s var(--sd-ease) forwards;
}
.sd-headline .sd-row1{
  font-size:clamp(57px,7.5vw,113px);
  animation-delay:.08s;
}
.sd-headline .sd-row2{
  margin-top:22px;
  font-size:clamp(62px,7.25vw,111px);
  animation-delay:.22s;
}
@keyframes sd-titleIn{
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ---------- NAV ---------- */
.sd-nav{
  position:absolute;
  right:3.3%;
  top:4.7%;
  z-index:8;
  display:flex;
  align-items:center;
  gap:16px;
}
.sd-nav button{
  font-family:inherit;
  cursor:pointer;
  border-radius:999px;
  transition:.25s ease;
  margin:0;
}
.sd-client{
  border:0;
  background:var(--sd-brand);
  color:#fff;
  height:46px;
  padding:0 23px;
  font-size:16px;
  font-weight:600;
  box-shadow:0 8px 26px rgba(var(--sd-brand-rgb),.20);
}
.sd-client:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(var(--sd-brand-rgb),.26)}

.sd-asterisk{
  position:absolute;
  top:8.8%;
  width:54px;
  height:54px;
  z-index:2;
  opacity:.34;
  transform:rotate(18deg);
}
.sd-asterisk::before,
.sd-asterisk::after{
  content:"";
  position:absolute;
  left:24px;
  top:-2px;
  width:7px;
  height:58px;
  border-radius:8px;
  background:var(--sd-brand);
}
.sd-asterisk::before{transform:rotate(45deg)}
.sd-asterisk::after{transform:rotate(-45deg)}
.sd-asterisk.sd-a{right:7.7%}
.sd-asterisk.sd-b{right:2.6%}

/* ---------- PHONE GROUP ---------- */
.sd-phone-stage{
  position:absolute;
  left:48.8%;
  top:55%;
  width:560px;
  height:640px;
  transform:translate(-50%,-50%);
  z-index:6;
  perspective:1400px;
}

/* Entrada ligada al scroll: el grupo entra desplazado hacia arriba y vuelve
   a su posición conforme bajas, no de golpe; al llegar abajo se queda quieto.
   El recorrido lo calcula smart-dev.js en cada frame de scroll. No se puede
   usar `animation-timeline: view()` como en fx-native.css porque .sd-hero
   tiene overflow:hidden y pasa a ser el contenedor de scroll de referencia,
   lo que deja la línea de tiempo inactiva. Sin JS los teléfonos salen fijos
   en su sitio, que es la degradación correcta. */
.sd-phones-in{
  position:absolute;
  inset:0;
}
.sd-phones-in.sd-scrub{will-change:transform,opacity}

.sd-phones-img{
  position:absolute;
  left:50%;
  top:50%;
  width:620px;
  max-width:none;
  height:auto;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.20));
  animation:sd-floatPhones 6.2s ease-in-out infinite;
  will-change:transform;
  user-select:none;
  pointer-events:none;
}
.sd-phone-cut{display:none}
@keyframes sd-floatPhones{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 12px))}
}

/* ---------- BOTTOM TEXT ---------- */
.sd-caption{
  position:absolute;
  left:3.2%;
  bottom:8.6%;
  z-index:5;
  max-width:420px;
  color:var(--sd-brand);
  font-size:19px;
  line-height:1.02;
  font-weight:520;
  letter-spacing:-.02em;
  margin:0;
}

/* ---------- CTA ---------- */
.sd-cta{
  position:absolute;
  right:3.2%;
  bottom:8.1%;
  z-index:8;
  display:flex;
  gap:8px;
}
.sd-cta a{
  text-decoration:none;
  border-radius:999px;
  padding:9px 17px;
  font-size:15px;
  line-height:1;
  border:1.5px solid var(--sd-brand);
  transition:.25s ease;
}
.sd-cta .sd-primary{background:var(--sd-brand);color:#fff}
.sd-cta .sd-secondary{background:#fff;color:var(--sd-brand)}
.sd-cta a:hover{transform:translateY(-2px)}

/* ---------- ORBIT DOT ---------- */
#sd-motionDot{
  fill:var(--sd-brand);
  filter:drop-shadow(0 0 5px rgba(var(--sd-brand-rgb),.45));
}

/* ---------- VIDEO-LIKE ENTRY ---------- */
.sd-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
  background:#fff;
  animation:sd-reveal 1s var(--sd-ease) .1s forwards;
}
@keyframes sd-reveal{
  to{opacity:0;visibility:hidden}
}

@media (max-width:1000px){
  .sd-hero{aspect-ratio:auto;min-height:760px;border-radius:0}
  .sd-headline{left:28px;top:38px}
  .sd-headline .sd-row2{margin-top:12px}
  .sd-nav{right:24px;top:28px}
  .sd-asterisk{display:none}
  .sd-phone-stage{left:55%;top:55%;transform:translate(-50%,-50%) scale(.83)}
  .sd-caption{left:28px;bottom:42px;font-size:16px}
  .sd-cta{right:24px;bottom:38px}
}

@media (max-width:650px){
  #smart-dev{background:#fff}
  .sd-hero{height:100vh;height:100svh;min-height:540px;max-height:none}
  .sd-headline{left:22px;top:28px}
  .sd-headline .sd-row1{font-size:clamp(40px,11.5vw,49px)}
  .sd-headline .sd-row2{margin-top:8px;font-size:clamp(39px,11vw,47px)}
  .sd-client{display:none}
  /* En movil se conserva el compuesto original completo: solo se escala
     para caber entre el caption y los botones, sin recortes ni clip-path. */
  .sd-phone-stage{inset:0;left:0;top:0;width:100%;height:100%;transform:none;perspective:none}
  .sd-phones-img{
    left:50%;
    top:57%;
    width:min(92%,420px);
    filter:drop-shadow(0 18px 28px rgba(45,55,72,.18));
  }
  .sd-phone-cut{display:none}
  .sd-caption{left:22px;top:clamp(132px,19svh,158px);bottom:auto;max-width:310px;font-size:15px;line-height:1.08}
  .sd-cta{left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.68fr)}
  .sd-cta a{display:flex;align-items:center;justify-content:center;padding-inline:10px;font-size:14px;white-space:nowrap}
  .sd-marquee{top:78%;opacity:.055}
}

@media (max-width:360px){
  .sd-headline{left:18px;top:20px}
  .sd-headline .sd-row1{font-size:34px}
  .sd-headline .sd-row2{font-size:33px}
  .sd-caption{left:18px;top:116px;bottom:auto;max-width:270px;font-size:13px}
  .sd-phones-img{top:55%;width:94%}
  .sd-cta{left:16px;right:16px;bottom:12px}
  .sd-cta a{font-size:12.5px;padding-inline:7px}
}

@media (prefers-reduced-motion:reduce){
  #smart-dev *,#smart-dev *::before,#smart-dev *::after{animation:none!important}
  .sd-headline .sd-row1,.sd-headline .sd-row2{opacity:1;transform:none;filter:none}
  .sd-hero::after{display:none}
}