/* ========================================================================== 
   Footer reveal — la landing blanca es la capa superior; el footer ya está
   detrás y se descubre con el scroll natural. No hay fade ni slide del footer.
   ========================================================================== */

body:has(> main + [data-site-footer]){
  position:relative;
}

/* La página completa conserva un fondo opaco para tapar realmente el footer
   durante todo el recorrido. Las curvas pertenecen únicamente al borde bajo. */
body > main:has(+ [data-site-footer]){
  position:relative;
  z-index:2;
  margin:0;
  border-radius:0 0 34px 34px;
  background:#fff;
  box-shadow:0 18px 34px rgba(31,41,55,.09);
}

/* Las páginas individuales dibujan su fondo con un pseudo-elemento fijo.
   Se conserva el mismo fondo, pero limitado al main para que no tape el
   footer cuando comienza el reveal. */
body > main.product-page:has(+ [data-site-footer])::before{
  position:absolute;
  inset:0;
}

/* La última sección hereda la misma superficie: no existe hueco entre capas
   y las esquinas permanecen visibles mientras la landing sale hacia arriba. */
body > main:has(+ [data-site-footer]) > :last-child{
  position:relative;
  margin:0;
  border-radius:0 0 34px 34px;
  background:#fff;
}

/* El footer permanece en su posición final detrás de la landing. Sticky lo
   sostiene contra el fondo del viewport; lo único que se retira es el main. */
body > main + [data-site-footer]{
  position:sticky;
  bottom:0;
  z-index:1;
  min-height:82svh;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* El navbar mantiene su comportamiento existente y queda sobre ambas capas. */
body:has(> main + [data-site-footer]) > :is(.site-header,[data-site-header]){
  z-index:60;
}

/* La cabecera es transparente y vive FUERA de <main>, asi que en la franja
   que ocupa (84px) no hay ninguna capa opaca. Cuando el footer pegajoso queda
   mas alto que el viewport —pasa en ventanas de escritorio de ~1000-1200 de
   ancho, donde la rejilla del footer a cuatro columnas ya no cabe— sticky lo
   apoya contra el borde superior del body y su naranja se colaba por detras
   del navbar.

   Se tapa desde el propio body y no desde main: en /planes/ main lleva
   overflow:clip, que recorta cualquier pseudo-elemento que sobresalga por
   arriba.

   - background-color:inherit toma el fondo real de cada pagina (#fff en
     inicio, #f4f6f9 en planes), en vez de fijar un blanco que alli no pega.
   - z-index:2 lo deja sobre el footer (z:1) y bajo la cabecera (z:60).
   - Es absolute, no fixed: solo cubre los primeros 200px del DOCUMENTO, asi
     que al bajar se va con el scroll y no estorba cuando el footer se revela.
   - En las paginas de producto main empieza en y=0 y es opaco; al pintarse
     despues (mismo z-index, orden de arbol) la foto del hero pasa por encima
     y alli esta banda no se ve. */
body:has(> main + [data-site-footer])::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:200px;
  background-color:inherit;
  z-index:2;
  pointer-events:none;
}

/* ========================================================================== 
   Footer global Shalom Trust
   ========================================================================== */

.st-contact-footer{
  --st-footer-bg:#FB923C;
  --st-footer-text:#111827;
  --st-footer-muted:#5f3519;
  --st-footer-accent:#ffffff;
  --st-footer-surface:#f4f6f9;
  width:100%;
  min-height:max(82svh,760px);
  padding:78px clamp(28px,3vw,46px) 44px;
  background:var(--st-footer-bg);
  color:var(--st-footer-text);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.st-contact-footer,
.st-contact-footer *{
  box-sizing:border-box;
}

.st-contact-footer a{
  color:inherit;
  text-decoration:none;
}

.st-footer-grid{
  display:grid;
  /* Los minimos iban en px (430/190/145/180). Cuando el contenedor se estrecha
     por debajo de la suma de esos minimos + los gaps, las pistas dejan de
     encoger y el footer empuja el documento a lo ancho. Con minmax(0,...) las
     proporciones fr son EXACTAMENTE las mismas mientras hay sitio -y ahi es
     donde vive el diseno-, pero por debajo encogen en vez de desbordar. */
  grid-template-columns:minmax(0,1.55fr) minmax(0,.68fr) minmax(0,.48fr) minmax(0,.58fr);
  column-gap:clamp(32px,4.25vw,66px);
  align-items:start;
  width:100%;
}

.st-footer-intro h2{
  margin:0 0 24px;
  font-size:clamp(48px,4.2vw,61px);
  line-height:.94;
  letter-spacing:-.043em;
  font-weight:700;
  color:var(--st-footer-text);
}

.st-footer-logo{
  display:block;
  width:124px;
  height:52px;
  margin-bottom:57px;
  padding:7px 9px;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.st-footer-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}

.st-footer-lead{
  max-width:600px;
  margin:0 0 28px;
  color:var(--st-footer-muted);
  font-size:16px;
  line-height:1.45;
}

.st-footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  width:210px;
  min-height:46px;
  margin-bottom:34px;
  border-radius:999px;
  background:var(--st-footer-accent);
  color:var(--st-footer-text);
  font-size:16px;
  font-weight:600;
}

