/*
 * Styles the compiled Tailwind build does not cover.
 *
 * tailwind.css is the stylesheet extracted from the original site's build, so it only
 * contains the utilities the original markup used: a Tailwind class that is not already
 * on the page does nothing until the stylesheet is rebuilt. Put one-off styles here.
 */

html {
  scroll-behavior: smooth;
  /* The fixed nav is 4rem tall; keeps anchored sections from starting underneath it. */
  scroll-padding-top: 4rem;
}

/* Tailwind's preflight [hidden] rule loses to display utilities such as `flex`, which would
   leave elements toggled with the hidden attribute on screen. */
[hidden] {
  display: none !important;
}

/* The five nav links only fit beside the logo from about 870px, but the original switched to
   them at md (768px), clipping "Contacto" on tablets. Keep the menu button up to lg. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .nav-links { display: none; }

  .nav-toggle,
  #mobile-menu:not([hidden]) { display: block; }
}

/* Client logos marquee: each row holds its logo list twice, so a -50% slide loops seamlessly. */
@keyframes scroll-first {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes scroll-second {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.animate-scroll-first { animation: scroll-first 25s linear infinite; }
.animate-scroll-second { animation: scroll-second 30s linear infinite; }

.animate-scroll-first:hover,
.animate-scroll-second:hover { animation-play-state: paused; }

@media (max-width: 768px) {
  .animate-scroll-first { animation-duration: 20s; }
  .animate-scroll-second { animation-duration: 25s; }
}

/* The markup's w-34 and md:h-22 are not in the Tailwind build; this is what sizes the cards. */
.logo-card {
  min-width: 136px;
  min-height: 80px;
}

/* Specifications table reveal. */
@keyframes slide-in-from-top {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in { animation: slide-in-from-top 0.5s ease-out; }

/* Project descriptions only appear on hover. Touch screens cannot hover, so the original
   never showed them on phones; show them there. */
@media (hover: none) {
  .project-caption { opacity: 1; }
  .project-caption > div { transform: translateY(0); }
}

/* Current page in the navigation (the Catálogo link on catalogo.html); blue-600. */
nav a[aria-current="page"] {
  color: #2563eb;
}

/* Catálogo: the FlipHTML5 viewer fills the screen below the fixed 4rem nav. dvh keeps it
   clear of mobile browser toolbars where supported. */
.catalog-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 4rem);
  height: calc(100dvh - 4rem);
  border: 0;
}

/* Contact form error line. */
.form-error {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #dc2626;
  text-align: center;
}

/*
 * WhatsApp widget: a fixed button, on every page, that opens a small menu offering the two
 * ways to reach us. On index.html and catalogo.html the same "send a message" action also
 * appears on its own, once per tab, in an invite bubble (30s or a scroll to the page bottom).
 * The bubble and the menu occupy the same spot above the button, so both are positioned
 * absolutely against .whatsapp-widget rather than stacked with flexbox — simpler, and it
 * guarantees they can never both nudge the button's own position.
 */
.whatsapp-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
}

.whatsapp-bubble,
.whatsapp-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
}

.whatsapp-fab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 0;
  padding: 0;
  border-radius: 9999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.whatsapp-fab svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  position: relative;
}

/* The "slight animation": a soft ring that expands and fades behind the button, on loop. */
.whatsapp-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #25d366;
  animation: whatsapp-pulse 2.5s ease-out infinite;
}

@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Comic-style invite bubble, shown by main.js after 30s or a scroll to the page bottom. */
.whatsapp-bubble {
  position: relative;
  max-width: 220px;
  background: #fff;
  color: #111827;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 0.875rem 2rem 0.875rem 1rem;
  animation: whatsapp-pop-in 0.35s ease-out;
}

.whatsapp-bubble__cta {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.whatsapp-bubble__close {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: #9ca3af;
  cursor: pointer;
}

.whatsapp-bubble__close:hover { color: #4b5563; background: #f3f4f6; }
.whatsapp-bubble__close svg { width: 0.875rem; height: 0.875rem; }

/* Tail pointing down at the button — shared by the bubble and the menu, which sit in the
   same spot (never both open at once, but never assume that in the CSS either). */
.whatsapp-tail {
  position: absolute;
  bottom: -0.4rem;
  right: 1.25rem;
  width: 0.9rem;
  height: 0.9rem;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.06);
}

@keyframes whatsapp-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The button's menu: "Chatear por WhatsApp" (a real link) and "Enviar un mensaje" (opens the
   lead-popup form below). */
