/* Ümba — hero de la landing (Ü 3D interactiva). Cargado solo en la plantilla "Landing Ümba". */

/* Layout de la landing: el hero ocupa exactamente lo que queda de pantalla bajo el header
   (y bajo el aviso de tienda / barra de admin si existen), sin scroll. */
body.umba-landing { height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); min-height: 0; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; }
body.umba-landing .umba-hero__stage { min-height: 160px; }
/* Pantallas muy bajas (móvil apaisado): se permite scroll para no ocultar el botón */
@media (max-height: 520px) {
  body.umba-landing { height: auto; min-height: 100dvh; overflow: auto; }
}
body.umba-landing .ms-main,
body.umba-landing .ms-page-content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; -webkit-clip-path: none !important; clip-path: none !important; }
body.umba-landing .umba-hero { flex: 1 1 auto; min-height: 0; }

.umba-hero {
  --umba-azul: #343D57;
  --umba-terracota: #E2725B;
  --umba-verde: #C9D395;
  --umba-fondo: transparent;
  --umba-header-h: var(--main-header-height-md, 80px);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(100dvh - var(--umba-header-h));
  padding: 0 24px 40px;
  box-sizing: border-box;
  background: var(--umba-fondo);
  overflow: hidden;
  font-family: 'Nunito', 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--umba-azul);
}

/* Escenario: ocupa todo el espacio libre; la Ü se encuadra sola dentro */
.umba-hero__stage {
  position: relative;
  width: 100%;
  max-width: 920px;
  flex: 1 1 0;
  min-height: 240px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.umba-hero__stage.is-dragging { cursor: grabbing; }

.umba-hero__canvas,
.umba-hero__fallback {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.umba-hero__canvas { outline: none; }
.umba-hero__canvas:focus-visible { outline: 2px dashed var(--umba-terracota); outline-offset: 8px; border-radius: 24px; }

/* Fallback: imagen estática mientras carga el 3D o si no hay WebGL */
.umba-hero__fallback {
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  transition: opacity .5s ease;
}
.umba-hero__stage.is-3d .umba-hero__fallback { opacity: 0; }

/* Pista sutil de interacción; desaparece tras el primer toque */
.umba-hero__hint {
  margin: 4px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--umba-azul) 45%, transparent);
  transition: opacity .6s ease;
  pointer-events: none;
}
.umba-hero__stage.is-touched + .umba-hero__hint { opacity: 0; }

.umba-hero__tagline {
  margin: 18px 0 22px;
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.25;
  text-align: center;
  letter-spacing: -0.005em;
}
.umba-hero__tagline em {
  font-style: normal;
  color: var(--umba-terracota);
}

.umba-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 16px 36px;
  border-radius: 999px;
  background: var(--umba-terracota);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .12em;
  text-decoration: none;
  box-shadow: 0 10px 28px -12px rgba(226, 114, 91, .7);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.umba-hero__cta:hover,
.umba-hero__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(226, 114, 91, .8);
  background: #d9664f;
  color: #fff;
}
.umba-hero__cta:active { transform: translateY(0); }

