/* Chrome compartido: header, nav, footer, botón flotante de WhatsApp.
   Se carga en todas las páginas del sitio (silvanadesign.com). */

.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;padding:.75rem 1.75rem;border-radius:999px;text-decoration:none;transition:all .2s;}
.btn--primary{background:var(--purple,#6D28D9);color:var(--white,#fff);}
.btn--primary:hover{background:var(--purple-md,#7C3AED);}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border,#E8E4F4);}
.site-header__inner{max-width:1180px;margin:0 auto;padding:0 1.5rem;height:5.25rem;display:flex;align-items:center;gap:2rem;}
.site-logo{display:flex;align-items:center;text-decoration:none;flex:none;}
.site-logo__img{height:4.4rem;width:auto;display:block;}
.site-nav{display:flex;align-items:center;gap:1.6rem;flex:1;}
.site-nav a{font-family:var(--ff-sans,sans-serif);font-size:.82rem;font-weight:600;color:var(--body,#2D2340);text-decoration:none;transition:color .15s;white-space:nowrap;}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--purple,#6D28D9);}
.site-header__cta{flex:none;font-size:.78rem !important;padding:.6rem 1.35rem !important;}
.site-nav-toggle{display:none;flex:none;width:2.4rem;height:2.4rem;border-radius:8px;border:1px solid var(--border,#E8E4F4);background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;margin-left:auto;}
.site-nav-toggle span{display:block;width:1.1rem;height:2px;background:var(--dark,#0F0A1E);border-radius:1px;}
.site-nav .site-nav__mobile-cta{display:none;}

@media(max-width:860px){
  html,body{overflow-x:hidden;}
  .site-header__inner{gap:1rem;}
  .site-nav{position:fixed;top:5.25rem;left:0;right:0;height:calc(100vh - 5.25rem);height:calc(100dvh - 5.25rem);background:#fff;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1.5rem 1.5rem 2rem;gap:0;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;}
  .site-nav.is-open{transform:translateX(0);}
  .site-nav a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--border,#E8E4F4);font-size:.95rem;}
  .site-header__cta{display:none;}
  .site-nav .site-nav__mobile-cta{display:inline-flex;justify-content:center;margin-top:1.25rem;border-bottom:none;padding:.9rem 1.75rem;}
  .site-nav-toggle{display:flex;}
  .site-nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .site-nav-toggle.is-open span:nth-child(2){opacity:0;}
  .site-nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
}

.site-footer{background:var(--dark,#0F0A1E);padding:3.5rem 0 2rem;}
.site-footer__inner{max-width:1180px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;}
.site-footer__nav{display:flex;flex-direction:column;gap:.65rem;}
.site-footer__nav a,.site-footer__col a,.site-footer__col div{font-size:.82rem;color:rgba(255,255,255,.55);text-decoration:none;}
.site-footer__nav a:hover,.site-footer__col a:hover{color:#fff;}
.site-footer__label{font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:.85rem;}
.site-footer__col{display:flex;flex-direction:column;gap:.55rem;}
.site-footer__bottom{grid-column:1/-1;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:.75rem;color:rgba(255,255,255,.3);}
.site-footer__bottom a{color:rgba(255,255,255,.5);text-decoration:none;}
@media(max-width:700px){.site-footer__inner{grid-template-columns:1fr;gap:1.75rem;}}

.wa-float{position:fixed;bottom:1.5rem;right:1.5rem;width:3.2rem;height:3.2rem;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:40;transition:transform .15s;}
.wa-float:hover{transform:scale(1.08);}
@media(max-width:600px){.wa-float{width:2.9rem;height:2.9rem;bottom:1rem;right:1rem;}}

/* ── Animación: solo imágenes al scroll, textos siempre visibles ──────
   Basado en investigación de Nielsen Norman Group sobre animaciones al
   hacer scroll: los textos nunca se animan (estarían en blanco mientras
   el usuario lee), solo las capturas/imágenes, una sola vez, rápido. */
:root{--sal:cubic-bezier(.22,1,.36,1);}

.reveal-img{opacity:0;transform:translateY(16px);transition:opacity .35s var(--sal),transform .35s var(--sal);}
.reveal-img.is-visible{opacity:1;transform:translateY(0);}

/* Título del hero: líneas escalonadas, 60ms entre cada una, ~400ms total */
.hero-line{display:block;opacity:0;animation:heroLineIn .28s var(--sal) forwards;}
.hero-line:nth-child(1){animation-delay:0ms;}
.hero-line:nth-child(2){animation-delay:60ms;}
.hero-line:nth-child(3){animation-delay:120ms;}
.hero-line:nth-child(4){animation-delay:180ms;}
@keyframes heroLineIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* Parallax de imágenes (p.ej. Gym Para Todos) — solo desktop, tope 20px, lo aplica js/chrome.js */
.parallax-img{will-change:transform;}

@media(max-width:767px){
  .reveal-img{opacity:1!important;transform:none!important;transition:none!important;}
  .hero-line{opacity:1!important;animation:none!important;transform:none!important;}
  .parallax-img{transform:none!important;}
}
@media(prefers-reduced-motion:reduce){
  .reveal-img{opacity:1!important;transform:none!important;transition:none!important;}
  .hero-line{opacity:1!important;animation:none!important;transform:none!important;}
  .parallax-img{transform:none!important;}
}

/* tema oscuro del header — lo activa <body class="theme-dark"> en páginas con fondo oscuro (por ahora, home) */
body.theme-dark .site-header{background:rgba(15,10,30,.82);border-bottom-color:rgba(255,255,255,.08);}
body.theme-dark .site-logo__img{content:url('/images/logo-dark.svg');}
body.theme-dark .site-nav a{color:#D5CFE3;}
body.theme-dark .site-nav a:hover,body.theme-dark .site-nav a[aria-current="page"]{color:#A78BFA;}
body.theme-dark .site-nav-toggle{background:transparent;border-color:rgba(255,255,255,.18);}
body.theme-dark .site-nav-toggle span{background:#F6F3FF;}
@media(max-width:860px){
  body.theme-dark .site-nav{background:#0F0A1E;}
  body.theme-dark .site-nav a{border-bottom-color:rgba(255,255,255,.08);}
}