/* vanilla.css: estilos de presentación; comprueba sus rangos responsive al editar. */
/* Native browser behavior layered over the reference's static design styles. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
.layout.layout-root {
  --overflow: visible;
}
.vanilla-menu-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  max-height: calc(100dvh - 100px) !important;
  overflow-y: auto !important;
}
.nav--main .menu-item-has-children:hover > .sub-menu,
.nav--main .menu-item-has-children:focus-within > .sub-menu,
.vanilla-sub-open > .sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.nav--main .sub-menu {
  position: absolute;
  min-width: 230px;
  z-index: 110;
}
/* Puente de hover: conserva la separación visual de 20px del diseño.
 * El margen no recibe eventos; este pseudo-elemento sí pertenece al submenú.
 * Así, al bajar del título a sus enlaces, :hover permanece activo.
 * Ejemplo: About → atravesar lentamente el espacio → seleccionar FAQ.
 * Se limita al primer nivel desktop para no afectar el acordeón móvil.
 * Si cambia la separación, ajustar esta variable (margen y puente juntos).
 */
.nav--main
  > .nav
  > .menu-item-has-children
  > .sub-menu {
  --submenu-hover-gap: 20px;
  margin-top: var(--submenu-hover-gap) !important;
}
.nav--main
  > .nav
  > .menu-item-has-children
  > .sub-menu::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--submenu-hover-gap)) 0 auto;
  height: var(--submenu-hover-gap);
  background: transparent;
  pointer-events: auto;
}
.nav--dropdown .vanilla-sub-open > .sub-menu {
  position: static !important;
}
.sub-arrow[role="button"] {
  cursor: pointer;
}
.nav--dropdown.nav__container:not(
    .vanilla-menu-open
  ) {
  display: none;
}
.vanilla-carousel {
  overflow-x: auto !important;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y;
}
.vanilla-carousel::-webkit-scrollbar {
  display: none;
}
.vanilla-carousel-track {
  /* La pista deja desbordar las tarjetas; el viewport exterior gestiona el scroll. */
  overflow: visible !important;
  display: flex !important;
  gap: var(--carousel-gap, 20px);
  transform: none !important;
  height: auto !important;
}
.vanilla-carousel-track > .carousel-card {
  flex: 0 0 var(--carousel-card, 33.333%) !important;
  width: var(--carousel-card, 33.333%) !important;
  margin-right: 0 !important;
  scroll-snap-align: start;
}
.headline-dynamic-wrapper {
  perspective: 400px;
}
.headline-dynamic-text {
  white-space: nowrap;
}
.vanilla-motion {
  will-change: transform, filter, opacity;
}
[hidden] {
  display: none !important;
}
.accordion-item {
  height: auto;
}
[data-form-status] {
  width: 100%;
  padding: 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  margin-top: 16px;
}
:focus-visible {
  outline: 2px solid #584365;
  outline-offset: 4px;
}
@media (max-width: 1024px) {
  .vanilla-menu-open {
    position: fixed !important;
    top: 80px !important;
    left: 20px !important;
    right: 20px !important;
    width: calc(100vw - 40px) !important;
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .site-invisible {
    visibility: visible !important;
  }
}

/* La segunda sección debe comenzar después de la portada.
 * La referencia usa -22vh en tablet y -8vh en móvil: ese solapamiento
 * coloca el retrato bajo la portada y corta su parte superior.
 * Mantener el margen en cero conserva el flujo, incluso al cambiar
 * la altura de la ventana. No altera las animaciones internas de scroll.
 * Comprobar: 878×790, 768×568 y 320×568, arriba y tras redimensionar.
 */
.home-layout .block.home-we-see-hear-you-section {
  --margin-top: 0px;
  margin-top: 0;
}

/* Portada de pantalla completa: dvh sigue la altura visible, incluso
 * cuando aparecen las barras del navegador móvil. vh es el respaldo.
 * Usamos min-height para no cortar contenido con zoom o texto grande.
 * Los contenedores flex existentes reparten el espacio alrededor del
 * texto y del botón; el fondo cover llena todo el ancho sin bandas.
 * Ejemplos: 320×568, 792×790, 1440×900 y móvil horizontal 844×390.
 */
.home-layout .block.home-your-expert-counseling-center-section {
  --min-height: 100vh;
  min-height: 100vh;
  min-height: 100dvh;
}
.home-layout .block.home-section-3 {
  --padding-top: clamp(16px, 3dvh, 32px);
  --align-items: center;
}
.home-layout .block.home-button {
  margin-top: 0;
}
/* Los separadores se adaptan a la altura disponible: evitan huecos
 * rígidos de 120px y mantienen aire entre cabecera y contenido. */
.home-layout .block.home-spacer {
  --spacer-size: clamp(70px, 12dvh, 120px);
}
.home-layout .block.home-spacer-2 {
  --spacer-size: clamp(16px, 5dvh, 60px);
}
/* En horizontal con poca altura reducimos tipografía y separaciones,
 * manteniendo legibilidad. Si el contenido no cabe, la sección crece
 * naturalmente en lugar de recortar texto o esconder el botón. */
@media (max-height: 600px) and (min-width: 600px) {
  .home-layout .block.home-your-expert-counseling-center-title .title {
    font-size: clamp(24px, 5dvh, 30px);
  }
  .home-layout .block.home-stop-carrying-this-alone-title .title {
    font-size: clamp(30px, 7dvh, 42px);
  }
  .home-layout .block.home-your-expert-counseling-center-section-5 {
    --gap: 8px;
  }
  .home-layout .block.home-section-3 {
    --padding-top: 12px;
  }
}