/* ============================================================
   CENTRO GC — demo. Las decisiones viven en contract/DESIGN.md.
   Paleta medida del logo (teal #289080) y de la sala (pared blanca,
   colchoneta azul, madera clara). Un acento: el teal. El azul es materia.
   ============================================================ */
:root {
  --sala: #F5F7F5;
  --sala-2: #EAEFEC;
  --tinta: #10201E;
  --tinta-mud: rgba(16, 32, 30, .64);
  --teal: #289080;
  --teal-txt: #1B6A5E;          /* el teal sobre fondos claros, AA en texto chico */
  --teal-hi: #3FB3A0;
  --teal-suave: #DDF1EC;
  --colchoneta: #2F55C7;
  --madera: #CFA870;
  --madera-2: #A9834F;
  --completo: rgba(16, 32, 30, .58);

  --acento: var(--teal);
  --acento-hi: var(--teal-hi);
  --papel: var(--sala);
  --cartel-fondo: var(--tinta);
  --cartel-texto: #F5F7F5;

  /* vidrio sobre fondo claro: tinte blanco, sombra corta */
  --glass-bg: linear-gradient(148deg, rgba(255, 255, 255, .64) 0%, rgba(255, 255, 255, .36) 42%, rgba(255, 255, 255, .52) 100%);
  --glass-blur: 18px;
  --glass-r: 22px;
  --glass-r-chico: 14px;

  --r-ctl: 10px;
  --r-chico: 14px;
  --r-sup: 22px;

  --display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --texto: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --curva: cubic-bezier(.22, .61, .36, 1);

  --riel-w: 26px;
  --ancho: 1160px;
  --gutter: max(16px, calc((100vw - var(--riel-w) - var(--ancho)) / 2));
}
@media (min-width: 1024px) { :root { --riel-w: 64px; } }

