/* ==========================================================================
   Design System — Applauz Child (Bold Builder)
   File: /wp-content/themes/applauz-child/assets/css/design-system.css
   Goal: Premium + arquitectónico (neutros mandan, verde firma)
   Safe-by-default: Tokens globales; estilos aplican principalmente en Home.
   ========================================================================== */

/* 1) TOKENS ================================================================= */

:root{
  /* Colors */
  --c-primary: #0B5A3C;
  --c-primary-dark: #063525;
  --c-accent: #CDB28A;     /* accent “sand” (warm) */
  --c-stone: #ECE7DE;      /* requested stone */
  --c-bg: #F6F3EE;         /* background (stone light) */
  --c-surface: #FFFFFF;
  --c-text: #141816;
  --c-muted: #56605B;
  --c-border: #D7D1C7;

  /* Type (use as tokens; apply via scoped rules below) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

  --fs-1: clamp(2.1rem, 1.6rem + 1.8vw, 3.1rem);  /* H1 */
  --fs-2: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);  /* H2 */
  --fs-3: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); /* H3 */
  --fs-body: 1rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.15;
  --lh-title: 1.22;
  --lh-body: 1.6;

  /* Spacing scale */
  --sp-xs: .5rem;
  --sp-s:  .75rem;
  --sp-m:  1rem;
  --sp-l:  1.5rem;
  --sp-xl: 2.25rem;

  --section-py: clamp(2.25rem, 1.5rem + 2vw, 4.25rem);
  --section-px: clamp(1.1rem, .8rem + 1vw, 2rem);

  /* Radius */
  --r-btn: 12px;
  --r-card: 18px;

  /* Shadow */
  --sh-card: 0 10px 28px rgba(20, 24, 22, .08);

  /* Focus ring (accesible) */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-primary) 32%, transparent);
}

/* =========================================================
   ZX Cardset — Typography + Check bullets (solo esta Inner Row)
   Aplica a: <div class="bt_bb_row_inner ... zx-cardset ...">
   ========================================================= */

.bt_bb_row_inner.zx-cardset .bt_bb_text h4{
  font-weight: 600 !important;
}

/* Subimos la legibilidad de los textos dentro de la tarjeta */
.bt_bb_row_inner.zx-cardset .bt_bb_text p,
.bt_bb_row_inner.zx-cardset .bt_bb_text_content p{
  font-size: 1.125rem !important;  /* 20px si html=16px */
  line-height: 1.3 !important;
}

