/* ==========================================================================
   HUMANIZA GROUP SpA - MASTER WPBAKERY STYLESHEET
   Targets WPBakery Page Builder & Impreza elements for exact visual fidelity
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
  --primary-navy: #0b2545;
  --primary-navy-dark: #071930;
  --primary-navy-light: #153a66;
  --primary-teal: #00838f;
  --primary-teal-dark: #006972;
  --primary-teal-light: #00a5b5;
  --primary-teal-bg: #e0f2f1;
  
  --badge-wellness-bg: #e0f2f1;
  --badge-wellness-text: #00796b;
  --badge-leadership-bg: #e0f2fe;
  --badge-leadership-text: #0284c7;
  --badge-mental-bg: #e0e7ff;
  --badge-mental-text: #3730a3;
  --badge-people-bg: #ecfdf5;
  --badge-people-text: #047857;

  --color-sand: #c59b6d;
  --color-sand-hover: #b08253;
  --color-whatsapp: #25D366;
  
  --text-dark: #1e293b;
  --text-body: #334155;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-white: #ffffff;

  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-script: 'Caveat', cursive, sans-serif;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & LAYOUT OVERRIDES (Overrides Abril Fatface & theme fonts)
   ========================================================================== */
body, html,
h1, h2, h3, h4, h5, h6,
.vc_custom_heading,
.w-iconbox-title,
.w-btn-label,
.w-nav-title,
.w-text,
p, span, a, div {
  font-family: var(--font-main) !important;
}

body {
  background-color: #ffffff !important;
  color: var(--text-body) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Ensure maximum content width matches container */
.l-section-h,
.l-main .l-section-h {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Remove default extra row paddings */
.l-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/* ==========================================================================
   HERO SECTION (.humaniza-hero-row)
   ========================================================================== */
.humaniza-hero-row {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%) !important;
  padding-top: 50px !important;
  padding-bottom: 65px !important;
  border-bottom: none !important;
}

.humaniza-hero-row .g-cols {
  align-items: center !important;
}

.humaniza-hero-row h1.vc_custom_heading {
  font-size: 46px !important;
  font-weight: 800 !important;
  color: var(--primary-navy) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.6px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

.humaniza-hero-row h2.vc_custom_heading {
  font-size: 46px !important;
  font-weight: 800 !important;
  color: var(--primary-teal) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.6px !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.humaniza-hero-row .wpb_text_column p {
  font-size: 16.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  max-width: 530px !important;
  margin-bottom: 26px !important;
}

/* Hero Action Buttons */
.humaniza-hero-row .g-cols.cols_3 {
  margin-top: 14px !important;
}

.humaniza-hero-row .g-cols.cols_3 .w-btn-wrapper {
  margin-bottom: 10px !important;
}

.humaniza-hero-row .w-btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 13px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  text-align: center !important;
}

/* Button 1: Ver cursos */
.humaniza-hero-row .vc_column_inner:nth-child(1) .w-btn {
  background-color: var(--primary-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(11, 37, 69, 0.2) !important;
}

.humaniza-hero-row .vc_column_inner:nth-child(1) .w-btn:hover {
  background-color: var(--primary-navy-light) !important;
  transform: translateY(-2px) !important;
}

/* Button 2: Capacitación empresas */
.humaniza-hero-row .vc_column_inner:nth-child(2) .w-btn {
  background-color: var(--primary-teal) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 131, 143, 0.25) !important;
}

.humaniza-hero-row .vc_column_inner:nth-child(2) .w-btn:hover {
  background-color: var(--primary-teal-dark) !important;
  transform: translateY(-2px) !important;
}

/* Button 3: Aula Virtual */
.humaniza-hero-row .vc_column_inner:nth-child(3) .w-btn {
  background-color: #ffffff !important;
  color: var(--primary-navy) !important;
  border: 1.5px solid #cbd5e1 !important;
}

.humaniza-hero-row .vc_column_inner:nth-child(3) .w-btn:hover {
  background-color: #f8fafc !important;
  border-color: var(--primary-navy) !important;
  transform: translateY(-2px) !important;
}

/* Hero Image Card & Watermark */
.hero-image-card {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(11, 37, 69, 0.12) !important;
}

.hero-watermark {
  position: absolute !important;
  right: 24px !important;
  top: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: right !important;
  pointer-events: none !important;
}

.hero-watermark span {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: rgba(100, 116, 139, 0.45) !important;
  letter-spacing: -0.3px !important;
  line-height: 1.25 !important;
}

/* ==========================================================================
   FLOATING HIGHLIGHTS BAR (.humaniza-highlights-row)
   ========================================================================== */
.humaniza-highlights-row {
  position: relative !important;
  z-index: 10 !important;
  padding: 0 !important;
  margin-top: -32px !important;
  margin-bottom: 45px !important;
  background: transparent !important;
  border: none !important;
}

.humaniza-highlights-row > .l-section-h {
  background: #ffffff !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  padding: 24px 10px !important;
}

.humaniza-highlights-row .g-cols.cols_4 > .wpb_column {
  padding: 8px 24px !important;
  border-right: 1px solid #edf2f7 !important;
}

.humaniza-highlights-row .g-cols.cols_4 > .wpb_column:last-child {
  border-right: none !important;
}

.humaniza-highlights-row .w-iconbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.humaniza-highlights-row .w-iconbox-icon {
  color: var(--primary-navy) !important;
  font-size: 28px !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
  margin-top: 2px !important;
}

.humaniza-highlights-row .w-iconbox-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--primary-navy) !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}

