/* =====================================================================
   NEXOYOGA — Estructura: contenedores, cabecera, secciones y pie
   ===================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

/* --- Cabecera ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

/* Logo: el manual exige un área de protección = altura de la "x".
   Con el logo a 40px de alto, eso son ~8px libres alrededor. */
.brand {
  display: inline-flex;
  padding: 8px 0;
  flex-shrink: 0;
}
.brand img { height: 40px; width: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--turq-50); color: var(--turq-800); }
.site-nav a[aria-current="page"] { color: var(--coral-strong); }


/* El menú ocupa el espacio central; el botón de acción siempre visible a la derecha */
.site-nav { margin-left: auto; }
.site-header__cta { flex-shrink: 0; }

/* Móvil: logo + botón arriba; el menú pasa a una fila deslizable debajo (sin JavaScript) */
@media (max-width: 860px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand cta" "nav nav";
    gap: 0 var(--space-3);
    padding-top: var(--space-2);
  }
  .brand { grid-area: brand; }
  .brand img { height: 32px; }
  .site-header__cta { grid-area: cta; }
  .site-nav {
    grid-area: nav;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    /* indica que hay más opciones a la derecha */
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
}

/* --- Secciones --------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--space-7); }
.section--coral { background: var(--coral-50); }
.section--turq  { background: var(--turq-50); }
.section--white { background: var(--surface); }
.section--dark {
  background: var(--turq-900);
  color: #E3F3F4;
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark strong { color: #fff; }
.section--dark a:not(.btn) { color: var(--turq-100); }

.section__head {
  max-width: 720px;
  margin-bottom: var(--space-7);
}
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--coral-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section--dark .eyebrow { color: var(--coral-100); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--color-muted);
}

/* Rejillas responsivas sin media queries */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 280px)), 1fr));
}
.grid--2 { --grid-min: 420px; }
.grid--4 { --grid-min: 220px; }

.stack > * + * { margin-top: var(--space-4); }

/* --- Pie --------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--turq-900);
  color: #CFE6E8;
  font-size: var(--fs-sm);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

.site-footer__brand img { height: 44px; width: auto; margin-bottom: var(--space-4); }
.site-footer h2 {
  margin-bottom: var(--space-3);
  color: #fff;
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / .14);
  color: #9FC6C9;
  font-size: var(--fs-xs);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }