/* Shalom Trust — capa compartida de calidad responsive.
   Se carga al final para unificar tokens y comportamiento sin sustituir las
   composiciones propias de cada página. */

:root{
  --brand-orange:#fb923c;
  --brand-orange-strong:#f97316;
  --text-primary:#111827;
  --text-secondary:#5f6874;
  --surface:#ffffff;
  --surface-soft:#f4f6f9;
  --container-max:1630px;
  /* Tope de las bandas "a sangre con margen" (cabecera y hero de portada).
     Es mayor que --container-max porque por diseno esas bandas van mas anchas
     que el contenido. Solo entra en juego por encima de ~2184px: hasta 1920 el
     calculo sigue siendo calc(100% - 84px) y no cambia ni un pixel. */
  --shell-max:2100px;
  --page-gutter:clamp(14px,3vw,48px);
  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:34px;
  --layer-background:0;
  --layer-decoration:1;
  --layer-content:2;
  --layer-floating:20;
  --layer-header:60;
  --layer-dropdown:70;
  --layer-modal:100;
  --layer-toast:110;
  /* Por encima del modal hay dos capas reales que antes usaban 9999/10000/10001,
     numeros sueltos sin relacion con nada. Los valores nuevos conservan el mismo
     ORDEN respecto al resto de la escalera del proyecto (que llega a 250 en el
     formulario rapido), asi que el apilamiento no cambia: solo deja de ser
     arbitrario.
       --layer-menu           el menu movil, que tapa incluso al modal
       --layer-menu-controls  los controles de cabecera sobre el menu abierto */
  --layer-menu:300;
  --layer-menu-controls:310;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:clamp(72px,8vw,96px);
}

.container{
  width:min(var(--container-max),calc(100% - (var(--page-gutter) * 2)));
  margin-inline:auto;
}

:where(main,section,article,header,footer,nav,div,form,fieldset){
  min-width:0;
}

:where(img,picture,video,canvas){
  height:auto;
}

:where(button,input,select,textarea){
  max-width:100%;
  font:inherit;
}

:where(p,h1,h2,h3,h4,h5,h6,a,button,label,li){
  overflow-wrap:break-word;
}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid color-mix(in srgb,var(--brand-orange) 82%,white);
  outline-offset:3px;
}

:where(button,.button,[role="button"]){
  touch-action:manipulation;
}

/* Selector común: ambos idiomas permanecen visibles y el activo se reconoce
   sin depender únicamente del color. */
.language-switcher,
.mobile-header-language,
.st-mobile-menu .language,
.i18n-standalone-switcher{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
}

/* Como en la cabecera movil: el idioma activo y una flecha, no las dos
   opciones. Antes eran dos botones con un divisor; ahora el control entero
   es el conmutador. */
.language-switcher{
  flex:0 0 auto;
  min-height:42px;
  padding:0 15px;
  gap:8px;
  border:1px solid rgba(17,24,39,.14);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#14202E;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Misma flecha que la de la cabecera movil, a la escala de esta barra. */
.language-chevron{
  width:8px;
  height:8px;
  margin-top:-4px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}

.i18n-standalone-switcher button{
  min-width:32px;
  min-height:32px;
  padding:0 7px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
}

.i18n-standalone-switcher button[aria-pressed="true"]{
  background:var(--brand-orange);
  color:#fff;
  box-shadow:0 5px 14px rgba(251,146,60,.24);
}

.language-toggle__divider{
  opacity:.42;
  font-size:12px;
  font-weight:500;
}

/* El ancho y el relleno del selector compacto los define styles.css
   (clamp(70px,19.5vw,78px)). Aqui se ensanchaba a 86px para que cupieran
   "ES | EN"; con el idioma activo y la flecha ya no hace falta. */


.i18n-standalone-switcher{
  min-height:42px;
  padding:4px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(5,7,13,.55);
  color:#fff;
}

/* Los controles interactivos conservan un área táctil cómoda sin inflar los
   enlaces editoriales dentro de párrafos. */
@media (pointer:coarse){
  :where(.button,.nav-menu-trigger,.solutions-trigger,.contact-submit,.qf-submit,.pl-btn){
    min-height:44px;
  }

  /* .menu-toggle, .close-button y .qf-close son CIRCULOS de 40x40. El
     min-height de 44 les subia solo el alto y los dejaba en 40x44: con
     border-radius:50% eso ya no es un circulo, es una elipse de pie. Se ve
     unicamente en pantalla tactil, que es donde se miran.

     El area tactil se recupera con un pseudo-elemento centrado, que agranda
     la zona sensible sin tocar la caja que se pinta. Solo en .menu-toggle:
     los otros dos dibujan su aspa con ::before y ::after y ahi no queda
     ninguno libre, asi que conservan su diametro de 40. */
  .menu-toggle{
    position:relative;
  }

  .menu-toggle::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:44px;
    height:44px;
    transform:translate(-50%,-50%);
  }
}

