/* ========================================================================== 
   TITAYO — COMPONENTES
   --------------------------------------------------------------------------
   Tipografía, botones, grilla de servicios y elementos UI reutilizables.
   ========================================================================== */

/* ---------- Textos de escena ---------- */
.scene-layer{visibility:hidden;opacity:0;pointer-events:none}
.scene-layer.is-active{visibility:visible;will-change:opacity,translate}

.scene-copy{
  position:absolute;
  left:var(--page-pad);
  right:var(--page-pad);
  top:50%;
  transform:translateY(-50%);
  width:min(760px,calc(100vw - (var(--page-pad) * 2)));
  max-width:760px;
  opacity:var(--copy-opacity,1);
}
.scene-copy a{pointer-events:auto}
.scene-copy--right{left:auto;text-align:left}
.scene-copy--center{left:50%;right:auto;transform:translate(-50%,-50%);text-align:center;width:min(900px,calc(100vw - (var(--page-pad) * 2)));max-width:none}
.scene-copy--contact{width:min(900px,calc(100vw - (var(--page-pad) * 2)));max-width:900px}
.scene-copy--hero{top:auto;bottom:12vh;transform:none;width:min(1000px,calc(100vw - (var(--page-pad) * 2)));max-width:1000px}

.eyebrow{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.22em;color:#c5c5c1;margin:0 0 clamp(12px,1.7vh,18px);text-transform:uppercase}
h1,h2{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:-.025em;line-height:.9;margin:0;text-wrap:balance;color:var(--color-text)}
h1{font-size:var(--title-hero)}
h2{font-size:var(--title-section)}
h1 em,h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75)}
.lead,.scene-copy>p:not(.eyebrow){max-width:590px;color:var(--color-text-muted);font-size:var(--body-size);line-height:1.6;margin:clamp(18px,2.4vh,26px) 0 0}
.scene-copy--center>p:not(.eyebrow){margin-left:auto;margin-right:auto}

/* ---------- Botones ---------- */
/* .btn es una utilidad liviana; .button aplica la identidad TITAYO. */
.button{
  display:inline-flex;
  align-items:center;
  gap:35px;
  margin-top:30px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:0;
  padding:16px 18px 15px;
  font-family:var(--font-ui);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  line-height:1;
  color:var(--color-text);
  background:rgba(255,255,255,.02);
  transition:background .2s,color .2s,border-color .2s;
}
.button:hover{background:#fff;color:#050505;border-color:#fff}
.button--light{background:#f2f1ed;color:#080808;border-color:#f2f1ed}
.button--light:hover{background:transparent;color:#fff}
.button.button--whatsapp{justify-content:center;gap:11px}
.button__whatsapp-icon{width:21px;height:21px;flex:0 0 21px;display:block;color:currentColor}
.button--whatsapp>span{display:block;line-height:1.1}

/* ---------- Lista de servicios ---------- */
.service-grid{
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(20px,3vh,30px) 0 0;
  border-top:1px solid var(--color-line);
  border-left:1px solid var(--color-line);
}
.service-grid li{
  position:relative;
  min-height:46px;
  display:flex;
  align-items:center;
  padding:14px 16px;
  border-right:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  font-size:10px;
  font-weight:600;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.13em;
  background:rgba(255,255,255,.02);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;
}
.service-grid li.is-current{color:#080808;background:#f1f0ec;border-color:rgba(255,255,255,.85)}
.service-grid.has-current li:not(.is-current){opacity:.48}

/* ---------- Indicador "scroll para entrar" ---------- */
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:clamp(22px,4vh,42px);
  transform:translate3d(-50%,0,0);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:9px;
  font-weight:500;
  line-height:1;
  letter-spacing:.19em;
  color:#aaa;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  opacity:var(--scroll-cue-opacity,0);
  visibility:hidden;
  transition:opacity .18s linear;
  z-index:5;
}
.scroll-cue.is-visible{visibility:visible;will-change:opacity}
.scroll-cue span{position:relative;display:block;width:1px;height:38px;background:linear-gradient(to bottom,#aaa,rgba(170,170,170,.22));transform-origin:top center}
.scroll-cue.is-visible span{animation:scrollCueDown 1.55s ease-in-out infinite;will-change:transform,opacity}
.scroll-cue span::after{content:"";position:absolute;left:50%;bottom:0;width:6px;height:6px;border-right:1px solid #bbb;border-bottom:1px solid #bbb;transform:translate(-50%,1px) rotate(45deg)}
@keyframes scrollCueDown{0%,100%{transform:scaleY(.72);opacity:.5}50%{transform:scaleY(1);opacity:1}}


/* ---------- Fallback sin JavaScript / recuperación ante errores ---------- */
.no-js .loader,
.no-js .journey,
.no-js .scroll-cue,
.no-js .stage-media,
.no-js .services-visual,
.no-js .experience{display:none!important}
.no-js body.is-loading{overflow-x:hidden;overflow-y:auto}
.no-js .static-stage{
  position:relative;inset:auto;height:auto;min-height:100dvh;
  overflow:visible;isolation:auto;contain:none;
}
.no-js .stage-overlays{position:relative;inset:auto;padding-top:calc(var(--header-height) + 12px)}
.no-js .scene-layer{
  visibility:visible;opacity:1;pointer-events:auto;position:relative;
  left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:820px;
  transform:none!important;translate:none!important;padding:0 var(--page-pad) 64px;
}
.no-js .scene-copy--center,
.no-js .scene-copy--right,
.no-js .scene-copy--contact,
.no-js .scene-copy--hero{
  left:auto;right:auto;text-align:left;max-width:820px;
}