html { scroll-behavior: smooth; }
/* al navegar por ancla, el título no queda debajo del nav sticky */
section[id] { scroll-margin-top: calc(var(--cartel-alto) + 74px); }
body {
  background: var(--sala);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.solo-desk { display: none; }
@media (min-width: 900px) { .solo-desk { display: inline; } }

/* ── EL CARTEL con las tres pantallas de la demo ───────────── */
.cartel-demo__tabs { display: flex; gap: 4px; flex: 0 0 auto; }
.cartel-demo__tabs a {
  padding: .38em .85em; border-radius: 999px;
  color: var(--cartel-texto); text-decoration: none;
  font-weight: 600; white-space: nowrap;
  background: rgba(255, 255, 255, .08);
  transition: background .15s;
}
.cartel-demo__tabs a:hover { background: rgba(255, 255, 255, .16); }
.cartel-demo__tabs a.is-activa { background: var(--acento); color: var(--cartel-fondo); }
@media (max-width: 899px) { .cartel-demo__cta { display: none; } }
@media (max-width: 560px) {
  :root { --cartel-alto: 96px; }
  .cartel-demo__tabs { flex: 1 1 100%; order: 3; }
  .cartel-demo__tabs a { flex: 1 1 0; text-align: center; padding: .5em .4em; }
}
@media (min-width: 561px) and (max-width: 899px) { :root { --cartel-alto: 66px; } }

/* ── SÓLO EN LA DEMO: tu panel, a la vista ─────────────────── */
.banda--tupanel {
  background-color: var(--tinta);
  color: #F5F7F5;
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (min-width: 900px) { .banda--tupanel { grid-template-columns: 1.1fr .9fr; } }
.banda--tupanel .eyebrow { color: var(--teal-hi); }
.banda--tupanel .banda__lead { color: rgba(245, 247, 245, .76); }
.banda--tupanel .btn--linea { background: rgba(255, 255, 255, .11); color: #fff; }
.banda--tupanel .btn--linea:hover { background: rgba(255, 255, 255, .18); }
.tupanel__lista { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: rgba(245, 247, 245, .76); font-size: .97rem; }
.tupanel__lista li { padding-left: 18px; position: relative; }
.tupanel__lista li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-hi); }
.tupanel__lista b { color: #fff; }
.celu {
  justify-self: center;
  width: min(390px, 100%);
  aspect-ratio: 390 / 760;
  border-radius: 34px;
  padding: 10px;
  background: #0A1413;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.celu { position: relative; }
.celu__pantalla { width: 100%; height: 100%; border: 0; border-radius: 26px; background: var(--sala); display: block; }
.celu__tocar { display: none; }
@media (hover: none), (max-width: 899px) {
  .celu__pantalla { pointer-events: none; }
  .celu__tocar {
    position: absolute; inset: 10px; border-radius: 26px;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 22px;
    background: linear-gradient(to top, rgba(16, 32, 30, .88), rgba(16, 32, 30, .35) 26%, rgba(16, 32, 30, 0) 48%);
    text-decoration: none;
  }
  .celu__tocar span {
    padding: 14px 22px; border-radius: 999px;
    background: #22796C; color: #fff; font: 700 15px/1 var(--texto);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 14px 30px -12px rgba(0, 0, 0, .7);
  }
}

/* ── EL MUNDO (fondo claro) ─────────────────────────────────── */
.mundo__luz {
  background:
    radial-gradient(58% 48% at 90% 0%, rgba(255, 214, 150, .55), transparent 64%),
    radial-gradient(44% 40% at 6% 100%, rgba(40, 144, 128, .10), transparent 70%);
  transform-origin: 85% 0%;
}
.mundo__forma { display: none; }
.mundo__colchoneta {
  position: absolute;
  right: -8vw; top: 34vh;
  width: 66vw; height: 58vh;
  border-radius: 40px;
  background: var(--colchoneta);
  opacity: .14;
  filter: blur(30px);
  transform: rotate(-5deg);
}
.mundo__grano { opacity: .05; }

/* ── EL REFORMER (objeto-eje) ───────────────────────────────── */
.riel {
  position: fixed;
  left: 0; top: var(--cartel-alto); bottom: 0;
  width: var(--riel-w);
  z-index: 2;
  pointer-events: none;
}
.riel__vias span {
  position: absolute; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(90deg, var(--madera-2), var(--madera) 45%, var(--madera-2));
  box-shadow: 1px 0 0 rgba(16, 32, 30, .08);
}
.riel__vias span:first-child { left: 30%; }
.riel__vias span:last-child { right: 30%; }
.riel__cabezal { position: absolute; top: 8px; left: 0; right: 0; height: 26px; }
.riel__cabezal svg { width: 100%; height: 100%; display: block; }
.riel__resortes {
  position: absolute; top: 34px; left: 0; right: 0;
  height: calc(var(--carro, 40) * 1px - 34px);
  display: flex; justify-content: center; gap: 4px;
  padding: 0 22%;
}
.resorte {
  flex: 1 1 0; max-width: 5px;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, var(--c) 0 3px, transparent 3px 6px);
  opacity: .9;
}
.resorte--rojo { --c: #D7443A; }
.resorte--amarillo { --c: #E9B92E; }
.resorte--verde { --c: #3C9D5B; }
.resorte--azul { --c: var(--colchoneta); }
.riel__carro {
  position: absolute; left: 0; right: 0; top: 0;
  height: 72px;
  transform: translateY(calc(var(--carro, 40) * 1px));
  filter: drop-shadow(0 6px 8px rgba(16, 32, 30, .18));
}
.riel__carro svg { width: 100%; height: 100%; display: block; }
.riel__horas {
  position: absolute; left: 100%; top: 14%; bottom: 12%;
  margin: 0; padding: 0; list-style: none;
  display: none;
  flex-direction: column; justify-content: space-between;
  opacity: 0;
  transition: opacity .45s var(--curva);
}
.riel--horas .riel__horas { opacity: 1; }
.riel__horas li {
  position: relative;
  padding-left: 8px;
  font: 600 11px/1 var(--texto);
  color: var(--tinta-mud);
  font-variant-numeric: tabular-nums;
}
.riel__horas li::before {
  content: ''; position: absolute; left: -10px; top: 50%;
  width: 10px; height: 1.5px; background: var(--madera-2);
}
@media (min-width: 1024px) { .riel__horas { display: flex; } }
@media (max-width: 1023px) {
  .riel__cabezal { height: 16px; }
  .riel__resortes { top: 24px; height: calc(var(--carro, 40) * 1px - 24px); gap: 2px; padding: 0 18%; }
  .resorte { max-width: 3px; }
  .riel__carro { height: 44px; }
}

/* ── LAYOUT COMÚN ───────────────────────────────────────────── */
.hero, .banda, .franja-oficio, .pie {
  padding-left: calc(var(--riel-w) + var(--gutter));
  padding-right: var(--gutter);
}
.eyebrow {
  margin: 0 0 14px;
  font: 500 13px/1.4 var(--texto);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal-txt);
}
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  word-spacing: .14em;   /* Clash trae .12em de espacio de palabra: los titulares leían pegados */
  line-height: .98;
  margin: 0;
  text-wrap: balance;
}
.clase h3, .plan__precio, .dock__codigo, .nav__marca, .franja-oficio { word-spacing: .14em; }
h1.display { font-size: clamp(2.5rem, 5.6vw, 4.9rem); max-width: 12ch; }
h2.display { font-size: clamp(1.95rem, 3.8vw, 3.2rem); max-width: 16ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--r-ctl);
  font: 700 15px/1 var(--texto);
  text-decoration: none; cursor: pointer;
  transition: transform .15s var(--curva), background .15s, box-shadow .15s;
}
/* blanco sobre #289080 da 3,9:1; sobre #22796C, 5,2:1 (crítico 2026-09-17) */
.btn--cta { background: #22796C; color: #fff; box-shadow: 0 12px 26px -16px rgba(40, 144, 128, .9); }
.btn--cta:hover { background: #1B6A5E; transform: translateY(-1px); }
.btn--linea { background: rgba(16, 32, 30, .07); color: var(--tinta); }
.btn--linea:hover { background: rgba(16, 32, 30, .12); }
.btn--chico { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* ── NAV ────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: calc(var(--cartel-alto) + 10px); z-index: 80;
  margin: 10px var(--gutter) 0 calc(var(--riel-w) + var(--gutter));
  display: flex; align-items: center; gap: 16px;
  padding: 8px 10px 8px 14px;
}
.nav__marca {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tinta); text-decoration: none;
  font: 600 18px/1 var(--display);
}
.loto { width: 26px; height: 26px; fill: var(--teal); }
.nav__links { display: flex; margin-left: auto; gap: 14px; }
.nav__links a { color: var(--tinta-mud); text-decoration: none; font: 500 13px var(--texto); transition: color .15s; padding: 6px 2px; }
.nav__links a:hover { color: var(--tinta); }
/* en el celu, las secciones se quedan y el CTA del nav (redundante con el del hero) se va */
.nav .btn--cta { display: none; gap: 0; }
@media (max-width: 559px) { .nav__marca span { display: none; } }
@media (min-width: 900px) {
  .nav__links { gap: 22px; }
  .nav__links a { font-size: 15px; }
  .nav .btn--cta { display: inline-flex; margin-left: 0; }
}
/* sobre la banda oscura: tinte más transparente y texto claro */
.nav--oscuro {
  --glass-bg: linear-gradient(148deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, .12) 100%);
  transition: color .25s;
}
.nav--oscuro .nav__marca, .nav--oscuro .nav__links a { color: #F5F7F5; }
.nav--oscuro .nav__links a:hover { color: #fff; }
.nav--oscuro .loto { fill: var(--teal-hi); }

/* ── HERO — dos columnas reales ─────────────────────────────── */
.hero {
  min-height: calc(100svh - var(--cartel-alto));
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.hero__col { flex: 1 1 auto; }
.hero__lead {
  margin: 22px 0 28px;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--tinta-mud);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__tipos {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  margin: 32px 0 0; padding: 0; list-style: none;
  font: 700 14px/1.2 var(--texto);
}
.hero__tipos li { position: relative; padding-left: 16px; }
.hero__tipos li::before {
  content: ''; position: absolute; left: 0; top: .28em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.hero__tipos small { display: block; font-weight: 500; font-size: 12.5px; color: var(--tinta-mud); }
.hero__arte {
  position: relative; margin: 0 auto;
  width: 100%; max-width: 420px;
  aspect-ratio: 9 / 13;
}
/* el marco recorta: la foto se desplaza adentro con el scroll (scale 1.12) */
.hero__arte {
  overflow: clip;
  border-radius: var(--r-sup);
  box-shadow: 0 34px 60px -40px rgba(16, 32, 30, .6);
}
.hero__arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__arte figcaption {
  position: absolute; left: 14px; bottom: 14px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--tinta); color: #fff;
  font: 500 12px/1 var(--texto);
}
@media (min-width: 900px) {
  .hero { flex-direction: row; align-items: center; }
  .hero__col { flex: 1 1 58%; }
  .hero__arte { flex: 0 1 38%; max-width: 440px; aspect-ratio: 9 / 12.5; max-height: min(74vh, 660px); }
}

/* ── BANDAS ─────────────────────────────────────────────────── */
.banda { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.banda__cab { max-width: 62ch; margin-bottom: clamp(26px, 4vw, 44px); }
.banda__lead { margin: 16px 0 0; max-width: 54ch; font-size: 1.05rem; color: var(--tinta-mud); }

/* horarios: el plano azul de la colchoneta detrás de la grilla de vidrio */
.banda--horarios { position: relative; }
.banda--horarios::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -4vw; top: 26%;
  width: 58%; height: 58%;
  background: var(--colchoneta);
  opacity: .13; filter: blur(34px);
  border-radius: 40px; transform: rotate(-4deg);
}
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 999px;
  background: rgba(16, 32, 30, .06); color: var(--tinta);
  font: 500 14px var(--texto); cursor: pointer;
  transition: background .15s, color .15s;
}
.chip:hover { background: rgba(16, 32, 30, .12); }
.chip.is-activo { background: var(--tinta); color: #fff; }

.dias { display: none; }
@media (max-width: 767px) {
  .dias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; }
  .dia {
    min-height: 54px; padding: 6px 2px; min-width: 0;
    border: 0; border-radius: var(--r-ctl);
    background: rgba(16, 32, 30, .06); color: var(--tinta);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font: 700 14px/1 var(--texto); cursor: pointer;
  }
  .dia small { font: 500 10.5px/1 var(--texto); color: var(--tinta-mud); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .dia.is-activo { background: #22796C; color: #fff; }
  .dia.is-activo small { color: rgba(255, 255, 255, .85); }
}

.grilla { padding: 14px; }
.grilla--semana {
  display: grid;
  grid-template-columns: 58px repeat(6, minmax(0, 1fr));
  gap: 6px; align-items: stretch;
}
.grilla__dia { padding: 6px 0 8px; text-align: center; font: 700 13px var(--texto); }
.grilla__hora {
  display: flex; align-items: center;
  font: 500 13px var(--texto); color: var(--tinta-mud);
  font-variant-numeric: tabular-nums;
}
.celda {
  min-height: 52px; padding: 7px 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  border: 0; border-radius: var(--r-ctl);
  font-family: var(--texto); text-align: left;
}
/* lo que varía («2 lugares») va primero y grande; la palabra repetida 54 veces
   («REFORMER») abajo y muda — jerarquía invertida por el crítico 2026-09-17 */
.celda__tipo { order: 2; font: 500 10px/1 var(--texto); letter-spacing: .03em; text-transform: uppercase; color: rgba(16, 32, 30, .5); }
.celda__tipo b {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 14px; height: 14px; margin-left: 4px; border-radius: 4px;
  background: var(--tinta); color: #fff; font-size: 9px;
}
.celda__lugar { order: 1; font: 700 15px/1.15 var(--texto); }
/* los dos estados separaban 1,07:1 de luminancia: el anillo teal (3,5:1 contra
   la celda vecina) es la marca que se ve entrecerrando los ojos */
.celda--lugar {
  background: var(--teal-suave); color: var(--teal-txt);
  box-shadow: inset 0 0 0 2px var(--teal);
  cursor: pointer;
  transition: transform .15s var(--curva), background .15s, box-shadow .15s;
}
.celda--lugar .celda__tipo { color: var(--teal-txt); }
.celda--lugar:hover { background: #CBEAE2; transform: translateY(-1px); }
.celda--lugar.is-elegida { background: #22796C; color: #fff; box-shadow: none; }
.celda--lugar.is-elegida .celda__tipo { color: #E6F5F1; }
.celda--completo { background: rgba(16, 32, 30, .03); color: var(--completo); }
.celda--completo .celda__lugar { font-weight: 500; }
.celda--nada { background: transparent; }
.celda--otra { background: repeating-linear-gradient(135deg, rgba(16, 32, 30, .045) 0 4px, transparent 4px 10px); }

.grilla--dia { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.fila { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; }
.fila__hora { font: 500 14px var(--texto); color: var(--tinta-mud); font-variant-numeric: tabular-nums; }
.fila .celda { flex-direction: row; align-items: center; justify-content: space-between; min-height: 50px; }
.grilla__vacia { margin: 0; padding: 12px; color: var(--tinta-mud); }

.leyenda {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 14px 0 0;
  font: 500 13px var(--texto); color: var(--tinta-mud);
}
.leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.leyenda__lugar::before, .leyenda__completo::before {
  content: ''; width: 14px; height: 14px; border-radius: 4px;
}
.leyenda__lugar::before { background: var(--teal-suave); box-shadow: inset 0 0 0 1.5px var(--teal); }
.leyenda__completo::before { background: rgba(16, 32, 30, .08); }
.leyenda__h b {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--tinta); color: #fff; font-size: 10px;
}

/* titulares que suben palabra por palabra: la máscara es el span de afuera;
   el padding evita que se corten las astas y los descendentes */
.pal { display: inline-block; overflow: clip; vertical-align: top; padding: .1em .03em .22em; margin: -.1em -.03em -.22em; }
.pal__in { display: inline-block; will-change: transform; }

/* la cinta con las frases de sus posteos */
.cinta {
  overflow: clip;
  margin: 0 calc(-1 * var(--gutter)) clamp(40px, 6vw, 80px) calc(-1 * (var(--riel-w) + var(--gutter)));
  padding-left: var(--riel-w);
}
.cinta__pista {
  display: inline-flex; align-items: center; gap: clamp(18px, 3vw, 40px);
  white-space: nowrap; will-change: transform;
  font: 600 clamp(1.5rem, 3.6vw, 2.9rem)/1.1 var(--display);
  letter-spacing: -.01em; word-spacing: .14em;
  color: var(--teal-txt);
}
.cinta__pista span { flex: none; }
.cinta__pista i { flex: none; width: .42em; height: .42em; border-radius: 50%; background: var(--teal-hi); margin-right: clamp(18px, 3vw, 40px); }

/* planes: líneas editoriales, sin cards */
.planes { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 40px); }
@media (min-width: 768px) { .planes { grid-template-columns: repeat(3, 1fr); } }
/* la línea de arriba se dibuja de izquierda a derecha (--trazo lo mueve GSAP;
   sin JS vale 1 y la línea está entera) */
.plan, .clase { position: relative; }
.plan::before, .clase::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  transform-origin: left center; transform: scaleX(var(--trazo, 1));
}
.plan::before { background: var(--tinta); }
.clase::before { background: var(--teal); }
.plan { padding-top: 22px; }
.plan__n { font-size: clamp(4rem, 8vw, 7rem); line-height: .85; color: var(--teal); margin: 0 0 6px; }
.plan h3 { margin: 0 0 14px; font: 700 1.2rem/1.2 var(--texto); }
.plan__precio { margin: 0; font: 700 1.7rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.plan__precio small { font: 500 .95rem var(--texto); color: var(--tinta-mud); word-spacing: normal; }
.plan__nota { margin: 8px 0 0; font-size: .95rem; color: var(--tinta-mud); }
.planes__accion { margin: clamp(28px, 4vw, 44px) 0 0; }

/* «Inhala / Exhala»: el cartel de su pared hecho página. El loto del logo se
   abre cuatro segundos y se cierra cuatro; la palabra alterna. Sin foto. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.respira {
  position: relative; isolation: isolate; overflow: clip;
  min-height: min(88svh, 780px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(72px, 9vw, 130px) calc(var(--riel-w) + var(--gutter));
  background-image: radial-gradient(58% 52% at 50% 40%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%);
}
.respira__escena { width: min(500px, 78vw); aspect-ratio: 400 / 360; }
.respira__escena svg { width: 100%; height: 100%; display: block; max-width: none; overflow: visible; }
.respira__palabra {
  display: grid; margin: clamp(4px, 1.5vw, 18px) 0 0;
  font: 700 clamp(3.4rem, 11vw, 8.5rem)/.92 var(--display);
  letter-spacing: -.03em; color: var(--tinta);
}
.respira__palabra span { display: block; }
/* con JS: las dos palabras comparten lugar y se turnan */
.respira--viva .respira__palabra span { grid-area: 1 / 1; }
.respira--viva [data-exhala] { visibility: hidden; opacity: 0; }
.respira__nota { max-width: 44ch; margin: 18px auto 0; color: var(--tinta-mud); font-size: 1.02rem; }

/* clases */
.clases { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 44px); }
@media (min-width: 768px) { .clases { grid-template-columns: repeat(3, 1fr); } }
.clase { padding-top: 18px; }
.clase__frase { margin: 0 0 10px; font: 600 1.05rem/1.2 var(--display); color: var(--teal-txt); }
.clase h3 { margin: 0 0 10px; font: 700 1.4rem/1.1 var(--display); letter-spacing: -.01em; }
.clase p { margin: 0; color: var(--tinta-mud); }

/* dónde: la única banda oscura, con la luz de la vidriera */
.banda--donde {
  background-color: var(--tinta);
  color: #F5F7F5;
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 72px); align-items: center;
}
@media (min-width: 900px) { .banda--donde { grid-template-columns: 1.1fr .9fr; } }
.banda--donde .eyebrow { color: var(--teal-hi); }
.banda--donde .banda__lead { color: rgba(245, 247, 245, .74); }
.banda--donde .btn--linea { background: rgba(255, 255, 255, .11); color: #fff; }
.banda--donde .btn--linea:hover { background: rgba(255, 255, 255, .18); }
/* el mapa: Google Maps embebido, pasado a oscuro con un filtro para que viva
   en la banda; arriba, el pin de vidrio con la dirección y «cómo llegar» */
.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sup);
  overflow: hidden;
  background: #16302C;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -36px rgba(0, 0, 0, .8);
}
.mapa__marco {
  width: 100%; height: 100%; border: 0; display: block;
  filter: invert(.92) hue-rotate(175deg) saturate(.55) brightness(.92) contrast(1.05);
}
.mapa__pin {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px;
  color: var(--tinta); text-decoration: none;
  --glass-r: 16px;
}
.mapa__pin svg { width: 26px; height: 26px; max-width: none; color: #22796C; flex: none; }
.mapa__pin b { display: block; font: 700 15px/1.15 var(--texto); }
.mapa__pin small { display: block; font: 500 12px/1.2 var(--texto); color: var(--tinta-mud); }
.mapa__pin:hover { transform: translateY(-1px); }

.pie {
  background: var(--tinta); color: rgba(245, 247, 245, .7);
  padding-top: 28px; padding-bottom: 44px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px;
}
.pie p { margin: 0 0 8px; }
.pie strong { color: #fff; }
.pie__links a { color: #fff; margin-right: 18px; }
.pie__aizurg { color: var(--teal-hi); font-weight: 700; }

/* ── EL PEDIDO (dock) y el FAB ──────────────────────────────── */
.dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  width: min(380px, calc(100vw - 32px));
  padding: 20px;
}
@media (max-width: 767px) { .dock { left: 12px; right: 12px; bottom: 12px; width: auto; } }
.dock__cerrar {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(16, 32, 30, .07); color: var(--tinta);
  display: grid; place-items: center; cursor: pointer;
}
.dock__cerrar svg { width: 18px; height: 18px; }
.dock__slot { margin: 0 44px 10px 0; font-size: 15px; color: var(--tinta-mud); }
.dock__slot b { color: var(--tinta); }
.dock label { display: block; margin: 10px 0 6px; font: 500 13px var(--texto); }
.dock input {
  width: 100%; min-height: 48px; padding: 0 12px;
  border: 1.5px solid rgba(16, 32, 30, .18); border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, .78);
  font: 500 16px var(--texto); color: var(--tinta);
}
.dock input:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.dock .btn--cta { width: 100%; margin-top: 16px; }
.dock__nota { margin: 10px 0 0; font-size: 12.5px; color: var(--tinta-mud); }
.dock__nota a { color: var(--teal-txt); }
.dock__error { margin: 8px 0 0; font: 500 13px var(--texto); color: #A3402F; }
.dock__codigo { margin: 0 0 6px; font: 700 2rem/1 var(--display); color: var(--teal-txt); letter-spacing: -.01em; }
.dock__listo p { margin: 0 0 12px; }
/* el botón que abre la conversación es el que cierra la venta: va lleno */
.dock__listo .btn--linea { background: #22796C; color: #fff; width: 100%; }
.dock__listo .btn--linea:hover { background: #1B6A5E; }

/* botón de WhatsApp: sólido. De vidrio quedaba como una burbuja gris sobre las
   bandas oscuras (devolución de Jcoder, 2026-09-18) */
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 94;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #22796C; color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 14px 30px -12px rgba(16, 32, 30, .55);
  transition: transform .15s var(--curva), background .15s;
}
.fab:hover { transform: translateY(-2px); background: #1B6A5E; }
/* max-width:100% del reset + grid auto = columna de 0px: el ícono desaparecía a 1920 */
.fab { grid-template-columns: 100%; }
.fab svg, .dock__cerrar svg { max-width: none; }
.fab svg { width: 28px; height: 28px; }