.whatsapp-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 13.5rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 0.5rem;
  animation: whatsapp-pop-in 0.2s ease-out;
}

.whatsapp-menu__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border: 0;
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  text-align: left;
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.whatsapp-menu__item:hover,
.whatsapp-menu__item:focus-visible {
  background: #f3f4f6;
  outline: none;
}

.whatsapp-menu__item svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
}

.whatsapp-menu__item--whatsapp svg { fill: #25d366; }
.whatsapp-menu__item--message svg { stroke: #2563eb; stroke-width: 2; }

@media (max-width: 480px) {
  .whatsapp-widget { right: 1rem; bottom: 1rem; }
  .whatsapp-bubble { max-width: calc(100vw - 5.5rem); }
  .whatsapp-menu { min-width: calc(100vw - 5.5rem); }
}

/*
 * Lead-popup modal, opened from the WhatsApp bubble. The wrapper is the one element with a
 * z-index, on purpose: several sections of the original page (the hero text, some cards) use
 * z-10/z-20/z-50 of their own, which would otherwise paint in front of an unindexed overlay
 * or dialog — 100 safely beats all of them, and puts overlay/dialog in one stacking context
 * so their own paint order just follows DOM order.
 */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.lead-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.lead-modal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  padding: 2rem;
  /* Not whatsapp-pop-in: a CSS animation's own transform replaces the element's, it doesn't
     add to it — reusing that keyframe (translateY/scale only, no centering) made this dialog
     spend the whole animation with its top-left corner pinned at viewport center instead of
     centered, then visibly snap into place the instant the animation ended. */
  animation: lead-modal-pop-in 0.25s ease-out;
}

@keyframes lead-modal-pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.lead-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #4b5563;
  cursor: pointer;
}

.lead-modal__close:hover { background: #e5e7eb; }
.lead-modal__close svg { width: 1rem; height: 1rem; }

.lead-modal__dialog h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.5rem;
  padding-right: 2rem;
}

.lead-modal__dialog > p {
  color: #4b5563;
  margin: 0 0 1.5rem;
}

.lead-modal__dialog form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.lead-modal__dialog label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.375rem;
}

.lead-modal__dialog input[type="text"],
.lead-modal__dialog input[type="email"],
.lead-modal__dialog select,
.lead-modal__dialog textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
  font: inherit;
  color: #111827;
  background: #f9fafb;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.lead-modal__dialog input:focus,
.lead-modal__dialog select:focus,
.lead-modal__dialog textarea:focus {
  outline: none;
  border-color: #2563eb;
  background: #fff;
}

.lead-modal__dialog textarea { resize: vertical; min-height: 4.5rem; }

.lead-modal__dialog button[type="submit"] {
  width: 100%;
  background: #16a34a;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.lead-modal__dialog button[type="submit"]:hover { background: #15803d; }
.lead-modal__dialog button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

/* Gracias page (assets/js/main.js redirects here after the WhatsApp popup form succeeds). */
.thanks-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 3rem;
  box-sizing: border-box;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 60%);
}

.thanks-card {
  max-width: 32rem;
  text-align: center;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.25);
  padding: 3rem 2rem;
}

.thanks-icon {
  display: block;
  box-sizing: border-box;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  padding: 0.75rem;
  border-radius: 9999px;
  background: #dcfce7;
  color: #16a34a;
}

.thanks-card h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
}

.thanks-card p {
  color: #4b5563;
  margin: 0 0 2rem;
  line-height: 1.6;
}

.thanks-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.thanks-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.thanks-button:hover { opacity: 0.9; }
.thanks-button--primary { background: #2563eb; color: #fff; }
.thanks-button--whatsapp { background: #dcfce7; color: #15803d; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .animate-scroll-first,
  .animate-scroll-second,
  .animate-in,
  .whatsapp-bubble,
  .whatsapp-menu,
  .lead-modal__dialog { animation: none; }

  .whatsapp-fab::before { animation: none; opacity: 0; }
}