.st-footer-cta:hover,
.st-footer-cta:focus-visible{
  background:var(--st-footer-surface);
  color:var(--st-footer-text);
}

.st-footer-cta svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.st-footer-email-hint{
  margin:0 0 7px;
  color:var(--st-footer-muted);
  font-size:16px;
  line-height:1.45;
}

.st-footer-email{
  display:inline-block;
  margin-bottom:23px;
  font-size:16px;
  font-weight:700;
}

.st-footer-email:hover,
.st-footer-email:focus-visible{
  color:var(--st-footer-accent);
}

.st-footer-award{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:122px;
  height:123px;
  padding-top:9px;
  border:2px solid var(--st-footer-text);
  border-radius:6px 6px 0 0;
  background:transparent;
  clip-path:polygon(0 0,100% 0,100% 77%,50% 100%,0 77%);
}

.st-footer-award-top{
  text-align:center;
  font-size:8px;
  line-height:1;
}

.st-footer-award-top span{
  display:block;
  margin-bottom:3px;
  font-size:17px;
}

.st-footer-award-top small{
  display:block;
  font-size:6px;
  letter-spacing:.15em;
}

.st-footer-award-band{
  width:calc(100% + 8px);
  margin-top:8px;
  padding:6px 0 5px;
  background:var(--st-footer-accent);
  color:var(--st-footer-bg);
  text-align:center;
  font-size:17px;
  font-style:italic;
  font-weight:700;
  letter-spacing:-.04em;
}

.st-footer-award-bottom{
  margin-top:7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
}

.st-footer-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding-top:78px;
}

.st-footer-col h3{
  margin:0 0 24px;
  color:var(--st-footer-text);
  font-size:18px;
  line-height:1;
  font-weight:700;
}

.st-footer-col p,
.st-footer-col a,
.st-footer-col address{
  margin-top:0;
  color:var(--st-footer-muted);
  font-size:16px;
  line-height:1.35;
}

.st-footer-col a:hover,
.st-footer-col a:focus-visible{
  color:var(--st-footer-text);
}

.st-footer-contact p{
  margin-bottom:0;
}

.st-footer-contact .st-footer-underlined{
  text-decoration:underline;
  text-underline-offset:2px;
}

.st-footer-contact address{
  margin-bottom:0;
  margin-top:18px;
  font-style:normal;
}

.st-footer-brand-dot{
  display:block;
  width:10px;
  height:10px;
  margin:12px auto 0;
  border-radius:50%;
  background:var(--st-footer-accent);
}

.st-footer-social a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:112px;
  margin-bottom:14px;
}

.st-footer-social a span:last-child{
  color:var(--st-footer-muted);
  font-size:20px;
}

.st-footer-services a{
  margin-bottom:13px;
}

.st-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:70px;
  color:var(--st-footer-muted);
  font-size:14px;
}

.st-footer-bottom p{
  margin:0;
}

.st-footer-bottom a{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--st-footer-text);
  font-weight:600;
}

.st-footer-bottom a span{
  font-size:21px;
  font-weight:300;
}

.st-contact-footer :focus-visible{
  outline:2px solid var(--st-footer-accent);
  outline-offset:4px;
}

@media(max-width:1250px){
  .st-footer-grid{
    /* 390+180+145 = 715px de minimos + 90px de gap = 805px. Entre 801px y
       ~860px el contenedor mide menos que eso y el footer se salia 4px: la
       regla de rescate estaba en max-width:800px y dejaba esa franja al aire
       (justo el iPhone en horizontal, 844px). */
    grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.55fr);
    gap:45px;
  }

  .st-footer-intro{
    grid-row:1 / span 2;
  }

  .st-footer-contact{
    grid-column:2;
    grid-row:1;
  }

  .st-footer-social{
    grid-column:2;
  }

  .st-footer-services{
    grid-column:3;
    grid-row:1 / span 2;
  }
}