/* Quita bullets default + resetea paddings del UL */
.bt_bb_row_inner.zx-cardset .bt_bb_text ul,
.bt_bb_row_inner.zx-cardset .bt_bb_text_content ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Cada LI como “fila” con icono + texto */
.bt_bb_row_inner.zx-cardset .bt_bb_text ul li,
.bt_bb_row_inner.zx-cardset .bt_bb_text_content ul li{
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

/* Como Bold mete <p> dentro de <li>, quitamos márgenes */
.bt_bb_row_inner.zx-cardset .bt_bb_text ul li p,
.bt_bb_row_inner.zx-cardset .bt_bb_text_content ul li p{
  margin: 0 !important;
}

/* Icono check (SVG) usando mask para controlar color por CSS */
.bt_bb_row_inner.zx-cardset .bt_bb_text ul li::before,
.bt_bb_row_inner.zx-cardset .bt_bb_text_content ul li::before{
  content: "";
  width: 16px;
  height: 16px;
  margin-top: .28em; /* alinea con primera línea del texto */
  flex: 0 0 16px;

  background-color: #0B5A3C; /* color del check */

  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='black' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='black' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/></svg>") no-repeat center / contain;
}

/* (Opcional) si 1.25rem se siente grande en móvil, usa esto:*/
@media (max-width: 575px){
  .bt_bb_row_inner.zx-cardset .bt_bb_text p,
  .bt_bb_row_inner.zx-cardset .bt_bb_text_content p{ font-size: 1.09rem !important; }
}



/* =========================================================
   Reusable: Column Card (shadow + radius) — Bold Builder
   Uso: agrega "zx-col-card" al bt_bb_column
   Opcionales: zx-col-hard | zx-col-soft | zx-col-pad
   NOTA: usa SOLO uno: hard o soft (no los dos).
   ========================================================= */

/* Wrapper (no recorta, para que el shadow se calcule bien) */
.bt_bb_column.zx-col-card{
  position: relative !important;
  overflow: visible !important;
}

/* El “card” real: aquí vive el background del contenido */
.bt_bb_column.zx-col-card > .bt_bb_column_content{
  border-radius: var(--r-card, 18px) !important;
  box-shadow: var(--sh-card, 0 10px 28px rgba(20, 24, 22, .08)) !important;
  overflow: hidden !important;               /* recorta hijos al radius */
  background: var(--zx-card-bg, #fff) !important;
}

/* Variante HARD (blanco sólido) */
.bt_bb_column.zx-col-card.zx-col-hard > .bt_bb_column_content{
  --zx-card-bg: #fff;
  border: 1px solid rgba(20, 24, 22, .06);
}

/* Variante SOFT (blanco suave tipo “papel/vidrio”) */
.bt_bb_column.zx-col-card.zx-col-soft > .bt_bb_column_content{
  --zx-card-bg: rgba(255,255,255,.92);
  border: 1px solid rgba(20, 24, 22, .06);
  backdrop-filter: blur(6px);
}

/* Padding interno opcional (cuando la columna está en padding_none) */
.bt_bb_column.zx-col-card.zx-col-pad > .bt_bb_column_content > .bt_bb_column_content_inner{
  padding: var(--zx-card-pad, 28px) !important;
}

/* Mobile */
@media (max-width: 768px){
  .bt_bb_column.zx-col-card.zx-col-pad > .bt_bb_column_content > .bt_bb_column_content_inner{
    padding: var(--zx-card-pad-sm, 22px) !important;
  }
}


/* =========================================================
   Reusable: Column Card (shadow + radius) — Bold Builder (v2)
   Soporta: bt_bb_column + bt_bb_column_inner
   Uso:
   - En columna:  zx-col-card zx-col-soft zx-col-pad
   - En inner col: zx-col-card zx-col-soft zx-col-pad
   Opcionales: zx-col-hard | zx-col-soft | zx-col-pad
   Nota: usa SOLO uno: hard o soft.
   ========================================================= */

/* 1) Wrapper: no recorta el shadow */
.bt_bb_column.zx-col-card,
.bt_bb_column_inner.zx-col-card{
  position: relative !important;
  overflow: visible !important;
}

/* 2) El “card” real (donde vive el fondo) */
.bt_bb_column.zx-col-card > .bt_bb_column_content,
.bt_bb_column_inner.zx-col-card > .bt_bb_column_inner_content{
  border-radius: var(--r-card, 18px) !important;
  box-shadow: var(--sh-card, 0 10px 28px rgba(20, 24, 22, .08)) !important;
  overflow: hidden !important; /* recorta hijos al radius */
  background: var(--zx-card-bg, #fff) !important;

  /* clave para poder igualar alturas con flex */
  display: flex !important;
  flex-direction: column !important;
}

/* 3) Variante HARD (blanco sólido) */
.bt_bb_column.zx-col-card.zx-col-hard > .bt_bb_column_content,
.bt_bb_column_inner.zx-col-card.zx-col-hard > .bt_bb_column_inner_content{
  --zx-card-bg: #fff;
  border: 1px solid rgba(20, 24, 22, .06);
}

/* 4) Variante SOFT (blanco suave tipo “papel/vidrio”) */
.bt_bb_column.zx-col-card.zx-col-soft > .bt_bb_column_content,
.bt_bb_column_inner.zx-col-card.zx-col-soft > .bt_bb_column_inner_content{
  --zx-card-bg: rgba(255,255,255,.92);
  border: 1px solid rgba(20, 24, 22, .06);
  backdrop-filter: blur(6px);
}

/* 5) Padding interno opcional */
.bt_bb_column.zx-col-card.zx-col-pad > .bt_bb_column_content > .bt_bb_column_content_inner,
.bt_bb_column_inner.zx-col-card.zx-col-pad > .bt_bb_column_inner_content > .bt_bb_column_inner_content_inner{
  padding: var(--zx-card-pad, 28px) !important;
}

/* Mobile padding */
@media (max-width: 768px){
  .bt_bb_column.zx-col-card.zx-col-pad > .bt_bb_column_content > .bt_bb_column_content_inner,
  .bt_bb_column_inner.zx-col-card.zx-col-pad > .bt_bb_column_inner_content > .bt_bb_column_inner_content_inner{
    padding: var(--zx-card-pad-sm, 22px) !important;
  }
}

/* =========================================================
   Helper: Equal Height Cards por fila
   Uso: agrega "zx-eq-cards" a:
   - bt_bb_row_inner (recomendado) o
   - bt_bb_row (si lo necesitas en rows normales)
   ========================================================= */

/* Inner Row */
.bt_bb_row_inner.zx-eq-cards > .bt_bb_row_inner_holder{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.bt_bb_row_inner.zx-eq-cards > .bt_bb_row_inner_holder > .bt_bb_column_inner{
  display: flex !important;
  flex-direction: column !important;
}

.bt_bb_row_inner.zx-eq-cards > .bt_bb_row_inner_holder > .bt_bb_column_inner > .bt_bb_column_inner_content{
  flex: 1 1 auto !important; /* <-- se estira al alto de la más alta */
}

/* Row normal (opcional) */
.bt_bb_row.zx-eq-cards > .bt_bb_row_holder{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.bt_bb_row.zx-eq-cards > .bt_bb_row_holder > .bt_bb_column{
  display: flex !important;
  flex-direction: column !important;
}

.bt_bb_row.zx-eq-cards > .bt_bb_row_holder > .bt_bb_column > .bt_bb_column_content{
  flex: 1 1 auto !important;
}

/* =========================================================
   ZX Column Card — separación vertical en mobile/tablet
   (para bt_bb_column y bt_bb_column_inner con zx-col-card)
   ========================================================= */

:root{
  --zx-card-gap-y: 18px;     /* tablet */
  --zx-card-gap-y-sm: 16px;  /* mobile */
}

/* Tablet + mobile */
@media (max-width: 1024px){

  /* Si el contenedor es flex, gap resuelve “entre filas” sin dejar espacio extra al final */
  .bt_bb_row_holder,
  .bt_bb_row_inner_holder{
    row-gap: var(--zx-card-gap-y);
  }

  /* Fallback/seguro: margen inferior en cada card (por si gap no aplica en tu layout) */
  .bt_bb_row_holder .bt_bb_column.zx-col-card{
    margin-bottom: var(--zx-card-gap-y) !important;
  }
  .bt_bb_row_inner_holder .bt_bb_column_inner.zx-col-card{
    margin-bottom: var(--zx-card-gap-y) !important;
  }

  /* Evita “doble espacio” si el row-gap ya está funcionando (opcional, pero recomendado) */
  @supports (row-gap: 1rem){
    .bt_bb_row_holder .bt_bb_column.zx-col-card,
    .bt_bb_row_inner_holder .bt_bb_column_inner.zx-col-card{
      margin-bottom: 0 !important;
    }
  }
}

/* Mobile */
@media (max-width: 575px){
  .bt_bb_row_holder,
  .bt_bb_row_inner_holder{
    row-gap: var(--zx-card-gap-y-sm);
  }

  .bt_bb_row_holder .bt_bb_column.zx-col-card{
    margin-bottom: var(--zx-card-gap-y-sm) !important;
  }
  .bt_bb_row_inner_holder .bt_bb_column_inner.zx-col-card{
    margin-bottom: var(--zx-card-gap-y-sm) !important;
  }

  @supports (row-gap: 1rem){
    .bt_bb_row_holder .bt_bb_column.zx-col-card,
    .bt_bb_row_inner_holder .bt_bb_column_inner.zx-col-card{
      margin-bottom: 0 !important;
    }
  }
}



/* =========================================================
   Reusable: Stone Background + Vignette
   Uso: agrega la clase "zx-stone-bg" a cualquier bt_bb_section
   Ajustes por sección: agrega otra clase extra y sobreescribe variables
   ========================================================= */

.bt_bb_section.zx-stone-bg{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate; /* evita que overlays del tema se “metan” en el stacking */

  /* Defaults (igual que tu versión por ID) */
  --zx-bg-color: #063525; /* base verde */
  --zx-stone-img: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/StoneBack01.webp");
  --zx-stone-repeat: repeat;
  --zx-stone-size: cover;
  --zx-stone-pos: center top;

  --zx-vignette: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.06), rgba(0,0,0,.22));
  --zx-opacity: .10; /* <- CLAVE: vuelve al valor del ID */

  /* Usa shorthand para ganar contra backgrounds del tema */
  background: var(--zx-bg-color) !important;
}

/* Si el builder crea capas/overlays internos, apágalos SOLO cuando uses la clase */
.bt_bb_section.zx-stone-bg .bt_bb_background_overlay,
.bt_bb_section.zx-stone-bg .bt_bb_background_image_holder{
  display: none !important;
}

/* Capa visual (equivalente a #home-work::before) */
.bt_bb_section.zx-stone-bg::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image: var(--zx-vignette), var(--zx-stone-img) !important;
  background-repeat: no-repeat, var(--zx-stone-repeat) !important;
  background-size: cover, var(--zx-stone-size) !important;
  background-position: center top, var(--zx-stone-pos) !important;

  background-blend-mode: overlay !important;
  opacity: var(--zx-opacity) !important;
}

/* Contenido arriba */
.bt_bb_section.zx-stone-bg > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Mobile */
@media (max-width: 768px){
  .bt_bb_section.zx-stone-bg{
    --zx-stone-img: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/StoneBack01-sm.webp");
    --zx-stone-repeat: repeat-y;
    --zx-stone-size: auto 820px;
    --zx-opacity: .10; /* puedes dejar .75 también */
  }
}

/* =========================================================
   Reusable: Texture Background + Vignette (zx-bg-*)
   Uso: agrega UNA clase "zx-bg-xxxxx" a cualquier bt_bb_section
   Ej: zx-bg-madera, zx-bg-marmol, zx-bg-metal, zx-bg-tela, zx-bg-aluminio
   ========================================================= */

/* BASE: se activa para cualquier sección que tenga "zx-bg-" en sus clases */
.bt_bb_section[class*="zx-bg-"]{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  /* Defaults */
  --zx-bg-color: #063525;
  --zx-texture-img: none;
  --zx-texture-img-sm: none;

  --zx-texture-repeat: repeat;
  --zx-texture-size: cover;
  --zx-texture-pos: center top;

  --zx-vignette: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.06), rgba(0,0,0,.22));
  --zx-opacity: .10;

  background: var(--zx-bg-color) !important;
}

