/* El contenido permanece visible aunque las animaciones no se inicialicen. */
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

html.reveal-ready [data-reveal]:not(.is-visible) {
  opacity: 0 !important;
  transform: translateY(22px) !important;
}

html.reveal-ready [data-reveal] {
  transition: opacity .65s ease, transform .65s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ajuste para notebooks: cada bloque destacado entra completo en el viewport. */
@media (min-width: 801px) {
  .hero {
    height: 100svh;
    min-height: 560px;
    max-height: 100svh;
    padding-top: clamp(92px, 13vh, 110px);
    padding-bottom: clamp(52px, 8vh, 80px);
  }

  .hero h1 {
    margin: clamp(18px, 3vh, 28px) 0;
    font-size: clamp(52px, min(6.3vw, 12vh), 98px);
  }

  .hero-actions {
    margin-top: clamp(20px, 4vh, 38px);
  }

  .intro,
  .showcase,
  .experience,
  .process {
    height: 100svh;
    min-height: 560px;
    max-height: 100svh;
    overflow: hidden;
    padding-top: clamp(34px, 6.5vh, 72px);
    padding-bottom: clamp(34px, 6.5vh, 72px);
  }

  .intro-grid {
    margin: clamp(28px, 6vh, 62px) 0 clamp(30px, 7vh, 72px);
  }

  .intro h2,
  .showcase-copy h2,
  .experience-copy h2,
  .process h2 {
    font-size: clamp(38px, min(4.2vw, 8vh), 66px);
  }

  .intro-copy,
  .showcase-copy > p:not(.eyebrow),
  .experience-copy > p,
  .process-head p {
    font-size: clamp(14px, 2.35vh, 17px);
  }

  .fact-strip article {
    padding-top: clamp(18px, 4vh, 34px);
  }

  .fact-strip strong {
    font-size: clamp(44px, 8vh, 58px);
  }

  .showcase-grid,
  .experience {
    height: 100%;
  }

  .dashboard-frame img {
    max-height: 66vh;
  }

  .experience-image {
    height: min(78vh, 690px);
  }

  .experience-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .experience-copy h2 {
    margin: clamp(22px, 5vh, 50px) 0 clamp(16px, 3vh, 26px);
  }

  .experience-copy blockquote {
    margin-top: clamp(22px, 5vh, 42px);
    font-size: clamp(19px, 3.4vh, 23px);
  }

  .process-head {
    margin: clamp(24px, 5vh, 55px) 0 clamp(28px, 6vh, 64px);
  }

  .steps article {
    min-height: 0;
    padding-top: clamp(18px, 4vh, 30px);
  }

  .steps h3 {
    margin-top: clamp(28px, 8vh, 70px);
  }
}

/* Ícono reconocible de WhatsApp en lugar de las letras “WA”. */
.floating-wa {
  color: transparent;
  font-size: 0;
}

.floating-wa::before {
  content: "";
  width: 27px;
  height: 27px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M16.04 3C8.87 3 3.05 8.75 3.05 15.84c0 2.25.6 4.45 1.72 6.38L3 28.67l6.64-1.73a13.08 13.08 0 0 0 6.4 1.63h.01C23.22 28.57 29 22.82 29 15.73 29 8.65 23.2 3 16.04 3Zm0 23.4a10.9 10.9 0 0 1-5.56-1.5l-.4-.23-3.94 1.03 1.05-3.8-.26-.4a10.5 10.5 0 0 1-1.68-5.66c0-5.9 4.83-10.68 10.77-10.68 5.95 0 10.76 4.76 10.76 10.63 0 5.9-4.8 10.62-10.74 10.62Zm5.91-7.96c-.32-.16-1.9-.93-2.2-1.04-.29-.1-.5-.16-.71.16-.21.32-.82 1.03-1.01 1.24-.18.21-.37.24-.69.08-.32-.16-1.36-.5-2.58-1.58a9.58 9.58 0 0 1-1.79-2.2c-.18-.32-.02-.49.14-.65.14-.14.32-.37.48-.56.16-.18.21-.32.32-.53.1-.21.05-.4-.03-.56-.08-.16-.71-1.7-.98-2.33-.26-.62-.52-.54-.71-.55h-.61c-.21 0-.56.08-.85.4-.29.32-1.11 1.08-1.11 2.63s1.14 3.05 1.3 3.26c.15.21 2.23 3.38 5.4 4.74.75.32 1.34.52 1.8.66.76.24 1.45.2 1.99.12.61-.09 1.9-.77 2.17-1.51.26-.75.26-1.4.18-1.52-.08-.13-.29-.21-.61-.37Z'/%3E%3C/svg%3E");
  display: block;
}

footer {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-logo {
  display: block;
  width: 150px;
  margin-bottom: 5px;
}

.footer-logo img {
  width: 100%;
  height: auto;
}

.footer-phone,
.footer-web {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
}

.footer-phone:hover,
.footer-web:hover {
  color: #fff;
}

footer > p {
  text-align: right;
  margin: 0;
}

@media (max-width: 800px) {
  .intro,
  .showcase,
  .experience,
  .process {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  footer {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .footer-contact {
    align-items: flex-start;
  }

  footer > p {
    text-align: left;
  }
}