/* ==========================================================================
   VERSA Studio · Pages styles
   Estilos específicos por sección de página. Header, footer, layouts.
   ========================================================================== */

/* ============================================================
   SITE HEADER (Web Component)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding-block: var(--space-md);
  transition: background-color var(--duration-medium) var(--ease-default),
              padding var(--duration-medium) var(--ease-default),
              border-color var(--duration-medium) var(--ease-default);
  border-bottom: 1px solid transparent;
}

.site-header[data-state="top"] {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header[data-state="scrolled"] {
  background: rgba(22, 10, 6, 0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--crema-10);
  padding-block: var(--space-sm);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-header__logo img {
  height: 28px;
  width: auto;
  transition: height var(--duration-medium) var(--ease-default);
}

.site-header[data-state="scrolled"] .site-header__logo img {
  height: 24px;
}

/* Nav desktop */
.site-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__nav {
    display: block;
  }
  .site-header__nav ul {
    display: flex;
    gap: var(--space-xl);
  }
  .site-header__nav a {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--crema);
    transition: color var(--duration-fast) var(--ease-default);
  }
  .site-header__nav a:hover,
  .site-header__nav a.is-active {
    color: var(--mostaza);
  }
}

/* Nav dropdown "Nosotros" (desktop) */
.nav-dropdown { position: relative; }

@media (min-width: 1024px) {
  .nav-dropdown__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--crema);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-default);
  }
  .nav-dropdown__btn:hover,
  .nav-dropdown__btn.is-active,
  .nav-dropdown:hover .nav-dropdown__btn { color: var(--mostaza); }

  .nav-dropdown__caret {
    font-size: 0.7em;
    transition: transform var(--duration-fast) var(--ease-default);
  }
  .nav-dropdown__btn[aria-expanded="true"] .nav-dropdown__caret,
  .nav-dropdown:hover .nav-dropdown__caret { transform: rotate(180deg); }

  .site-header__nav .nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 190px;
    padding: var(--space-md) var(--space-lg);
    background: var(--carbon);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: var(--z-overlay);
  }
  /* Puente invisible: evita que el menú se cierre al mover el ratón hacia él */
  .site-header__nav .nav-dropdown__menu::before {
    content: '';
    position: absolute;
    top: -12px; left: 0; right: 0; height: 12px;
  }
  .site-header__nav .nav-dropdown__menu[hidden] { display: none; }
  .site-header__nav .nav-dropdown__menu:not([hidden]),
  .nav-dropdown:hover .nav-dropdown__menu { display: flex; }
  .site-header__nav .nav-dropdown__menu a { white-space: nowrap; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-header__lang {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  color: var(--crema-60);
  display: none;
}

@media (min-width: 1024px) {
  .site-header__lang { display: inline; }
}

.site-header__cta {
  display: none;
  font-size: var(--fs-micro);
  padding: 0.65rem 1.5rem;
}

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
}

/* Burger */
.site-header__burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-header__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--crema);
  transition: transform var(--duration-medium) var(--ease-default),
              opacity var(--duration-medium) var(--ease-default);
}

@media (min-width: 1024px) {
  .site-header__burger { display: none; }
}

.site-header__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.site-header__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-header__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ============================================================
   MENÚ MÓVIL
   Hermano de .site-header (no hijo): ver el comentario en main.js.
   El header queda por encima, sólido, con el logo y la X visibles;
   el menú ocupa la pantalla debajo, con la lista desplazable y el
   pie (Contacte, idiomas, teléfono) siempre a la vista.
   ============================================================ */
.site-header.is-menu-open {
  background: var(--carbon-deep);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--crema-10);
}
/* Los idiomas ya están en el pie del menú. */
.site-header.is-menu-open .lang-select { visibility: hidden; }

.mobile-menu {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: calc(var(--z-sticky) - 1);
  background: var(--carbon-deep);
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h, 72px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-default),
              visibility 0s linear var(--duration-fast);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-default), visibility 0s;
}
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

.mobile-menu__nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mobile-menu__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-lg) var(--container-padding) var(--space-xl);
}

.mobile-menu__list,
.mobile-menu__list ul {
  display: flex;
  flex-direction: column;
}
.mobile-menu__list { gap: var(--space-md); }

.mobile-menu__list a {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.5vw, 1.9rem);
  line-height: 1.2;
  color: var(--crema);
  transition: color var(--duration-fast) var(--ease-default);
}
.mobile-menu__list a:hover,
.mobile-menu__list a.is-active { color: var(--mostaza); }
/* Punto que marca la página actual */
.mobile-menu__list a.is-active::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mostaza);
  transform: translateY(-50%);
}

.mm-group { margin-top: var(--space-sm); }
.mm-group__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--crema-40);
  margin-bottom: var(--space-sm);
}
.mm-group ul {
  gap: var(--space-xs);
  padding-left: var(--space-md);
  border-left: var(--border-hairline);
}
.mm-group ul a {
  font-size: clamp(1.1rem, 4.6vw, 1.35rem);
  padding-block: 6px;
}

/* Pie: siempre visible, por encima de la barra del navegador en iOS. */
.mobile-menu__foot {
  position: relative;
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md) var(--container-padding) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  border-top: var(--border-hairline);
  background: var(--carbon-deep);
}
/* Degradado que avisa de que la lista sigue si se desplaza. */
.mobile-menu__foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--space-xl);
  background: linear-gradient(to top, var(--carbon-deep), transparent);
  pointer-events: none;
}
.mobile-menu__cta { width: 100%; justify-content: center; }

.mobile-menu__langs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.mobile-menu__langs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: var(--border-hairline);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  color: var(--crema-60);
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}
.mobile-menu__langs a:hover { color: var(--crema); border-color: var(--crema-40); }
.mobile-menu__langs a[aria-current="true"] {
  background: var(--crema);
  border-color: var(--crema);
  color: var(--carbon-deep);
}

.mobile-menu__contact {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--crema-40);
}
.mobile-menu__contact a { color: var(--crema-60); }
.mobile-menu__contact a:hover { color: var(--crema); }

/* Pantallas bajas (móvil en horizontal): un pie fijo dejaría la lista en una
   franja mínima, así que todo el menú se desplaza junto. */