/* Apaga overlays del tema SOLO cuando uses zx-bg-* */
.bt_bb_section[class*="zx-bg-"] .bt_bb_background_overlay,
.bt_bb_section[class*="zx-bg-"] .bt_bb_background_image_holder{
  display: none !important;
}

/* Capa visual */
.bt_bb_section[class*="zx-bg-"]::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image: var(--zx-vignette), var(--zx-texture-img) !important;
  background-repeat: no-repeat, var(--zx-texture-repeat) !important;
  background-size: cover, var(--zx-texture-size) !important;
  background-position: center top, var(--zx-texture-pos) !important;
  background-blend-mode: overlay !important;
  opacity: var(--zx-opacity) !important;
}

/* Contenido arriba */
.bt_bb_section[class*="zx-bg-"] > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Mobile */
@media (max-width: 768px){
  .bt_bb_section[class*="zx-bg-"]{
    --zx-texture-img: var(--zx-texture-img-sm, var(--zx-texture-img));
    --zx-texture-repeat: repeat-y;
    --zx-texture-size: auto 820px;
    --zx-opacity: .10;
  }
}

/* =========================================================
   VARIANTES (solo setean las URLs)
   ========================================================= */

/* Tela */
.bt_bb_section.zx-bg-tela{
  --zx-texture-img: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/tela.webp");
  --zx-texture-img-sm: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/tela-sm.webp");
}

