/* ==========================================================================
   Menú móvil Shalom Trust — lámina naranja a pantalla completa.

   El diseño es exactamente el entregado: mismos colores, tamaños, tiempos y
   curvas. Los únicos ajustes son de integración, no de apariencia:

     · la clase raíz es .st-mobile-menu (el sitio ya usaba .mobile-menu para
       el dropdown viejo, y sus reglas lo romperían);
     · las variables y los selectores hijos viven dentro de .st-mobile-menu
       para que --brand, --muted, --line, .social, .language, .stars, .num...
       no se filtren al resto del sitio;
     · se omiten los estilos de la página demo (.demo-page/.demo-open) y los
       resets globales, que aquí los aporta styles.css.
   ========================================================================== */

.st-mobile-menu{
  /* Color tomado del isotipo suministrado */
  --brand:#FB923C;
  --brand-deep:#FB923C;
  --white:#FFFFFF;
  --muted:rgba(255,255,255,.48);
  --line:rgba(255,255,255,.38);
  --soft:rgba(255,255,255,.22);
  --ease:cubic-bezier(.76,0,.24,1);

  position:fixed;
  inset:0;
  z-index:var(--layer-menu,300);
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  color:var(--white);
}

.st-mobile-menu button,
.st-mobile-menu a{font:inherit}
.st-mobile-menu a{color:inherit;text-decoration:none}

/* La lámina naranja es la pieza que sube y baja, igual que en la referencia. */
.st-mobile-menu .menu-sheet{
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 55% at 95% 3%, rgba(255,255,255,.06), transparent 58%),
    linear-gradient(160deg,var(--brand) 0%,var(--brand-deep) 100%);
  transform:translateY(100%);
  transition:transform .72s var(--ease);
}

.st-mobile-menu.is-open{
  visibility:visible;
  pointer-events:auto;
}
.st-mobile-menu.is-open .menu-sheet{transform:translateY(0)}

/* HIGIENE DE CAPAS — misma regla que styles.css (.is-animating) y
   trust-story.css (.is-live .orb): la pista `will-change` solo mientras la
   pieza se mueve DE VERDAD, es decir con el menu abriendose o cerrandose.

   Puesta en el estado de reposo, el navegador reservaba texturas en memoria
   de video (la lamina sola es una capa a pantalla completa) durante toda la
   sesion para un panel que pasa cerrado la mayor parte del tiempo. Eso no se
   ve, pero se paga en cada scroll de la pagina que hay debajo.

   Se incluye `.is-closing` para que el cierre tambien vaya compuesto: sin el,
   la pista desapareceria justo al empezar a bajar la lamina. */
.st-mobile-menu.is-open .menu-sheet,
.st-mobile-menu.is-closing .menu-sheet{will-change:transform}

.st-mobile-menu.is-open :is(.menu-link,.menu-login,.menu-bottom),
.st-mobile-menu.is-closing :is(.menu-link,.menu-login,.menu-bottom){
  will-change:transform,opacity;
}

.st-mobile-menu .menu-inner{
  position:relative;
  z-index:2;
  /* dvh, no svh. La lamina (.st-mobile-menu) es fixed inset:0, asi que ocupa
     TODA la pantalla; el contenido, medido en svh (viewport con la barra de
     URL visible), se quedaba corto en cuanto Safari escondia la barra: los
     enlaces se apelotonaban arriba y quedaba una franja naranja muerta de
     ~120px abajo. dvh sigue al viewport real, que es justo lo que cubre la
     lamina. Aqui no hay animacion ligada al scroll, asi que el caracter
     dinamico de dvh no puede producir saltos. */
  height:100vh;
  height:100svh;
  height:100dvh;
  min-height:0;
  /* Red de seguridad: en pantallas muy bajas (movil en horizontal) el
     contenido nunca queda cortado. Con el menu holgado no se ve nada. */
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:
    max(14px,env(safe-area-inset-top))
    16px
    max(42px,calc(env(safe-area-inset-bottom) + 24px));
  display:flex;
  flex-direction:column;
}

.st-mobile-menu .menu-top{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:10px;
  min-height:46px;
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .34s ease .18s,transform .42s var(--ease) .18s;
}
.st-mobile-menu.is-open .menu-top{opacity:1;transform:none}

.st-mobile-menu .brand-mark{
  width:36px;
  height:36px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  display:block;
}

.st-mobile-menu .language{
  height:44px;
  min-width:74px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:16px;
  color:#fff;
  background:transparent;
  font-size:16px;
  font-weight:500;
  letter-spacing:.01em;
}
.st-mobile-menu .chevron{
  width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}

