/* ===== BOSON: mejoras sobre el clon de Canva ===== */

/* --- Barra de navegación de escritorio --- */
._4KoDHA > div:first-child { position: relative; }
.bx-nav { display: none; }
@media (min-width: 1200px) {
  ._4KoDHA > div:first-child > div:not(.bx-nav) { visibility: hidden; }
  .bx-nav {
    /* Logo a la izquierda y menú centrado en la página (3 columnas simétricas) */
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px;
    position: absolute; inset: 0; padding: 0 40px; background: #fff; box-sizing: border-box;
    border-bottom: 1px solid #eeeeee; z-index: 2;
  }
}
.bx-nav__logo img { height: 34px; width: auto; display: block; }
.bx-nav__links { display: flex; align-items: center; justify-content: center; gap: 22px; grid-column: 2; }
.bx-nav__logo { grid-column: 1; justify-self: start; }
@media (min-width: 1360px) { .bx-nav__links { gap: 28px; } }
.bx-nav__links a {
  font-family: YAFdtQi73Xs_0, 'Montserrat', sans-serif; font-size: 14px; font-weight: 500;
  color: #1c1c1c; text-decoration: none; position: relative; padding: 6px 0; white-space: nowrap;
  transition: color .2s;
}
.bx-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: #6FC201; transform: scaleX(0); transition: transform .2s;
}
.bx-nav__links a:hover { color: #2BA229; }
.bx-nav__links a:hover::after, .bx-nav__links a.is-active::after { transform: scaleX(1); }
.bx-nav__links a.is-active { color: #2BA229; font-weight: 600; }

/* --- Elementos de Canva que reemplazamos en "Agenda tu demo" --- */
#LBjFlg2j6sY0nYCF, #LBPmBhRp1349LcB1,
#LBqFVZ19dJpxFksM, #LBy02GCXZMYLM3cW { visibility: hidden !important; }

/* Botones de Canva que ahora son clicables */
.bx-clickable { cursor: pointer; transition: filter .2s, transform .2s; }
.bx-clickable:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* --- Campo de correo y botón Continuar (superpuestos al diseño) --- */
.bx-email {
  position: absolute; left: 180px; top: 458px; width: 436px; height: 58px; z-index: 5;
  border: 0; outline: 0; background: transparent; padding: 0;
  font-family: YAFdtQi73Xs_0, 'Montserrat', sans-serif; font-size: 19.7px; color: #1f1f1f;
}
.bx-email::placeholder { color: rgb(110, 102, 100); opacity: 1; }
.bx-email-focus {
  position: absolute; left: 106px; top: 458px; width: 525px; height: 58px; z-index: 4;
  border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 0 rgba(111,194,1,0); transition: box-shadow .2s;
}
.bx-email:focus + .bx-email-focus { box-shadow: 0 0 0 3px rgba(111,194,1,.35); }
.bx-submit {
  position: absolute; left: 106px; top: 547px; width: 271px; height: 58px; z-index: 5;
  border: 0; border-radius: 29px; background: transparent; cursor: pointer; transition: background .2s;
}
.bx-submit:hover { background: rgba(0,0,0,.08); }
.bx-submit:focus-visible { outline: 3px solid rgba(111,194,1,.5); outline-offset: 2px; }
.bx-msg {
  position: absolute; left: 106px; top: 616px; width: 700px; z-index: 5;
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.35; font-weight: 500;
}
.bx-msg.err { color: #D93025; }
.bx-msg.ok  { color: #2BA229; }

/* --- Calendario funcional --- */
.bx-cal {
  position: absolute; left: 870px; top: 91px; width: 448px; height: 589px; z-index: 5;
  background: linear-gradient(180deg, #fbfbfb 0%, #f8f8f8 100%);
  border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.035);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #222; user-select: none;
}
.bx-cal * { box-sizing: border-box; }
.bx-cal__title { position: absolute; left: 25px; top: 36px; font-size: 20px; font-weight: 700; line-height: 26px; color: #121212; }
.bx-cal__sub   { position: absolute; left: 25px; top: 67px; font-size: 13.2px; line-height: 18px; color: #6b6b6b; }
.bx-cal__month { position: absolute; left: 15px; right: 15px; top: 108px; height: 30px; display: flex; align-items: center; }
.bx-cal__month span { flex: 1; font-size: 17px; font-weight: 500; color: #222; padding-left: 16px; }
.bx-cal__nav {
  width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #333;
}
.bx-cal__nav:hover:not(:disabled) { background: #eef7e1; }
.bx-cal__nav:disabled { color: #d0d0d0; cursor: default; }
.bx-cal__nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bx-cal__dow { position: absolute; left: 15px; width: 418px; top: 149px; height: 24px; display: grid; grid-template-columns: repeat(7, 1fr); }
.bx-cal__dow span { text-align: center; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: #8a8a8a; line-height: 24px; }
.bx-cal__days { position: absolute; left: 15px; width: 418px; top: 180px; display: grid; grid-template-columns: repeat(7, 1fr); }
.bx-cal__day {
  display: flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0;
  font-family: inherit; font-size: 13.5px; color: #333; cursor: pointer; position: relative;
}
.bx-cal__day i {
  font-style: normal; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.bx-cal__day:hover:not(:disabled) i { background: #eef7e1; }
.bx-cal__day:disabled { color: #cfcfcf; cursor: default; }
.bx-cal__day.is-out { color: #d6d6d6; }
.bx-cal__day.is-today i { box-shadow: inset 0 0 0 1px #cfe9b0; }
.bx-cal__day.is-sel i { background: #6FC201; color: #111; font-weight: 600; font-size: 15px; width: 42px; height: 42px; }
.bx-cal__h { position: absolute; left: 25px; top: 402px; font-size: 14.5px; font-weight: 600; line-height: 20px; color: #1a1a1a; }
.bx-cal__slots { position: absolute; left: 25px; width: 398px; top: 434px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8.5px 10px; }
.bx-cal__slot {
  height: 38px; border: 1px solid #e2e2e2; border-radius: 8px; background: #fbfbfb; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: #333; transition: border-color .15s, background .15s;
}
.bx-cal__slot:hover:not(:disabled) { border-color: #a6d86a; }
.bx-cal__slot.is-sel { border: 2px solid #6FC201; background: #f7fff0; color: #111; font-weight: 500; }
.bx-cal__slot:disabled { color: #c8c8c8; background: #f3f3f3; cursor: default; }
.bx-cal__tz { position: absolute; left: 25px; top: 540px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #555; line-height: 20px; }
.bx-cal__tz svg { width: 18px; height: 18px; stroke: #555; fill: none; stroke-width: 1.6; }

/* --- Ventana del calendario en celulares/tablets --- */
html.bx-lock, html.bx-lock body { overflow: hidden !important; }
.bx-modal[hidden] { display: none; }
.bx-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 12px; }
.bx-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 18, 16, .55); }
.bx-modal__sheet {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box;
  background: #fff; border-radius: 18px; padding: 18px 16px 22px; box-shadow: 0 24px 70px rgba(0,0,0,.25);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bx-modal__close {
  position: absolute; top: 8px; right: 10px; width: 38px; height: 38px; border: 0; background: transparent;
  font-size: 28px; line-height: 1; color: #333; cursor: pointer; border-radius: 10px;
}
.bx-modal__close:hover { background: #f1f1f1; }
.bx-modal__eyebrow { font-family: YAFdtQi73Xs_0, 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #222; margin: 4px 0 12px 4px; }
.bx-modal__calwrap { margin: 0 auto; overflow: visible; }
.bx-modal .bx-cal { position: relative; left: auto; top: auto; transform-origin: top left; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.bx-modal__form { margin-top: 16px; padding: 0 4px; }
.bx-modal__label { display: block; font-family: YAFdtQi73Xs_0, 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #111; margin-bottom: 8px; }
.bx-modal__input {
  width: 100%; box-sizing: border-box; height: 50px; padding: 0 16px; border: 1.5px solid #c9c9c9; border-radius: 12px;
  font-family: YAFdtQi73Xs_0, 'Montserrat', sans-serif; font-size: 16px; color: #1f1f1f; outline: none; background: #fff;
}
.bx-modal__input:focus { border-color: #6FC201; box-shadow: 0 0 0 3px rgba(111,194,1,.25); }
.bx-modal__btn {
  width: 100%; height: 50px; margin-top: 12px; border: 0; border-radius: 25px; background: #2BA229; color: #fff; cursor: pointer;
  font-family: YAFdtQi73Xs_0, 'Montserrat', sans-serif; font-size: 17px; font-weight: 500;
}
.bx-modal__btn:hover { background: #24901f; }
.bx-modal__msg { margin-top: 10px; font-size: 14px; line-height: 1.4; font-weight: 500; min-height: 1em; }
.bx-modal__msg.err { color: #D93025; }
.bx-modal__msg.ok { color: #2BA229; }
.bx-modal__foot { margin-top: 10px; font-size: 12.5px; color: #666; text-align: center; }

/* --- Portada: la imagen del camión llega hasta el borde derecho (sin franja negra) --- */
[style*="clip-path: polygon(160.857px 24.4241px, 1080.44px 24.4241px"] {
  clip-path: polygon(160.857px 24.4241px, 4000px 24.4241px, 4000px 792.424px, 160.857px 792.424px) !important;
}