/* Metal */
.bt_bb_section.zx-bg-metal{
  --zx-texture-img: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/metal.webp");
  --zx-texture-img-sm: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/metal-sm.webp");
}

/* Mármol */
.bt_bb_section.zx-bg-marmol{
  --zx-texture-img: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/marmol-1.webp");
  --zx-texture-img-sm: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/marmol-sm.webp");
}

/* Madera */
.bt_bb_section.zx-bg-madera{
  --zx-texture-img: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/madera.webp");
  --zx-texture-img-sm: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/madera-sm.webp");
}

/* Aluminio */
.bt_bb_section.zx-bg-aluminio{
  --zx-texture-img: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/aluminio.webp");
  --zx-texture-img-sm: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/aluminio-sm.webp");
}




/* =========================================================
   DS Buttons (reusable) — BoldThemes markup (GLOBAL)
   Use classes on wrapper:
   <div class="bt_bb_button ds-btn-primary|ds-btn-secondary"><a class="bt_bb_link">...
   ========================================================= */

/* Reset del wrapper (evita decoraciones del tema) */
:where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary){
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* si el tema dibuja decoración en el wrapper */
:where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary)::before,
:where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary)::after{
  content: none;
}

/* Botón real (anchor) */
:where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary) > a.bt_bb_link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;

  box-sizing: border-box;
  border-radius: 999px !important;          /* pill premium global */
  min-height: 54px !important;              /* más “presencia” */
  padding: 0.95em 1.75em !important;        /* más aire lateral (texto no pegado) */

  font-weight: var(--fw-semibold);
  line-height: 1.15;             /* más legible/premium */
  text-decoration: none;

  border: 1px solid transparent;
  background: transparent;

  /* micro “acabado” */
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  will-change: transform;
}

/* quita decoraciones del tema en el anchor */
:where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary) > a.bt_bb_link::before,
:where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary) > a.bt_bb_link::after{
  content: none;
}

/* clave: neutralizar “capsule” interno del tema (span) */
:where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary) .bt_bb_button_text{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  color: inherit;        /* <-- importante: hereda el color del <a> */
  line-height: inherit;
}


/* Primary — sólido, sobrio */
.bt_bb_button.ds-btn-primary > a.bt_bb_link{
  background: var(--c-primary);
  color: #fff;
  border-color: color-mix(in srgb, var(--c-primary-dark) 45%, var(--c-primary));
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 12px 28px rgba(6,53,37,.22);
}
.bt_bb_button.ds-btn-primary > a.bt_bb_link:hover{
  background: color-mix(in srgb, var(--c-primary-dark) 22%, var(--c-primary));
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 16px 34px rgba(6,53,37,.26);
  transform: translateY(-1px);
}

/* Secondary — fondo blanco premium (global) */
.bt_bb_button.ds-btn-secondary > a.bt_bb_link{
  background: #fff;
  color: var(--c-primary);
  border-color: color-mix(in srgb, var(--c-border) 78%, #000 0%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 10px 22px rgba(20,24,22,.10);
}
.bt_bb_button.ds-btn-secondary > a.bt_bb_link:hover{
  background: color-mix(in srgb, #fff 90%, var(--c-primary) 10%); /* tinte sutil */
  border-color: color-mix(in srgb, var(--c-primary) 22%, var(--c-border));
  color: var(--c-primary);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 14px 30px rgba(20,24,22,.14);
  transform: translateY(-1px);
}


/* Focus accesible */
:where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary) > a.bt_bb_link:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce){
  :where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary) > a.bt_bb_link{ transition: none; }
  :where(.bt_bb_button.ds-btn-primary, .bt_bb_button.ds-btn-secondary) > a.bt_bb_link:hover{ transform: none; }
}



/* =========================================================*/
/* 2) ESTILOS GLOBALES (scoped al Home + hooks) ============================== */
/* Nota: Para NO romper el tema, la mayoría aplica en Home y/o dentro de .ds-* */
/* ========================================================= */

body.home{
  color: var(--c-text);
}

/* Links (hover consistente) */
body.home :where(a){
  text-underline-offset: .14em;
  text-decoration-thickness: .08em;
}
body.home :where(a:hover){
  color: var(--c-primary);
}

/* Headings (ritmo editorial) */
body.home :where(h1,h2,h3){
  color: var(--c-text);
  letter-spacing: -0.015em;
}
body.home :where(h1){
  font-size: var(--fs-1);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
}
body.home :where(h2){
  font-size: var(--fs-2);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}
body.home :where(h3){
  font-size: var(--fs-3);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

/* Helper: palabra acento */
body.home .u-accent{ color: var(--c-primary); }

/* Pills / labels (si aplica) */
body.home .ds-pill{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .35em .7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-stone) 70%, var(--c-surface));
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  font-weight: var(--fw-medium);
  font-size: .92em;
}

/* Focus accesible (no se oculta) */
body.home :where(a, button, input, textarea, select, [role="button"]):focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: max(6px, var(--r-btn));
}



/* Cards (base) + hover universal (clase a contenedores) */
body.home .ds-card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-l);
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.home .ds-card:hover{
  border-color: color-mix(in srgb, var(--c-primary) 25%, var(--c-border));
  box-shadow: var(--sh-card);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  body.home .ds-card{ transition: none; }
  body.home .ds-card:hover{ transform: none; }
}