@media (max-height: 520px) {
  .mobile-menu__nav { overflow-y: auto; overscroll-behavior: contain; }
  .mobile-menu__scroll { flex: none; overflow: visible; padding-bottom: var(--space-md); }
  .mobile-menu__foot::before { display: none; }
}

.mobile-menu a:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* Entrada escalonada: cada .mm-anim lleva --i desde main.js.
   Al cerrar, todo sale a la vez y más rápido. */
.mm-anim {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 150ms var(--ease-default), transform 150ms var(--ease-default);
}
.mobile-menu.is-open .mm-anim {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-default) calc(80ms + var(--i, 0) * 35ms),
              transform 500ms var(--ease-default) calc(80ms + var(--i, 0) * 35ms);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu.is-open,
  .mm-anim,
  .mobile-menu.is-open .mm-anim { transition: none; transform: none; }
}

/* Spacer para que el contenido no se oculte debajo del header */
.page-content {
  padding-top: 72px;
}

@media (min-width: 1024px) {
  .page-content { padding-top: 80px; }
}

/* ============================================================
   SITE FOOTER (Web Component)
   ============================================================ */
/* En versa.ad el footer llega ya escrito en el HTML (lo añade
   tools/build-webempresa.py) para los rastreadores que no ejecutan
   JavaScript. El componente lo sustituye al cargar; hasta entonces no se
   muestra, para que no aparezca un instante sin estilos. */
versa-footer:not(:defined) { visibility: hidden; }

.site-footer {
  background: var(--carbon-deep);
  color: var(--crema);
  padding-block: var(--space-3xl) var(--space-lg);
  border-top: 1px solid var(--crema-10);
}

.site-footer .container {
  display: grid;
  gap: var(--space-2xl);
}

.site-footer__brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

/* Hijo directo a propósito: si no, esta altura caería también sobre los logos
   de partners, que llevan su propia calibración. */
.site-footer__brand > img {
  height: 36px;
  width: auto;
}

/* Marcas colaboradoras. Van al final del footer, entre las columnas y la
   línea del copyright.

   Los tres logos vienen en monocromo crema sobre un lienzo de altura común,
   con el contenido ya escalado dentro para que pesen lo mismo a la vista:
   Technogym es una caja sólida y Thomas y Phytomer son tipografía fina, así
   que a igual altura el segundo abultaba casi el doble. Por eso aquí basta
   una sola altura para los tres. */
.site-footer__partners {
  list-style: none;
  /* Sin márgenes propios: el contenedor del footer ya separa sus bloques con
     su propio gap, y añadir margen abajo descentraba los logos entre las
     columnas y la línea del copyright. */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
}

.site-footer__partners img {
  height: 34px;
  width: auto;
  opacity: 0.55;
  transition: opacity 200ms ease;
}

.site-footer__partners img:hover { opacity: 0.8; }

@media (max-width: 479px) {
  .site-footer__partners { gap: var(--space-md) var(--space-lg); }
  .site-footer__partners img { height: 28px; }
}

.site-footer__motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--crema-80);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--crema-10);
}

@media (min-width: 640px) {
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .site-footer__cols { grid-template-columns: repeat(4, 1fr); }
}

.site-footer__col h3 {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
  margin-bottom: var(--space-md);
}

.site-footer__col p,
.site-footer__col li {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--crema-60);
  margin-bottom: var(--space-sm);
}

.site-footer__col a:hover { color: var(--mostaza); }

.site-footer__newsletter {
  text-align: center;
  max-width: 920px;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.site-footer__newsletter-label {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--crema);
  margin-bottom: var(--space-sm);
}

.site-footer__newsletter p:nth-child(2) {
  color: var(--crema-60);
  margin-bottom: var(--space-xl);
  font-size: var(--fs-small);
}

.site-footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: stretch;
  width: 100%;
}

.site-footer__newsletter-form .input {
  padding: 1.1rem 1.25rem;
  font-size: var(--fs-body);
}

.site-footer__newsletter-form .btn {
  padding: 1.1rem 2rem;
}

@media (min-width: 640px) {
  .site-footer__newsletter-form {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-md);
  }
  .site-footer__newsletter-form .input {
    flex: 1;
    min-width: 0;
  }
  .site-footer__newsletter-form .btn {
    flex-shrink: 0;
  }
}

.site-footer__pattern {
  opacity: 0.2;
  display: flex;
  justify-content: center;
}

.site-footer__pattern img {
  max-width: 100%;
  height: auto;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--crema-40);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--crema-10);
}

/* Dos líneas centradas en todos los anchos: arriba los cuatro documentos y
   abajo el copyright con la configuración de cookies. No hay versión en una
   fila a propósito: el contenedor del footer se queda en 1.440px (1.312 de
   contenido) y, medido con las letras reales, la fila completa en francés
   pide 1.316; en castellano cabría con 22px de margen. Una fila que se parte
   según el idioma es justo lo que había que evitar. Los cuatro documentos caben
   en una línea desde ~890px (castellano) y ~1.005px (francés). */
.site-footer__legal li,
.site-footer__legal-meta > * { white-space: nowrap; }

/* font-size: inherit porque la regla general de <p> le daba 16px frente a
   los 12px de los enlaces: la segunda línea salía más grande que la primera. */
.site-footer__legal-meta {
  font-size: inherit;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

.site-footer__legal ul {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer__legal a:hover,
.site-footer__legal button:hover { color: var(--mostaza); }

/* "Configuració de galetes" es un botón (abre el panel, no navega), pero
   tiene que verse igual que los enlaces legales que lo rodean. */
.site-footer__legal button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

/* ============================================================
   CTA FINAL (Web Component)
   ============================================================ */
.cta-final {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-4xl);
}

@media (min-width: 1024px) {
  .cta-final { min-height: 70vh; }
}

.cta-final h2 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  margin-bottom: 0;
}

.cta-final .container { width: 100%; }

/* ============================================================
   HOME · Layouts específicos
   ============================================================ */

/* Hero del home */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  background: var(--carbon);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--carbon) 0%,
    var(--carbon-80) 30%,
    transparent 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-3xl) var(--space-2xl);
}

.hero__headline {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 14ch;
}

.hero__lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  max-width: 50ch;
  margin-top: var(--space-xl);
  opacity: 0.85;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  align-items: center;
}

