/**
Theme Name: astra-child
Theme URI: https://wpastra.com/astra-chile
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Template: astra
Version: 4.13.0


/* ============================================================
   LABFLOW — COMPONENT-SPECIFIC STYLES (WordPress)
   Este CSS debe ir en Apariencia > Personalizar > CSS Adicional 
   o preferiblemente en el style.css de tu tema hijo.
   
   NOTA: Las variables globales (:root) se han eliminado porque 
   ahora se cargan desde /design-system/tokens.css
   ============================================================ */

/* ── 1. Integración del Header Compartido ────────────────── */
/* Oculta el encabezado nativo de Astra para usar el Web Component */
.site-header,
.ast-desktop-header,
.ast-mobile-header,
#masthead {
  display: none !important;
}

sp-header {
  display: block !important;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ── 2. Barra de Navegación del Sitio (#sp-site-nav) ─────── */
#sp-site-nav {
  background: var(--sp-bg-surface);
  border-bottom: 1px solid var(--sp-border-default);
  position: sticky;
  top: 64px;
  /* Altura de sp-header */
  z-index: 999;
  box-shadow: var(--sp-shadow-xs);
}

.sp-nav-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: 1200px;
}

.sp-nav-menu>li>a {
  display: block;
  padding: 0.75rem 1rem;
  font-family: var(--sp-font-body);
  font-size: 0.875rem;
  font-weight: var(--sp-font-medium);
  color: var(--sp-color-gray-700);
  text-decoration: none;
  transition: color var(--sp-transition-base);
}

.sp-nav-menu>li>a:hover,
.sp-nav-menu>li.current-menu-item>a {
  color: var(--sp-color-brand-500);
}

.sp-nav-menu>li.current-menu-item>a::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--sp-color-brand-500);
  border-radius: 2px;
  margin-top: 2px;
}

/* Submenú desplegable */
.sp-nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--sp-bg-surface);
  border: 1px solid var(--sp-border-default);
  border-radius: 8px;
  box-shadow: var(--sp-shadow-lg);
  list-style: none;
  padding: 0.4rem 0;
  z-index: 1000;
}

.sp-nav-menu>li:hover>.sub-menu {
  display: block;
}

/* ── 3. Tabla de Precios y Secciones de Producto ─────────── */
.sp-pricing-section {
  font-family: var(--sp-font-display);
  color: var(--sp-text-primary);
  padding: 4rem 1rem;
  background: var(--sp-bg-surface);
}

.sp-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.sp-service-label {
  display: inline-block;
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-color-brand-600);
  background: var(--sp-color-brand-50);
  padding: 4px 12px;
  border-radius: var(--sp-radius-full);
  margin-bottom: 14px;
}

.sp-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}

.sp-plan {
  background: var(--sp-bg-surface);
  border: 1px solid var(--sp-border-default);
  border-radius: var(--sp-radius-lg);
  padding: 2rem;
  transition: all var(--sp-transition-slow);
}

.sp-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 209, 255, 0.08);
}

.sp-plan.sp-featured {
  border-color: var(--sp-color-brand-500);
  border-width: 2px;
  position: relative;
}

.sp-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sp-color-brand-500);
  color: #fff;
  font-size: 11px;
  font-weight: var(--sp-font-semibold);
  padding: 4px 16px;
  border-radius: var(--sp-radius-full);
}

.sp-amount {
  font-size: 42px;
  font-weight: 700;
  color: var(--sp-text-primary);
}

.sp-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 24px;
  border-radius: var(--sp-radius-full);
  font-weight: var(--sp-font-semibold);
  text-decoration: none !important;
  transition: all var(--sp-transition-base);
  border: 1px solid var(--sp-border-default);
  background: transparent;
  color: var(--sp-text-primary);
}

.sp-btn-primary {
  background: var(--sp-color-brand-500);
  border-color: var(--sp-color-brand-500);
  color: #fff;
}

.sp-btn-primary:hover {
  background: var(--sp-color-brand-600);
  border-color: var(--sp-color-brand-600);
}

/* Sección Taller Gratuito */
.sp-free-tier {
  max-width: 1100px;
  margin: 32px auto 0;
  background: var(--sp-bg-subtle);
  border: 1px solid var(--sp-border-default);
  border-radius: var(--sp-radius-lg);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ── 4. Ajustes de Responsividad ────────────────────────── */
@media (max-width: 768px) {
  .sp-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .sp-free-tier {
    flex-direction: column;
    text-align: center;
  }
}

/* Ajuste Admin Bar WordPress */
body.admin-bar sp-header {
  top: 32px;
}

body.admin-bar #sp-site-nav {
  top: calc(64px + 32px);
}