@media(max-width:760px){
  :where(input,select,textarea){
    font-size:16px;
  }

  .site-header{
    padding-top:max(0px,env(safe-area-inset-top));
  }

  .st-mobile-menu{
    padding-left:max(var(--page-gutter),env(safe-area-inset-left));
    padding-right:max(var(--page-gutter),env(safe-area-inset-right));
  }
}

/* RedSun es una composición autocontenida. Su grid móvil conservaba el ancho
   mínimo del formulario y empujaba el documento 41 px; minmax(0,1fr) corrige
   la causa sin esconder contenido. */
.redsun-page .cta-copy,
.redsun-page .cta-visual,
.redsun-page .feature-copy,
.redsun-page .feature-visual{
  min-width:0;
}

/* Las entradas reveal-right de RedSun parten 55 px fuera de su posición.
   El recorte se hace en cada sección propietaria —no en body— para que esa
   transformación inicial nunca amplíe el lienzo horizontal del documento. */
.redsun-page :is(
  .dashboard-showcase,
  .ecosystem,
  .feature-section,
  .pricing,
  .blog,
  .cta-section,
  .footer
){
  overflow-x:clip;
}

@media(max-width:900px){
  .redsun-page .cta-card{
    grid-template-columns:minmax(0,1fr);
  }

  .redsun-page .cta-copy,
  .redsun-page .cta-visual{
    width:auto;
    max-width:100%;
  }

  .redsun-page .cta-visual img{
    width:100%;
    max-width:100%;
    transform:none;
    border-radius:0;
  }
}

@media(max-width:430px){
  main[data-page="contact"] .hero-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  main[data-page="contact"] .hero-actions .button{
    width:100%;
  }

  .language-switcher{
    min-height:38px;
    padding:3px 6px;
  }

  .language-switcher button{
    min-width:29px;
    min-height:29px;
    padding-inline:5px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }

  :where(.reveal,.reveal-up,.reveal-left,.reveal-right,.reveal-scale){
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
}

@media(min-width:2000px){
  :root{
    --page-gutter:48px;
  }
}

/* ---------------------------------------------------------------------------
   MENÚ DE IDIOMA
   Los conmutadores (.language-switcher, .mobile-header-language y el del menú
   móvil) enseñan una flecha hacia abajo. Antes esa flecha era decorativa: el
   botón entero alternaba ES/EN de golpe, sin dejar elegir. Ahora abre este
   panel, que es lo que la flecha anuncia.

   El panel vive suelto en <body> y se posiciona con position:fixed sobre el
   botón que lo abrió: así funciona igual para los tres conmutadores sin tocar
   el marcado de ninguno, y no anida un botón dentro de otro.
   --------------------------------------------------------------------------- */
.lang-menu{
  position:fixed;
  z-index:10050;
  display:none;
  flex-direction:column;
  gap:2px;
  min-width:148px;
  padding:6px;
  border:1px solid rgba(17,24,39,.12);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 38px rgba(15,23,42,.18);
}

.lang-menu[data-open]{
  display:flex;
}

.lang-menu button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:9px 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#14202E;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.lang-menu button:hover,
.lang-menu button:focus-visible{
  background:rgba(251,146,60,.14);
}

/* El idioma activo se reconoce por la marca, no sólo por el color. */
.lang-menu button.is-active{
  color:#C2410C;
}

.lang-menu button.is-active::after{
  content:"✓";
  font-size:13px;
  line-height:1;
}

@media(prefers-reduced-motion:no-preference){
  .lang-menu[data-open]{
    animation:lang-menu-in .16s ease both;
  }
  @keyframes lang-menu-in{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:none}
  }
}