/* Sección "Lo esencial" · 3 pilares */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .pillars { gap: var(--space-2xl); }
}

/* Sobre fondo crema, ajustar colores de pilares */
.bg-crema .icon-pillar__title,
.bg-crema .icon-pillar__text {
  color: var(--carbon);
}
.bg-crema .icon-pillar__text { opacity: 0.75; }

/* Sección modalidades (carrusel) */
.modalidades-wrap {
  position: relative;
  margin-top: var(--space-2xl);
}

.modalidades-carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-padding);
  padding-inline: var(--container-padding);
  padding-block: var(--space-md);
  scroll-behavior: smooth;
  /* Ocultar scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modalidades-carousel::-webkit-scrollbar { display: none; }

/* Flechas del carrusel */
.modalidades-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mostaza);
  color: var(--carbon);
  border: 0;
  cursor: pointer;
  z-index: var(--z-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: background-color var(--duration-medium) var(--ease-default),
              transform var(--duration-medium) var(--ease-default),
              opacity var(--duration-medium) var(--ease-default);
  box-shadow: var(--shadow-md);
}

.modalidades-arrow:hover {
  background: var(--caramelo);
  transform: translateY(-50%) scale(1.05);
}

.modalidades-arrow:active {
  transform: translateY(-50%) scale(0.97);
}

.modalidades-arrow--prev {
  left: var(--space-md);
}

.modalidades-arrow--next {
  right: var(--space-md);
}

@media (min-width: 1024px) {
  .modalidades-arrow {
    width: 64px;
    height: 64px;
  }
  .modalidades-arrow--prev { left: var(--space-xl); }
  .modalidades-arrow--next { right: var(--space-xl); }
}

/* En mobile, flechas más discretas */
@media (max-width: 639px) {
  .modalidades-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
  .modalidades-arrow--prev { left: var(--space-sm); }
  .modalidades-arrow--next { right: var(--space-sm); }
}

/* Sección El centro */
.centro-section {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  background: var(--carbon);
}

.centro-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.centro-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.centro-section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* El velo va de opaco abajo a semitransparente arriba, no a transparente.
     Antes moría en transparent al 70% y bastaba porque la imagen de fondo era
     oscura; con el render del hall (sept 2026), mucho más claro, el texto se
     quedaba en 1,8:1 de contraste — la mitad del mínimo accesible. El 0.55 de
     arriba lo sube por encima de 4,5:1 sin apagar la fotografía. */
  background:
    linear-gradient(to top, var(--carbon) 0%, transparent 70%),
    rgba(33, 15, 9, 0.55);
}

.centro-section__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2xl) var(--space-3xl);
  /* Ancho pedido por el equipo (sept 2026): 600px dejaba el texto en una
     columna de ~470px que se veía amontonada. 840px mantiene la línea por
     debajo de ~75 caracteres, que es el límite cómodo de lectura. */
  max-width: 840px;
}

.centro-section__address {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--mostaza);
  margin-top: var(--space-lg);
}

/* Sección Filosofía · cita Yesica */
.filosofia-quote {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .filosofia-quote {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-2xl);
  }
}

.filosofia-quote__image {
  aspect-ratio: 4/5;
  background: var(--carbon-lighter);
  overflow: hidden;
}

.filosofia-quote__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filosofia-quote__text {
  padding-inline: 0;
}

/* Sección Encuentros */
.encuentros {
  text-align: center;
  position: relative;
  padding-block: var(--space-4xl);
  min-height: 70vh;
  display: flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .encuentros { min-height: 80vh; }
}

.encuentros .container {
  width: 100%;
}

.encuentros h2 {
  margin-bottom: var(--space-md);
}

.encuentros p {
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  opacity: 0.85;
}

.encuentros .eyebrow {
  margin-bottom: var(--space-md);
}

/* Sección Pricing preview */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Headlines comunes de sección
   ============================================================ */

.section-header {
  margin-bottom: var(--space-2xl);
  max-width: 700px;
}

.section-header h2 {
  margin-bottom: var(--space-md);
}

.section-header p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  opacity: 0.8;
}

/* ============================================================
   Lista editorial alternada (modalidades hub, etc.)
   ============================================================ */

.editorial-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.editorial-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .editorial-item {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  .editorial-item:nth-child(even) .editorial-item__media {
    order: 2;
  }
}

.editorial-item__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--carbon-lighter);
}

.editorial-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-default);
}

.editorial-item:hover .editorial-item__media img {
  transform: scale(1.03);
}

.editorial-item__body h3 {
  margin-bottom: var(--space-md);
}

.editorial-item__meta {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--mostaza);
  margin-block: var(--space-md);
}

/* ============================================================
   PAGE HERO (páginas internas — más liviano que el del home)
   ============================================================ */
.page-hero {
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  background: var(--carbon);
  overflow: hidden;
  padding-block: var(--space-3xl) var(--space-2xl);
}

@media (min-width: 1024px) {
  .page-hero { min-height: 74vh; }
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* Scrim doble: vertical (base de lectura) + lateral izquierdo (donde vive el
   texto). Garantiza contraste del eyebrow/título sobre cualquier foto. */
.page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--carbon-60) 0%, var(--carbon-40) 30%, transparent 62%),
    linear-gradient(to top, var(--carbon) 0%, var(--carbon-80) 45%, var(--carbon-40) 72%, transparent 100%);
}

.page-hero__content {
  position: relative;
  z-index: 1;
  max-width: min(960px, 92%);
  padding-top: 72px;
}
.page-hero__content .lead {
  max-width: 64ch;
}

.page-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
  margin-bottom: var(--space-md);
}

.page-hero__title {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  margin-bottom: var(--space-md);
}

.page-hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--mostaza);
  margin-bottom: var(--space-xl);
  line-height: var(--lh-snug);
}

/* ============================================================
   MODALIDAD · sección de esencia (qué es + para quién)
   ============================================================ */
.modalidad-essence {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .modalidad-essence {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-3xl);
  }
}

.modalidad-essence__main p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-md);
}

.modalidad-essence__main p:last-child { margin-bottom: 0; }

.modalidad-essence__aside {
  padding: var(--space-xl);
  background: var(--carbon-lighter);
  border: var(--border-hairline);
  height: fit-content;
}