.st-mobile-menu .close-button{
  width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.28);position:relative;cursor:pointer;
  flex:0 0 auto;
}
.st-mobile-menu .close-button::before,
.st-mobile-menu .close-button::after{
  content:"";position:absolute;left:50%;top:50%;width:21px;height:2px;border-radius:3px;background:#fff;
  transform-origin:center;
}
.st-mobile-menu .close-button::before{transform:translate(-50%,-50%) rotate(45deg)}
.st-mobile-menu .close-button::after{transform:translate(-50%,-50%) rotate(-45deg)}

.st-mobile-menu .menu-nav{
  margin-top:clamp(34px,7.5dvh,58px);
  display:flex;
  flex-direction:column;
  /* El aire entre entradas va en dvh, no en px: es lo que hace que el bloque
     de navegacion ocupe la pantalla como en la referencia sin desbordarla en
     moviles bajos, donde el clamp lo devuelve a casi nada. */
  gap:clamp(6px,3dvh,26px);
}

.st-mobile-menu .menu-link{
  position:relative;
  display:inline-flex;
  align-items:flex-start;
  width:max-content;
  max-width:100%;
  color:#fff;
  font-size:clamp(34px,10.9vw,48px);
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:400;
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .38s ease,
    transform .52s var(--ease),
    color .2s ease;
}
.st-mobile-menu .menu-link .num{
  margin-left:8px;
  margin-top:-2px;
  color:rgba(255,255,255,.48);
  font-size:12px;
  line-height:1;
  letter-spacing:-.02em;
  font-weight:600;
}
.st-mobile-menu.is-open .menu-link{opacity:1;transform:translateY(0)}
.st-mobile-menu.is-open .menu-link:nth-child(1){transition-delay:.23s}
.st-mobile-menu.is-open .menu-link:nth-child(2){transition-delay:.28s}
.st-mobile-menu.is-open .menu-link:nth-child(3){transition-delay:.33s}
.st-mobile-menu.is-open .menu-link:nth-child(4){transition-delay:.38s}
.st-mobile-menu.is-open .menu-link:nth-child(5){transition-delay:.43s}
.st-mobile-menu.is-open .menu-link:nth-child(6){transition-delay:.48s}
.st-mobile-menu .menu-link:active{transform:translateX(8px)}

.st-mobile-menu .menu-bottom{
  margin-top:auto;
  display:grid;
  /* minmax(0,...) y no 1.1fr/.9fr a secas: una pista `fr` tiene min-width
     auto, asi que el correo —que va en nowrap y desde mobile-perf.css pesa
     15-16px en vez de los 13px para los que se dibujo esta fila— ensanchaba
     su columna y se metia encima del sello de la derecha. Con el minimo en 0
     cada columna respeta su reparto y las dos piezas no pueden solaparse. */
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:end;
  gap:16px;
  padding-top:18px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .36s ease .52s,transform .46s var(--ease) .52s;
}
.st-mobile-menu.is-open .menu-bottom{opacity:1;transform:none}

/* Era un <div>; ahora es el enlace a WhatsApp. display:block conserva el
   mismo bloque y el mismo margen inferior que tenía el div. */
.st-mobile-menu .contact-label{display:block;font-size:20px;line-height:1;font-weight:500;letter-spacing:-.035em;margin-bottom:10px}
.st-mobile-menu .contact-mail{
  display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.55);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;
}
.st-mobile-menu .mini-link{
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;text-decoration:none;
}

.st-mobile-menu .social-area{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.st-mobile-menu .socials{display:flex;gap:10px}
.st-mobile-menu .social{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;
  transition:transform .2s ease,background .2s ease;
}
.st-mobile-menu .social:active{transform:scale(.93);background:rgba(255,255,255,.32)}
.st-mobile-menu .social svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}

.st-mobile-menu .verified{
  display:flex;align-items:center;gap:8px;color:#fff;
}
.st-mobile-menu .verified-mark{
  width:30px;height:30px;border-radius:50%;border:5px solid #fff;border-right-color:transparent;transform:rotate(-20deg);
}
.st-mobile-menu .stars{font-size:12px;letter-spacing:1px;line-height:1;margin-bottom:3px}
.st-mobile-menu .verified-text{font-size:10px;line-height:1.15;white-space:nowrap}

@media (max-width:380px){
  .st-mobile-menu .menu-inner{
    padding-left:12px;
    padding-right:12px;
    padding-bottom:max(36px,calc(env(safe-area-inset-bottom) + 20px));
  }
  .st-mobile-menu .brand-mark{width:32px;height:32px}
  .st-mobile-menu .language{height:40px;min-width:68px;padding-inline:11px;font-size:14px}
  .st-mobile-menu .close-button{width:40px;height:40px}
  .st-mobile-menu .menu-nav{margin-top:clamp(28px,6dvh,44px)}
  .st-mobile-menu .menu-link{font-size:clamp(31px,10.5vw,40px)}
  .st-mobile-menu .contact-label{font-size:18px}
  .st-mobile-menu .contact-mail{font-size:11px}
  .st-mobile-menu .social{width:33px;height:33px}
}