@media (max-width: 767px) {
  .umba-hero { --umba-header-h: var(--main-header-height, 70px); padding: 0 20px max(28px, env(safe-area-inset-bottom)); }
  .umba-hero__tagline { margin: 12px 0 18px; }
  .umba-hero__cta { width: 100%; max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .umba-hero__cta, .umba-hero__fallback, .umba-hero__hint { transition: none; }
}

/* ---------- Fondos de marca al hacer scroll (escritorio) ---------- */
body.umba-landing,
body.umba-landing .main-header,
body.umba-landing .main-header__layout::before,
body.umba-landing .ms-main { transition: background-color .7s ease; }
body.umba-landing .umba-hero__tagline,
body.umba-landing .umba-hero__tagline em,
body.umba-landing .umba-hero__hint,
body.umba-landing .main-header__default .navbar-nav > .menu-item > a,
body.umba-landing .header__cart-icon svg { transition: color .5s ease, fill .5s ease; }

body.umba-landing[data-umba-bg="verde"] { --color-bg: #C9D395; }
body.umba-landing[data-umba-bg="azul"] {
  --color-bg: #343D57;
  --color-contrast-higher: #fff;
  --color-contrast-high: #fff;
}
body.umba-landing[data-umba-bg="terracota"] { --color-bg: #E2725B; }

body.umba-landing[data-umba-bg] { background-color: var(--color-bg); }

/* Azul: todo el texto en blanco, logo en su versión clara */
body.umba-landing[data-umba-bg="azul"] .umba-hero__tagline,
body.umba-landing[data-umba-bg="azul"] .umba-hero__tagline em,
body.umba-landing[data-umba-bg="azul"] .umba-hero__hint { color: #fff; }
body.umba-landing[data-umba-bg="azul"] .logo-dark { opacity: 0; }
body.umba-landing[data-umba-bg="azul"] .logo-light { opacity: 1; }
body.umba-landing[data-umba-bg="azul"] .header__cart-count { background: #E2725B; }

/* Terracota: botón azul con texto blanco; "imaginación" en blanco para que se lea */
body.umba-landing[data-umba-bg="terracota"] .umba-hero__cta {
  background: #343D57;
  color: #fff;
  box-shadow: 0 10px 28px -12px rgba(52, 61, 87, .7);
}
body.umba-landing[data-umba-bg="terracota"] .umba-hero__cta:hover { background: #2a3248; }
body.umba-landing[data-umba-bg="terracota"] .umba-hero__tagline em,
body.umba-landing[data-umba-bg="terracota"] .umba-hero__hint { color: #fff; }
body.umba-landing[data-umba-bg="terracota"] .header__cart-count { background: #343D57; }

/* Verde: el botón terracota sigue; nada más cambia */

/* El doble toque cambia el color de fondo (initUmbaScrollColors): que el navegador no haga zoom. */
body.umba-landing { touch-action: manipulation; }

/* Terracota: el botón del header pasa a verde con letras azules y el menú se subraya en verde
   (en terracota el terracota del tema se perdía contra el fondo). */
body.umba-landing[data-umba-bg="terracota"] .umba-header-cta {
  background: #C9D395;
  border-color: #C9D395;
  color: #fff !important;
}
body.umba-landing[data-umba-bg="terracota"] .umba-header-cta:hover,
body.umba-landing[data-umba-bg="terracota"] .umba-header-cta:focus-visible {
  background: transparent;
  color: #C9D395 !important;
}
/* El menú se queda en blanco y solo se pone verde al pasar el cursor.
   OJO: Most mete el texto en un <span> dentro del enlace y lo colorea ahí, así que hay que
   pintar también el span o gana el color del tema (terracota, que se pierde sobre terracota). */
/* Most anima el menú con dos textos: el <span> sube y sale, y una copia (a::after) entra desde
   abajo. El que sube se queda blanco; el que entra es el que se pone verde. */
body.umba-landing[data-umba-bg="terracota"] .main-header__nav .navbar-nav > li > a,
body.umba-landing[data-umba-bg="terracota"] .main-header__nav .navbar-nav > li > a span,
body.umba-landing[data-umba-bg="terracota"] .main-header__nav .navbar-nav > li > a:hover span { color: #fff !important; }
body.umba-landing[data-umba-bg="terracota"] .main-header__nav .navbar-nav > li > a::after { color: #C9D395 !important; }


/* Selector ES/EN: mismo criterio que el menú. Hereda el azul sobre los fondos claros y pasa a
   blanco sobre los oscuros, donde el azul se perdería. */
body.umba-landing[data-umba-bg="terracota"] .umba-lang,
body.umba-landing[data-umba-bg="azul"] .umba-lang { color: #fff; }