.bg-crema .modalidad-essence__aside {
  background: rgba(146, 102, 64, 0.06);
  border-color: rgba(146, 102, 64, 0.18);
}

.modalidad-essence__aside h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-md);
}

.modalidad-essence__aside p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  opacity: 0.85;
}

/* ============================================================
   SESSION GRID · 4 datos clave (duración, estructura, foco, nivel)
   ============================================================ */
.session-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .session-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .session-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Sala Versa: dos columnas de tres que se llenan de arriba abajo, para que
   los tres yogas queden juntos en la columna izquierda (y primeros en móvil,
   que es el orden del HTML). Va después de la regla de 4 columnas para
   prevalecer también en pantallas grandes. */
@media (min-width: 768px) {
  .session-grid--columnas {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }
}

.session-item {
  padding-top: var(--space-md);
  border-top: 1px solid var(--mostaza);
}

.session-item__label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
  margin-bottom: var(--space-sm);
}

.bg-crema .session-item__label {
  color: var(--marron);
}

.bg-crema .session-item {
  border-top-color: var(--marron);
}

.session-item__value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

/* ============================================================
   ESPACIO SECTION · imagen + descripción del espacio
   ============================================================ */
.espacio-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .espacio-block {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.espacio-block__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--carbon-lighter);
  /* Motivo de marca: arco superior (∩) */
  border-radius: var(--arch) var(--arch) 0 0;
}

.espacio-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.espacio-block__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.espacio-block__list li {
  display: flex;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--crema-10);
  font-size: var(--fs-body);
}

.espacio-block__list li::before {
  content: '·';
  color: var(--mostaza);
  font-weight: 700;
  flex-shrink: 0;
}

.bg-crema .espacio-block__list li {
  border-bottom-color: rgba(146, 102, 64, 0.18);
}

.bg-crema .espacio-block__list li::before {
  color: var(--marron);
}

/* ============================================================
   TARIFAS TABLE
   ============================================================ */
.tarifas-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2xl);
}

.tarifas-table thead {
  border-bottom: 1px solid var(--mostaza);
}

.tarifas-table th {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
  text-align: left;
  padding: var(--space-md);
}

.tarifas-table td {
  padding: var(--space-lg) var(--space-md);
  font-size: var(--fs-body);
  border-bottom: 1px solid var(--crema-10);
}

.tarifas-table td:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  text-align: right;
  color: var(--crema);
}

/* Precio equivalente por sesión, bajo el precio principal (bonos) */
.tarifas-table__indiv {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: normal;
  opacity: 0.55;
}

.bg-crema .tarifas-table thead { border-bottom-color: var(--marron); }
.bg-crema .tarifas-table th { color: var(--marron); }
.bg-crema .tarifas-table td { border-bottom-color: rgba(146, 102, 64, 0.18); }
.bg-crema .tarifas-table td:last-child { color: var(--carbon); }

.tarifas-note {
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  opacity: 0.65;
  font-style: italic;
}

/* ============================================================
   RELATED CARDS · 3 modalidades relacionadas
   ============================================================ */
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-medium) var(--ease-default);
}

.related-card:hover {
  transform: translateY(-4px);
}

.related-card__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--carbon-lighter);
}

.related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-default);
}

.related-card:hover .related-card__image img {
  transform: scale(1.04);
}

.related-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
}

.related-card__arrow {
  color: var(--mostaza);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
}

.related-card__arrow::after {
  content: ' →';
  transition: transform var(--duration-medium) var(--ease-default);
  display: inline-block;
}

.related-card:hover .related-card__arrow::after {
  transform: translateX(4px);
}

/* ============================================================
   FILOSOFÍA · 5 principios con íconos
   ============================================================ */
.principios {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

@media (min-width: 1024px) {
  .principios { gap: var(--space-3xl); }
}

.principio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xl);
  align-items: start;
  padding-bottom: var(--space-2xl);
  border-bottom: var(--border-hairline);
}

.principio:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.principio__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .principio { grid-template-columns: 200px 1fr; gap: var(--space-2xl); }
  .principio__icon { width: 80px; height: 80px; }
}

.principio__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.principio__body h3 {
  margin-bottom: var(--space-md);
}

.principio__body p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  opacity: 0.85;
  max-width: 60ch;
}

/* ============================================================
   FILOSOFÍA · fundadores
   ============================================================ */
.fundadores-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.fundador-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

@media (min-width: 768px) {
  .fundador-card { flex: 0 1 280px; width: auto; }
}

/* Con cuatro fichas hay que evitar el reparto 3+1, con la cuarta suelta y
   centrada debajo. Las cuatro en fila piden 4 x 280 + 3 x 64 = 1312 px, y el
   contenedor solo los da cuando la ventana llega a ~1456 px: por debajo de eso
   el ancho útil es min(1440, ventana - barra de scroll) - 128.

   El corte va en 1500 px y no en los 1456 justos a propósito. Las media
   queries miden la ventana CON la barra de scroll y el layout dispone de ella
   SIN: cuadrar al píxel deja una franja de ~15 px donde la regla ya no aplica
   pero las cuatro todavía no caben, que es exactamente el 3+1 que se colaba. */
/* En el tramo de cuatro en fila el gap baja a 48 px. Con los 64 px normales
   las cuatro piden 4 x 280 + 3 x 64 = 1312 px y el contenedor da exactamente
   1312: un empate al píxel que cualquier redondeo subpíxel rompe, tirando la
   cuarta ficha a una segunda fila. Con 48 piden 1264 y sobran 48 px. */
@media (min-width: 1500px) {
  .fundadores-grid { gap: var(--space-2xl) 48px; }
}

@media (min-width: 768px) and (max-width: 1499px) {
  .fundadores-grid {
    /* 680px: caben dos tarjetas (280 + 64 + 280 = 624) con holgura, y nunca
       tres (968). El valor exacto de 624 fallaba por redondeo y dejaba una
       sola tarjeta por fila. */
    max-width: 680px;
    margin-inline: auto;
  }
}

.fundador-card__avatar {
  aspect-ratio: 4/5;
  background: var(--carbon-lighter);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  /* Motivo de marca: retrato en nicho de arco (∩) */
  border-radius: var(--arch) var(--arch) 0 0;
}

