/*
 * page_hero.css — v2
 * Hero moderno con canvas 3D para páginas internas.
 * v2: todos los tamaños de texto en px para ser
 *     inmunes al font-size: 30% del template turco.
 */

/* ── Ocultar el hero original del template ── */
header.page-header {
  display: none !important;
}

/* ── Contenedor del hero ── */
.tc-page-hero {
  position: relative !important;
  width: 100% !important;
  height: 340px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1755C8 !important;
}

/* Canvas Three.js */
.tc-page-hero__canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 0 !important;
}

/* Overlay */
.tc-page-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(15, 40, 140, 0.45) 0%,
    rgba(30, 95, 211, 0.20) 100%
  ) !important;
  z-index: 1 !important;
}

/* Contenido */
.tc-page-hero__content {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  padding: 0 32px !important;
  width: 100% !important;
  max-width: 860px !important;
  box-sizing: border-box !important;
}

/* TÍTULO — tamaño fijo en px, no rem */
.tc-page-hero__title {
  font-size: 42px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin: 0 0 14px !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35) !important;
  word-break: break-word !important;
}

/* Línea decorativa */
.tc-page-hero__line {
  width: 48px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #1E5FD3, #0D8C6D) !important;
  border-radius: 2px !important;
  margin: 0 auto 14px !important;
}

/* Breadcrumb */
.tc-page-hero__breadcrumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.70) !important;
  margin: 0 !important;
}
.tc-page-hero__breadcrumb a {
  color: rgba(255,255,255,0.70) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.tc-page-hero__breadcrumb a:hover {
  color: #FFFFFF !important;
}
.tc-page-hero__breadcrumb .sep {
  color: rgba(255,255,255,0.35) !important;
  font-size: 12px !important;
}
.tc-page-hero__breadcrumb .current {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600 !important;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .tc-page-hero {
    height: 300px !important;
  }
  .tc-page-hero__title {
    font-size: 36px !important;
  }
}

@media (max-width: 768px) {
  .tc-page-hero {
    height: 260px !important;
  }
  .tc-page-hero__content {
    padding: 0 20px !important;
  }
  .tc-page-hero__title {
    font-size: 28px !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 10px !important;
  }
  .tc-page-hero__line {
    margin-bottom: 10px !important;
  }
  .tc-page-hero__breadcrumb {
    font-size: 13px !important;
    gap: 4px !important;
  }
}

@media (max-width: 480px) {
  .tc-page-hero {
    height: 220px !important;
  }
  .tc-page-hero__title {
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  .tc-page-hero__breadcrumb {
    font-size: 12px !important;
  }
  .tc-page-hero__line {
    width: 36px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 360px) {
  .tc-page-hero {
    height: 200px !important;
  }
  .tc-page-hero__title {
    font-size: 19px !important;
    padding: 0 4px !important;
  }
  .tc-page-hero__breadcrumb {
    font-size: 11px !important;
  }
}