/* Forms (inputs/textarea) — safe y limpio */
body.home :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], textarea, select){
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: .85em 1em;
  background: var(--c-surface);
  color: var(--c-text);
}
body.home :where(textarea){ min-height: 120px; }
body.home :where(input, textarea, select):focus{
  outline: none;
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
  box-shadow: var(--focus-ring);
}


/* 3) HOME — hooks por sección (sin hardcode frágil) ========================= */

/* Fondo piedra para sección de cards */
body.home .ds-stone{
  background: var(--c-stone);
  padding-block: var(--section-py);
  padding-inline: var(--section-px);
}

/* Secciones dark: texto blanco por defecto + contraste */
body.home .ds-dark{
  background: var(--c-primary-dark);
  color: #fff;
}
body.home .ds-dark :where(h1,h2,h3,p,li,small,span){ color: #fff; }
body.home .ds-dark :where(a){ color: color-mix(in srgb, #fff 86%, var(--c-accent)); }
body.home .ds-dark :where(a:hover){ color: #fff; text-decoration-color: color-mix(in srgb, #fff 75%, transparent); }

/* Un hover unificado para cards de “Proyectos y Casos de éxito”
   Requisito: agrega .ds-cards a la sección y .ds-card a cada card (recomendado).
   Fallback suave: si olvidas .ds-card, al menos estiliza <article> y enlaces “card-like”. */
body.home .ds-cards :where(.ds-card, article){
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.home .ds-cards :where(.ds-card:hover, article:hover){
  border-color: color-mix(in srgb, var(--c-primary) 25%, var(--c-border));
  box-shadow: var(--sh-card);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  body.home .ds-cards :where(.ds-card, article){ transition: none; }
  body.home .ds-cards :where(.ds-card:hover, article:hover){ transform: none; }
}


/* =========================================================
   HOME HERO — scoped by #home-hero (BoldThemes Content Slider)
   Paste at end of: /assets/css/design-system.css
   ========================================================= */

/* ---------- Overlay premium por slide (NO negro) ---------- */
#home-hero{
  position: relative;
  /* helpers (opacidades en base a primary-dark) */
  --hero-ov-60: color-mix(in srgb, var(--c-primary-dark) 60%, transparent);
  --hero-ov-52: color-mix(in srgb, var(--c-primary-dark) 52%, transparent);
  --hero-ov-18: color-mix(in srgb, var(--c-primary-dark) 18%, transparent);
  --hero-ov-00: color-mix(in srgb, var(--c-primary-dark) 0%, transparent);
}

/* el slide real es .bt_bb_content_slider_item */
#home-hero .bt_bb_content_slider_item{
  position: relative;
  isolation: isolate; /* asegura z-index correcto sin romper el tema */
}

/* fallback si color-mix no existe */
#home-hero .bt_bb_content_slider_item::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* fallback plano */
  background-color: rgba(6, 53, 37, .55);

  /* overlay premium: radial + linear (sobre la imagen) */
  background:
    radial-gradient(115% 85% at 18% 20%,
      var(--hero-ov-60) 0%,
      var(--hero-ov-18) 55%,
      var(--hero-ov-00) 75%),
    linear-gradient(115deg,
      var(--hero-ov-60) 0%,
      var(--hero-ov-52) 55%,
      var(--hero-ov-60) 100%);
}

/* contenido arriba del overlay */
#home-hero .bt_bb_content_slider_item_content{
  position: relative;
  z-index: 2;
}


/* ---------- Texto blanco SOLO dentro del hero ---------- */
#home-hero :where(
  .bt_bb_headline,
  .bt_bb_headline_tag,
  .bt_bb_headline_content,
  .bt_bb_text,
  .bt_bb_text p,
  p, li, small
){
  color: #fff;
}

/* strong en verde de marca dentro del hero */
#home-hero :where(.bt_bb_headline, .bt_bb_text, p) strong{
  color: var(--c-primary);
}

/* =========================================================
   Home Hero — stable height (Slick adaptiveHeight inline)
   Scoped: only #home-hero
   ========================================================= */

#home-hero{ --hero-h: clamp(680px, 80vh, 920px); }
@media (max-width: 1024px){ #home-hero{ --hero-h: clamp(640px, 78vh, 860px); } }
@media (max-width: 768px){  #home-hero{ --hero-h: clamp(600px, 82vh, 780px); } }

#home-hero .slick-list{
  height: var(--hero-h) !important; /* necesario vs style="" inline de Slick */
}

#home-hero .bt_bb_content_slider_item,
#home-hero .bt_bb_content_slider_item_content{
  min-height: var(--hero-h);
}

#home-hero .bt_bb_content_slider_item_content{
  display: flex;
  align-items: center;
}




/* =========================================================
   ZURCOM — Mobile Swipe (centrado) para TODOS los Image Grid
   Clase opcional para excluir: .zx-no-swipe
   ========================================================= */
