/* Good Vibes Fitness Gym — boceto de Backio. Estilo de referencia: referencias/estilos/ayocin-crema.md
   Crema y espresso con bandas de sol y durazno, tipografía monumental en Manrope 500, números en Azeret Mono,
   tarjetas planas sin sombra y botones en pastilla con la flecha en un bolsillo a la derecha.
   El único color fuerte es el frambuesa del logo de Good Vibes (solo en botones de acción y detalles chicos). */
:root {
  --crema: #fcf6ec;
  --espresso: #2e2521;
  --espresso-2: #2c2722;
  --borde: #d3ccc3;
  --piedra: #cec1b2;
  --arena: #f4e8d7;
  --sol: #fdf0c7;
  --durazno: #fdc6b3;
  --frambuesa: #b5254a;
  --vida-acento: #2e2521;
  --vida-radio: 10px;
  --ancho: 1240px;
  --mono: "Azeret Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--crema); color: var(--espresso);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, blockquote { margin: 0; }
main { overflow-x: clip; }

/* ---------- Botones en pastilla con bolsillo para la flecha ---------- */
.pill {
  position: relative; display: inline-flex; align-items: center;
  border-radius: 20px; padding: 13px 60px 13px 22px;
  font: 500 14px/1 Manrope, system-ui, sans-serif; text-decoration: none; cursor: pointer;
  border: 1px solid currentColor; transition: background .3s ease, color .3s ease;
}
.pill__flecha {
  position: absolute; right: 6px; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  transition: transform .3s ease;
}
.pill:hover .pill__flecha { transform: translateX(3px); }
.pill--fuerte { background: var(--frambuesa); border-color: var(--frambuesa); color: var(--crema); }
.pill--fuerte .pill__flecha { background: var(--crema); color: var(--frambuesa); }
.pill--fuerte:hover { background: #9c1d3e; }
.pill--clara { background: var(--crema); border-color: var(--crema); color: var(--espresso); }
.pill--clara .pill__flecha { background: var(--espresso); color: var(--crema); }
.pill--oscura { background: var(--espresso); border-color: var(--crema); color: var(--crema); }
.pill--oscura .pill__flecha { background: var(--crema); color: var(--espresso); }
.pill--chica { padding: 9px 46px 9px 16px; font-size: 13px; }
.pill--chica .pill__flecha { width: 24px; height: 24px; margin-top: -12px; font-size: 12px; }
.pill--ancha { width: 100%; justify-content: center; }
.pill:focus-visible, .pestana:focus-visible, .dia:focus-visible, .segmento__op:focus-visible { outline: 2px solid var(--frambuesa); outline-offset: 3px; }

/* ---------- Cabecera transparente sobre la portada ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 30; height: 72px; padding: 0 28px;
  display: flex; align-items: center; gap: 28px; color: var(--crema);
  border-bottom: 1px solid rgba(252, 246, 236, .18);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.cabecera.solida { background: rgba(252, 246, 236, .9); color: var(--espresso); border-color: var(--borde); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.logo { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 2px; text-decoration: none; line-height: .9; }
.logo__good { font-family: Yellowtail, cursive; font-size: 28px; }
.logo__vibes { font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--frambuesa); }
.cabecera:not(.solida) .logo__vibes { color: #ff8fab; }
.logo__gym { grid-column: 1 / -1; font-size: 9px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; margin-top: 2px; }
.cabecera__nav { margin-left: auto; display: flex; gap: 26px; }
.cabecera__nav a { font-size: 14px; font-weight: 500; text-decoration: none; opacity: .9; }
.cabecera__nav a:hover { text-decoration: underline; }

/* ---------- Portada ---------- */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 920px); display: flex; flex-direction: column; justify-content: space-between; padding: 130px 28px 18px; color: var(--crema); overflow: hidden; background: var(--piedra); }
.hero__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(266deg, rgba(46, 37, 33, .25) 30%, rgba(46, 37, 33, .62)); }
.hero__frase { font-size: clamp(30px, 4.2vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; max-width: 640px; }
.hero__botones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__datos { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hero__datos li { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(252, 246, 236, .4); font-size: 12px; }
.hero__titulo { font-size: clamp(76px, 18.6vw, 270px); font-weight: 500; line-height: .8; letter-spacing: -0.045em; margin: 0 -0.04em; white-space: nowrap; }

/* ---------- Cinta que corre ---------- */
.cinta { background: var(--espresso); color: var(--crema); overflow: hidden; padding: 22px 0; }
.cinta__pista { display: flex; width: max-content; gap: 34px; align-items: center; font-size: clamp(30px, 4vw, 54px); font-weight: 500; letter-spacing: -0.02em; }
.cinta__pista i { font-style: normal; color: #ff8fab; font-size: .5em; }
.js .cinta__pista { animation: cinta 32s linear infinite; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Bandas ---------- */
.banda { padding: 110px 28px; }
.banda > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.banda--sol { background: var(--sol); }
.banda--oscura { background: var(--espresso); color: var(--crema); }
.banda--durazno { background: var(--durazno); }
.banda--arena { background: var(--arena); }
.etiqueta { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--frambuesa); }
.etiqueta--clara { color: var(--crema); }
.etiqueta--clara::before { background: #ff8fab; }
.titulo { font-size: clamp(34px, 5vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; max-width: 820px; }
.titulo--claro { color: var(--crema); }
.bajada { margin-top: 18px; font-size: 16px; line-height: 1.5; max-width: 480px; }
.cabeza { margin-bottom: 44px; }
.cabeza--fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* ---------- Número grande ---------- */
.numero { display: grid; grid-template-columns: auto 1fr; gap: 60px; align-items: center; }
.numero__cifra { font-family: var(--mono); font-size: clamp(120px, 17vw, 230px); font-weight: 500; line-height: .85; letter-spacing: -0.08em; }
.numero__mas { font-family: Manrope, sans-serif; letter-spacing: 0; margin-right: .04em; color: var(--frambuesa); }
.cita { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--espresso); max-width: 560px; }
.cita p { font-size: 18px; line-height: 1.4; }
.cita footer { margin-top: 10px; font-size: 12px; opacity: .7; }

/* ---------- Clases ---------- */
.pestanas { display: flex; flex-wrap: wrap; margin-bottom: 24px; }
.pestana { background: transparent; color: var(--crema); border: 1px solid rgba(252, 246, 236, .18); margin: 0 -1px -1px 0; padding: 12px 22px; font: 400 14px/1.4 Manrope, system-ui, sans-serif; cursor: pointer; transition: background .3s ease, color .3s ease; }

.pestana:hover { background: rgba(252, 246, 236, .08); }
.pestana.activa { background: var(--crema); color: var(--espresso); }
.clase { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; background: var(--espresso-2); border-radius: 10px; overflow: hidden; }
.clase img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: opacity .35s ease; }
.clase img.cambiando { opacity: 0; }
.clase__info { padding: 40px 36px; display: flex; flex-direction: column; gap: 18px; justify-content: flex-end; }
.clase__info h3 { font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.clase__info p { font-size: 15px; line-height: 1.55; color: rgba(252, 246, 236, .8); }
.clase__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid rgba(252, 246, 236, .18); padding-top: 18px; }
.clase__datos dt { font-size: 12px; opacity: .6; }
.clase__datos dd { margin-top: 4px; font-size: 15px; font-weight: 500; }

/* ---------- Horarios ---------- */
.dias { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.dia { border: 1px solid var(--espresso); background: transparent; color: var(--espresso); border-radius: 9999px; padding: 10px 18px; font: 500 14px/1 Manrope, system-ui, sans-serif; cursor: pointer; transition: background .25s ease, color .25s ease; }
.dia.activo { background: var(--espresso); color: var(--crema); }
.dia small { font-size: 11px; opacity: .65; margin-left: 6px; }
.grilla { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.grilla li { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--borde); animation: fila .45s ease both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes fila { from { opacity: 0; transform: translateY(8px); } }
.grilla__hora { font-family: var(--mono); font-size: 26px; letter-spacing: -0.04em; }
.grilla__clase { font-size: 18px; font-weight: 500; }
.grilla__clase small { display: block; font-size: 13px; font-weight: 400; opacity: .7; margin-top: 2px; }
.grilla__cupo { font-size: 12px; padding: 6px 12px; border-radius: 9999px; background: var(--arena); }
.grilla__vacio { padding: 26px 0; font-size: 16px; }
.aclaracion { margin-top: 18px; font-size: 12px; opacity: .65; }

/* ---------- Planes ---------- */
.planes { display: grid; grid-template-columns: 1fr 460px; gap: 60px; align-items: center; }
.armador { background: var(--crema); border-radius: 10px; padding: 30px; }
.armador__paso { font-size: 12px; font-weight: 500; margin: 0 0 10px; }
.armador__paso + .segmento { margin-bottom: 24px; }
.segmento { display: flex; border: 1px solid var(--espresso); border-radius: 9999px; padding: 3px; gap: 3px; }
.segmento__op { flex: 1; border: 0; background: transparent; color: var(--espresso); border-radius: 9999px; padding: 11px 8px; font: 500 14px/1 Manrope, system-ui, sans-serif; cursor: pointer; transition: background .25s ease, color .25s ease; }
.segmento__op.activo { background: var(--espresso); color: var(--crema); }
.armador__precio { display: flex; align-items: baseline; gap: 10px; padding: 18px 0 24px; border-top: 1px solid var(--borde); }
.armador__monto { font-family: var(--mono); font-size: clamp(48px, 6vw, 72px); letter-spacing: -0.06em; line-height: 1; }
.armador__por { font-size: 14px; opacity: .7; }

/* ---------- Pilates ---------- */
.pilates { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pilates__video { border-radius: 10px; overflow: hidden; background: var(--piedra); }
.pilates__video video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.puntos { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--espresso); }
.puntos li { padding: 14px 0; border-bottom: 1px solid var(--borde); font-size: 18px; font-weight: 500; }

/* ---------- Equipo ---------- */
.equipo { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.persona { background: var(--arena); border-radius: 10px; padding: 22px 20px 24px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; transition: background .3s ease; }
.persona:hover { background: var(--sol); }
.persona__inicial { width: 56px; height: 56px; border-radius: 50%; background: var(--espresso); color: var(--crema); display: grid; place-items: center; font-family: var(--mono); font-size: 22px; margin-bottom: auto; }
.persona h3 { font-size: 18px; font-weight: 500; line-height: 1.15; }
.persona p { font-size: 13px; opacity: .7; }

/* ---------- Frase grande ---------- */
.frase { background: var(--espresso); color: var(--crema); padding: 130px 28px; text-align: center; }
.frase__texto { max-width: 1100px; margin: 0 auto; font-size: clamp(36px, 6.2vw, 86px); font-weight: 500; line-height: .98; letter-spacing: -0.035em; }
.frase__firma { margin-top: 26px; font-size: 13px; opacity: .65; }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: stretch; }
.contacto__lista { list-style: none; margin: 30px 0 30px; padding: 0; border-top: 1px solid var(--espresso); }
.contacto__lista li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--borde); font-size: 16px; }
.contacto__lista span { font-size: 12px; opacity: .65; padding-top: 3px; }
.contacto__lista a { text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.contacto__lista a:hover { text-decoration: underline; }
.mapa { width: 100%; min-height: 420px; border: 0; border-radius: 10px; filter: sepia(.25) saturate(.85); }

/* ---------- Pie ---------- */
.pie { background: var(--espresso); color: var(--crema); padding: 40px 28px 26px; overflow: hidden; }
.pie__marca { font-size: clamp(64px, 17vw, 250px); font-weight: 500; line-height: .8; letter-spacing: -0.045em; white-space: nowrap; padding-bottom: .18em; color: rgba(252, 246, 236, .12); }
.pie__fila { margin-top: 26px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12px; opacity: .75; }

/* ---------- WhatsApp flotante ---------- */
.flotante { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 56px; height: 56px; border-radius: 50%; background: var(--frambuesa); display: grid; place-items: center; transition: transform .25s ease; }
.flotante:hover { transform: scale(1.08); }
.flotante svg { width: 28px; height: 28px; fill: var(--crema); }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .cabecera { padding: 0 16px; gap: 12px; height: 64px; }
  .cabecera__nav { display: none; }
  .cabecera .pill { margin-left: auto; }
  .hero { padding: 110px 18px 14px; }
  .hero__datos { grid-template-columns: 1fr; gap: 0; }
  .hero__datos li { padding: 8px 0; }
  .banda { padding: 80px 18px; }
  .numero { grid-template-columns: 1fr; gap: 20px; }
  .clase, .planes, .pilates, .contacto { grid-template-columns: 1fr; gap: 30px; }
  .clase { gap: 0; }
  .clase__info { padding: 26px 22px; }
  .pestanas { width: 100%; }
  .pestana { flex: 1 1 50%; }
  .equipo { grid-template-columns: repeat(2, 1fr); }
  .persona { min-height: 190px; }
  .grilla li { grid-template-columns: 74px 1fr; }
  .grilla__hora { font-size: 20px; }
  .grilla__cupo { grid-column: 2; justify-self: start; }
  .contacto__lista li { grid-template-columns: 1fr; gap: 2px; }
  .mapa { min-height: 300px; }
  .frase { padding: 90px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grilla li { animation: none; }
}