/* Placeholder elegante mientras no hay foto: monograma (inicial) en el nicho.
   Al añadir un <img>, este lo cubre y basta con quitar el data-initial. */
.fundador-card__avatar[data-initial]::before {
  content: attr(data-initial);
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--crema-40);
}

.fundador-card__avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, var(--carbon-lighter) 0%, var(--marron) 50%, var(--carbon-lighter) 100%);
  opacity: 0.4;
}

.fundador-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.fundador-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  margin-top: var(--space-sm);
}

.fundador-card__role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--mostaza);
  margin-top: calc(var(--space-xs) * -1);
  margin-bottom: var(--space-sm);
}

.bg-crema .fundador-card__role { color: var(--terracota); }

.fundador-card__bio {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  opacity: 0.85;
}

/* ============================================================
   FILOSOFÍA · diferenciadores (4 bloques)
   ============================================================ */
.diferenciadores {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .diferenciadores { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
}

.diferenciador {
  border-top: 1px solid var(--mostaza);
  padding-top: var(--space-lg);
}

.bg-crema .diferenciador { border-top-color: var(--marron); }

.diferenciador h3 {
  margin-bottom: var(--space-md);
}

.diferenciador p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  opacity: 0.85;
}

/* ============================================================
   EL CENTRO · lista de salas
   ============================================================ */
.salas-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}

.sala-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .sala-item {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  .sala-item:nth-child(even) .sala-item__media { order: 2; }
}

.sala-item__media {
  aspect-ratio: 5/4;
  overflow: hidden;
  background: var(--carbon-lighter);
}

.sala-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-default);
}

.sala-item:hover .sala-item__media img {
  transform: scale(1.03);
}

.sala-item__meta {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--mostaza);
  margin-top: var(--space-md);
}

/* ============================================================
   UBICACIÓN · bloque mapa + dirección
   ============================================================ */
.ubicacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-2xl);
}

@media (min-width: 1024px) {
  .ubicacion { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}

.ubicacion__map {
  aspect-ratio: 4/3;
  background: var(--carbon-lighter);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mostaza);
}

.bg-crema .ubicacion__map {
  background: rgba(146, 102, 64, 0.06);
  border-color: var(--marron);
}

.ubicacion__map-placeholder {
  text-align: center;
  padding: var(--space-xl);
}

.ubicacion__map-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--mostaza);
  margin-bottom: var(--space-md);
}

.bg-crema .ubicacion__map-placeholder svg { color: var(--marron); }

.ubicacion__map-placeholder p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  opacity: 0.8;
}

.ubicacion__details h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-md);
}

.ubicacion__address {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-lg);
}

/* ============================================================
   HORARIOS · tabla compacta
   ============================================================ */
.horarios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-2xl);
  max-width: 480px;
}

.horarios__row {
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-lg);
  border-bottom: var(--border-hairline);
}

.bg-crema .horarios__row { border-bottom-color: rgba(146, 102, 64, 0.18); }

.horarios__row:last-child { border-bottom: 0; }

.horarios__day {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
}

.horarios__time {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  letter-spacing: var(--tracking-wide);
}

.horarios__row--closed .horarios__time {
  font-style: italic;
  color: var(--mostaza);
}

.bg-crema .horarios__row--closed .horarios__time { color: var(--terracota); }

/* ============================================================
   CONTACTO · layout split
   ============================================================ */
.contacto-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .contacto-layout {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-3xl);
  }
}

.contacto-direct {
  padding: var(--space-xl);
  background: var(--carbon-lighter);
  border: var(--border-hairline);
  height: fit-content;
}

.bg-crema .contacto-direct {
  background: rgba(146, 102, 64, 0.06);
  border-color: rgba(146, 102, 64, 0.18);
}

.contacto-direct h3 {
  margin-bottom: var(--space-lg);
}

.contacto-direct ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contacto-direct li {
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline);
}

.bg-crema .contacto-direct li { border-bottom-color: rgba(146, 102, 64, 0.18); }

.contacto-direct li:last-child { border-bottom: 0; }

.contacto-direct__label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
  display: block;
  margin-bottom: 4px;
}

.bg-crema .contacto-direct__label { color: var(--marron); }

.contacto-direct__value {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
}

.contacto-direct__value a:hover { color: var(--mostaza); }
.bg-crema .contacto-direct__value a:hover { color: var(--terracota); }

/* ============================================================
   EVENTOS · cards de evento
   ============================================================ */
.event-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-2xl);
}

@media (min-width: 1024px) {
  .event-featured {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-3xl);
  }
}

.event-featured__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--carbon-lighter);
}

.event-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-featured__date {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mostaza);
  border-top: 1px solid var(--mostaza);
  border-bottom: 1px solid var(--mostaza);
  padding-block: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .event-grid { grid-template-columns: repeat(3, 1fr); }
}

.event-card {
  border: var(--border-hairline);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: background-color var(--duration-medium) var(--ease-default),
              border-color var(--duration-medium) var(--ease-default);
}

.event-card:hover {
  background: rgba(234, 185, 120, 0.04);
  border-color: var(--crema-20);
}

.event-card__date {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
}

.event-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  margin-block: var(--space-xs);
}

.event-card__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  opacity: 0.85;
  flex: 1;
}

/* ============================================================
   PRECIOS · página específica
   ============================================================ */
.precios-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .precios-tiers { grid-template-columns: repeat(3, 1fr); }
  .precios-tiers--two { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
}

.tier-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--mostaza);
  margin-top: calc(var(--space-xs) * -1);
}

.bg-crema .tier-card__tagline { color: var(--terracota); }

/* Versa Premium · bloque destacado */
.premium-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .premium-feature {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-3xl);
  }
}

.premium-feature__media {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--carbon-deep);
}

.premium-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.premium-feature__price {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1;
  margin-top: var(--space-lg);
}

.premium-feature__price span {
  font-size: 0.4em;
  opacity: 0.6;
  font-style: italic;
  letter-spacing: var(--tracking-wide);
}

/* Sesiones y bonos por sala · grid de tablas */
.tarifas-salas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .tarifas-salas { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl) var(--space-3xl); }
}

.tarifas-sala__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--mostaza);
  margin-bottom: var(--space-sm);
}