@media (max-width: 768px){

  /* Contenedor scrolleable */
  .bt_bb_css_image_grid:not(.zx-no-swipe) .bt_bb_css_image_grid_content{
    /* Ajustables */
    --zx-card-w: 78%;
    --zx-gap: 14px;
    --zx-radius: 18px;
    --zx-ar: 4 / 3; /* cambia a 16/9 o 3/4 según tu estilo */

    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    gap: var(--zx-gap) !important;

    /* Centrado del 1er/último item */
    padding-block: 6px 14px;
    padding-inline: max(16px, calc((100% - var(--zx-card-w)) / 2));
    scroll-padding-inline: max(16px, calc((100% - var(--zx-card-w)) / 2));

    /* Mejor gesto en mobile */
    touch-action: pan-x;
    overscroll-behavior-x: contain;

    /* Oculta scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .bt_bb_css_image_grid:not(.zx-no-swipe) .bt_bb_css_image_grid_content::-webkit-scrollbar{
    display: none;
  }

  /* Cada tarjeta */
  .bt_bb_css_image_grid:not(.zx-no-swipe) .bt_bb_css_image_grid_item{
    flex: 0 0 var(--zx-card-w);
    width: auto !important;  /* neutraliza width del grid */
    max-width: none !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Tarjeta premium */
  .bt_bb_css_image_grid:not(.zx-no-swipe) .bt_bb_css_image_grid_item_inner{
    border-radius: var(--zx-radius);
    overflow: hidden;
  }

  /* Mantén alturas consistentes aunque haya vertical/horizontal (crop premium) */
  .bt_bb_css_image_grid:not(.zx-no-swipe) .bt_bb_css_image_grid_item_inner_image{
    width: 100%;
    aspect-ratio: var(--zx-ar);
    overflow: hidden;
  }

  .bt_bb_css_image_grid:not(.zx-no-swipe) .bt_bb_css_image_grid_item_inner_image img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* (Opcional) fade sutil para insinuar swipe */
  .bt_bb_css_image_grid:not(.zx-no-swipe) .bt_bb_css_image_grid_content{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
}




/* =========================================================
   Reusable: Image Cards + Label Bar (Bold Builder)
   Usage:
   - Add "zx-card-labels" to the section
   - Optional modifiers:
     - "zx-card-labels--green"  (verde con texto blanco)
     - "zx-card-labels--white"  (blanco con texto verde)  ✅ para talleres
   ========================================================= */

/* Base */
.bt_bb_section.zx-card-labels{
  --zx-card-radius: 10px;

  /* Defaults (por si no pones modifier) */
  --zx-bar-bg: #2f6b3a;
  --zx-bar-text: #ffffff;
  --zx-bar-bg-hover: #245730;
  --zx-bar-text-hover: #ffffff;

  /* layout */
  --zx-bar-pad-y: 14px;
  --zx-bar-pad-x: 12px;
}

/* Wrapper de cada card */
.bt_bb_section.zx-card-labels .bt_bb_column_inner_content_inner{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Imagen con esquinas superiores redondeadas */
.bt_bb_section.zx-card-labels .bt_bb_image{
  margin: 0 !important;
  border-radius: var(--zx-card-radius) var(--zx-card-radius) 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Imagen full width */
.bt_bb_section.zx-card-labels .bt_bb_image > a{
  display: block !important;
}
.bt_bb_section.zx-card-labels .bt_bb_image img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Quitar overlay verde + botón hover (para que quede limpio como el mockup) */
.bt_bb_section.zx-card-labels .bt_bb_image_content{
  display: none !important;
  background: transparent !important;
}

/* Barra inferior usando el botón "clean" debajo de la imagen */
.bt_bb_section.zx-card-labels .bt_bb_button.bt_bb_style_clean{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  background: var(--zx-bar-bg) !important;
  border-radius: 0 0 var(--zx-card-radius) var(--zx-card-radius) !important;
  overflow: hidden !important;
}

/* Link full width centrado */
.bt_bb_section.zx-card-labels .bt_bb_button.bt_bb_style_clean .bt_bb_link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;

  padding: var(--zx-bar-pad-y) var(--zx-bar-pad-x) !important;
  text-decoration: none !important;
}

/* Texto */
.bt_bb_section.zx-card-labels .bt_bb_button.bt_bb_style_clean .bt_bb_button_text{
  color: var(--zx-bar-text) !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

/* Hover */
.bt_bb_section.zx-card-labels .bt_bb_column_inner:hover .bt_bb_button.bt_bb_style_clean{
  background: var(--zx-bar-bg-hover) !important;
}
.bt_bb_section.zx-card-labels .bt_bb_column_inner:hover .bt_bb_button.bt_bb_style_clean .bt_bb_button_text{
  color: var(--zx-bar-text-hover) !important;
}

/* Focus accesible */
.bt_bb_section.zx-card-labels .bt_bb_button.bt_bb_style_clean .bt_bb_link:focus-visible{
  outline: 3px solid rgba(255,255,255,.6) !important;
  outline-offset: 2px !important;
}


/* ===== Modifiers ===== */

/* Verde (como Proyectos) */
.bt_bb_section.zx-card-labels.zx-card-labels--green{
  --zx-bar-bg: #2f6b3a;
  --zx-bar-text: #ffffff;
  --zx-bar-bg-hover: #245730;
  --zx-bar-text-hover: #ffffff;
}

/* Blanco (como Talleres) ✅ */
.bt_bb_section.zx-card-labels.zx-card-labels--white{
  --zx-bar-bg: #ffffff;
  --zx-bar-text: #2f6b3a;
  --zx-bar-bg-hover: #f2f4f3;
  --zx-bar-text-hover: #245730;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .bt_bb_section.zx-card-labels{
    --zx-card-radius: 10px;
    --zx-bar-pad-y: 12px;
  }
}

/* =========================================================
   ZX – Strip de Talleres: wrap sin deformar cards (solo desktop)
   ========================================================= */
@media (min-width: 993px){

  /* A) Estructura: hace que imagen + botón se distribuyan verticalmente parejo */
  .zx-taller-strip .bt_bb_column_inner,
  .zx-taller-strip .bt_bb_column_inner_content{
    height: 100%;
  }

  .zx-taller-strip .bt_bb_column_inner_content{
    display: flex;
    flex-direction: column;
  }

  /* B) Imagen “toma” el espacio disponible */
  .zx-taller-strip .bt_bb_image{
    flex: 1 1 auto;
    overflow: hidden;
  }
  .zx-taller-strip .bt_bb_image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* C) Reserva el mismo alto de botón en TODAS las cards (evita deformación) */
  .zx-taller-strip a.bt_bb_button,
  .zx-taller-strip .bt_bb_button a{
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 60px;              /* ajusta 56–64px si lo necesitas */
    padding: 12px 18px !important;
    white-space: normal !important; /* permite wrap sin romper layout */
    text-align: center;
  }

  /* D) Solo Mármol + Herrería: limita ancho del texto para que haga 2 líneas */
  .zx-taller-strip a.bt_bb_button[href*="marmol"] .bt_bb_button_text,
  .zx-taller-strip a.bt_bb_button[href*="herreria"] .bt_bb_button_text,
	.zx-taller-strip a.bt_bb_button[href*="tapiceria"] .bt_bb_button_text,
  .zx-taller-strip .bt_bb_button a[href*="marmol"] .bt_bb_button_text,
  .zx-taller-strip .bt_bb_button a[href*="herreria"] .bt_bb_button_text,
	.zx-taller-strip .bt_bb_button a[href*="tapiceria"] .bt_bb_button_text{
    display: block;
    max-width: 13ch;               /* ajusta 12–14ch */
    margin: 0 auto;
    line-height: 1.15;
    white-space: normal !important;
  }
}









/* =========================================================
   ZURCOM — Footer (v2) Optimized
   Scope: SOLO dentro del footer y SOLO en el section .zx-stone-bg
   - Background: gris + textura (desktop/mobile) + viñeta + líneas
   - Tipografía + links + contacto + redes
   - Bottom menu inline: SOLO .btBottomFooterMenu
   ========================================================= */

.btSiteFooter{
  /* Tokens (ajustables) */
  --ft-bg: #2A2E33;
  --ft-text: rgba(247,246,243,.86);
  --ft-strong: #F7F6F3;
  --ft-muted: rgba(247,246,243,.84);
  --ft-accent: #0B5A3C;

  --ft-border: rgba(247,246,243,.14);
  --ft-chip-bg: rgba(247,246,243,.06);

  --ft-radius: 18px;
  --ft-shadow: 0 14px 32px rgba(0,0,0,.28);

  --ft-p: 15px;
  --ft-line: 1.55;
  --ft-link: 13px;
  --ft-letter: .10em;

  --ft-icon: 16px;
  --ft-chip: 38px;
}

/* =========================
   BACKDROP (gris + textura + overlays)
   ========================= */
.btSiteFooter .zx-footer-metal{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ayuda a z-index sin sorpresas */

  background-color: var(--ft-bg) !important;
  background-image: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/metal_2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
}

/* Mobile texture */
@media (max-width: 768px){
  .btSiteFooter .zx-footer-metal{
    background-image: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/metal_2-sm.webp");
  }
}

/* Viñeta / profundidad */
.btSiteFooter .zx-footer-metal::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.48) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Líneas sutiles */
.btSiteFooter .zx-footer-metal::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.06) 1px,
    transparent 1px,
    transparent 34px
  );
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}