/* En teléfonos anchos el tope anterior de 48px hacía que la navegación se
   viera pequeña pese a disponer de más superficie. */
@media (min-width:400px) and (max-width:699px) and (min-height:760px){
  .st-mobile-menu .menu-nav{
    margin-top:clamp(38px,6.5dvh,62px);
    gap:clamp(8px,2.35dvh,23px);
  }
  .st-mobile-menu .menu-link{
    font-size:clamp(48px,12vw,56px);
  }
  .st-mobile-menu .menu-link .num{
    margin-left:10px;
    font-size:13px;
  }
}

/* PANTALLAS BAJAS. Los valores eran fijos (gap:2px, margin-top:24px), pensados
   para el peor caso; pero la consulta se dispara en cualquier telefono cuyo
   viewport declarado baje de 700px, y ahi sobraba sitio: los seis enlaces
   quedaban apelotonados arriba con un hueco enorme debajo.

   Ahora los tres valores son fluidos y su MINIMO es exactamente el valor
   anterior, asi que en la pantalla mas baja el menu sigue cabiendo igual que
   antes y en cuanto hay aire lo reparte. */
@media (max-width:699px) and (max-height:700px){
  .st-mobile-menu .menu-inner{
    padding-top:max(10px,env(safe-area-inset-top));
    padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));
  }
  .st-mobile-menu .menu-nav{
    margin-top:clamp(24px,5dvh,48px);
    gap:clamp(2px,2.4dvh,20px);
  }
  .st-mobile-menu .menu-link{font-size:clamp(28px,min(8.5vw,5.4dvh),44px)}
  .st-mobile-menu .menu-bottom{padding-top:12px}
  .st-mobile-menu .social-area{gap:10px}
}

/* Cierre: primero desaparece el contenido; luego la lámina baja. */
.st-mobile-menu.is-closing .menu-top,
.st-mobile-menu.is-closing .menu-link,
.st-mobile-menu.is-closing .menu-login,
.st-mobile-menu.is-closing .menu-bottom{
  opacity:0!important;
  transform:translateY(10px)!important;
  transition-delay:0s!important;
  transition-duration:.16s!important;
}
.st-mobile-menu.is-closing .menu-sheet{
  transform:translateY(100%);
  transition-delay:.14s;
}

@media (min-width:700px){
  /* Este menú está diseñado exclusivamente para móvil. */
  .st-mobile-menu .menu-inner{max-width:430px;margin:0 auto}
  .st-mobile-menu .menu-sheet{left:50%;right:auto;width:430px;transform:translate(-50%,100%)}
  .st-mobile-menu.is-open .menu-sheet{transform:translate(-50%,0)}
  .st-mobile-menu.is-closing .menu-sheet{transform:translate(-50%,100%)}
}

@media (prefers-reduced-motion:reduce){
  .st-mobile-menu,
  .st-mobile-menu *,
  .st-mobile-menu *::before,
  .st-mobile-menu *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}

/* ==========================================================================
   ACCEDER — el enlace de sesión, que en escritorio vive en la barra.

   Va suelto entre la lista y el pie, NO como enlace numerado, para no romper
   la secuencia 01-06 del diseño. Reutiliza el marco del selector de idioma en
   vez de introducir un estilo nuevo. Entra escalonado justo detrás del último
   enlace (que va a .48s) y se desvanece con el resto al cerrar.

   En el HTML el texto es "Login" a pelo, sin hijos ni espacios sobrantes:
   i18n.js casa por nodo de texto exacto y ya trae ['Login','Acceder','Log in'],
   así que en español se lee "Acceder" y en inglés "Log in".
   ========================================================================== */
.st-mobile-menu .menu-login{
  align-self:flex-start;
  margin-top:26px;
  display:inline-flex;
  align-items:center;
  height:52px;
  padding:0 26px;
  border:1px solid var(--line);
  border-radius:18px;
  color:#fff;
  font-size:18px;
  font-weight:500;
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(26px);
  transition:opacity .38s ease,transform .52s var(--ease);
}
.st-mobile-menu.is-open .menu-login{
  opacity:1;
  transform:translateY(0);
  transition-delay:.53s;
}
.st-mobile-menu .menu-login:active{background:rgba(255,255,255,.18)}

/* Pantallas bajas: el mismo recorte que ya se aplica al resto del menú. */
@media (max-height:700px){
  .st-mobile-menu .menu-login{margin-top:18px;height:46px;padding:0 22px;font-size:16px}
}