/*
 * tubexa-custom.css
 * Estilos personalizados para páginas de categoría — tubexa.cl
 * Cargado via functions.php del child theme industrial-child
 * ─────────────────────────────────────────────────────────────
 */


/* ══════════════════════════════════════════════════════════
   LANDING — ACERO INOXIDABLE
   Clase raíz: .page-inox (agregar en Section Settings → CSS Class
   de la sección que corresponda en Bold Builder)
   ══════════════════════════════════════════════════════════ */


/* ── BLOQUE 1: HERO ──────────────────────────────────────── */

.hero-inox {
  min-height: 540px !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  background-size: cover !important;
  background-position: center 40% !important;
}

/* Overlay degradado sobre la imagen de fondo */
.hero-inox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(13, 27, 42, 0.88) 0%,
    rgba(13, 27, 42, 0.55) 55%,
    rgba(13, 27, 42, 0.15) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* El contenido queda por encima del overlay */
.hero-inox .btWrapper,
.hero-inox .bt-wrapper,
.hero-inox > .port,
.hero-inox .btRow,
.hero-inox .btColumn,
.hero-inox .btColumnContent {
  position: relative;
  z-index: 2;
}

/* Texto blanco dentro del hero */
.hero-inox h1,
.hero-inox h2,
.hero-inox p,
.hero-inox span:not(.txt-yellow) {
  color: #ffffff !important;
}

/* H1 grande */
.hero-inox h1 {
  font-size: 52px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
}

/* Eyebrow — texto pequeño amarillo sobre el H1
   Usar clase "hero-eyebrow" en el campo CSS Class del elemento texto */
.hero-inox .hero-eyebrow,
.hero-inox .hero-eyebrow p {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #FBBD02 !important;
  margin-bottom: 14px !important;
}

/* Palabra en amarillo dentro del H1
   Envolver texto con <span class="txt-yellow"> en el editor HTML */
.txt-yellow {
  color: #FBBD02 !important;
}

/* Párrafo descriptivo del hero */
.hero-inox .hero-desc,
.hero-inox .hero-desc p {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.65 !important;
  max-width: 500px;
  margin-bottom: 32px !important;
}

/* Botones del hero */
.hero-inox .btBtn.btnFilledStyle {
  background-color: #FBBD02 !important;
  border-color: #FBBD02 !important;
  color: #0D1B2A !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.hero-inox .btBtn.btnFilledStyle:hover {
  background-color: #FE4F00 !important;
  border-color: #FE4F00 !important;
  color: #ffffff !important;
}

.hero-inox .btBtn.btnOutlineStyle {
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  background: transparent !important;
}

.hero-inox .btBtn.btnOutlineStyle:hover {
  border-color: #FBBD02 !important;
  color: #FBBD02 !important;
}


/* ── BLOQUE 2: INTRO (texto + foto) ─────────────────────── */

.intro-inox {
  padding: 72px 0 56px !important;
}

.intro-inox h2 {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #0D1B2A !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.intro-inox p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #444444 !important;
}

/* Línea separadora amarilla — usar clase "sep-yellow" en el elemento Separator */
.sep-yellow .btHr,
.sep-yellow hr {
  border-color: #FBBD02 !important;
  border-width: 4px !important;
  width: 48px !important;
  margin-left: 0 !important;
}

/* Pills de grado — usar clase "grade-pill" en botones desactivados o spans */
.grade-pill {
  display: inline-block;
  background: #0D1B2A;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  padding: 8px 18px;
  border-radius: 20px;
  margin-right: 8px;
  margin-top: 12px;
}

.grade-pill.yellow {
  background: #FBBD02;
  color: #0D1B2A !important;
}

/* Foto derecha con sombra */
.intro-inox .foto-inox img {
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  object-fit: cover;
  height: 340px;
  width: 100%;
}


/* ── BLOQUE 3: VENTAJAS (strip oscuro) ───────────────────── */

.ventajas-inox {
  background-color: #0D1B2A !important;
  padding: 48px 0 !important;
}

.ventajas-inox h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FBBD02 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.ventajas-inox p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.55 !important;
}

/* Ícono con borde amarillo — usar clase "ico-yellow" en el elemento Icon */
.ico-yellow .btIco,
.ico-yellow .btIcoHolder {
  border: 2px solid #FBBD02 !important;
  background: rgba(251, 189, 2, 0.10) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  color: #FBBD02 !important;
}


/* ── BLOQUE 4: TÍTULO DE SECCIÓN ────────────────────────── */

.section-title-inox {
  text-align: center !important;
  padding: 64px 0 8px !important;
}

.section-title-inox h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #0D1B2A !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.section-title-inox p {
  font-size: 15px !important;
  color: #6B7280 !important;
  line-height: 1.65 !important;
}