/* Asegura que el contenido viva arriba */
.btSiteFooter .zx-footer-metal :where(.bt_bb_port, .bt_bb_cell, .bt_bb_cell_inner, .bt_bb_row, .bt_bb_row_holder, .bt_bb_column, .bt_bb_column_content, .bt_bb_column_content_inner){
  position: relative;
  z-index: 1;
}

/* =========================
   TEXT BASE
   ========================= */
.btSiteFooter .zx-footer-metal,
.btSiteFooter .zx-footer-metal :where(.bt_bb_text, .bt_bb_text p){
  color: var(--ft-text) !important;
}

.btSiteFooter .zx-footer-metal .bt_bb_text p{
  margin: 0 0 12px !important;
  line-height: var(--ft-line);
  font-size: var(--ft-p);
}

.btSiteFooter .zx-stone-bg .bt_bb_text p strong{
  color: var(--ft-strong) !important;
}

/* “Títulos” tipo Menú / Contacto / Redes (primer Text block de cada columna) */
.btSiteFooter .zx-footer-metal .bt_bb_column_content_inner > .bt_bb_text:first-child p{
  color: var(--ft-strong) !important;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 14px !important;
}

/* =========================
   LOGO BADGE
   ========================= */
.btSiteFooter .zx-footer-metal .bt_bb_image img{
  width: 96px !important;
  height: auto !important;
  border-radius: var(--ft-radius);
  background: #fff;
  padding: 10px;
  box-shadow: var(--ft-shadow);
}

/* =========================
   MENÚS (vertical por defecto)
   ========================= */
.btSiteFooter .zx-footer-metal .bt_bb_custom_menu a{
  color: var(--ft-muted) !important;
  text-decoration: none !important;
  font-size: var(--ft-link);
  letter-spacing: var(--ft-letter);
  text-transform: uppercase;
  opacity: .92;
  transition: color .18s ease, opacity .18s ease;
}

.btSiteFooter .zx-footer-metal .bt_bb_custom_menu a:hover{
  color: var(--ft-accent) !important;
  opacity: 1;
}