.tarifas-sala__name span {
  font-size: 0.6em;
  font-style: italic;
  opacity: 0.6;
}

.bg-carbon .tarifas-sala__name { border-bottom-color: var(--mostaza); }

/* En el grid de salas, las tablas no necesitan thead ni margin-top */
.tarifas-sala .tarifas-table { margin-top: 0; }
.tarifas-sala .tarifas-table td { padding: var(--space-md); }

/* Separador visual entre bloques de precio dentro de una misma tarjeta (p. ej. Dúo: solitario / pareja) */
.tarifas-sala__subhead {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: var(--space-lg);
}
.tarifas-sala__subhead:first-of-type { margin-top: 0; }

/* Tarjeta destacada (Check-up): fondo caramelo, como en el PDF de precios */
.tarifas-sala--highlight {
  background: var(--caramelo);
  color: var(--carbon);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}
.tarifas-sala--highlight .tarifas-sala__name { border-bottom-color: var(--carbon-40); color: var(--carbon); }
.tarifas-sala--highlight .tarifas-table td { border-bottom-color: var(--carbon-40); }
.tarifas-sala--highlight .tarifas-table td:last-child { color: var(--carbon); }

/* ============================================================
   HORARIO GRID (día × hora) — reproduce los PDFs de horarios
   ============================================================ */
.horario-grid { margin-top: var(--space-2xl); }

.horario-grid__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-sm);
}

.horario-grid__inner {
  display: grid;
  grid-template-columns: minmax(64px, 84px) repeat(5, minmax(108px, 1fr));
  gap: 6px;
  min-width: 680px;
}

.horario-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-xs);
  font-size: var(--fs-micro);
  line-height: var(--lh-snug);
}

/* Columna de horas (esquina + horas): sticky para no perderse al hacer scroll horizontal */
.horario-grid__cell--corner,
.horario-grid__cell--time {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}

.horario-grid__cell--time {
  justify-content: flex-end;
  font-family: var(--font-body);
  font-weight: 400;
  opacity: 0.75;
  padding-inline-end: var(--space-md);
}

.horario-grid__cell--day {
  background: var(--carbon);
  color: var(--crema);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding-block: var(--space-md);
}

/* En sección bg-carbon el mismo --carbon se funde con el fondo: cambia a mostaza */
.bg-carbon .horario-grid__cell--day {
  background: var(--mostaza);
  color: var(--carbon);
}

.horario-grid__cell--empty {
  background: var(--crema-10);
}
.bg-crema .horario-grid__cell--empty { background: rgba(146, 102, 64, 0.08); }

/* Tipos de clase — paleta compartida entre los dos horarios (Pilates / Polivalente) */
.horario-grid__cell--grupal,
.horario-grid__cell--complet-body {
  background: var(--mostaza);
  color: var(--carbon);
}
.horario-grid__cell--duo,
.horario-grid__cell--mat {
  background: var(--marron);
  color: var(--crema);
}
.horario-grid__cell--cadillac,
.horario-grid__cell--barre {
  background: var(--crema-warm);
  color: var(--carbon);
}
.horario-grid__cell--flow {
  background: var(--durazno);
  color: var(--carbon);
}
/* Yoga no tiene tono equivalente en la paleta de marca (5 acentos tierra + 2 fondos);
   este malva es una excepción puntual, solo para esta píldora — no se añade como token global. */
.horario-grid__cell--yoga {
  background: #b98a93;
  color: var(--carbon);
}

/* Leyenda de color bajo cada grid */
.horario-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}
.horario-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  opacity: 0.85;
}
.horario-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.horario-legend__dot--grupal, .horario-legend__dot--complet-body { background: var(--mostaza); }
.horario-legend__dot--duo, .horario-legend__dot--mat { background: var(--marron); }
.horario-legend__dot--cadillac, .horario-legend__dot--barre { background: var(--crema-warm); border: 1px solid rgba(146, 102, 64, 0.3); }
.horario-legend__dot--flow { background: var(--durazno); }
.horario-legend__dot--yoga { background: #b98a93; }

.tier-card {
  border: 1px solid var(--mostaza);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  transition: background-color var(--duration-medium) var(--ease-default),
              transform var(--duration-medium) var(--ease-default);
}

.tier-card:hover {
  background: rgba(234, 185, 120, 0.04);
  transform: translateY(-2px);
}

.tier-card--featured {
  background: rgba(234, 185, 120, 0.06);
  border-width: 2px;
}

.bg-crema .tier-card { border-color: var(--marron); }
.bg-crema .tier-card:hover { background: rgba(146, 102, 64, 0.06); }
.bg-crema .tier-card--featured { background: rgba(146, 102, 64, 0.08); }

.tier-card__badge {
  position: absolute;
  top: -12px;
  right: var(--space-lg);
  background: var(--mostaza);
  color: var(--carbon);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.tier-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
}

.tier-card__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
}

.tier-card__price span {
  font-size: 0.45em;
  opacity: 0.6;
  font-style: italic;
}

.tier-card__features {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.tier-card__features li {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  padding-left: var(--space-md);
  position: relative;
}

.tier-card__features li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--mostaza);
  font-weight: 700;
}

.bg-crema .tier-card__features li::before { color: var(--marron); }

/* ============================================================
   LEGAL · páginas de texto largo
   ============================================================ */
.legal-page {
  padding-top: calc(80px + var(--space-2xl));
  padding-bottom: var(--space-4xl);
}

/* Columna centrada. .container-narrow se alinea a la izquierda a propósito
   (base.css) para que las secciones de la home cuelguen de su cabecera; en
   una página de texto largo sin nada al lado eso dejaba media pantalla vacía
   a la derecha. 900px menos el padding del sitio dejan 772px de texto a 18px:
   ~84 caracteres por línea medidos (Montserrat es ancha; a 17px y 920px salían
   91), dentro del rango cómodo de lectura de 75-85. */
.legal-page .container-narrow {
  max-width: 900px;
  margin-inline: auto;
}

/* Cabecera (etiqueta, título, fecha y, en las traducciones, la nota de
   idioma) separada del cuerpo por una línea fina. */
.legal-page__header {
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--crema-20);
}

.legal-page h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.legal-page__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
  margin-bottom: var(--space-md);
}

.legal-page__updated {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--crema-60);
}

