/*
  BARRA STICKY DE UTILIDAD (opción C del toggle sticky)

  No es el header del hero repetido en miniatura: es una barra nueva,
  fina, sin el borde de 3 capas, pensada solo para dar acceso al
  toggle (y volver a casa) cuando el hero ya se ha ido por scroll.
  El borde de 3 capas se queda como firma exclusiva del hero — no se
  recalcula a otra escala aquí.

  Aparece cuando el usuario pasa la altura real de .hero (JS calcula
  ese punto, ver barra-sticky.js). Una vez visible, se queda fija
  mientras el usuario esté por debajo del hero, sin importar la
  dirección del scroll — no persigue al usuario, no parpadea si duda
  y sube un poco.

  ESTRUCTURA DE DOS NIVELES — necesaria porque .barra-sticky lleva un
  clip-path para que su fondo termine en la curva del filete (ver más
  abajo). Un clip-path recorta TODO el contenido del elemento,
  incluidos sus hijos — así que el filete naranja no puede vivir
  dentro de .barra-sticky (quedaría recortado también). Por eso:

  .barra-sticky-wrap  → gestiona posición fija + aparición
                         (transform/opacity/is-visible). Es lo que
                         barra-sticky.js activa y desactiva.
  .barra-sticky        → hijo del wrapper. Fondo sólido + layout
                         (marca, toggle) + el clip-path que recorta
                         SOLO esta capa.
  .barra-sticky__filete → hermano de .barra-sticky (no hijo). Vive
                         en el wrapper, fuera del recorte, con las
                         mismas coordenadas.
*/

.barra-sticky-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 76px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
  pointer-events: none;
}

.barra-sticky-wrap.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.barra-sticky {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  background-color: var(--color-fondo-hero);
  transition: background-color 0.3s ease;
}

.barra-sticky__marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.barra-sticky__simbolo {
  display: block;
  width: 28px;
  height: calc(28px * 59 / 80);
  color: var(--color-simbolo);
}

.barra-sticky__simbolo svg {
  width: 100%;
  height: 100%;
}

.barra-sticky__wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-wordmark);
}

/*
  GRUPO DERECHO — CTA + toggle agrupados (16/08, tarde). Antes solo
  había toggle; se añade el CTA "Cuéntanos" porque cuando el usuario
  ya ha perdido el header principal por scroll, no debería tener que
  volver arriba para encontrar la acción de contacto.
*/
.barra-sticky__derecha {
  display: flex;
  align-items: center;
  gap: 14px;
}

/*
  CTA "CUÉNTANOS" EN LA BARRA STICKY — versión reducida del botón
  del header (header-nav.css .hero__cta). Mismo naranja sólido fijo
  (nunca se invierte entre modos), pero más compacto y SIN FLECHA:
  la barra es más fina que el header y el espacio junto al wordmark
  y el toggle ya está ajustado — la flecha añadía ancho sin aportar
  valor a este tamaño. Sin icono: MochiStudio no tiene sistema de
  iconos propio (decisión ya cerrada en otra parte del sitio), así
  que la reducción va por tamaño y peso tipográfico, no por símbolo.
*/
.barra-sticky__cta {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--font-marca);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--tracking-cta);
  background-color: var(--color-naranja);
  color: var(--color-blanco);
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.barra-sticky__cta:hover {
  color: var(--color-blanco);
  opacity: 0.86;
}

/*
  TOGGLE DENTRO DE LA BARRA — override de color, solo aquí.

  El pill usa --color-toggle-pill, que en el hero funciona porque
  el resto de la composición (curva, contenido) da contexto visual
  alrededor. Aquí el fondo de la barra es --color-fondo-hero liso,
  y en modo noche ambos resuelven cerca del mismo morado: el pill
  se funde con el fondo y el toggle deja de leerse como control.

  Fix acotado a .barra-sticky para no tocar el toggle del hero
  (cerrado y validado): el pill pasa a usar el color del wordmark
  del modo activo, igual que en el propio hero, así el par
  fondo/pill siempre queda invertido y contrasta.
*/
.barra-sticky .toggle {
  background-color: var(--color-wordmark);
}

