body {
      background-color: #10131E;
      color: #FFFFFF;
      font-family: 'Roboto', sans-serif;
      overflow-x: hidden;
    }
    h1, h2, h3, h4, .font-heading {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
    }
    /* Estilos para el recorte mobile de 70% derecho y ocultar gradiente izquierdo */
    @media (max-width: 767px) {
      .hero-mobile-img-box {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: #c6d1e2;
      }
      .hero-mobile-img-box::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        height: 42%;
        background: linear-gradient(to bottom, #c6d1e2 0%, rgba(198, 209, 226, 0.94) 20%, rgba(198, 209, 226, 0) 100%);
        pointer-events: none;
      }
      #hero-slider .hero-mobile-img-box img.hero-mobile-photo {
        display: block;
        position: relative;
        z-index: 0;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        min-width: 0;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
      }
      #hero-slider .hero-mobile-img-box img.hero-mobile-logo {
        display: block;
        position: absolute;
        z-index: 2;
        top: clamp(24px, 6vw, 40px);
        left: 50%;
        right: auto;
        width: 50%;
        height: auto;
        min-width: 0;
        max-width: 50%;
        transform: translateX(-50%);
        object-fit: contain;
        object-position: center;
      }
    }


    /* Flip Card 3D */
    .perspective-1000 {
      perspective: 1000px;
    }
    .transform-style-preserve-3d {
      transform-style: preserve-3d;
    }
    .backface-hidden {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .rotate-y-180 {
      transform: rotateY(180deg);
    }
    .group:hover .group-hover-flip {
      transform: rotateY(180deg);
    }
    .group:focus-within .group-hover-flip {
      transform: rotateY(180deg);
    }

    .group.is-flipped .group-hover-flip {
      transform: rotateY(180deg);
    }

    #hero-slider {
      color-scheme: only light;
      touch-action: pan-y;
    }

    #hero-slider .slides-container {
      display: grid;
    }

    #hero-slider .slide-item {
      grid-area: 1 / 1;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 700ms ease-in-out, visibility 0s linear 700ms;
    }

    #hero-slider .slide-item.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 700ms ease-in-out, visibility 0s linear 0s;
    }

    @media (prefers-reduced-motion: reduce) {
      #hero-slider .slide-item,
      #hero-slider .slide-item.is-active {
        transition: none;
      }
    }
    #site-header {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 300ms ease, opacity 300ms ease;
    }

    #site-header.is-visible {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .hero-slide-logo {
      opacity: 1;
      visibility: visible;
      transition: opacity 300ms ease, visibility 0s linear 0s;
    }

    body.has-scrolled .hero-slide-logo {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 300ms ease, visibility 0s linear 300ms;
    }

    @media (prefers-reduced-motion: reduce) {
      #site-header,
      .hero-slide-logo {
        transition: none;
      }
    }
    /* Mantener constante la proporción del panel de imagen entre 1504px y 1920px. */
    @media (min-width: 768px) {
      #hero-slider .slides-container {
        min-height: clamp(620px, 45.2vw, 868px);
      }

      #hero-slider .desktop-hero-slide-height {
        height: clamp(620px, 45.2vw, 868px);
      }
    }
    /* Recuperar la transición entre el fondo y la foto en anchos de escritorio intermedios. */
    @media (min-width: 1024px) and (max-width: 1240px) {
      #hero-slider .hero-desktop-image::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0 auto 0 0;
        width: 30%;
        pointer-events: none;
        background: linear-gradient(to right, #c6d1e2 0%, rgba(198, 209, 226, 0.94) 18%, rgba(198, 209, 226, 0) 100%);
      }
    }
    @media (max-width: 767px) {
      #hero-slider .hero-mobile-img-box .hero-mobile-cta {
        position: absolute;
        z-index: 3;
        left: 50%;
        bottom: 32px;
        transform: translateX(-50%);
        white-space: nowrap;
      }
    }
    @media (max-width: 767px) {
      body p[class] {
        font-size: 1.125rem;
      }
    }
/* Tarjetas de perfiles: altura flexible y caras superpuestas en móvil. */
@media (max-width: 767px) {
  .profile-flip-card {
    height: auto !important;
  }

  .profile-flip-card > .group-hover-flip {
    display: grid;
    height: auto !important;
  }

  .profile-flip-card > .group-hover-flip > .backface-hidden {
    position: relative !important;
    inset: auto !important;
    grid-area: 1 / 1;
    height: auto !important;
  }
}
@media (max-width: 767px) {
  .profile-flip-card:hover > .group-hover-flip,
  .profile-flip-card:focus-within > .group-hover-flip {
    transform: none;
  }

  .profile-flip-card.is-flipped > .group-hover-flip {
    transform: rotateY(180deg);
  }
}
/* Scrollbar de modales comerciales: discreto en escritorio. */
@media (min-width: 768px) {
  dialog[id^="commercial-"] {
    scrollbar-width: thin;
    scrollbar-color: #667085 #171C2C;
  }

  dialog[id^="commercial-"]::-webkit-scrollbar {
    width: 9px;
  }

  dialog[id^="commercial-"]::-webkit-scrollbar-track {
    background: #171C2C;
  }

  dialog[id^="commercial-"]::-webkit-scrollbar-thumb {
    background: #667085;
    border: 2px solid #171C2C;
    border-radius: 999px;
  }

  dialog[id^="commercial-"]::-webkit-scrollbar-thumb:hover {
    background: #8bd142;
  }

  dialog[id^="commercial-"]::-webkit-scrollbar-button {
    display: none;
  }
}
/* Protección anti-spam y respuesta accesible del formulario de contacto. */
.contact-form-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#contact-form-status[data-state="success"] {
  color: #8bd142;
}

#contact-form-status[data-state="error"] {
  color: #fca5a5;
}

#contact-form button[type="submit"]:disabled {
  cursor: wait;
  opacity: 0.7;
}