/* ================================
   MIBI Yoga · Estilos base compartidos
   ================================ */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body {
  background: #f5f1ea;
  color: #1f1c17;
  font-family: 'Inter', sans-serif;
}

.font-display { font-family: 'Fraunces', serif; font-feature-settings: "ss01", "ss02"; }

/* Textura sutil (grain) */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 1;
}

/* Botones */
.btn-primary {
  background: #1f1c17;
  color: #f5f1ea;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: #b8826a;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(184, 130, 106, 0.4);
}
.btn-ghost {
  border: 1px solid #1f1c17;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.btn-ghost:hover {
  background: #1f1c17;
  color: #f5f1ea;
}

/* Subrayado animado */
.link-underline {
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s cubic-bezier(.2,.8,.2,1);
}
.link-underline:hover { background-size: 100% 1px; }

/* Details / FAQ */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; cursor: pointer; }
details[open] .plus { transform: rotate(45deg); }
.plus { transition: transform .4s cubic-bezier(.2,.8,.2,1); }

/* ================================
   Menú móvil fullscreen
   ================================ */
#mobile-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s cubic-bezier(.2,.8,.2,1), visibility .45s;
}
#mobile-menu.open {
  opacity: 1;
  visibility: visible;
}
#mobile-menu .menu-link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
#mobile-menu.open .menu-link {
  opacity: 1;
  transform: translateY(0);
}
#mobile-menu.open .menu-link:nth-child(1) { transition-delay: .12s; }
#mobile-menu.open .menu-link:nth-child(2) { transition-delay: .18s; }
#mobile-menu.open .menu-link:nth-child(3) { transition-delay: .24s; }
#mobile-menu.open .menu-link:nth-child(4) { transition-delay: .30s; }
#mobile-menu.open .menu-link:nth-child(5) { transition-delay: .36s; }
#mobile-menu.open .menu-link:nth-child(6) { transition-delay: .42s; }
body.menu-open { overflow: hidden; }

/* Hamburguesa */
.hamburger { width: 24px; height: 16px; position: relative; }
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), top .4s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7px; }
.hamburger span:nth-child(3) { top: 14px; }
.hamburger.is-open span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ================================
   Floating action buttons
   ================================ */
.fab {
  position: fixed;
  bottom: 1.5rem;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s, background .35s;
}
@media (min-width: 768px) {
  .fab { bottom: 2rem; }
}

/* WhatsApp - derecha con resplandor */
.fab-whatsapp {
  right: 1.25rem;
  width: 58px;
  height: 58px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  animation: wa-glow 2.4s ease-in-out infinite;
}
.fab-whatsapp:hover {
  transform: translateY(-3px) scale(1.04);
  background: #1ebe5a;
}
@media (min-width: 768px) {
  .fab-whatsapp { right: 2rem; width: 64px; height: 64px; }
}
@keyframes wa-glow {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 10px 30px -8px rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 10px 30px -8px rgba(37, 211, 102, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 10px 30px -8px rgba(37, 211, 102, 0.45); }
}

/* Volver arriba - izquierda con fondo translúcido */
.fab-top {
  left: 1.25rem;
  width: 50px;
  height: 50px;
  background: rgba(31, 28, 23, 0.18);
  color: #1f1c17;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(31, 28, 23, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
.fab-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fab-top:hover {
  background: rgba(31, 28, 23, 0.28);
  transform: translateY(-3px);
}
@media (min-width: 768px) {
  .fab-top { left: 2rem; width: 54px; height: 54px; }
}
body.menu-open .fab { opacity: 0; pointer-events: none; }

/* ================================
   Estados iniciales para GSAP (anti-FOUC)
   Si GSAP no carga (o reduced motion), html nunca gana la clase .gsap-ready
   y los elementos se muestran normalmente.
   ================================ */
html.gsap-ready [data-hero-line],
html.gsap-ready [data-hero-eyebrow],
html.gsap-ready [data-hero-lead],
html.gsap-ready [data-hero-cta],
html.gsap-ready [data-hero-tile],
html.gsap-ready [data-reveal],
html.gsap-ready [data-reveal-child] {
  opacity: 0;
  visibility: hidden;
}
html.gsap-ready [data-hero-line] { transform: translateY(100%); }