/*
  TAMAÑO DEL TOGGLE EN LA BARRA STICKY — más pequeño que el del hero.

  El toggle del hero (64x36 desktop / 56x32 móvil) está cerrado y
  validado: no se toca .toggle base ni sus variables globales
  (--toggle-w-desktop, etc.). Aquí solo se redefinen las tres
  variables LOCALES que .toggle ya expone para este caso
  (--pill-w, --pill-h, --knob) dentro del scope .barra-sticky .toggle.
  Como .toggle calcula --pad, --icono-w y la posición del knob en
  función de esas tres variables, todo el resto (aire interior,
  tamaño del símbolo, recorrido del knob en modo noche) se ajusta
  solo, sin tocar toggle.css.

  Proporción del sistema mantenida (ancho = 1,8 × alto, knob = 0,83
  × alto). Suelo duro del manual: knob mínimo 20px (por debajo el
  símbolo cruza el mínimo de 16px). El valor móvil se apoya justo
  en ese suelo.

  NOTA 16/08: desde que tokens.css unificó el toggle global a estos
  mismos valores (48×27 / 44×24), este override es REDUNDANTE en la
  práctica — mismo valor final, doble declaración. Se conserva sin
  tocar porque no rompe nada y documenta la intención original; se
  puede limpiar en otra sesión si se quiere reducir duplicación.
*/
.barra-sticky .toggle {
  --pill-w: 48px;
  --pill-h: 27px;
  --knob: 22px;
}

@media (max-width: 640px) {
  .barra-sticky .toggle {
    --pill-w: 44px;
    --pill-h: 24px;
    --knob: 20px;
  }
}

/*
  FONDO RECORTADO CON LA CURVA — mismo trazado del borde de 3 capas
  del hero (capa borde__fill-echo), usado SOLO como línea de recorte
  del propio fondo sólido de la barra (morado/menta), no como acento
  de color aparte. El sistema de 3 capas completo se queda exclusivo
  del hero — aquí no se repite ni la banda gruesa ni el eco, ni el
  filete naranja.

  clip-path en .barra-sticky recorta el fondo con la curva real, así
  la barra termina en la silueta ondulada en vez de un canto recto.
  CALIBRACIÓN (16/08/2026): grosor de onda ajustado a 16px (versión
  inicial ~1px casi imperceptible; se probó también 12px y 20px antes
  de asentar en este punto intermedio) y separada del toggle con ~3px
  de aire libre entre su borde inferior y el inicio de la curva.
  NOTA DE PROCESO: la curva se percibe MÁS pronunciada en un widget de
  maqueta a escala reducida que en el navegador real a tamaño
  completo — verificar siempre en pantalla real antes de descartar un
  valor por "exagerado" visto en una vista previa pequeña.

  RECALIBRACIÓN (16/08/2026, tarde): al reducir el toggle dentro de
  la barra (ver bloque de tamaño más abajo), el pill más bajo dejó de
  tener aire respecto al pico de la curva — el margen de ~3px estaba
  calibrado para el pill de 36px del hero, no para uno de 27px.
  Solución elegida: SUBIR la altura de la barra y trasladar toda la
  curva hacia abajo dentro de ese nuevo alto, conservando intacto el
  grosor de onda ya validado (16px desktop / 14px móvil) — no se
  comprimió la forma, solo se le dio más margen por encima. Dos
  pasadas de calibración: primero +6px (64→70px desktop, 60→66px
  móvil), verificada en pantalla como insuficiente; segunda pasada
  +12px sobre el original (64→76px desktop, 60→72px móvil), que es
  el valor final. El offset del valle más profundo de la onda
  respecto al borde inferior real del elemento (2px) se mantiene
  igual en px en ambas pasadas. Ligado a este cambio: .barra-sticky-
  -wrap (altura) y las reglas de compensación de solape más abajo,
  que suman la altura de la barra al padding-top existente — todo se
  actualizó junto, no solo el clip-path.

  UN FILETE NARANJA ENCIMA DE ESTA CURVA SE PROBÓ Y SE DESCARTÓ
  (15/08/2026): en varias iteraciones de grosor y posición, o bien
  quedaba demasiado fino para leerse, o al engrosarlo la onda se
  aplanaba visualmente y se leía como una línea recta en vez de una
  curva — la decisión final de Erika fue quedarse solo con el fondo
  recortado, sin acento de color aparte. El marcado HTML conserva los
  dos <svg> del filete (clase .barra-sticky__filete, hermanos de
  .barra-sticky para no quedar recortados por su clip-path — ver
  entrada de memoria del proyecto para el porqué de esa estructura)
  pero con display:none, por si se retoma esta idea más adelante con
  otro tratamiento — no borrarlos sin releer esa decisión primero.
*/
.barra-sticky {
  clip-path: polygon(0% 0%, 100% 0%, 100.0% 84.085%, 100.0% 78.237%, 97.917% 77.569%, 95.833% 76.984%, 93.75% 76.567%, 91.667% 76.316%, 89.583% 76.316%, 87.5% 76.567%, 85.417% 77.068%, 83.333% 77.903%, 81.25% 79.073%, 79.167% 80.409%, 77.083% 82.08%, 75.0% 83.835%, 72.917% 85.756%, 70.833% 87.761%, 68.75% 89.766%, 66.667% 91.604%, 64.583% 93.275%, 62.5% 94.695%, 60.417% 95.864%, 58.333% 96.7%, 56.25% 97.202%, 54.167% 97.368%, 52.083% 97.117%, 50.0% 96.616%, 47.917% 95.781%, 45.833% 94.779%, 43.75% 93.526%, 41.667% 92.272%, 39.583% 90.852%, 37.5% 89.516%, 35.417% 88.263%, 33.333% 87.093%, 31.25% 86.09%, 29.167% 85.171%, 27.083% 84.419%, 25.0% 83.835%, 22.917% 83.417%, 20.833% 83.0%, 18.75% 82.665%, 16.667% 82.414%, 14.583% 82.08%, 12.5% 81.746%, 10.417% 81.328%, 8.333% 80.827%, 6.25% 80.243%, 4.167% 79.574%, 2.083% 78.905%, 0.0% 78.237%);
}