.legal-page__body > :first-child { margin-top: 0; }

/* Más aire encima del título que debajo: cada título se lee unido a su
   propio texto y no al apartado anterior. */
.legal-page h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
  margin-block: var(--space-2xl) var(--space-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.legal-page h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
  margin-block: var(--space-xl) var(--space-sm);
}

.legal-page p,
.legal-page li {
  font-size: 1.125rem;
  line-height: var(--lh-loose);
  margin-bottom: var(--space-md);
  color: rgba(249, 235, 207, 0.9);
}

.legal-page strong { font-weight: 700; color: var(--crema); }

.legal-page ul, .legal-page ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.legal-page li { margin-bottom: var(--space-sm); }
.legal-page ul li { list-style: disc; }
.legal-page ul.legal-list--circle li { list-style: circle; }
.legal-page ol li { list-style: decimal; }
.legal-page li::marker { color: var(--mostaza); }

/* overflow-wrap: las URLs largas de la política de cookies (Google, Mozilla,
   Microsoft) no caben en 327px y empujarían la página en horizontal. */
.legal-page a {
  color: var(--mostaza);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal-page__notice {
  background: var(--carbon-lighter);
  border-left: 3px solid var(--mostaza);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--crema-80);
}

/* Tablas. .tarifas-table no sirve: alinea la última columna a la derecha con
   tipografía de precio. El contenedor desplaza en horizontal por sí mismo si
   en móvil una tabla ancha no cabe; así la página no se desborda nunca. */
.legal-table-wrap {
  overflow-x: auto;
  margin: var(--space-md) 0 var(--space-xl);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
}

.legal-table th {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
  text-align: left;
  vertical-align: bottom;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) 0;
  border-bottom: 1px solid var(--mostaza);
}

.legal-table td {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: rgba(249, 235, 207, 0.9);
  vertical-align: top;
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-bottom: 1px solid var(--crema-10);
}

.legal-table th:last-child,
.legal-table td:last-child { padding-right: 0; }

.legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  color: var(--crema);
  white-space: nowrap;
}

/* Filas de grupo de la tabla de cookies (Tècniques, Analítiques…). */
.legal-table__group th {
  padding-top: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--crema);
  border-bottom: 1px solid var(--crema-20);
}

/* Cuatro columnas no caben en un móvil sin partir cada palabra: por debajo
   de este ancho la tabla se desplaza dentro de su contenedor. */
.legal-table--cookies { min-width: 600px; }
.legal-table--cookies td:first-child { width: 22%; }
.legal-table--cookies td:last-child { width: 16%; }

.legal-page__segells {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--crema-10);
}
.legal-page__segells img { height: 104px; width: auto; }

@media (max-width: 599px) {
  .legal-page p,
  .legal-page li { font-size: 1rem; }
  .legal-page__segells img { height: 84px; }
}

/* ============================================================
   FAQ Accordion
   ============================================================ */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.faq details {
  border-bottom: 1px solid var(--crema-20);
  padding-block: var(--space-lg);
}

.bg-crema .faq details {
  border-bottom-color: rgba(146, 102, 64, 0.25);
}

.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-right: var(--space-sm);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 200;
  transition: transform var(--duration-medium) var(--ease-default);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > *:not(summary) {
  margin-top: var(--space-md);
  padding-right: var(--space-2xl);
  line-height: var(--lh-loose);
  opacity: 0.85;
}

/* ============================================================
   Wizard de contacto (portado del waitlist)
   ============================================================ */
.form-column { max-width: 680px; margin-inline: auto; }
.form-column .section-header { text-align: center; }
.wizard-wrap { max-width: 680px; margin-inline: auto; }

.wizard-progress {
  height: 2px;
  background: var(--crema-10);
  border-radius: 1px;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
}
.wizard-progress__fill {
  height: 100%;
  background: var(--caramelo);
  border-radius: 1px;
  transition: width var(--duration-medium) var(--ease-default);
}

.wizard-counter {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crema-40);
  margin-bottom: 1.25rem;
}

.form-step { opacity: 1; transition: opacity var(--duration-fast) var(--ease-default); }
.form-step[hidden] { display: none; }

.step-headline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: var(--crema);
  margin-bottom: 0.4rem;
  line-height: 1.15;
}
.step-sublabel {
  font-size: 0.82rem;
  color: var(--crema-60);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 480px) { .check-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .check-grid { grid-template-columns: repeat(4, 1fr); } }

.check-card { position: relative; }
.check-card input[type="checkbox"],
.check-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.check-card label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 10px 10px;
  border: 1px solid var(--crema-20);
  border-radius: 2px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--crema-60);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  line-height: 1.3;
}
.check-card input:checked + label {
  background: var(--caramelo);
  border-color: var(--caramelo);
  color: var(--crema);
  font-weight: 700;
}
.check-card label:hover { border-color: var(--crema-40); color: var(--crema-80); }
.check-card input:checked + label:hover { background: var(--mostaza); border-color: var(--mostaza); }
/* Focus visible por teclado: el input está oculto, así que el anillo va en la label */
.check-card input:focus-visible + label { outline: var(--focus-ring); outline-offset: 2px; }

.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-row .check-card label { padding: 12px 20px; min-height: 50px; }

.schedule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 480px) { .schedule-grid { grid-template-columns: repeat(3, 1fr); } }
.schedule-grid .check-card label { min-height: 52px; padding: 12px 14px; }

.age-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 420px) { .age-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .age-grid { grid-template-columns: repeat(6, 1fr); } }
.age-grid .check-card label { min-height: 50px; }

.days-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.days-row .check-card label { width: 100%; min-height: 48px; padding: 8px 4px; font-size: 0.78rem; font-weight: 700; }

.field-group { margin-bottom: 1.5rem; }
.field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--crema-60);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.text-input {
  width: 100%;
  height: 54px;
  background: var(--crema-10);
  border: 1px solid var(--crema-20);
  border-radius: 2px;
  color: var(--crema);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 0 16px;
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
  appearance: none;
  -webkit-appearance: none;
}
.text-input:focus { outline: none; border-color: var(--caramelo); background: var(--crema-20); }
.text-input::placeholder { color: var(--crema-40); }

.fields-grid { display: grid; grid-template-columns: 1fr; gap: clamp(0.9rem, 2.5vw, 1.25rem); }