/* ==========================================================================
   CURSOS DESTACADOS (.humaniza-courses-section)
   ========================================================================== */
.humaniza-courses-section {
  padding-top: 30px !important;
  padding-bottom: 70px !important;
  background-color: #ffffff !important;
}

.humaniza-courses-section span.vc_custom_heading {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--primary-teal) !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.humaniza-courses-section h2.vc_custom_heading {
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  color: var(--primary-navy) !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
}

/* Button: Ver catálogo completo */
.humaniza-courses-section .w-btn-wrapper .w-btn {
  border: 1.5px solid var(--color-sand) !important;
  color: #5c4028 !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.humaniza-courses-section .w-btn-wrapper .w-btn:hover {
  background: #fdfaf6 !important;
  border-color: var(--color-sand-hover) !important;
  color: #3b2817 !important;
  transform: translateY(-2px) !important;
}

/* 4 Course Cards Grid */
.humaniza-courses-section .g-cols.cols_4 > .wpb_column {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 16px !important;
}

.humaniza-courses-section .g-cols.cols_4 > .wpb_column:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.1) !important;
  border-color: #cbd5e1 !important;
}

.humaniza-courses-section .g-cols.cols_4 .vc_column-inner {
  padding: 0 0 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Course Card Thumbnail */
.humaniza-courses-section .w-image {
  height: 155px !important;
  overflow: hidden !important;
  position: relative !important;
}

.humaniza-courses-section .w-image img {
  width: 100% !important;
  height: 155px !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
  display: block !important;
}

.humaniza-courses-section .g-cols.cols_4 > .wpb_column:hover .w-image img {
  transform: scale(1.05) !important;
}

.humaniza-courses-section .wpb_text_column {
  padding: 12px 14px 0 14px !important;
  flex-grow: 1 !important;
}

/* Badges */
.course-badge {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.badge-wellness { background: #e0f2f1 !important; color: #00796b !important; }
.badge-leadership { background: #e0f2fe !important; color: #0284c7 !important; }
.badge-mental { background: #e0e7ff !important; color: #3730a3 !important; }
.badge-people { background: #ecfdf5 !important; color: #047857 !important; }

.course-card-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--primary-navy) !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
  min-height: 40px !important;
}

.course-card-meta {
  font-size: 12.5px !important;
  color: #64748b !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.course-card-meta i {
  color: #94a3b8 !important;
  font-size: 12px !important;
  width: 14px !important;
  text-align: center !important;
}

/* Card Ver curso button */
.humaniza-courses-section .g-cols.cols_4 .w-btn-wrapper {
  padding: 0 14px !important;
  margin-top: auto !important;
}

.humaniza-courses-section .g-cols.cols_4 .w-btn {
  width: 100% !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  color: var(--primary-navy) !important;
  background: #ffffff !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.humaniza-courses-section .g-cols.cols_4 .w-btn:hover {
  background: var(--primary-navy) !important;
  border-color: var(--primary-navy) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   ÁREAS DE CAPACITACIÓN (.humaniza-areas-section)
   ========================================================================== */
.humaniza-areas-section {
  padding-top: 40px !important;
  padding-bottom: 70px !important;
  background-color: #ffffff !important;
}

.humaniza-areas-section span.vc_custom_heading {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--primary-teal) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.humaniza-areas-section h2.vc_custom_heading {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--primary-navy) !important;
  margin-top: 0 !important;
  letter-spacing: -0.4px !important;
}

/* 6 Category Cards Grid */
.humaniza-areas-section .g-cols.cols_6 > .wpb_column {
  background-color: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 12px !important;
  padding: 24px 14px 20px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
  margin-bottom: 12px !important;
}

.humaniza-areas-section .g-cols.cols_6 > .wpb_column:hover {
  background-color: #ffffff !important;
  border-color: var(--primary-teal) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(0, 131, 143, 0.1) !important;
}

.humaniza-areas-section .w-iconbox {
  text-align: center !important;
}

.humaniza-areas-section .w-iconbox-icon {
  font-size: 30px !important;
  color: var(--primary-navy) !important;
  margin-bottom: 12px !important;
  transition: transform 0.2s, color 0.2s !important;
}

.humaniza-areas-section .g-cols.cols_6 > .wpb_column:hover .w-iconbox-icon {
  color: var(--primary-teal) !important;
  transform: scale(1.1) !important;
}

.humaniza-areas-section .w-iconbox-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--primary-navy) !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

.humaniza-areas-section .w-iconbox-text span {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   ¿POR QUÉ HUMANIZA? (.humaniza-why-section)
   ========================================================================== */
.humaniza-why-section {
  padding-top: 40px !important;
  padding-bottom: 70px !important;
  background-color: #ffffff !important;
}

.humaniza-why-section span.vc_custom_heading {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--primary-teal) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.humaniza-why-section h2.vc_custom_heading {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--primary-navy) !important;
  line-height: 1.22 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.5px !important;
}

/* 6 Value Props */
.humaniza-why-section .g-cols.cols_3 .w-iconbox {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 20px !important;
}

.humaniza-why-section .w-iconbox-icon {
  color: var(--primary-teal) !important;
  font-size: 26px !important;
  margin-bottom: 8px !important;
  transition: transform 0.2s ease !important;
}

.humaniza-why-section .w-iconbox:hover .w-iconbox-icon {
  transform: scale(1.2) !important;
}

.humaniza-why-section .w-iconbox-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--primary-navy) !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   PRE-FOOTER CTA (.humaniza-prefooter-row)
   ========================================================================== */
.humaniza-prefooter-row {
  background-color: #eef4f8 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.humaniza-prefooter-row .g-cols {
  align-items: center !important;
}

.humaniza-prefooter-row h3.vc_custom_heading {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--primary-navy) !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.3px !important;
}

.humaniza-prefooter-row .w-btn {
  background-color: var(--primary-teal) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 24px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 131, 143, 0.25) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.humaniza-prefooter-row .w-btn:hover {
  background-color: var(--primary-teal-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 131, 143, 0.35) !important;
}

.btn-whatsapp-pill {
  background-color: #ffffff !important;
  border: 1.5px solid var(--color-whatsapp) !important;
  color: #15803d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.15) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-whatsapp-pill i {
  color: var(--color-whatsapp) !important;
  font-size: 16px !important;
}

.btn-whatsapp-pill:hover {
  background-color: #f0fdf4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
}

/* ==========================================================================
   FOOTER (.site-footer & .l-footer)
   ========================================================================== */
.l-footer {
  background-color: var(--primary-navy) !important;
  color: #cbd5e1 !important;
}

.l-footer .site-footer {
  background-color: var(--primary-navy) !important;
  padding-top: 60px !important;
  padding-bottom: 30px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.l-footer .site-footer .w-image img {
  height: 56px !important;
  width: auto !important;
}

.l-footer .site-footer h4.vc_custom_heading {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.2px !important;
}

.l-footer a {
  color: #cbd5e1 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}

.l-footer a:hover {
  color: #38bdf8 !important;
}

.footer-quote {
  font-family: var(--font-script) !important;
  font-size: 21px !important;
  color: #e2e8f0 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Tablets & Mobiles)
   ========================================================================== */
@media (max-width: 900px) {

  .humaniza-hero-row h1.vc_custom_heading,
  .humaniza-hero-row h2.vc_custom_heading {
    font-size: 32px !important;
    text-align: center !important;
  }
  .humaniza-hero-row .wpb_text_column p {
    text-align: center !important;
    margin: 0 auto 20px !important;
  }
  .humaniza-hero-row .g-cols.cols_3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .hero-watermark {
    display: none !important;
  }
  .humaniza-highlights-row {
    margin-top: 0 !important;
  }
  .humaniza-highlights-row .g-cols.cols_4 > .wpb_column {
    border-right: none !important;
    border-bottom: 1px solid #edf2f7 !important;
    padding: 12px 10px !important;
  }
  .humaniza-courses-section .g-cols.cols_4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .humaniza-areas-section .g-cols.cols_6 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 600px) {
  .humaniza-courses-section .g-cols.cols_4 {
    grid-template-columns: 1fr !important;
  }
  .humaniza-areas-section .g-cols.cols_6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .humaniza-why-section .g-cols.cols_3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .humaniza-prefooter-row .g-cols {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
}