.barra-sticky__filete,
.barra-sticky__filete--movil {
  display: none;
}

@media (max-width: 640px) {
  .barra-sticky-wrap {
    height: 72px;
  }

  .barra-sticky {
    padding: 0 20px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 83.594%, 100% 79.57%, 97.436% 79.081%, 94.872% 78.716%, 92.308% 78.533%, 89.744% 78.472%, 87.179% 78.655%, 84.615% 79.143%, 82.051% 79.875%, 79.487% 80.789%, 76.923% 82.009%, 74.359% 83.35%, 71.795% 84.753%, 69.231% 86.216%, 66.667% 87.557%, 64.103% 88.777%, 61.538% 89.752%, 58.974% 90.485%, 56.41% 90.85%, 53.846% 90.972%, 51.282% 90.728%, 48.718% 90.24%, 46.154% 89.57%, 43.59% 88.716%, 41.026% 87.741%, 38.462% 86.765%, 35.897% 85.79%, 33.333% 84.935%, 30.769% 84.204%, 28.205% 83.594%, 25.641% 83.106%, 23.077% 82.74%, 20.513% 82.435%, 17.949% 82.192%, 15.385% 81.948%, 12.821% 81.704%, 10.256% 81.398%, 7.692% 80.972%, 5.128% 80.545%, 2.564% 80.057%, 0% 79.57%);
  }

  .barra-sticky__simbolo {
    width: 24px;
    height: calc(24px * 59 / 80);
  }

  .barra-sticky__wordmark {
    font-size: 16px;
  }

  .barra-sticky__cta {
    padding: 6px 12px;
    font-size: 11px;
  }
}

/*
  COMPENSACIÓN DE SOLAPE — la barra es fixed, así que no reserva
  espacio en el flujo: sin esto, tapa el arranque de lo primero que
  hay bajo el hero. En la home es .productos; en /services/ (hero
  interior, más bajo) es .soluciones. Ambas comparten los mismos
  valores de padding-top por breakpoint (72px / 56px / 44px, ver
  productos.css y servicios.css), así que una sola regla cubre las
  dos con el mismo selector combinado.

  Estos valores YA existen en cada hoja — estas reglas SUMAN la
  altura de la barra al valor existente, nunca lo sustituyen.
  Escribir un padding-top plano aquí pisaría el original y
  rompería el aire ya calibrado sobre la primera tarjeta/ficha.

  Ligado a is-visible del WRAPPER (ahora el elemento que la lleva),
  así el hueco aparece y desaparece exactamente cuando la barra lo
  hace — nunca hay un padding fantasma con la barra oculta.
*/
body:has(.barra-sticky-wrap.is-visible) .productos,
body:has(.barra-sticky-wrap.is-visible) .soluciones {
  padding-top: calc(72px + 76px);
}

@media (max-width: 1080px) and (min-width: 641px) {
  body:has(.barra-sticky-wrap.is-visible) .productos,
  body:has(.barra-sticky-wrap.is-visible) .soluciones {
    padding-top: calc(56px + 76px);
  }
}

@media (max-width: 640px) {
  body:has(.barra-sticky-wrap.is-visible) .productos,
  body:has(.barra-sticky-wrap.is-visible) .soluciones {
    padding-top: calc(44px + 72px);
  }
}