/* Sustituye el comportamiento que daba el JS de Next. Los <script> se removieron
   porque react-imgix rehidrataba los src hacia imgix, que responde 402.
   Usa !important donde el CSS compilado del sitio original gana por orden. */

html, body { background: #ffffff; }

/* --- Header ---
   Headroom (oculta el header al bajar) era JS: quedó congelado en "unpinned". */
.headroom-wrapper { height: auto !important; }
.headroom {
  position: static !important;
  transform: none !important;
  background-color: #ffffff !important;
}

/* --- Carruseles Embla ---
   Sin JS no hay transform ni drag: se sustituye por scroll nativo con snap,
   que además da la misma sensación en touch. */
.embla__viewport {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.embla__viewport::-webkit-scrollbar { height: 0; width: 0; }
.embla__viewport > * { transform: none !important; }
.embla__slide { scroll-snap-align: start; }

/* --- Animaciones de entrada ---
   Dependían de IntersectionObserver: sin JS deben nacer visibles. */
.appear, .appear__bottom, .appear__left, .appear__right,
[class*="appear"] { opacity: 1 !important; transform: none !important; }

/* --- Página /contacto ---
   El CSS compilado del sitio viene purgado: sólo trae las clases que el index
   usaba. Estas reglas son propias para no depender de utilidades ausentes. */
.bjs-contacto { max-width: 1100px; margin: 0 auto; padding: 0 5%; }
.bjs-contacto__top { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.bjs-contacto__logo { width: 260px; max-width: 55vw; }
.bjs-contacto__body { text-align: center; margin: 90px 0 110px; }
.bjs-contacto__h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 700; color: #111827; line-height: 1.1; }
.bjs-contacto__p { margin: 28px auto 0; max-width: 40rem; font-size: clamp(1.05rem, 2.2vw, 1.45rem); font-weight: 300; color: #6b7280; line-height: 1.7; }
.bjs-contacto__tel {
  display: inline-block; margin-top: 54px; background: #2563eb; color: #fff;
  font-weight: 700; font-size: clamp(1.6rem, 4.5vw, 3rem);
  padding: 26px 52px; border-radius: 8px; text-decoration: none;
}
.bjs-contacto__tel:hover { background: #1d4ed8; }
.bjs-contacto__fb { display: block; margin-top: 38px; color: #2563eb; font-size: 1.05rem; }

/* --- Formulario de contacto --- */
.bjs-link { color: #2563eb; }
.bjs-form { max-width: 760px; margin: 54px auto 0; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bjs-field { display: flex; flex-direction: column; }
.bjs-field--full { grid-column: 1 / -1; }
.bjs-label { font-size: .95rem; font-weight: 600; color: #374151; margin-bottom: 8px; }
.bjs-label em { color: #2563eb; font-style: normal; }
.bjs-form input, .bjs-form textarea {
  border: 1px solid #d1d5db; border-radius: 6px; padding: 14px 16px;
  font-size: 1rem; font-family: inherit; color: #111827; background: #fff; width: 100%;
}
.bjs-form input:focus, .bjs-form textarea:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.bjs-form textarea { resize: vertical; }
/* honeypot: fuera de la vista y del foco, pero presente en el DOM */
.bjs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bjs-turnstile { margin: 8px 0 18px; }
.bjs-submit {
  background: #2563eb; color: #fff; font-weight: 700; font-size: 1.15rem;
  padding: 18px 40px; border: 0; border-radius: 8px; cursor: pointer; width: 100%;
}
.bjs-submit:hover:not(:disabled) { background: #1d4ed8; }
.bjs-submit:disabled { background: #9ca3af; cursor: not-allowed; }
.bjs-error { color: #b91c1c; margin: 0 0 14px; font-size: .95rem; }
@media (max-width: 700px) { .bjs-form { grid-template-columns: 1fr; } }

/* --- Flechas de los carruseles ---
   Se cablean en carousel.js (Embla se fue con el bundle de Next). */
.embla__button { cursor: pointer; }
.embla__button:disabled { opacity: .45; cursor: default; }
@media (min-width: 1024px) {
  /* en el original quedaban ~35px más arriba que donde caen sin el JS */
  .embla__button { transform: translateY(-35px); }
}