/*
Theme Name: Kadence Child — Fischnaler
Theme URI: https://fischnaler.com
Description: Child theme para Babi Fischnaler
Author: Luis Murillo
Template: kadence
Version: 1.0.0
*/

/* =============================================
   VARIABLES DE MARCA — BABI FISCHNALER
   ============================================= */
:root {
  --primary:           #00696e;
  --primary-light:     #03a7af;
  --primary-container: #e0f5f5;
  --secondary:         #4b57a9;
  --tertiary:          #8d4f00;
  --tertiary-light:    #ec953d;
  --tertiary-bg:       #fff0e0;
  --surface:           #fcf9f8;
  --surface-low:       #f6f3f2;
  --on-surface:        #1b1c1c;
  --on-surface-muted:  #5a5c5c;
  --border:            rgba(109,121,122,0.12);
  --radius:            0.75rem;
  --radius-lg:         1.25rem;
}

/* =============================================
   OCULTAR TÍTULO — HOMEPAGE
   ============================================= */
.home .entry-title,
.home .page-title,
.home .entry-header,
.hide-page-title .entry-title,
.hide-page-title .entry-header {
  display: none !important;
}

/* =============================================
   TIPOGRAFÍA GLOBAL
   ============================================= */
body {
  font-family: 'Manrope', system-ui, sans-serif !important;
  background-color: var(--surface) !important;
  color: var(--on-surface) !important;
}

h1, h2, h3, h4, h5, h6,
.wp-block-kadence-advancedheading {
  font-family: 'Newsreader', Georgia, serif !important;
  font-weight: 400 !important;
}

p, li, a, span, label, input {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* =============================================
   HEADER
   ============================================= */
.site-header, #masthead {
  background: rgba(252,249,248,0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Limpiar páginas de WooCommerce del nav */
.main-navigation .menu li a {
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--on-surface-muted) !important;
}
.main-navigation .menu li a:hover { color: var(--primary) !important; }

/* =============================================
   BOTONES GLOBALES
   ============================================= */
.wp-block-button__link,
.kb-btn, .button,
button[type="submit"],
input[type="submit"],
.woocommerce .button,
.woocommerce button.button,
.pms-form input[type="submit"] {
  background-color: var(--primary) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: background 0.2s, transform 0.15s !important;
  border: none !important;
}
.wp-block-button__link:hover,
.kb-btn:hover, .button:hover {
  background-color: var(--primary-light) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

a { color: var(--primary) !important; }
a:hover { color: var(--primary-light) !important; }

/* =============================================
   KADENCE ROW — RESET GENERAL
   El wrap principal de columnas en Kadence Blocks
   ============================================= */
.kt-row-column-wrap {
  width: 100% !important;
}

/* =============================================
   HERO — 2 COLUMNAS
   ============================================= */
.bf-hero-section > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 100vh !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
}

.bf-hero-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 5rem 3rem 5rem 4rem !important;
}

.bf-hero-right {
  min-height: 100vh !important;
  background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&q=80&fit=crop&crop=top') !important;
  background-size: cover !important;
  background-position: center top !important;
  position: relative !important;
}

/* Stats dentro del hero — sub-grid */
.bf-hero-left .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  min-height: auto !important;
  gap: 1.5rem !important;
  margin-top: 2rem !important;
}

/* Headings dentro del hero */
.bf-hero-section h1 {
  font-size: clamp(3rem, 5vw, 5.5rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: var(--on-surface) !important;
  margin-bottom: 0.5rem !important;
}
.bf-hero-section h1 em {
  color: var(--primary) !important;
  font-style: italic !important;
}
.bf-hero-section h3 {
  font-style: italic !important;
  color: var(--on-surface-muted) !important;
  font-size: 1.35rem !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
}

/* =============================================
   OVERLINE — CLASE REUTILIZABLE
   ============================================= */
.bf-overline,
.bf-overline p,
h6.bf-overline {
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--tertiary) !important;
  margin-bottom: 0.75rem !important;
}

/* =============================================
   SECTION TITLES
   ============================================= */
.bf-section-title {
  font-family: 'Newsreader', serif !important;
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--on-surface) !important;
}

/* =============================================
   TRUST BAR
   ============================================= */
.bf-trust-bar > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2.5rem !important;
  min-height: auto !important;
}

.bf-trust-bar {
  background: var(--surface-low) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1.5rem 3rem !important;
}

.bf-trust-item p {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--on-surface-muted) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* =============================================
   SERVICIOS GRID — 3 COLUMNAS
   ============================================= */