@media(max-width:800px){
  .st-contact-footer{
    min-height:85svh;
    padding:48px 22px 28px;
  }

  .st-footer-grid{
    grid-template-columns:1fr 1fr;
    row-gap:50px;
  }

  .st-footer-intro{
    grid-column:1 / -1;
    grid-row:auto;
  }

  .st-footer-logo{
    margin-bottom:38px;
  }

  .st-footer-col{
    padding-top:0;
  }

  .st-footer-contact{
    grid-column:1;
    grid-row:auto;
  }

  .st-footer-social{
    grid-column:1;
  }

  .st-footer-services{
    grid-column:2;
    grid-row:2 / span 2;
  }

  .st-footer-bottom{
    align-items:flex-end;
    gap:20px;
  }
}

@media(max-width:620px){
  body > main:has(+ [data-site-footer]),
  body > main:has(+ [data-site-footer]) > :last-child{
    border-radius:0 0 22px 22px;
  }

  body > main + [data-site-footer]{
    /* Mismo reveal de escritorio: el footer permanece detrás y la superficie
       redondeada del main lo descubre al salir. El alto sigue siendo natural,
       por lo que todos los enlaces permanecen accesibles en teléfonos. */
    position:sticky;
    bottom:0;
    min-height:100svh;
  }

  /* En telefono el contenido cabe dentro de la capa pegajosa. Asi se conserva
     la misma profundidad de escritorio sin convertir el footer en una columna
     de varias pantallas que rompa la secuencia del reveal. */
  .st-contact-footer{
    padding:22px 18px max(16px,env(safe-area-inset-bottom));
  }

  .st-footer-grid{
    /* El minimo de 124px dejaba 1.3px de holgura a 320px: cualquier texto mas
       largo (ingles) lo rompia. */
    grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    column-gap:18px;
    row-gap:18px;
  }

  .st-footer-intro{
    display:grid;
    grid-template-columns:minmax(0,1fr) 92px;
    column-gap:14px;
    grid-column:1 / -1;
    grid-row:auto;
    align-items:start;
  }

  .st-footer-logo{
    grid-column:1 / -1;
    width:108px;
    height:38px;
    margin-bottom:15px;
    padding:5px 7px;
    border-radius:9px;
  }

  .st-footer-intro h2{
    grid-column:1 / -1;
    margin-bottom:11px;
    font-size:36px;
    line-height:.91;
  }

  .st-footer-lead{
    grid-column:1 / -1;
    max-width:430px;
    margin-bottom:13px;
    font-size:13px;
    line-height:1.34;
  }

  .st-footer-cta{
    grid-column:1;
    width:154px;
    min-height:39px;
    margin-bottom:11px;
    gap:8px;
    font-size:13px;
  }

  .st-footer-cta svg{
    width:16px;
    height:16px;
  }

  .st-footer-email-hint{
    grid-column:1;
    margin-bottom:4px;
    padding-right:4px;
    font-size:11px;
    line-height:1.28;
  }

  .st-footer-email{
    grid-column:1;
    margin-bottom:0;
    font-size:12px;
  }

  .st-footer-award{
    grid-column:2;
    grid-row:4 / span 3;
    width:88px;
    height:91px;
    padding-top:6px;
  }

  .st-footer-award-top span{
    margin-bottom:2px;
    font-size:13px;
  }

  .st-footer-award-top small{
    font-size:4.5px;
  }

  .st-footer-award-band{
    margin-top:5px;
    padding:4px 0;
    font-size:13px;
  }

  .st-footer-award-bottom{
    margin-top:4px;
    font-size:8px;
  }

  .st-footer-col{
    padding-top:0;
  }

  .st-footer-contact{
    grid-column:1;
    grid-row:2;
  }

  .st-footer-social{
    grid-column:1;
    grid-row:3;
  }

  .st-footer-services{
    grid-column:2;
    grid-row:2 / span 2;
  }

  .st-footer-col h3{
    margin-bottom:10px;
    font-size:15px;
  }

  .st-footer-col p,
  .st-footer-col a,
  .st-footer-col address{
    font-size:11.5px;
    line-height:1.28;
  }

  .st-footer-contact address{
    margin-top:8px;
  }

  .st-footer-brand-dot{
    width:7px;
    height:7px;
    margin-top:8px;
  }

  .st-footer-social a{
    width:92px;
    margin-bottom:7px;
  }

  .st-footer-social a span:last-child{
    font-size:15px;
  }

  .st-footer-services a{
    margin-bottom:5px;
  }

  .st-footer-bottom{
    flex-direction:row;
    align-items:center;
    gap:12px;
    margin-top:15px;
    font-size:10px;
    line-height:1.25;
  }

  .st-footer-bottom a{
    flex:0 0 auto;
    gap:6px;
  }

  .st-footer-bottom a span{
    font-size:16px;
  }
}

@media(max-width:540px){
  .st-footer-grid{
    column-gap:14px;
  }
}