.consent-wrap { display: flex; gap: 12px; align-items: flex-start; margin-top: 1.5rem; }
.consent-wrap input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--caramelo); cursor: pointer; }
.consent-wrap label { font-size: 0.78rem; color: var(--crema-60); line-height: 1.5; cursor: pointer; }
.consent-wrap--optional { margin-top: 0.75rem; }
/* Turnstile (anti-bots). Solo ocupa sitio si Cloudflare pide interacción. */
.wizard-turnstile:not(:empty) { margin-top: 1.25rem; }
.consent-wrap label a { color: var(--mostaza); text-decoration: underline; text-underline-offset: 2px; }

.hp-field { opacity: 0; position: absolute; left: -9999px; pointer-events: none; }

.wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(1.5rem, 4vw, 2.5rem); gap: 1rem; }
.btn-prev, .btn-next, .btn-submit {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default), opacity var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
  border: none;
}
.btn-prev { background: transparent; border: 1px solid var(--crema-20); color: var(--crema-60); }
.btn-prev:hover { border-color: var(--crema-40); color: var(--crema-80); }
.btn-prev[hidden] { display: none; }
.btn-next { background: var(--crema); color: var(--carbon); margin-left: auto; }
.btn-next:hover { background: var(--crema-80); transform: translateY(-2px); }
.btn-submit { background: var(--mostaza); color: var(--carbon); margin-left: auto; }
.btn-submit:hover { background: var(--caramelo); transform: translateY(-2px); }
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
@media (max-width: 400px) { .btn-prev, .btn-next, .btn-submit { padding: 14px 20px; font-size: 0.78rem; } }

.form-msg { margin-top: 1rem; font-size: 0.82rem; padding: 12px 16px; border-radius: 2px; display: none; }
.form-msg[data-type="error"] { background: rgba(194,90,74,0.12); border: 1px solid var(--error); color: var(--error); display: block; }

.form-success { display: none; text-align: center; padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem); margin-top: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--crema-10); }
.form-success.is-visible { display: block; animation: successIn var(--duration-medium) var(--ease-default) both; }
.form-success__check { width: 54px; height: 54px; margin: 0 auto clamp(1.25rem, 3vw, 1.75rem); border-radius: 50%; background: rgba(122,140,94,0.14); border: 1px solid var(--success); display: flex; align-items: center; justify-content: center; }
.form-success__check svg { width: 24px; height: 24px; stroke: var(--success); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-success h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--crema); margin-bottom: 0.75rem; }
.form-success p { font-size: 1rem; color: var(--crema-60); max-width: 440px; line-height: 1.6; margin-inline: auto; }
@keyframes successIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wizard-inner.is-hidden { display: none; }

/* ============================================================
   Mapa embebido (Google Maps) — el-centro y contacto
   ============================================================ */
.map-wrap {
  position: relative;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--crema-20);
  border-radius: 4px;
  overflow: hidden;
}
.map-frame { width: 100%; height: min(60vh, 540px); background: var(--carbon-deep); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-card {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  max-width: min(340px, calc(100% - 1.5rem));
  background: rgba(22, 10, 6, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--crema-20);
  border-radius: 4px;
  padding: clamp(0.9rem, 2.2vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  z-index: 4;
}
.map-card__address { font-size: 1.02rem; color: var(--crema-80); line-height: 1.55; letter-spacing: 0.01em; }
.map-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mostaza);
  color: var(--carbon);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 2px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.map-card__cta:hover { background: var(--caramelo); transform: translateY(-2px); }

/* ============================================================
   Hero compacto (página de contacto): que el formulario entre
   en el viewport sin scroll largo. Altura al contenido + aire
   suficiente para el header fijo.
   ============================================================ */
.page-hero--compact { min-height: auto; padding-block: clamp(6rem, 14vh, 8.5rem) clamp(1.5rem, 4vh, 2.5rem); }
@media (min-width: 1024px) { .page-hero--compact { min-height: auto; } }
/* Al ser más bajo, el contenido cae sobre la zona clara de la imagen:
   reforzamos el oscurecido para que el título y el lead se lean. */
.page-hero--compact .page-hero__bg img { opacity: 0.42; }
.page-hero--compact .page-hero__bg::after {
  background: linear-gradient(to top, var(--carbon) 0%, var(--carbon-80) 55%, rgba(33, 15, 9, 0.55) 100%);
}
/* En tablet/móvil el título ocupa más; damos algo menos de padding para
   ganar espacio al formulario. */
@media (max-width: 760px) {
  .page-hero--compact { padding-block: clamp(5.5rem, 13vh, 7rem) 1.25rem; }
  #contacto-form { padding-top: var(--space-xl); }
}

/* ─────────────────────────────────────────────
   Titulares de sección largos
   Algunos h2 ("Tres niveles, un mismo cuerpo en evolución") se partían
   en dos líneas. Se reduce un punto la escala solo en esos casos, en vez
   de tocar el h2 global, y se equilibra el salto si aun así envuelve.
   ───────────────────────────────────────────── */
.section-header h2.h2--tight {
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  text-wrap: balance;
}

/* ============================================================
   404 · página de error (404.html)
   ============================================================ */
.error-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* 80px de la cabecera fija arriba; abajo, sitio para la franja de iconos
     para que nunca pise el botón. */
  padding-top: calc(80px + var(--space-xl));
  padding-bottom: calc(var(--space-3xl) + 40px);
  text-align: center;
}

.error-page__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-page__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6.5rem, 20vw, 12rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--crema);
  margin-bottom: var(--space-lg);
}

.error-page__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin-bottom: var(--space-md);
}

.error-page__text {
  max-width: 38ch;
  font-size: var(--fs-body-lg);
  color: var(--crema-60);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-xl);
}

/* .bg-pattern pinta la franja al 12% del alto de la sección: pensado para
   los bloques de cierre, que son bajos. En una sección de pantalla completa
   saldría enorme, así que aquí va a altura fija. */
.error-page.bg-pattern::before {
  background-size: auto 40px;
  opacity: 0.5;
}

@media (max-width: 599px) {
  .error-page { padding-bottom: calc(var(--space-2xl) + 28px); }
  .error-page.bg-pattern::before { background-size: auto 28px; }
}