.bf-services-grid > .kt-row-layout-inner-wrap > .kt-row-column-wrap,
.bf-services-grid-2 > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  min-height: auto !important;
}

.bf-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.bf-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
}

.bf-tag,
.bf-tag p {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--tertiary) !important;
  background: var(--tertiary-bg) !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 0.25rem !important;
  margin: 0 !important;
  font-family: 'Manrope', sans-serif !important;
}

/* =============================================
   ABOUT — 2 COLUMNAS
   ============================================= */
.bf-about-section > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
  min-height: auto !important;
}

.bf-about-section {
  background: var(--surface-low) !important;
}

.bf-about-img img {
  border-radius: 1.5rem !important;
  width: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 3/4 !important;
  filter: grayscale(10%) !important;
}

.bf-credentials ul,
.bf-credentials .wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.bf-credentials li {
  color: var(--on-surface-muted) !important;
  font-size: 0.875rem !important;
}

/* =============================================
   TESTIMONIOS — DARK SECTION + 3 COLS
   ============================================= */
.bf-testi-section {
  background: var(--on-surface) !important;
}

.bf-testi-section > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
  min-height: auto !important;
}

.bf-testi-grid > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 1.25rem !important;
  min-height: auto !important;
}

.bf-testi-section h2,
.bf-testi-section h6 { color: #fff !important; }

.bf-testi-overline {
  color: var(--tertiary-light) !important;
}

/* =============================================
   PLANES — 3 COLUMNAS
   ============================================= */
.bf-pricing-grid > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  min-height: auto !important;
}

.bf-plan-badge,
.bf-plan-badge p {
  display: inline-block !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 0.25rem !important;
  margin: 0 0 0.75rem !important;
  font-family: 'Manrope', sans-serif !important;
}

.bf-plan-list ul,
.bf-plan-list .wp-block-list {
  list-style: none !important;
  padding: 0 !important;
}
.bf-plan-list li {
  font-size: 0.85rem !important;
  color: var(--on-surface-muted) !important;
  padding: 0.4rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

/* =============================================
   CTA SECTION
   ============================================= */
.bf-cta-section {
  background: linear-gradient(135deg, #00696e 0%, #005b60 100%) !important;
}
.bf-cta-section h2,
.bf-cta-section h6,
.bf-cta-section p {
  color: #fff !important;
}
.bf-cta-section .wp-block-button__link {
  background: #fff !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
}
.bf-cta-section .wp-block-button__link:hover {
  background: #f0fafa !important;
  transform: translateY(-2px) !important;
}

/* =============================================
   FLOATING WHATSAPP (inyectado por functions.php)
   ============================================= */
.bf-floating-wa {
  position: fixed !important;
  bottom: 1.75rem !important;
  right: 1.75rem !important;
  z-index: 9999 !important;
  background: #25d366 !important;
  color: #fff !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 2rem !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.bf-floating-wa:hover {
  transform: translateY(-2px) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.4) !important;
}
.bf-floating-wa svg { flex-shrink: 0 !important; }

/* =============================================
   MS LMS — OVERRIDES
   ============================================= */
.stm-lms-courses--list .stm-lms-course--title,
.stm-lms-course--title a {
  font-family: 'Newsreader', serif !important;
  color: var(--on-surface) !important;
}
.stm_lms_go_to_course,
.stm-lms-btn {
  background: var(--primary) !important;
  color: #fff !important;
}

/* =============================================
   WOOCOMMERCE — LIMPIEZA
   ============================================= */
.woocommerce-breadcrumb { display: none !important; }
.woocommerce-info { border-top-color: var(--primary) !important; }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* =============================================
   PAID MEMBER SUBSCRIPTIONS
   ============================================= */
.pms-form input[type="submit"],
.pms-payment-gateways input[type="submit"] {
  background: var(--primary) !important;
  color: #fff !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .bf-hero-section > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .bf-hero-right {
    min-height: 55vw !important;
    order: -1 !important;
  }
  .bf-hero-left {
    padding: 2.5rem 1.5rem 3rem !important;
  }
  .bf-about-section > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .bf-testi-grid > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .bf-services-grid > .kt-row-layout-inner-wrap > .kt-row-column-wrap,
  .bf-services-grid-2 > .kt-row-layout-inner-wrap > .kt-row-column-wrap,
  .bf-pricing-grid > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
  }
  .bf-trust-bar > .kt-row-layout-inner-wrap > .kt-row-column-wrap {
    gap: 1rem !important;
  }
  .bf-hero-left .kt-row-column-wrap {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }
}