.btSiteFooter .zx-footer-metal .bt_bb_custom_menu li{
  margin: 0 0 10px !important;
}

/* =========================
   CONTACTO (icon + texto)
   ========================= */
.btSiteFooter .zx-footer-metal .bt_bb_icon{
  margin: 0 0 10px !important;
}

.btSiteFooter .zx-footer-metal .bt_bb_icon .bt_bb_icon_holder{
  display: inline-flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
}

.btSiteFooter .zx-footer-metal .bt_bb_icon .bt_bb_icon_holder span{
  color: var(--ft-text) !important;
}

.btSiteFooter .zx-footer-metal .bt_bb_icon .bt_bb_icon_holder:before{
  color: rgba(247,246,243,.92) !important;
  font-size: var(--ft-icon);
  margin-top: 2px;
}

/* =========================
   REDES (chips)
   Nota: esto asume que el bloque de redes es un inner row en el footer,
   como en tu markup actual.
   ========================= */
.btSiteFooter .zx-stone-bg .bt_bb_row_inner_holder{
  display: flex;
  gap: 14px;
  align-items: center;
}

.btSiteFooter .zx-footer-metal .bt_bb_row_inner .bt_bb_column_inner{
  width: auto !important;
  flex: 0 0 auto;
  padding: 0 !important;
}

.btSiteFooter .zx-footer-metal .bt_bb_row_inner a.bt_bb_icon_holder{
  width: var(--ft-chip);
  height: var(--ft-chip);
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--ft-chip-bg);
  border: 1px solid var(--ft-border);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.btSiteFooter .zx-footer-metal .bt_bb_row_inner a.bt_bb_icon_holder:before{
  color: var(--ft-strong) !important;
  font-size: 16px;
}

.btSiteFooter .zx-footer-metal .bt_bb_row_inner a.bt_bb_icon_holder:hover{
  background: rgba(11,90,60,.18);
  border-color: rgba(11,90,60,.45);
  transform: translateY(-1px);
}

/* =========================
   BOTTOM FOOTER MENU (inline) — SOLO este
   Evita romper menús verticales del footer
   ========================= */
.btSiteFooter .btBottomFooterMenu .menu{
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.btSiteFooter .btBottomFooterMenu .menu > li{
  position: relative;
  list-style: none;
  margin: 0 !important; /* mata el margin vertical previo */
}

.btSiteFooter .btBottomFooterMenu .menu > li + li::before{
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.22);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 992px){
  .btSiteFooter .zx-stone-bg .bt_bb_column{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 575px){
  .btSiteFooter .zx-stone-bg .bt_bb_image img{ width: 88px !important; }
  .btSiteFooter .zx-stone-bg .bt_bb_custom_menu a{ font-size: 12px; }
  .btSiteFooter .btBottomFooterMenu .menu{ gap: 18px; }
  .btSiteFooter .btBottomFooterMenu .menu > li + li::before{ left: -9px; }
}



/* =========================================================
   Footer exclusivo — BACKDROP gris + textura METAL (desktop/mobile)
   Clase ÚNICA: zx-footer-metal (solo en el section del footer)
   ========================================================= */

.btSiteFooter .zx-footer-metal{
  /* textura por default (desktop) */
  --ft-tex: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/metal_2.webp");

  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Mata cualquier background previo del tema/builder */
  background: none !important;

  /* Capa base + overlays en una sola declaración (más difícil de “romper”) */
  background-color: #2A2E33 !important;
  background-image:
    /* líneas sutiles */
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 34px
    ),
    /* viñeta / profundidad */
    linear-gradient(
      180deg,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,.48) 100%
    ),
    /* textura */
    var(--ft-tex) !important;

  background-repeat: repeat, no-repeat, no-repeat !important;
  background-position: center, center, center !important;
  background-size: auto, cover, cover !important;

  /* “tinte” sobre la textura sin afectar las capas de arriba */
  background-blend-mode: normal, normal, multiply !important;
}

/* Mobile texture */
@media (max-width: 768px){
  .btSiteFooter .zx-footer-metal{
    --ft-tex: url("https://grupozurcom.com.mx/wp-content/uploads/2026/01/metal_2-sm.webp");
  }
}



/* =========================================================
   Services (Bold Builder) — aumentar solo el texto pequeño
   ========================================================= */
.bt_bb_service .bt_bb_service_content_text,
.bt_bb_service .bt_bb_service_content_text p{
  font-size: 1.125rem !important; /* 18px si root=16px */
  line-height: 1.65 !important;
}
@media (max-width: 575px){
  .bt_bb_service .bt_bb_service_content_text,
  .bt_bb_service .bt_bb_service_content_text p{
    font-size: 1.0625rem !important; /* 17px */
  }
}




















/* =========================================================
   Ocultar Header + Footer SOLO en page-id-4095
   ========================================================= */
body.page-id-4095 header,
body.page-id-4095 .mainHeader,
body.page-id-4095 .btHeader,
body.page-id-4095 #btHeader{
  display: none !important;
}

body.page-id-4095 footer,
body.page-id-4095 .mainFooter,
body.page-id-4095 .btFooter,
body.page-id-4095 #btFooter{
  display: none !important;
}

/* (Opcional) elimina el espacio que deja el header fijo/transparente */
body.page-id-4095 .btContentWrap,
body.page-id-4095 .btContentHolder{
  padding-top: 0 !important;
  margin-top: 0 !important;
}