/* Separador centrado amarillo */
.section-title-inox .sep-yellow-center .btHr,
.section-title-inox .sep-yellow-center hr {
  border-color: #FBBD02 !important;
  border-width: 4px !important;
  width: 48px !important;
  margin: 14px auto !important;
}


/* ── BLOQUE 5: TARJETAS DE CATEGORÍA ────────────────────── */

/* Columna usada como card — usar clase "cat-card-inox" */
.cat-card-inox {
  border: 1px solid #e5e7eb;
  border-radius: 6px !important;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cat-card-inox:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14) !important;
}

/* Imagen de fondo de la tarjeta */
.cat-card-inox {
  background-size: cover !important;
  background-position: center !important;
  min-height: 190px;
  position: relative;
}

/* Overlay sobre imagen de la tarjeta */
.cat-card-inox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(13, 27, 42, 0.85) 0%,
    rgba(13, 27, 42, 0.25) 60%,
    transparent 100%
  );
  z-index: 1;
}

/* El contenido de la tarjeta encima del overlay */
.cat-card-inox .btColumnContent {
  position: relative;
  z-index: 2;
}

/* Texto de la tarjeta */
.cat-card-inox h3 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}

/* Línea amarilla decorativa antes del título de tarjeta
   Usar clase "cat-accent" en un elemento Separator pequeño */
.cat-accent .btHr,
.cat-accent hr {
  border-color: #FBBD02 !important;
  border-width: 3px !important;
  width: 28px !important;
  margin-left: 0 !important;
  margin-bottom: 7px !important;
}

/* Links dentro de la tarjeta */
.cat-card-inox a:not(.btBtn) {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0D1B2A !important;
  display: block;
  margin-bottom: 4px;
  transition: color 0.2s;
}

.cat-card-inox a:not(.btBtn):hover {
  color: #FE4F00 !important;
}

/* Botón CTA de la tarjeta */
.cat-card-inox .btBtn {
  background-color: #FBBD02 !important;
  border-color: #FBBD02 !important;
  color: #0D1B2A !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 16px !important;
  border-radius: 3px !important;
}

.cat-card-inox .btBtn:hover {
  background-color: #FE4F00 !important;
  border-color: #FE4F00 !important;
  color: #ffffff !important;
}


/* ── BLOQUE 6: BANNER BODEGA + STATS ────────────────────── */

.banner-bodega-inox {
  min-height: 380px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  text-align: center;
}

.banner-bodega-inox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 42, 0.75);
  z-index: 1;
  pointer-events: none;
}

.banner-bodega-inox .btWrapper,
.banner-bodega-inox .bt-wrapper,
.banner-bodega-inox > .port,
.banner-bodega-inox .btRow,
.banner-bodega-inox .btColumn,
.banner-bodega-inox .btColumnContent {
  position: relative;
  z-index: 2;
}

.banner-bodega-inox h2 {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.banner-bodega-inox p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Número grande del stat — usar clase "stat-num" */
.stat-num,
.stat-num p {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #FBBD02 !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

/* Label del stat — usar clase "stat-label" */
.stat-label,
.stat-label p {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Botón CTA del banner */
.banner-bodega-inox .btBtn {
  background-color: #FBBD02 !important;
  border-color: #FBBD02 !important;
  color: #0D1B2A !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  padding: 14px 32px !important;
  border-radius: 3px !important;
}

.banner-bodega-inox .btBtn:hover {
  background-color: #FE4F00 !important;
  border-color: #FE4F00 !important;
  color: #ffffff !important;
}


/* ── BLOQUE 7: CTA FINAL ─────────────────────────────────── */

.cta-final-inox {
  background-color: #F5F5F5 !important;
  padding: 56px 0 !important;
}

.cta-final-inox h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0D1B2A !important;
  text-transform: uppercase !important;
}

.cta-final-inox p {
  font-size: 14px !important;
  color: #6B7280 !important;
}

/* Botón cotizar */
.cta-final-inox .btBtn.btn-cotizar {
  background-color: #FBBD02 !important;
  border-color: #FBBD02 !important;
  color: #0D1B2A !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  padding: 15px 28px !important;
}

.cta-final-inox .btBtn.btn-cotizar:hover {
  background-color: #FE4F00 !important;
  border-color: #FE4F00 !important;
  color: #ffffff !important;
}

/* Botón WhatsApp */
.cta-final-inox .btBtn.btn-wa {
  background-color: #25D366 !important;
  border-color: #25D366 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  padding: 15px 28px !important;
}

.cta-final-inox .btBtn.btn-wa:hover {
  background-color: #1da851 !important;
  border-color: #1da851 !important;
}