/*
Theme Name: BCS Academy
Theme URI: https://github.com/marcosarcu/bcs-academy-theme
Description: Block theme del campus de Blockchain School Academy. Sistema de diseño "Block Prism", integrado con LearnDash, WooCommerce y CartFlows.
Author: Blockchain School
Author URI: https://blockchainschoolbcs.com
Version: 1.3.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bcs-academy
Tags: block-theme, education, dark, full-site-editing
*/

/* =====================================================================
   BLOCK PRISM — DESIGN TOKENS
   ===================================================================== */
:root {
  /* Alto aproximado de la cabecera sticky; los heroes lo descuentan del viewport. */
  --bcs-header-h:        88px;
  --bcs-midnight:        #0A0B2C;
  --bcs-midnight-2:      #11133B;
  --bcs-midnight-deep:   #06071F;
  --bcs-ice:             #FAFAFC;
  --bcs-ice-2:           #F1F2F8;
  --bcs-cyan:            #22D3EE;
  --bcs-cyan-ink:        #062A30;
  --bcs-indigo:          #6366F1;
  --bcs-violet:          #8B5CF6;
  --bcs-coral:           #FF6B5C;
  --bcs-coral-on-light:  #E04A3A;
  --bcs-coral-warm:      #FF8E5C;
  --bcs-slate:           #2A2D45;
  --bcs-slate-muted:     #5C6079;
  --bcs-lavender:        #C8C9F2;
  --bcs-lavender-muted:  #8488B8;

  --gradient-prism:        linear-gradient(135deg, #22D3EE 0%, #6366F1 50%, #8B5CF6 100%);
  --gradient-prism-soft:   linear-gradient(135deg, rgba(34,211,238,.18) 0%, rgba(139,92,246,.18) 100%);
  --gradient-prism-shimmer:linear-gradient(135deg, #22D3EE 0%, #6366F1 25%, #8B5CF6 50%, #6366F1 75%, #22D3EE 100%);
  --gradient-coral:        linear-gradient(135deg, #FF6B5C 0%, #FF8E5C 100%);

  /* Glifos Lucide para tiles/listas decorativas (mask = el color lo da el fondo).
     Los iconos inline usan el sprite (ver inc/icons.php); estos son para CSS. */
  --icon-graduation-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
  --icon-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
  --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-card:        0 18px 50px -20px rgba(10, 11, 44, .55);
  --shadow-card-light:  0 14px 38px -18px rgba(10, 11, 44, .25);
  --shadow-glow:        0 18px 40px -12px rgba(139, 92, 246, .55), 0 6px 18px -6px rgba(34, 211, 238, .35);
  --shadow-glow-hover:  0 22px 48px -14px rgba(139, 92, 246, .70), 0 10px 22px -8px rgba(34, 211, 238, .45);
  --shadow-coral:       0 14px 30px -10px rgba(255, 107, 92, .55);
  --shadow-coral-hover: 0 18px 38px -10px rgba(255, 107, 92, .75);

  --blur-glass:    saturate(140%) blur(18px);

  --bg:              var(--bcs-midnight);
  --bg-2:            var(--bcs-midnight-2);
  --surface:         rgba(255, 255, 255, .04);
  --glass:           rgba(255, 255, 255, .06);
  --glass-border:    rgba(255, 255, 255, .14);
  --text:            #FFFFFF;
  --text-secondary:  var(--bcs-lavender);
  --text-muted:      var(--bcs-lavender-muted);
  --border:          rgba(255, 255, 255, .10);
  --border-strong:   rgba(255, 255, 255, .20);
  --accent:          var(--bcs-violet);
  --accent-secondary:var(--bcs-cyan);
  --accent-warm:     var(--bcs-coral);
}

/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Drop the default block-gap (margin-block-start) between flow children.
   Doubled :root raises specificity above WP's generated global styles, which
   are printed after this stylesheet in the <head>. */
:root:root :where(.is-layout-flow) > * {
  margin-block-start: 0;
}
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bcs-midnight);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` (not `hidden`) avoids making <body> a scroll container, which would
     stop the sticky header from travelling down the page. */
  overflow-x: clip;
}
body.bcs-menu-open { overflow: hidden; }
h1, h2, h3, h4, h5, h6, .display {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.wp-block-heading { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
::selection { background: rgba(34, 211, 238, .25); color: #fff; }

.wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > * { margin-block-start: 0; }

/* Container helper */
.bcs-container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* Reveal animation pattern — used by IntersectionObserver.
   Gated behind html.js (set inline in wp_head): without JS the content
   must stay visible instead of stuck at opacity 0. */
html.js .bcs-fade-up,
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .bcs-fade-up.is-visible,
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
   HEADER / SITE NAV
   ===================================================================== */
/* Sticky lives on the template-part wrapper (its parent .wp-site-blocks is
   tall enough to scroll); the inner group's parent is only header-height tall,
   so sticky there would never travel. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
.bcs-site-header {
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 350ms ease, backdrop-filter 350ms ease,
              border-color 350ms ease, box-shadow 350ms ease;
}
/* Liquid glass once the page is scrolled (or while the mobile menu is open). */
.bcs-scrolled header.wp-block-template-part .bcs-site-header,
.bcs-menu-open header.wp-block-template-part .bcs-site-header {
  background: rgba(6, 7, 31, .55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.bcs-scrolled header.wp-block-template-part .bcs-site-header {
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 34px -22px rgba(0, 0, 0, .85);
}
.bcs-site-header .wp-block-group { padding: 0; }
.bcs-site-header .bcs-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  transition: padding 300ms ease;
}
/* Condense a touch on scroll for a polished feel. */
.bcs-scrolled .bcs-site-header .bcs-nav-row { padding-top: 12px; padding-bottom: 12px; }
.bcs-nav-row .wp-block-site-logo img {
  height: 38px;
  width: auto;
  display: block;
  transition: height 300ms ease;
}
.bcs-scrolled .bcs-nav-row .wp-block-site-logo img { height: 34px; }

/* ---- Hamburger button (mobile only) ---- */
.bcs-burger {
  display: none;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 8px;
  background: transparent;
  color: #fff;
  line-height: 0;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  z-index: 3;
}
.bcs-burger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .45); }
.bcs-burger-box { position: relative; display: block; width: 26px; height: 18px; }
.bcs-burger-inner,
.bcs-burger-inner::before,
.bcs-burger-inner::after {
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), top .3s ease, background .2s ease;
}
.bcs-burger-inner { top: 50%; transform: translateY(-50%); }
.bcs-burger-inner::before { content: ""; top: -8px; }
.bcs-burger-inner::after  { content: ""; top: 8px; }
/* Morph the three bars into an X. */
.bcs-burger.is-open .bcs-burger-inner { background: transparent; }
.bcs-burger.is-open .bcs-burger-inner::before { top: 0; transform: rotate(45deg); }
.bcs-burger.is-open .bcs-burger-inner::after  { top: 0; transform: rotate(-45deg); }

/* ---- Mobile overlay menu (hidden on desktop) ---- */
.bcs-mobile-menu { display: none; }

/* ---- Navegación principal ----
   El campus NO usa `core/navigation`: Polylang resuelve los menús por
   ubicación y ese bloque guarda su contenido en un post `wp_navigation`, con lo
   que los tres idiomas verían el mismo menú (ver inc/menus.php). El tema imprime
   `wp_nav_menu()` a través del bloque `bcs-academy/menu`, cuyo markup es
   `<nav class="bcs-nav-wrap"><ul class="bcs-nav-list"><li class="menu-item">`.
   Por eso los selectores son de menú clásico: los de `.wp-block-navigation` que
   había aquí antes no casaban con nada y la cabecera salía sin estilos. */
/* El menú va pegado a la derecha, junto a la zona de cuenta.
   La fila es `justify-content: space-between` con tres hijos (logo, menú y
   cuenta), así que el del medio quedaba centrado en mitad de la cabecera, lejos
   de todo. Un `margin-left: auto` en el menú absorbe el espacio libre antes de
   que space-between pueda repartirlo: logo a la izquierda, y menú y cuenta
   juntos a la derecha separados solo por el gap. */
.bcs-nav-row .bcs-nav-desktop { margin-left: auto; }
.bcs-nav-row .bcs-nav-wrap {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14.5px;
}
.bcs-nav-row .bcs-nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bcs-nav-row .bcs-nav-list li { margin: 0; }
.bcs-nav-row .bcs-nav-list a {
  color: var(--bcs-lavender);
  text-decoration: none;
  transition: color 200ms ease;
  position: relative;
  white-space: nowrap;
}
.bcs-nav-row .bcs-nav-list a:hover,
.bcs-nav-row .bcs-nav-list .current-menu-item > a {
  color: #fff;
}
.bcs-nav-row .bcs-nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-prism);
  transition: right 250ms ease;
}
.bcs-nav-row .bcs-nav-list a:hover::after,
.bcs-nav-row .bcs-nav-list .current-menu-item > a::after { right: 0; }

/* ---- Zona de cuenta (bloque bcs-academy/account-nav) ---- */
.bcs-account-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Anónimo: el botón del sistema, en versión pequeña. */
.bcs-account-nav .bcs-account-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 12px 20px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background: var(--gradient-prism);
  background-size: 200% 100%;
  box-shadow: var(--shadow-glow);
  transition: background-position .35s ease, box-shadow .3s ease, transform .2s ease;
}
.bcs-account-nav .bcs-account-cta:hover {
  background-position: 100% 0;
  box-shadow: var(--shadow-glow-hover);
  transform: translateY(-2px);
}
/* Con sesión: nombre del alumno + salir, sin competir con el menú. */
.bcs-account-nav .bcs-account-user,
.bcs-account-nav .bcs-account-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.bcs-account-nav .bcs-account-user {
  padding: 9px 16px 9px 13px;
  color: #fff;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  max-width: 220px;
}
.bcs-account-nav .bcs-account-user:hover {
  background: var(--glass);
  border-color: var(--border-strong);
}
.bcs-account-nav .bcs-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcs-account-nav .bcs-account-icon { flex-shrink: 0; opacity: .75; }
.bcs-account-nav .bcs-account-logout {
  padding: 9px 14px;
  color: var(--bcs-lavender-muted);
}
.bcs-account-nav .bcs-account-logout:hover { color: #fff; }
.bcs-account-nav a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .45);
}

/* ---- Header responsive: swap desktop nav for hamburger + overlay ---- */
@media (max-width: 860px) {
  .bcs-nav-desktop,
  .bcs-account-nav--desktop { display: none !important; }
  .bcs-burger { display: inline-flex; }

  .bcs-mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1;
    /* El hueco superior sale de la altura real de la cabecera, no de un 104
       escrito a mano. Y `position: fixed` ignora el `margin-top` que WordPress
       le pone a <html> cuando hay barra de administración, así que con sesión de
       admin el primer ítem quedaba cortado por debajo de ella. */
    padding: calc(var(--bcs-header-h, 88px) + 16px) 28px 48px;
    gap: 6px;
    background:
      radial-gradient(680px 420px at 100% 0%, rgba(139, 92, 246, .30), transparent 60%),
      radial-gradient(560px 360px at 0% 100%, rgba(34, 211, 238, .22), transparent 60%),
      rgba(6, 7, 31, .94);
    backdrop-filter: saturate(160%) blur(22px);
    -webkit-backdrop-filter: saturate(160%) blur(22px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  }
  .bcs-menu-open .bcs-mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
  }
  /* Solo la ve un administrador, pero mientras se prueba el sitio con sesión de
     admin el overlay tapaba su primer ítem. 46px es el alto de la barra de
     WordPress en móvil; 32px a partir de 783px de ancho. */
  .admin-bar .bcs-mobile-menu { padding-top: calc(var(--bcs-header-h, 88px) + 62px); }

  /* Menú clásico, igual que en escritorio: el markup es <nav><ul><li><a>. */
  .bcs-mobile-menu .bcs-nav-mobile-wrap { width: 100%; font-family: 'Space Grotesk', sans-serif; }
  .bcs-mobile-menu .bcs-nav-mobile-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .bcs-mobile-menu .bcs-nav-mobile-list li { width: 100%; margin: 0; }
  /* Los ítems se tratan como los de la zona de cuenta que va justo debajo.
     Antes eran texto suelto de 26px con 4px de sangrado y un filete inferior:
     un patrón pensado para un menú de cinco o seis entradas. Con una sola
     entrada quedaba una palabra enorme flotando, y encima desalineada con las
     filas de cuenta (16px y 22px de sangrado) que tiene debajo. Misma caja,
     misma sangría y una escala tipográfica por encima: el overlay se lee como
     una lista coherente en vez de como dos bloques ajenos. */
  .bcs-mobile-menu .bcs-nav-mobile-list {
    gap: 10px;
  }
  .bcs-mobile-menu .bcs-nav-mobile-list a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 22px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
  }
  .bcs-mobile-menu .bcs-nav-mobile-list a:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .22);
  }
  /* La página actual se marca con el degradado de marca en un filete lateral,
     no cambiando el color del texto: con una sola entrada, un texto cian sin
     más no se lee como «estás aquí». */
  .bcs-mobile-menu .bcs-nav-mobile-list .current-menu-item > a {
    position: relative;
    border-color: rgba(139, 92, 246, .45);
    padding-left: 26px;
  }
  .bcs-mobile-menu .bcs-nav-mobile-list .current-menu-item > a::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 2px;
    background: var(--gradient-prism);
  }

  /* Zona de cuenta en el overlay: a lo ancho y con más aire. */
  .bcs-account-nav--mobile {
    margin-top: 28px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .bcs-account-nav--mobile .bcs-account-cta,
  .bcs-account-nav--mobile .bcs-account-user,
  .bcs-account-nav--mobile .bcs-account-logout {
    width: 100%;
    max-width: none;
    justify-content: center;
    padding: 16px 22px;
    font-size: 16px;
  }
}
@media (min-width: 861px) {
  .bcs-burger,
  .bcs-mobile-menu { display: none !important; }
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 250ms ease, box-shadow 250ms ease, background 300ms ease, color 250ms ease;
  position: relative;
  overflow: hidden;
}
.wp-block-button .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .45);
}

/* Primary — prism gradient with glow (default) */
.wp-block-button:not(.is-style-outline):not(.bcs-btn-secondary):not(.bcs-btn-coral):not(.bcs-btn-ghost) .wp-block-button__link,
.bcs-btn-primary .wp-block-button__link {
  background: var(--gradient-prism);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.wp-block-button:not(.is-style-outline):not(.bcs-btn-secondary):not(.bcs-btn-coral):not(.bcs-btn-ghost) .wp-block-button__link:hover,
.bcs-btn-primary .wp-block-button__link:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-hover);
}
.bcs-btn-primary .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px -10px rgba(139, 92, 246, .55);
}

/* Secondary — glass on dark */
.bcs-btn-secondary .wp-block-button__link {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .20);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: none;
}
.bcs-btn-secondary .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  transform: translateY(-2px);
}

/* Coral — promotional accent */
.bcs-btn-coral .wp-block-button__link {
  background: var(--gradient-coral);
  color: #fff;
  box-shadow: var(--shadow-coral);
}
.bcs-btn-coral .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-coral-hover);
}

/* Ghost */
.bcs-btn-ghost .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 1px solid var(--border);
  box-shadow: none;
}
.bcs-btn-ghost .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .25);
}

/* Small */
.bcs-btn-sm .wp-block-button__link {
  padding: 11px 18px;
  font-size: 13.5px;
}

/* =====================================================================
   HERO — manifesto / display variants
   ===================================================================== */
.bcs-hero-prismatic {
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139, 92, 246, .35), transparent 60%),
    radial-gradient(900px 500px at 0% 30%,    rgba(34, 211, 238, .25), transparent 60%),
    var(--bcs-midnight);
  color: #fff;
  overflow: hidden;
  /* Padding simétrico + centrado vertical: el contenido queda a la misma
     distancia del borde superior e inferior sea cual sea su altura. */
  padding: 88px 0 !important;
  display: flex;
  align-items: center;
}
/* La cabecera es sticky y ocupa flujo, así que se descuenta de la altura
   mínima para que el hero no rebase la primera pantalla. */
.bcs-hero-manifesto { min-height: calc(90vh - var(--bcs-header-h, 88px)); }
.bcs-hero-compact   { min-height: calc(45vh - var(--bcs-header-h, 88px)); }
.bcs-hero-medium    { min-height: calc(50vh - var(--bcs-header-h, 88px)); }
.bcs-hero-about     { min-height: calc(60vh - var(--bcs-header-h, 88px)); }

.bcs-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

/* Floating prismatic blobs */
.bcs-float {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  pointer-events: none;
  animation: prismFloat 14s ease-in-out infinite;
  will-change: transform;
}
.bcs-float-1 { width: 320px; height: 320px; left: -80px;  top: 30%; background: radial-gradient(circle, rgba(34,211,238,.85),  transparent 65%); }
.bcs-float-2 { width: 380px; height: 380px; right: -80px; top: 5%;  background: radial-gradient(circle, rgba(139,92,246,.85),  transparent 65%); animation-delay: -5s; }
.bcs-float-3 { width: 220px; height: 220px; left: 45%; bottom: -40px; background: radial-gradient(circle, rgba(255,107,92,.55), transparent 65%); animation-delay: -9s; }
.bcs-float-4 { width: 180px; height: 180px; left: 12%; top: 60%;  background: radial-gradient(circle, rgba(34,211,238,.55), transparent 65%); animation-delay: -3s; }

/* Prismatic decorative shapes (rotating) */
.bcs-prism-shape {
  position: absolute;
  pointer-events: none;
  opacity: .35;
  animation: prismRotate 22s linear infinite;
  will-change: transform;
}
.bcs-prism-shape.p1 { right: 8%; top: 18%; width: 120px; height: 120px; }
.bcs-prism-shape.p2 { left: 6%; bottom: 18%; width: 90px; height: 90px; animation-delay: -8s; }
.bcs-prism-shape.p3 { right: 15%; bottom: 28%; width: 70px; height: 70px; animation-delay: -14s; }
.bcs-prism-shape svg { width: 100%; height: 100%; }

/* Dot grid overlay */
.bcs-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0) 80%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0) 80%);
}

/* Display sizes */
.bcs-display-xl {
  font-size: clamp(48px, 7.5vw, 100px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.04em !important;
  font-weight: 700;
  color: #fff;
}
.bcs-display-lg {
  font-size: clamp(44px, 6.4vw, 84px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
  font-weight: 700;
  color: #fff;
}
.bcs-display-md {
  font-size: clamp(40px, 5.6vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700;
  color: #fff;
}
.bcs-display-sm {
  font-size: clamp(36px, 4.4vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700;
  color: #fff;
}

/* Gradient text */
.bcs-gradient-text {
  background: var(--gradient-prism);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
}

.bcs-hero-prismatic .bcs-lead,
.bcs-hero-prismatic p.bcs-lead {
  margin: 32px auto 0 !important;
  max-width: 640px;
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: var(--bcs-lavender) !important;
  text-align: center;
}

.bcs-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px !important;
  flex-wrap: wrap;
}

.bcs-hero-meta {
  margin-top: 70px !important;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.bcs-hero-meta .bcs-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bcs-lavender-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.bcs-hero-meta strong {
  color: #fff;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
}
.bcs-hero-meta .bcs-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bcs-violet);
  opacity: .5;
}

/* =====================================================================
   SECTION HEADERS
   ===================================================================== */
.bcs-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px !important;
  position: relative;
  z-index: 2;
}
.bcs-section-kicker {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-cyan);
  margin: 0 0 16px !important;
}
.bcs-section-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.bcs-section-head p {
  margin-top: 18px !important;
  font-size: 17px;
  line-height: 1.55;
  color: var(--bcs-lavender);
}
.bcs-section-head-split {
  text-align: left;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: end;
  max-width: none;
  margin-bottom: 48px !important;
}

/* =====================================================================
   VALUE PROP TRIO
   ===================================================================== */
.bcs-value-section {
  padding: 110px 0 !important;
  background: var(--bcs-midnight-2) !important;
  position: relative;
  overflow: hidden;
}
.bcs-value-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.bcs-value-grid > .wp-block-column,
.bcs-value-grid .bcs-value-card {
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  transition: transform 300ms ease, border-color 300ms ease;
  position: relative;
  overflow: hidden;
}
.bcs-value-grid > .wp-block-column::before,
.bcs-value-grid .bcs-value-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}
.bcs-value-grid > .wp-block-column:hover,
.bcs-value-grid .bcs-value-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
}
.bcs-value-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--gradient-prism);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px -6px rgba(139,92,246,.6);
  margin-bottom: 22px !important;
  position: relative;
}
.bcs-value-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px; height: 28px;
  background: #fff;
  -webkit-mask: var(--icon-graduation-cap) center / contain no-repeat;
          mask: var(--icon-graduation-cap) center / contain no-repeat;
}
.bcs-value-icon.icon-2::before { -webkit-mask-image: var(--icon-shield-check); mask-image: var(--icon-shield-check); }
.bcs-value-icon.icon-3::before { -webkit-mask-image: var(--icon-users); mask-image: var(--icon-users); }
.bcs-value-card h3 { font-size: 22px; line-height: 1.2; color: #fff; margin: 0 0 12px !important; letter-spacing: -0.015em; }
.bcs-value-card p  { color: var(--bcs-lavender); font-size: 15px; line-height: 1.6; }

/* =====================================================================
   MASTER FEATURE
   ===================================================================== */
.bcs-master-feature {
  position: relative;
  padding: 110px 0 !important;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(255,107,92,.18), transparent 60%),
    var(--bcs-midnight-deep) !important;
  overflow: hidden;
  color: #fff;
}
.bcs-master-card {
  position: relative;
  z-index: 2;
  border-radius: 28px !important;
  padding: clamp(40px, 6vw, 72px) !important;
  background:
    linear-gradient(135deg, rgba(34,211,238,.06), transparent 50%, rgba(139,92,246,.10)),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
}
.bcs-master-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-cyan);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .35);
  margin-bottom: 22px !important;
}
.bcs-master-card h2 {
  font-size: clamp(36px, 5vw, 60px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 20px !important;
}
.bcs-master-lead {
  font-size: 17.5px !important;
  line-height: 1.6;
  color: var(--bcs-lavender) !important;
  margin: 0 0 28px !important;
  max-width: 560px;
}
.bcs-master-features {
  display: grid;
  gap: 12px;
  margin: 0 0 32px !important;
  list-style: none;
  padding: 0 !important;
}
.bcs-master-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--bcs-lavender);
  font-size: 15px;
}
.bcs-master-features li::before {
  content: "";
  width: 20px; height: 20px;
  border-radius: 50%;
  background-image:
    var(--icon-check-white),
    var(--gradient-prism);
  background-size: 13px 13px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.bcs-master-info-card {
  padding: 22px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}
.bcs-master-info-card + .bcs-master-info-card { margin-top: 16px; }
.bcs-master-info-card .bcs-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-lavender-muted);
  margin: 0 0 8px !important;
}
.bcs-master-info-card .bcs-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
}
.bcs-master-info-card .bcs-value.is-gradient {
  background: var(--gradient-prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bcs-master-info-card .bcs-sub {
  font-size: 13.5px;
  color: var(--bcs-lavender-muted);
  margin: 4px 0 0 !important;
}

/* =====================================================================
   COURSES GRID + COURSE CARD
   ===================================================================== */
.bcs-courses-section {
  padding: 110px 0 !important;
  background: var(--bcs-midnight) !important;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.bcs-course-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.bcs-course-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(34,211,238,.08), transparent 40%, rgba(139,92,246,.10));
  pointer-events: none;
}
.bcs-course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
  box-shadow: var(--shadow-card);
}
.bcs-course-card.is-coming-soon { opacity: .7; }
.bcs-course-card.is-coming-soon::after {
  content: "Próximamente";
  position: absolute;
  top: 16px; left: 16px; z-index: 4;
  padding: 5px 11px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;
  backdrop-filter: var(--blur-glass);
}

.bcs-course-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 100% at 0% 0%,   rgba(34,211,238,.55), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(139,92,246,.65), transparent 60%),
    #0E1138;
  overflow: hidden;
  margin: 0 0 18px;
}
/* Enlace que cubre toda la miniatura (clicable por encima de los overlays). */
.bcs-course-thumb-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* Sello de certificación ARP: superpuesto sobre la miniatura, como un sello
   de calidad oficial enmarcado en un chip de cristal. */
.bcs-course-arp-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-block;
  line-height: 0;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(8, 10, 28, .58);
  border: 1px solid rgba(255, 255, 255, .20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .85);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.bcs-course-arp-badge img {
  position: static;
  inset: auto;
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
  border-radius: 5px;
}
.bcs-course-arp-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, .6);
  box-shadow: 0 14px 32px -12px rgba(34, 211, 238, .45);
}
.bcs-course-thumb.is-coral {
  background:
    radial-gradient(120% 100% at 0% 0%,   rgba(255,107,92,.55), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(255,142,92,.55), transparent 60%),
    #2C1525;
}
.bcs-course-thumb.is-cyan {
  background:
    radial-gradient(120% 100% at 0% 0%,   rgba(34,211,238,.65), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(99,102,241,.45), transparent 60%),
    #0B1F33;
}
.bcs-course-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Fade prism sobre la foto (semitransparente para que la imagen se vea). */
.bcs-course-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 0% 0%,   rgba(34,211,238,.35), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(139,92,246,.40), transparent 60%);
}
/* Cuadrícula encima del fade y la foto. */
.bcs-course-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at 70% 70%, #000 0%, transparent 70%);
}

.bcs-course-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bcs-coral);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 107, 92, .12);
  border: 1px solid rgba(255, 107, 92, .35);
  margin-bottom: 12px !important;
  align-self: flex-start;
  width: fit-content;
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}
a.bcs-course-tag:hover { border-color: rgba(34, 211, 238, .6); }
/* wp:post-terms renders <a> inside the pill; keep the pill typography, not the
   global link style (cyan + underline) from theme.json */
.bcs-course-tag a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  letter-spacing: inherit;
}
.wp-block-post-terms.bcs-course-tag:hover { border-color: rgba(34, 211, 238, .6); }
.wp-block-post-terms.bcs-course-tag .wp-block-post-terms__separator { color: inherit; }
.bcs-course-tag.is-prism {
  color: var(--bcs-cyan);
  background: rgba(34, 211, 238, .12);
  border-color: rgba(34, 211, 238, .35);
}
.bcs-course-tag.is-violet {
  color: #C8C9F2;
  background: rgba(139, 92, 246, .16);
  border-color: rgba(139, 92, 246, .40);
}
.bcs-course-card h3 {
  font-size: 22px !important;
  line-height: 1.15 !important;
  color: #fff;
  margin: 0 0 8px !important;
  letter-spacing: -0.015em;
}
.bcs-course-card h3 a { color: inherit; text-decoration: none; }
.bcs-course-card h3 a:hover { color: var(--bcs-cyan); }
.bcs-course-card p,
.bcs-course-card p.bcs-desc {
  color: var(--bcs-lavender-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  flex: 1;
}
.bcs-course-instructor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bcs-lavender) !important;
  margin: 14px 0 !important;
}
.bcs-course-instructor::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gradient-prism);
  flex-shrink: 0;
}
.bcs-course-instructor.alt::before { background: linear-gradient(135deg, #FF6B5C, #8B5CF6); }
.bcs-course-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--bcs-lavender-muted);
}
.bcs-course-rating { color: var(--bcs-cyan); letter-spacing: 1px; font-size: 13px; }
.bcs-course-rating .bcs-num { color: #fff; font-family: 'Space Grotesk', sans-serif; margin-left: 6px; font-weight: 600; }
.bcs-course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
  font-size: 13px;
  color: var(--bcs-lavender-muted);
}
.bcs-course-price-block {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.bcs-price-old {
  color: var(--bcs-lavender-muted);
  text-decoration: line-through;
  font-size: 12.5px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  margin-right: 6px;
}
.bcs-price {
  font-family: 'Space Grotesk', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  text-align: end;
  margin-left: auto;
  white-space: nowrap;
}
.bcs-price.is-free {
  background: var(--gradient-prism);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* =====================================================================
   KPI STRIP
   ===================================================================== */
.bcs-kpi-strip {
  position: relative;
  padding: 90px 0 !important;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(34,211,238,.30), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(139,92,246,.30), transparent 60%),
    var(--bcs-midnight) !important;
  overflow: hidden;
  color: #fff;
}
.bcs-kpi-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.bcs-kpi {
  border-radius: var(--radius-lg);
  padding: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  position: relative;
  overflow: hidden;
}
.bcs-kpi::before {
  content: "";
  position: absolute;
  top: -1px; left: 16px; right: 16px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}
.bcs-kpi .bcs-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.bcs-kpi .bcs-num.is-gradient {
  background: var(--gradient-prism);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bcs-kpi .bcs-label {
  margin-top: 10px !important;
  font-size: 13.5px;
  color: var(--bcs-lavender);
  line-height: 1.45;
}

/* =====================================================================
   STAT CARD (compact)
   ===================================================================== */
.bcs-stat-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.bcs-stat-card .bcs-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 32px; line-height: 1;
  letter-spacing: -0.02em; color: #fff;
}
.bcs-stat-card .bcs-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bcs-lavender-muted);
}

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.bcs-testimonials {
  padding: 110px 0 !important;
  background: var(--bcs-midnight-2) !important;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.bcs-testimonial {
  border-radius: var(--radius-lg);
  padding: 36px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  position: relative;
  overflow: hidden;
  transition: transform 300ms ease, border-color 300ms ease;
}
.bcs-testimonial:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
}
.bcs-testimonial::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 4px;
  background: var(--gradient-prism);
}
.bcs-testimonial .bcs-stars {
  color: var(--bcs-cyan);
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}
.bcs-testimonial .bcs-stars .bcs-icon { width: 16px; height: 16px; }
.bcs-testimonial blockquote,
.bcs-testimonial .bcs-quote {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  color: #fff;
  margin: 0 0 22px;
  letter-spacing: -0.015em;
}
.bcs-testimonial .bcs-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bcs-testimonial .bcs-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gradient-prism);
  box-shadow: 0 6px 18px -6px rgba(139,92,246,.5);
  flex-shrink: 0;
}
.bcs-testimonial .bcs-avatar.alt-1 { background: linear-gradient(135deg, #FF6B5C, #8B5CF6); }
.bcs-testimonial .bcs-avatar.alt-2 { background: linear-gradient(135deg, #22D3EE, #FF8E5C); }
.bcs-testimonial .bcs-avatar.alt-3 { background: linear-gradient(135deg, #6366F1, #22D3EE); }
.bcs-testimonial .bcs-avatar.alt-4 { background: linear-gradient(135deg, #FF8E5C, #22D3EE); }
.bcs-testimonial .bcs-who   { font-size: 14px; color: #fff; font-weight: 600; }
.bcs-testimonial .bcs-where { font-size: 13px; color: var(--bcs-lavender-muted); }

/* =====================================================================
   PARTNERS TICKER + CHIPS
   ===================================================================== */
.bcs-partners-section {
  padding: 60px 0 !important;
  background: var(--bcs-midnight-deep) !important;
  position: relative;
  overflow: hidden;
}
.bcs-partners-label {
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-lavender-muted);
  margin: 0 0 28px !important;
}
/* The viewport clips the strip and fades it out at both edges via a mask, so
   the fade works over any background and never overlaps the chips. */
.bcs-partners-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bcs-partners-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
}
/* view.js clones the group to cover the viewport, then shifts the track by
   exactly one tiling period (--bcs-shift = group width + gap) per cycle. */
.bcs-partners-track.is-animated {
  animation: bcs-marquee var(--bcs-duration, 30s) linear infinite;
  will-change: transform;
}
.bcs-partners-track.is-offscreen,
.bcs-partners-track.is-focus-paused,
.bcs-partners-viewport:hover .bcs-partners-track { animation-play-state: paused; }
.bcs-partners-group {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
}
/* Fallback without JS or with reduced motion: static, centered, wrapping row.
   `.is-measuring` keeps the single-row layout while view.js takes measurements. */
.bcs-partners-track:not(.is-animated):not(.is-measuring) {
  width: 100%;
  justify-content: center;
}
.bcs-partners-track:not(.is-animated):not(.is-measuring) .bcs-partners-group {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 12px;
}
.bcs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  /* Solid translucent fill: backdrop-filter on a constantly-moving element
     forces per-frame repaints and makes the marquee stutter. */
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  transition: background 250ms ease, border-color 250ms ease;
  white-space: nowrap;
}
.bcs-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gradient-prism);
}
.bcs-chip:hover,
.bcs-chip:focus-visible {
  background: rgba(139, 92, 246, .14);
  border-color: rgba(139, 92, 246, .45);
}
@keyframes bcs-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--bcs-shift, -50%), 0, 0); }
}

/* =====================================================================
   FINAL CTA BAND
   ===================================================================== */
.bcs-cta-section {
  padding: 110px 0 !important;
  background: var(--bcs-midnight) !important;
  color: #fff;
}
.bcs-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 9vw, 110px) 28px !important;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(34,211,238,.40), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(255,107,92,.30), transparent 60%),
    radial-gradient(700px 400px at 50% 50%, rgba(139,92,246,.30), transparent 60%),
    var(--bcs-midnight);
  color: #fff;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.10);
}
.bcs-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.bcs-cta-inner {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.bcs-cta h2 {
  font-size: clamp(40px, 6vw, 76px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 22px !important;
}
.bcs-cta p {
  color: var(--bcs-lavender) !important;
  font-size: 18.5px !important;
  line-height: 1.55 !important;
  margin: 0 auto 36px !important;
  max-width: 600px;
}
.bcs-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.bcs-footer {
  background: var(--bcs-midnight-deep) !important;
  color: var(--bcs-lavender) !important;
  padding: 70px 0 28px !important;
  position: relative;
  overflow: hidden;
}
.bcs-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .55;
}
.bcs-footer h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px !important;
  font-weight: 600;
  color: #fff !important;
  margin: 0 0 16px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bcs-footer ul,
.bcs-footer .wp-block-list { list-style: none; padding: 0; margin: 0; }
.bcs-footer li,
.bcs-footer .wp-block-list li { margin-bottom: 10px; }
.bcs-footer a {
  color: var(--bcs-lavender) !important;
  text-decoration: none;
  font-size: 14px;
  transition: color 200ms ease;
}
.bcs-footer a:hover { color: #fff !important; }
.bcs-footer-brand img,
.bcs-footer .wp-block-site-logo img {
  height: 36px;
  width: auto !important;
  max-width: none;
  display: block;
  margin-bottom: 18px;
}
.bcs-footer-brand p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  max-width: 320px;
  color: var(--bcs-lavender-muted) !important;
  margin: 0 0 22px !important;
}

.bcs-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bcs-social-links a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  color: var(--bcs-lavender) !important;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  text-decoration: none;
}
.bcs-social-links a svg { display: block; }
.bcs-social-links a:hover {
  background: rgba(139, 92, 246, .15);
  border-color: rgba(139, 92, 246, .45);
  color: #fff !important;
  transform: translateY(-2px);
}

.bcs-footer-badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 44px;
}
.bcs-footer-badge {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
/* Badge con el logo del sello ARP en lugar de icono + texto. */
.bcs-footer-badge-logo {
  padding: 10px 16px;
}
.bcs-footer-badge-logo img {
  display: block;
  width: auto;
  height: 68px;
  border-radius: 8px;
}
.bcs-footer-badge:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 246, .45);
  background: rgba(255,255,255,.06);
}
/* Iconos (sistema Lucide via bcs_icon / [bcs_icon]) ----------------------- */
.bcs-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
  color: inherit;
}
.bcs-icon use { pointer-events: none; }
.bcs-icon.is-sm { width: 16px; height: 16px; }
.bcs-icon.is-md { width: 20px; height: 20px; }
.bcs-icon.is-lg { width: 28px; height: 28px; }
.bcs-icon.is-xl { width: 36px; height: 36px; }
.bcs-icon.is-cyan   { color: var(--bcs-cyan); }
.bcs-icon.is-violet { color: var(--bcs-violet); }
.bcs-icon.is-indigo { color: var(--bcs-indigo); }
.bcs-icon.is-coral  { color: var(--bcs-coral); }

/* Iconos en contexto */
.bcs-master-info-card .bcs-label,
.bcs-info-card .bcs-label { display: flex; align-items: center; gap: 7px; }
.bcs-master-info-card .bcs-label .bcs-icon { color: var(--bcs-cyan); }
.bcs-kpi-icon { margin: 0 0 16px !important; color: var(--bcs-cyan); line-height: 1; }
.bcs-kpi-icon .bcs-icon { width: 26px; height: 26px; }
.bcs-course-meta-left { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0; }
.bcs-course-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--bcs-lavender);
}
/* Icono de cada dato en un chip suave con acento cian. */
.bcs-course-meta-item .bcs-icon {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 9px;
  background: rgba(34, 211, 238, .10);
  border: 1px solid rgba(34, 211, 238, .22);
  color: var(--bcs-cyan);
  flex-shrink: 0;
}

.bcs-footer-badge .bcs-badge-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--gradient-prism);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -8px rgba(99, 102, 241, .8);
}
.bcs-footer-badge .bcs-badge-icon.is-coral {
  background: var(--gradient-coral);
  box-shadow: 0 6px 16px -8px rgba(255, 107, 92, .8);
}
.bcs-footer-badge .bcs-badge-icon .bcs-icon { width: 18px; height: 18px; }
.bcs-footer-badge-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.bcs-footer-badge-text strong {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bcs-footer-badge-text span {
  color: var(--bcs-lavender-muted);
  font-size: 11.5px;
}

.bcs-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  color: var(--bcs-lavender-muted);
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}
.bcs-footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.bcs-footer-legal {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.bcs-lang-selector {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  color: var(--bcs-lavender);
  font-weight: 500;
  margin: 0;
}
.bcs-lang-selector .bcs-lang {
  padding: 3px 9px;
  border-radius: 999px;
  /* !important + font-size ganan a la regla genérica `.bcs-footer a` ahora que
     las píldoras son enlaces reales de TranslatePress en vez de <span>. */
  color: var(--bcs-lavender-muted) !important;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}
.bcs-lang-selector .bcs-lang:hover { color: #fff !important; }
.bcs-lang-selector .bcs-lang.is-active {
  color: #fff !important;
  background: rgba(139, 92, 246, .25);
}

/* Footer layout: marca + 3 columnas de enlaces */
.bcs-footer .bcs-footer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  flex-wrap: nowrap;
}
.bcs-footer .bcs-footer-grid > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  min-width: 0;
}
@media (max-width: 1024px) {
  .bcs-footer .bcs-footer-grid { grid-template-columns: repeat(3, 1fr); }
  .bcs-footer .bcs-footer-grid > .bcs-footer-brand { grid-column: 1 / -1; }
  .bcs-footer .bcs-footer-brand p { max-width: 560px; }
}
@media (max-width: 640px) {
  .bcs-footer .bcs-footer-grid { grid-template-columns: 1fr 1fr; }
  .bcs-footer .bcs-footer-grid > .bcs-footer-brand { grid-column: 1 / -1; }
}

/* =====================================================================
   PAGE TITLE / BREADCRUMB
   ===================================================================== */
.bcs-page-title {
  padding: 80px 0 40px !important;
  background: var(--bcs-midnight) !important;
  color: #fff;
  text-align: center;
}
.bcs-page-title h1 {
  font-size: clamp(36px, 5vw, 64px) !important;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.bcs-breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--bcs-lavender-muted);
  margin-bottom: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.bcs-breadcrumb a { color: var(--bcs-lavender); text-decoration: none; transition: color 200ms ease; }
.bcs-breadcrumb a:hover { color: #fff; }
.bcs-breadcrumb .current { color: #fff; }
/* La miga la pinta ahora el bloque `bcs-academy/breadcrumb` (inc/breadcrumbs.php)
   y sale como <nav>, no como <p>. Único efecto colateral medido: theme.json
   estiliza `core/paragraph` con el selector `:root :where(p)` y ahí va un
   `line-height: 1.65` que un <nav> no hereda —caería al 1.6 del body—, así que
   se repone aquí para que la línea ocupe exactamente lo mismo que antes.
   El separador es un <span> propio en vez de un · suelto dentro del texto:
   siendo la miga un flex con `gap`, cada nivel y cada separador son ítems
   independientes y el espaciado lo pone el `gap`, no los espacios del HTML. */
.bcs-breadcrumb { line-height: 1.65; }
.bcs-breadcrumb .bcs-breadcrumb-sep { color: var(--bcs-lavender-muted); }

/* =====================================================================
   BLOG / POST CARDS
   ===================================================================== */
.bcs-post-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  text-decoration: none;
  color: inherit;
}
.bcs-post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
  box-shadow: var(--shadow-card);
}
.bcs-post-thumb {
  aspect-ratio: 16/10;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(34,211,238,.55), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(139,92,246,.65), transparent 60%),
    #0E1138;
  position: relative;
  overflow: hidden;
}
.bcs-post-thumb.is-coral { background: radial-gradient(120% 100% at 0% 0%, rgba(255,107,92,.55), transparent 60%), radial-gradient(120% 100% at 100% 100%, rgba(255,142,92,.55), transparent 60%), #2C1525; }
.bcs-post-thumb.is-cyan { background: radial-gradient(120% 100% at 0% 0%, rgba(34,211,238,.7), transparent 60%), radial-gradient(120% 100% at 100% 100%, rgba(99,102,241,.45), transparent 60%), #0B1F33; }
.bcs-post-thumb.is-violet { background: radial-gradient(120% 100% at 0% 0%, rgba(139,92,246,.55), transparent 60%), radial-gradient(120% 100% at 100% 100%, rgba(34,211,238,.5), transparent 60%), #1A0F33; }
.bcs-post-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at 70% 70%, #000 0%, transparent 70%);
}
.bcs-post-thumb .bcs-glyph {
  position: absolute;
  right: 14px; top: 14px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--gradient-prism);
  box-shadow: 0 6px 18px -6px rgba(139,92,246,.6);
}
.bcs-post-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bcs-post-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bcs-cyan);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .35);
  margin-bottom: 12px !important;
  align-self: flex-start;
  width: fit-content;
}
.bcs-post-cat.is-coral  { color: var(--bcs-coral); background: rgba(255, 107, 92, .12); border-color: rgba(255, 107, 92, .35); }
.bcs-post-cat.is-violet { color: #C8C9F2; background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .40); }
.bcs-post-card h3 {
  font-size: 19px !important;
  line-height: 1.2 !important;
  color: #fff;
  margin: 0 0 10px !important;
  letter-spacing: -0.015em;
}
/* Links inside a card are structural — the card reads as a single target, so
   they take the surrounding text colour instead of the global link style. */
.bcs-post-card a,
.bcs-post-card a:hover,
.bcs-post-card a:focus {
  color: inherit;
  text-decoration: none;
}
.bcs-post-card h3 a:hover { color: var(--bcs-cyan); }
.bcs-post-card p.bcs-excerpt {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--bcs-lavender) !important;
  flex: 1;
  margin: 0 0 16px !important;
}
.bcs-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  font-size: 12.5px;
  color: var(--bcs-lavender-muted);
}
.bcs-post-meta strong { color: #fff; font-weight: 600; }

/* Featured post */
.bcs-featured {
  position: relative;
  margin-bottom: 60px;
  padding: 36px;
  border-radius: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
  overflow: hidden;
}
.bcs-featured::before {
  content: "";
  position: absolute;
  top: 0; left: 36px; right: 36px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}

/* Drop cap */
.bcs-drop-cap p:first-of-type::first-letter,
.bcs-first-para::first-letter {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 88px;
  font-weight: 700;
  float: left;
  line-height: 0.85;
  padding: 8px 14px 0 0;
  background: var(--gradient-prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
}

/* =====================================================================
   FILTER PILLS
   ===================================================================== */
.bcs-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;
}
.bcs-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bcs-lavender);
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease, background 200ms ease;
  text-decoration: none;
}
.bcs-filter-pill:hover { color: #fff; border-color: rgba(139, 92, 246, .45); transform: translateY(-2px); }
.bcs-filter-pill.is-active { color: #fff; background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .55); }

/* =====================================================================
   FAQ ACCORDION
   ===================================================================== */
.bcs-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.bcs-faq-item {
  padding: 0;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  position: relative;
  overflow: hidden;
  transition: border-color 250ms ease, background 250ms ease, box-shadow 300ms ease;
}
.bcs-faq-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gradient-prism);
  opacity: 0; transition: opacity 300ms ease;
}
.bcs-faq-item:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.05); }
.bcs-faq-item[open] {
  border-color: rgba(139, 92, 246, .45);
  background: rgba(139, 92, 246, .06);
  box-shadow: 0 16px 44px -24px rgba(139, 92, 246, .65);
}
.bcs-faq-item[open]::before { opacity: 1; }
.bcs-faq-item summary {
  padding: 21px 26px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  transition: color 200ms ease;
}
.bcs-faq-item summary:hover { color: var(--bcs-cyan); }
.bcs-faq-item[open] summary { color: #fff; }
.bcs-faq-item summary::-webkit-details-marker { display: none; }
.bcs-faq-item summary::marker { content: ""; }
.bcs-faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background-image:
    linear-gradient(var(--bcs-cyan), var(--bcs-cyan)),
    linear-gradient(var(--bcs-cyan), var(--bcs-cyan));
  background-size: 13px 2px, 2px 13px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform 350ms cubic-bezier(.16,1,.3,1), border-color 300ms ease;
}
.bcs-faq-item[open] summary::after {
  transform: rotate(135deg);
  border-color: transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    var(--gradient-prism);
  background-size: 13px 2px, 2px 13px, 100% 100%;
}
.bcs-faq-item .bcs-faq-answer {
  margin: 0 26px;
  padding: 17px 0 24px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bcs-lavender);
  max-width: 66ch;
}
.bcs-faq-item[open] .bcs-faq-answer { animation: bcsFadeIn 450ms cubic-bezier(.16,1,.3,1); }

/* Every accordion item spans the full list width (overrides WP constrained auto-margins) */
.bcs-faq-list > * { width: 100%; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; }

/* Smooth height + fade on expand / collapse (progressive enhancement) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .bcs-faq-item::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size 420ms cubic-bezier(.16, 1, .3, 1),
      opacity 300ms ease,
      content-visibility 420ms allow-discrete;
  }
  .bcs-faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
  .bcs-faq-item[open] .bcs-faq-answer { animation: none; }
}

/* =====================================================================
   CONTACT FORM
   ===================================================================== */
.bcs-form-card {
  padding: 40px;
  border-radius: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  position: relative;
  overflow: hidden;
}
.bcs-form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 40px; right: 40px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}
.bcs-form-card h2 { font-size: clamp(24px, 2.8vw, 32px) !important; color: #fff; margin: 0 0 12px !important; letter-spacing: -0.02em; }
.bcs-form-sub { font-size: 15px; line-height: 1.6; color: var(--bcs-lavender); margin: 0 0 28px !important; }
.bcs-form-card form { display: flex; flex-direction: column; gap: 16px; }
.bcs-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.bcs-form-field { display: flex; flex-direction: column; gap: 8px; }
.bcs-form-field label {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bcs-lavender-muted);
  font-weight: 600;
}
.bcs-form-field input,
.bcs-form-field select,
.bcs-form-field textarea {
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.bcs-form-field input::placeholder,
.bcs-form-field textarea::placeholder { color: var(--bcs-lavender-muted); }
.bcs-form-field input:focus,
.bcs-form-field select:focus,
.bcs-form-field textarea:focus {
  outline: none;
  border-color: rgba(139, 92, 246, .55);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .20);
  /* background-color, NOT the `background` shorthand: the shorthand wipes the
     select's caret (background-image) and slides it to 0 0 on focus. */
  background-color: rgba(255,255,255,.06);
}
.bcs-form-field textarea { min-height: 130px; resize: vertical; font-family: 'Inter', sans-serif; }
.bcs-form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C8C9F2'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* The SVG declares only a viewBox, so it has no intrinsic size: left to
     `auto` the caret is scaled up to the whole control. */
  background-size: 16px 16px;
  background-position: right 14px center;
  padding-right: 40px;
  /* The native options popup is drawn by the OS from the select's color-scheme
     and the option styles — without these it renders white-on-white. */
  color-scheme: dark;
}
.bcs-form-field select option {
  background-color: var(--bcs-midnight-2);
  color: #fff;
}
.bcs-form-card button[type="submit"] {
  width: 100%;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--gradient-prism);
  background-size: 200% 200%;
  color: #fff;
  border: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform 250ms ease, box-shadow 250ms ease, background-position 300ms ease;
  margin-top: 6px;
}
.bcs-form-card button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-hover);
  background-position: 100% 50%;
}

.bcs-info-card {
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  transition: transform 300ms ease, border-color 300ms ease;
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.bcs-info-card::before {
  content: "";
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}
.bcs-info-card:hover { transform: translateY(-3px); border-color: rgba(139, 92, 246, .45); }
.bcs-info-card .bcs-label {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-cyan);
  font-weight: 600;
  margin: 0 0 8px !important;
}
.bcs-info-card h3 { font-size: 18px !important; color: #fff; margin: 0 0 8px !important; letter-spacing: -0.015em; }
.bcs-info-card p  { font-size: 14.5px; line-height: 1.55; color: var(--bcs-lavender); }

/* Contact info-card column: even gaps + cards stretch to fill the form height */
.bcs-info-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.bcs-info-stack .bcs-info-card {
  flex: 1;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contact channel cards (clickable) */
.bcs-channel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  column-gap: 18px;
  row-gap: 5px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  text-decoration: none;
  color: inherit;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(.16,1,.3,1), border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}
.bcs-channel:last-child { margin-bottom: 0; }
.bcs-channel::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gradient-prism);
  opacity: 0; transition: opacity 300ms ease;
}
.bcs-channel:hover {
  transform: translateY(-3px);
  border-color: rgba(139,92,246,.45);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-card);
}
.bcs-channel:hover::before { opacity: 1; }
.bcs-channel:focus-visible { outline: 2px solid var(--bcs-cyan); outline-offset: 3px; }
.bcs-channel-icon {
  grid-row: 1 / span 3;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  color: var(--bcs-cyan);
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(139,92,246,.16));
  border: 1px solid rgba(255,255,255,.10);
  transition: color 300ms ease, transform 300ms ease;
}
.bcs-channel:hover .bcs-channel-icon { transform: scale(1.06); }
.bcs-channel-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bcs-channel .bcs-label {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bcs-cyan); font-weight: 600;
}
.bcs-channel-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -.015em;
  line-height: 1.25; overflow-wrap: anywhere;
}
.bcs-channel-desc { font-size: 14px; line-height: 1.55; color: var(--bcs-lavender); }
.bcs-channel-arrow {
  grid-row: 1; grid-column: 3;
  display: grid; place-items: center;
  color: var(--bcs-lavender-muted);
  transition: color 300ms ease, transform 300ms ease;
}
.bcs-channel:hover .bcs-channel-arrow { color: #fff; transform: translate(2px,-2px); }

/* Contact form — submitted state */
.bcs-form-success {
  text-align: center;
  padding: 18px 8px 6px;
  animation: bcsFadeIn 500ms cubic-bezier(.16,1,.3,1);
}
.bcs-form-success-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: var(--gradient-prism);
  box-shadow: var(--shadow-glow);
}
.bcs-form-success h3 { font-size: 22px !important; color: #fff; margin: 0 0 10px !important; letter-spacing: -.02em; }
.bcs-form-success p { font-size: 15px; line-height: 1.6; color: var(--bcs-lavender); margin: 0 auto !important; max-width: 380px; }
@keyframes bcsFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   NEWSLETTER
   ===================================================================== */
.bcs-newsletter-section {
  padding: 80px 0 !important;
  background: var(--bcs-midnight-deep) !important;
  position: relative;
}
.bcs-newsletter {
  padding: clamp(40px, 6vw, 72px);
  border-radius: 28px;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(34,211,238,.30), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(255,107,92,.20), transparent 60%),
    var(--bcs-midnight);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.bcs-newsletter::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.bcs-newsletter > * { position: relative; z-index: 2; }
.bcs-newsletter h2 {
  font-size: clamp(26px, 3.4vw, 38px) !important;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 14px !important;
  letter-spacing: -0.025em;
}
.bcs-newsletter p { color: var(--bcs-lavender); font-size: 15.5px; line-height: 1.55; max-width: 460px; }

/* Newsletter inline signup */
.bcs-news-cta { display: flex; flex-direction: column; gap: 12px; }
.bcs-news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.bcs-news-form input {
  flex: 1 1 200px; min-width: 0;
  padding: 14px 18px; border-radius: 999px;
  background: rgba(6,7,31,.55);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff; font-family: 'Inter', sans-serif; font-size: 14.5px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.bcs-news-form input::placeholder { color: var(--bcs-lavender-muted); }
.bcs-news-form input:focus {
  outline: none; border-color: rgba(34,211,238,.6);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18);
  background: rgba(6,7,31,.75);
}
.bcs-news-form button {
  flex: 0 0 auto;
  padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--gradient-prism); background-size: 200% 200%;
  color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; font-weight: 600;
  box-shadow: var(--shadow-glow);
  transition: transform 250ms ease, box-shadow 250ms ease, background-position 300ms ease;
}
.bcs-news-form button:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-hover); background-position: 100% 50%; }
.bcs-news-fine { font-size: 12.5px !important; color: var(--bcs-lavender-muted) !important; margin: 0 !important; max-width: none !important; }
.bcs-news-done { font-size: 15px !important; color: var(--bcs-cyan) !important; font-weight: 600; margin: 0 !important; max-width: none !important; }

/* =====================================================================
   ARTICLE BODY (single post)
   ===================================================================== */
.bcs-article-section {
  padding: 80px 0 !important;
  background: var(--bcs-midnight-2) !important;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.bcs-article-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.bcs-article-body {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.bcs-article-body p { font-size: 17.5px; line-height: 1.75; color: var(--bcs-lavender); margin-bottom: 22px; }
.bcs-article-body p strong { color: #fff; font-weight: 600; }
.bcs-article-body h2 {
  font-size: clamp(26px, 3vw, 36px) !important;
  color: #fff;
  margin: 48px 0 18px !important;
  letter-spacing: -0.02em;
}
.bcs-article-body h2::before {
  content: "";
  display: block;
  width: 64px; height: 3px;
  background: var(--gradient-prism);
  border-radius: 2px;
  margin-bottom: 14px;
}
/* The first body <h2> is promoted to <h1> for SEO (inc/seo.php). Without this
   rule it inherits the 56px theme.json h1 with no margins and no accent bar. */
.bcs-article-body h1 {
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 26px !important;
  letter-spacing: -0.02em;
}
.bcs-article-body h1::before {
  content: "";
  display: block;
  width: 64px; height: 3px;
  background: var(--gradient-prism);
  border-radius: 2px;
  margin-bottom: 14px;
}
.bcs-article-body blockquote,
.bcs-article-body .wp-block-quote {
  margin: 36px 0;
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-border);
  border-left: 4px solid transparent;
  position: relative;
  overflow: hidden;
}
.bcs-article-body blockquote::before,
.bcs-article-body .wp-block-quote::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 4px;
  background: var(--gradient-prism);
}
.bcs-article-body blockquote p,
.bcs-article-body .wp-block-quote p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}

/* KPI cards embedded in the course body. The shared .bcs-kpi sizing (48px) is
   tuned for the full-width strip; inside the 720px article column the 3 cards
   are far narrower, so "1.000+" wrapped to two lines. Shrink + nowrap here. */
.bcs-article-body .bcs-kpi-cards {
  gap: 16px !important;
  margin: 4px 0 38px !important;
}
.bcs-article-body .bcs-kpi-cards .wp-block-column { margin: 0 !important; }
.bcs-article-body .bcs-kpi {
  height: 100%;
  padding: 24px 20px;
  text-align: center;
}
.bcs-article-body .bcs-kpi::before { left: 22px; right: 22px; }
.bcs-article-body .bcs-kpi .bcs-num {
  font-size: clamp(30px, 4.4vw, 38px);
  white-space: nowrap;
  margin: 0 auto;
}
.bcs-article-body .bcs-kpi .bcs-label {
  font-size: 13px;
  margin-top: 8px !important;
  text-wrap: balance;
}
@media (max-width: 600px) {
  .bcs-article-body .bcs-kpi { text-align: left; }
  .bcs-article-body .bcs-kpi .bcs-num { margin-left: 0; }
}

/* Intro card at the top of the course body. The shared .bcs-master-card is
   sized for the full-width homepage section; inside the 900px column its
   72px padding plus the features list's 32px bottom margin leave a large
   hole at the foot of the card. */
.bcs-article-body .bcs-master-card {
  padding: clamp(26px, 4vw, 44px) !important;
  border-radius: 22px !important;
  margin-bottom: 12px;
}
.bcs-article-body .bcs-master-card > :last-child { margin-bottom: 0 !important; }
/* The tag is a <p>, so `.bcs-article-body p` (one class + one element) outranks
   the component's own `.bcs-master-tag` and blows the pill up to body copy size.
   Restated here at the article-body's specificity so the badge keeps the size it
   has everywhere else. */
.bcs-article-body .bcs-master-tag {
  font-size: 11.5px;
  margin-bottom: 18px !important;
}
.bcs-article-body .bcs-master-lead { max-width: none; }

/* =====================================================================
   PRICE CARD (single course)
   ===================================================================== */
.bcs-price-card {
  padding: 32px;
  border-radius: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  position: relative;
  overflow: hidden;
}
.bcs-price-card::before {
  content: "";
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}
.bcs-price-card .bcs-price-old { color: var(--bcs-lavender-muted); text-decoration: line-through; font-size: 16px; font-weight: 500; }
.bcs-price-card .bcs-price-now {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 4px;
}
.bcs-price-card .bcs-price-discount {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 10px;
  background: rgba(255,107,92,.15);
  border: 1px solid rgba(255,107,92,.4);
  color: var(--bcs-coral);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 999px;
  vertical-align: middle;
}
.bcs-price-card .bcs-small { font-size: 13px; color: var(--bcs-lavender-muted); margin-top: 8px; }
.bcs-price-card ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.bcs-price-card ul li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--bcs-lavender); line-height: 1.5;
}
.bcs-price-card ul li::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  background-image:
    linear-gradient(45deg, transparent 30%, #fff 30%, #fff 38%, transparent 38%, transparent 60%, #fff 60%, #fff 68%, transparent 68%),
    var(--gradient-prism);
  background-size: 50% 50%, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-top: 3px;
}

/* =====================================================================
   GRID HELPERS — keep equal heights and proper full-width sections
   ===================================================================== */
.bcs-equal-grid > .wp-block-column {
  display: flex;
  flex-direction: column;
}
.bcs-courses-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
.bcs-grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.bcs-grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.bcs-grid-4 { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.bcs-grid-5 { display: grid; gap: 24px; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }

/* Override WordPress core columns flex layout when grid classes are applied */
.wp-block-columns.bcs-grid-2,
.wp-block-columns.bcs-grid-3,
.wp-block-columns.bcs-grid-4,
.wp-block-columns.bcs-grid-5,
.wp-block-columns.bcs-equal-grid,
.wp-block-columns.bcs-courses-grid,
.wp-block-columns.bcs-value-grid {
  display: grid;
  flex-wrap: nowrap;
}
.wp-block-columns.bcs-grid-2 > .wp-block-column,
.wp-block-columns.bcs-grid-3 > .wp-block-column,
.wp-block-columns.bcs-grid-4 > .wp-block-column,
.wp-block-columns.bcs-grid-5 > .wp-block-column,
.wp-block-columns.bcs-equal-grid > .wp-block-column,
.wp-block-columns.bcs-courses-grid > .wp-block-column,
.wp-block-columns.bcs-value-grid > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  min-width: 0;
}
.wp-block-columns.bcs-value-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@keyframes prismFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-30px) translateX(20px); }
}
@keyframes prismRotate {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes prismPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 211, 238, .08); }
}
@keyframes shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .bcs-courses-grid,
  .wp-block-columns.bcs-value-grid,
  .bcs-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .bcs-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bcs-grid-5 { grid-template-columns: 1fr 1fr 1fr; }
  .bcs-section-head-split { grid-template-columns: 1fr; }
  .bcs-newsletter,
  .bcs-featured { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bcs-courses-grid,
  .wp-block-columns.bcs-value-grid,
  .bcs-grid-2,
  .bcs-grid-3,
  .bcs-grid-4 { grid-template-columns: 1fr; }
  .bcs-grid-5 { grid-template-columns: 1fr; }
  .bcs-hero-manifesto { min-height: auto; padding: 64px 0 !important; }
  .bcs-hero-meta { flex-direction: column; gap: 14px; }
  .bcs-hero-meta .bcs-sep { display: none; }
  .bcs-display-xl { font-size: clamp(40px, 11vw, 64px) !important; }
  .bcs-form-row  { grid-template-columns: 1fr; }

  /* Timeline: tighter rail + smaller type on phones */
  .bcs-timeline { --tl-rail: 17px; gap: 34px; }
  .bcs-timeline-item { padding-left: 50px; }
  .bcs-timeline-item::before { left: 8px; top: 4px; width: 18px; height: 18px; box-shadow: 0 0 0 3px rgba(10,11,44,.6); }
  .bcs-timeline-item.is-reached::before { box-shadow: 0 0 0 3px rgba(139,92,246,.22), 0 0 12px 2px rgba(34,211,238,.45); }
  .bcs-timeline-item h3 { font-size: 19px !important; }
  .bcs-timeline-item p { font-size: 14.5px !important; }

  /* Editorial trio: shrink the ghost numeral so it doesn't crowd the heading */
  .bcs-editorial-block { padding: 32px 24px 30px; }
  .bcs-editorial-block .bcs-edi-num { font-size: 92px; top: 4px; right: 12px; }
  .bcs-editorial-block h2 { font-size: 24px !important; }

  /* Team photos a touch smaller on phones */
  .bcs-team-photo { width: 116px; height: 116px; }
}

/* =====================================================================
   PREFERS-REDUCED-MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .bcs-fade-up,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .bcs-float,
  .bcs-prism-shape,
  .bcs-partners-track,
  .bcs-gradient-text { animation: none !important; }
  .wp-block-button .wp-block-button__link:hover,
  .bcs-course-card:hover,
  .bcs-testimonial:hover,
  .bcs-value-card:hover,
  .bcs-tool-card:hover,
  .bcs-faculty-card:hover,
  .bcs-team-card:hover,
  .bcs-editorial-block:hover,
  .bcs-post-card:hover { transform: none !important; }
}

/* ===========================================================================
   Featured images
   - Blog cards: the post's featured image fills the gradient thumb panel when
     present; otherwise the decorative gradient + glyph remain as a fallback.
   - Single post: an aesthetic banner between the hero and the article body.
   =========================================================================== */

/* Blog/archive card thumbnails */
.bcs-post-thumb .bcs-card-featured {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
}
.bcs-post-thumb .bcs-card-featured a,
.bcs-post-thumb .bcs-card-featured img {
  display: block;
  width: 100%;
  height: 100%;
}
.bcs-post-thumb .bcs-card-featured img {
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bcs-post-card:hover .bcs-post-thumb .bcs-card-featured img {
  transform: scale(1.05);
}
/* When a featured image exists, drop the decorative grid + glyph */
.bcs-post-thumb:has(.bcs-card-featured img)::after { display: none; }
.bcs-post-thumb:has(.bcs-card-featured img) .bcs-glyph { display: none; }

/* Single post featured banner */
.bcs-featured-wrap {
  position: relative;
  z-index: 3;
  margin-top: -64px;
  padding: 0 24px;
}
.bcs-featured-wrap:not(:has(img)) { display: none; }
.bcs-single-featured {
  margin: 0 auto;
  max-width: 880px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  background: var(--bcs-midnight-2);
  line-height: 0;
}
.bcs-single-featured img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 600px) {
  .bcs-featured-wrap { margin-top: -36px; padding: 0 16px; }
}

/* =====================================================================
   LEGAL PAGES (aviso legal, privacidad, cookies, devoluciones)
   Tipografía de lectura larga sobre el fondo midnight. Sin adornos.
   ===================================================================== */
.bcs-legal {
  padding-top: 72px;
  padding-bottom: 96px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.bcs-legal p,
.bcs-legal ul,
.bcs-legal ol,
.bcs-legal table {
  margin: 0 0 20px;
}
.bcs-legal h2,
.bcs-legal h3,
.bcs-legal h4 {
  color: #fff;
  margin: 48px 0 16px;
  line-height: 1.25;
}
.bcs-legal h2 { font-size: clamp(24px, 3vw, 30px); }
.bcs-legal h3 { font-size: clamp(19px, 2.4vw, 22px); }
.bcs-legal h4 { font-size: 17px; }
.bcs-legal > .wp-block-heading:first-child,
.bcs-legal > *:first-child { margin-top: 0; }

.bcs-legal ul,
.bcs-legal ol { padding-left: 22px; }
.bcs-legal li { margin-bottom: 8px; }
.bcs-legal li::marker { color: var(--bcs-cyan); }

.bcs-legal strong { color: #fff; }
.bcs-legal a {
  color: var(--bcs-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}
.bcs-legal a:hover { color: #fff; }

.bcs-legal hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}
.bcs-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.bcs-legal th,
.bcs-legal td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
}
.bcs-legal th { color: #fff; background: var(--surface); }

@media (max-width: 767px) {
  .bcs-legal { padding-top: 48px; padding-bottom: 64px; }
  .bcs-legal h2, .bcs-legal h3, .bcs-legal h4 { margin-top: 36px; }
}

/* =====================================================================
   LANDING PAGES (page-landing template)
   ---------------------------------------------------------------------
   Conversion pages: the site nav is replaced by a logo and a single
   anchor to the form, so there is exactly one thing to do on the page.
   Everything else reuses the shared section, card and KPI styles.
   ===================================================================== */

/* ---- Slim header ---- */
.bcs-landing-header-side {
  display: flex;
  align-items: center;
  gap: 20px;
}
.bcs-landing-header-note {
  margin: 0 !important;
  font-size: 13px;
  color: var(--bcs-lavender-muted) !important;
  white-space: nowrap;
}

/* ---- Hero: copy beside the form ---- */
.bcs-landing-hero {
  /* Taller than the compact hero (it carries the form) but shorter than the
     manifesto one, so the first benefit row still peeks above the fold. */
  min-height: calc(88vh - var(--bcs-header-h, 88px));
  padding: 72px 0 !important;
}
.bcs-landing-hero .bcs-container { position: relative; z-index: 3; }
.bcs-landing-hero h1 { margin: 0 0 22px !important; }
/* The shared hero lead is centred and auto-margined for the full-width heroes;
   here it sits in a column beside the form, so it runs left like its heading.
   Same specificity as that rule, further down the file — hence it wins. */
.bcs-hero-prismatic.bcs-landing-hero .bcs-lead,
.bcs-hero-prismatic.bcs-landing-hero p.bcs-lead {
  text-align: left;
  margin: 0 !important;
  max-width: 56ch;
  font-size: 17.5px !important;
  line-height: 1.6 !important;
}
/* Left-aligned in this hero: the centred variant belongs to the full-width
   heroes, where there is nothing beside the text. */
.bcs-landing-hero .bcs-hero-meta {
  margin-top: 34px !important;
  justify-content: flex-start;
  gap: 24px;
}

.bcs-landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px !important;
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
  background: rgba(34, 211, 238, .10);
  border: 1px solid rgba(34, 211, 238, .30);
  color: var(--bcs-cyan) !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bcs-landing-badge svg { color: var(--bcs-cyan); }

/* ---- The form card ---- */
.bcs-landing-form {
  padding: 32px !important;
  /* The card is the page's single call to action; the glow separates it from
     the hero gradient it sits on. */
  box-shadow: var(--shadow-card);
}
.bcs-landing-form form { gap: 14px; }

/* ---- Alliance strip ---- */
.bcs-alliance-strip { padding: 90px 0 !important; }
.bcs-alliance-strip .bcs-section-head { margin-bottom: 52px !important; }

/* ---- Numbered benefit rows ---- */
.bcs-benefits .bcs-section-head { margin-bottom: 56px !important; }
.bcs-benefit-row {
  padding: 40px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
}
.bcs-benefit-row:last-child { margin-bottom: 0; }
.bcs-benefit-row::before {
  content: "";
  position: absolute;
  top: 0; left: 40px; right: 40px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .55;
}
/* Alternate which side the supporting card sits on, so four rows of the same
   shape do not read as one long list. */
.bcs-benefit-row.is-reversed .wp-block-columns { flex-direction: row-reverse; }

.bcs-benefit-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 14px !important;
  background: var(--gradient-prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.bcs-benefit-row h3 {
  font-size: clamp(24px, 2.6vw, 32px) !important;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 16px !important;
}
.bcs-benefit-row p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bcs-lavender);
  margin: 0 0 14px !important;
}
.bcs-benefit-row .wp-block-buttons { margin-top: 10px; }

/* ---- Supporting card beside each benefit ---- */
.bcs-benefit-card,
.bcs-price-card {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--bcs-midnight-2);
  border: 1px solid rgba(255, 255, 255, .10);
}
.bcs-benefit-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin: 0 0 18px !important;
  border-radius: 14px;
  color: var(--bcs-cyan);
  background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(139, 92, 246, .16));
  border: 1px solid rgba(255, 255, 255, .10);
}
.bcs-benefit-card h4 {
  font-size: 17px !important;
  color: #fff;
  margin: 0 0 16px !important;
  letter-spacing: -0.015em;
}

/* Ticked list, sharing the master-features glyph treatment. */
.bcs-check-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.bcs-check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bcs-lavender);
}
.bcs-check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--gradient-prism);
  mask: var(--icon-check-white) center / 11px 11px no-repeat;
  -webkit-mask: var(--icon-check-white) center / 11px 11px no-repeat;
}

/* ---- Price anchor ---- */
.bcs-price-card { text-align: center; }
.bcs-price-card .bcs-label {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-cyan) !important;
  font-weight: 600;
  margin: 0 0 10px !important;
}
.bcs-price-now {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(52px, 7vw, 76px) !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 12px !important;
  background: var(--gradient-prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.bcs-price-was {
  font-size: 14.5px !important;
  color: var(--bcs-lavender-muted) !important;
  margin: 0 0 20px !important;
}
.bcs-price-was s {
  color: #fff;
  font-weight: 600;
  text-decoration-color: var(--bcs-coral);
  text-decoration-thickness: 2px;
  margin-right: 6px;
}
.bcs-price-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  font-size: 13px !important;
  line-height: 1.45;
  color: var(--bcs-lavender-muted) !important;
  margin: 0 !important;
}
.bcs-price-note svg { color: var(--bcs-coral-warm); flex: 0 0 auto; }

/* ---- "How it works" steps: the timeline with labels, not years ---- */
.bcs-how-it-works .bcs-timeline-item .bcs-year {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- Closing CTA: copy beside a second copy of the form ---- */
.bcs-landing-cta .bcs-cta { text-align: left; }
.bcs-landing-cta .bcs-cta h2 {
  font-size: clamp(28px, 3.4vw, 40px) !important;
  margin: 0 0 16px !important;
}
.bcs-landing-cta .bcs-cta p { color: var(--bcs-lavender); }
.bcs-landing-cta .bcs-hero-meta {
  margin-top: 26px !important;
  justify-content: flex-start;
  gap: 20px;
}
.bcs-landing-cta .bcs-hero-meta .bcs-meta-item { color: #fff; }
.bcs-landing-cta .bcs-hero-meta svg { color: var(--bcs-cyan); }
.bcs-landing-cta .bcs-form-card { background: rgba(6, 7, 31, .55); }

/* The CTA band restyles every paragraph inside it as display copy — 18.5px and
   `margin: 0 auto`. That is wrong for the form it now contains, and the auto
   margins are actively harmful: in the form's flex column they cancel the
   stretch, so each line shrinks to its own text width and drifts to the middle.
   The form's paragraphs are put back on the form's own scale. */
.bcs-landing-cta .bcs-form-card p {
  max-width: none;
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--bcs-lavender) !important;
}
.bcs-landing-cta .bcs-form-card .bcs-lead-sub { margin: 0 0 4px !important; }
.bcs-landing-cta .bcs-form-card .bcs-form-error { color: var(--bcs-coral) !important; margin: 6px 0 0 !important; }
.bcs-landing-cta .bcs-form-card .bcs-form-success p {
  font-size: 15px !important;
  max-width: 380px;
  margin: 0 auto !important;
}

/* ---- Slim footer ---- */
.bcs-landing-footer { padding-top: 56px !important; }
.bcs-landing-footer-top {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bcs-landing-footer .bcs-footer-badges { margin: 0 !important; }
.bcs-landing-disclaimer {
  margin: 24px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.6;
  color: var(--bcs-lavender-muted) !important;
  max-width: 900px;
}

@media (max-width: 900px) {
  .bcs-landing-hero { min-height: 0; padding: 56px 0 !important; }
  /* The shared hero stacks its meta into a column below this width, where
     `align-items: center` would centre the chips against left-aligned copy. */
  .bcs-landing-hero .bcs-hero-meta,
  .bcs-landing-cta .bcs-hero-meta { gap: 14px; align-items: flex-start; }
  .bcs-landing-header-note { display: none; }
  /* Row-reverse only reorders while the columns are side by side; once they
     stack, the supporting card must not jump above its own heading. */
  .bcs-benefit-row.is-reversed .wp-block-columns { flex-direction: column; }
  .bcs-benefit-row { padding: 30px 24px; }
  .bcs-benefit-row::before { left: 24px; right: 24px; }
  .bcs-landing-form { padding: 26px 22px !important; }
  .bcs-landing-footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Editor-only styles live in editor.css (enqueued only in the block editor). */

/* ===== CAMPUS: LearnDash / WooCommerce / CartFlows ===== */

/* =====================================================================
   CAMPUS — NOTAS DE ALCANCE
   ---------------------------------------------------------------------
   LD30 escribe sus reglas con selectores del tipo
   `.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .ld-button`
   (especificidad 0,4,0 porque :not() suma la de su argumento). Reproducir esa
   cadena aquí haría el archivo ilegible, así que en los bloques marcados
   [LD30 0,4,0] se usa !important sobre las propiedades concretas que LD
   pinta — no sobre el bloque entero.

   WooCommerce y CartFlows sí se dejan ganar por especificidad salvo en el
   botón de pago y en los campos del checkout embebido, donde CartFlows imprime
   CSS dinámico inline en la propia página (modules/checkout/includes/
   checkout-dynamic-css.php) y por tanto va después de esta hoja.

   El envoltorio Woo es .bcs-woo (lo pone el tema). Como respaldo se aceptan
   las clases que WooCommerce imprime en <body>; :is() toma la especificidad de
   su rama más alta, así que todo el bloque Woo parte de 0,1,1 de forma estable.
   ===================================================================== */

/* #####################################################################
   AVISO SOBRE TODO LO QUE VIENE A CONTINUACIÓN (LearnDash)
   #####################################################################
   Esta hoja (`bcs-style`) se encola en `enqueue_block_assets` y sale la
   SEGUNDA del <head>; las ~14 hojas de LearnDash salen en las posiciones
   6–19. A igualdad de especificidad gana la última, o sea LearnDash.
   Las reglas de aquí abajo solo surten efecto donde LD30 no compite.

   Los overrides que SÍ mandan viven en `assets/css/learndash.css`, que se
   encola en `wp_enqueue_scripts` con prioridad 20 y sale el último (ver
   `bcs_enqueue_contextual_assets()` en functions.php).

   Antes de tocar nada aquí: comprueba en el navegador si la regla llega a
   aplicarse. Si no, el sitio correcto es learndash.css.
   ##################################################################### */

/* =====================================================================
   LEARNDASH — CONTENEDOR BASE
   ===================================================================== */
.learndash-wrapper {
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
.learndash-wrapper h1,
.learndash-wrapper h2,
.learndash-wrapper h3,
.learndash-wrapper h4,
.learndash-wrapper h5 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.learndash-wrapper p,
.learndash-wrapper li,
.learndash-wrapper td,
.learndash-wrapper label { color: var(--text-secondary); }
.learndash-wrapper a { color: var(--bcs-cyan); text-decoration: none; }
.learndash-wrapper a:hover { color: var(--bcs-lavender); }
.learndash-wrapper a:focus-visible,
.learndash-wrapper button:focus-visible {
  outline: 2px solid rgba(139, 92, 246, .75);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.learndash-wrapper hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
/* LD30 pinta separadores y chrome en gris claro, pensado para fondo blanco. */
.learndash-wrapper .ld-sep { color: var(--border-strong); }
.learndash-wrapper .ld-breadcrumbs {
  background: transparent;
  border: 0;
  padding: 0 0 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.learndash-wrapper .ld-breadcrumbs a { color: var(--text-muted); }
.learndash-wrapper .ld-breadcrumbs a:hover { color: var(--bcs-cyan); }

/* =====================================================================
   LEARNDASH — LISTADO DE LECCIONES / TEMAS (.ld-item-list)
   Cada fila pasa de tarjeta blanca con borde gris a tarjeta glass.
   ===================================================================== */
.learndash-wrapper .ld-item-list { margin: 0 0 32px; }
.learndash-wrapper .ld-item-list .ld-section-heading {
  padding: 0 0 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.learndash-wrapper .ld-item-list .ld-section-heading h2,
.learndash-wrapper .ld-item-list .ld-section-heading h3 {
  font-size: 20px;
  color: var(--text);
  margin: 0;
}
.learndash-wrapper .ld-item-list .ld-section-heading .ld-item-list-actions .ld-progress .ld-progress-label {
  color: var(--text-secondary);
  font-size: 15px;
}

.learndash-wrapper .ld-item-list .ld-item-list-item {
  position: relative;
  margin: 14px 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
/* Hairline prisma superior: la misma firma que .bcs-form-card / .bcs-course-card. */
.learndash-wrapper .ld-item-list .ld-item-list-item::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .5;
  pointer-events: none;
  z-index: 2;
}
.learndash-wrapper .ld-item-list .ld-item-list-item:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
  box-shadow: var(--shadow-card);
}
/* La siguiente lección pendiente: hairline sólido y borde cyan. */
.learndash-wrapper .ld-item-list .ld-item-list-item.ld-is-next {
  border-color: rgba(34, 211, 238, .45);
  background: linear-gradient(135deg, rgba(34,211,238,.07), transparent 55%), var(--glass);
}
.learndash-wrapper .ld-item-list .ld-item-list-item.ld-is-next::before { opacity: 1; }

.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview { padding: 20px 24px; }
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-name,
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview > .ld-tooltip {
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name:hover { color: var(--bcs-cyan); }
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-title .ld-item-components { color: var(--text-muted); }
.learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name:hover .ld-item-title .ld-item-components { color: var(--text-secondary); }
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-details { gap: 10px; color: var(--text-muted); }
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-details .ld-certificate-link { color: var(--bcs-cyan); }

/* Contenido desplegado dentro de una lección (la lista de temas). LD dibuja
   ahí un triángulo blanco para el fondo claro; sobre midnight sobra. */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-expanded { background: transparent; }
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-expanded::before { background: transparent; }

/* Buscador de pasos dentro del listado. */
.learndash-wrapper .ld-item-list .ld-item-search {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-heading { color: var(--text); }
.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields label { color: var(--text-muted); }
.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields input,
.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields select {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: #fff;
  padding: 11px 14px;
  color-scheme: dark;
}
.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields select option {
  background-color: var(--bcs-midnight-2);
  color: #fff;
}

/* =====================================================================
   LEARNDASH — TABLAS DE PASOS (.ld-table-list)
   ===================================================================== */
.learndash-wrapper .ld-table-list {
  background: transparent;
  border: 0;
}
.learndash-wrapper .ld-table-list .ld-table-list-header,
.learndash-wrapper .ld-table-list .ld-table-list-footer {
  background: rgba(255, 255, 255, .03);
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.learndash-wrapper .ld-table-list .ld-table-list-item {
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  transition: background 220ms ease;
}
.learndash-wrapper .ld-table-list .ld-table-list-item:hover { background: rgba(255, 255, 255, .05); }
.learndash-wrapper .ld-table-list .ld-table-list-item-preview { padding: 14px 24px; color: var(--text-secondary); }
.learndash-wrapper .ld-table-list .ld-table-list-item-preview .ld-table-list-title a { color: var(--text-secondary); }
.learndash-wrapper .ld-table-list .ld-table-list-item .ld-table-list-title a:hover,
.learndash-wrapper .ld-table-list a.ld-table-list-item-preview:hover { color: var(--bcs-cyan); }
.learndash-wrapper .ld-table-list .ld-table-list-item-preview .ld-table-list-columns .ld-table-list-column { color: var(--text-muted); }
.learndash-wrapper .ld-table-list .ld-table-list-item-expanded .ld-table-list::before { background: transparent; }
/* El paso actual dentro de la tabla: filo violeta a la izquierda. */
.learndash-wrapper .ld-table-list .ld-table-list-item.ld-is-current-item,
.learndash-wrapper .ld-table-list .ld-table-list-item.ld-is-next {
  background: rgba(139, 92, 246, .12);
  box-shadow: inset 3px 0 0 0 var(--bcs-violet);
}

/* =====================================================================
   LEARNDASH — BARRA DE PROGRESO
   ===================================================================== */
.learndash-wrapper .ld-progress { margin: 14px 0; }
.learndash-wrapper .ld-progress .ld-progress-heading { color: var(--text-muted); font-size: 12.5px; }
.learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-label {
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage { color: var(--bcs-cyan); }
.learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-steps { color: var(--text-muted); }
.learndash-wrapper .ld-progress .ld-progress-bar,
.learndash-wrapper .ld-item-list .ld-section-heading .ld-item-list-actions .ld-progress .ld-progress-bar,
.learndash-wrapper.learndash-widget .ld-progress .ld-progress-bar {
  height: 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .10);
  border: 0;
  overflow: hidden;
}
.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
  height: 100%;
  background: var(--gradient-prism);
  border-radius: 999px;
  box-shadow: 0 0 14px -2px rgba(34, 211, 238, .55);
  transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================================
   LEARNDASH — BOTONES  [LD30 0,4,0]
   Mismo tratamiento que .bcs-btn-primary: píldora, gradiente prisma que se
   desliza al hover y sombra glow. LD fija background-color, border-radius,
   padding y font-weight con especificidad 0,4,0 (cadena de :not()), así que
   esas propiedades concretas llevan !important.
   ===================================================================== */
.learndash-wrapper .ld-button,
.learndash-wrapper .learndash_mark_complete_button,
.learndash-wrapper #learndash_mark_complete_button,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2,
.learndash-wrapper .wpProQuiz_content a#quiz_continue_link {
  background: var(--gradient-prism) !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-glow) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  padding: 13px 26px !important;
  text-transform: none !important;
  text-shadow: none;
  opacity: 1 !important;
  transition: transform 250ms ease, box-shadow 250ms ease, background-position 300ms ease !important;
}
.learndash-wrapper .ld-button:hover,
.learndash-wrapper .learndash_mark_complete_button:hover,
.learndash-wrapper #learndash_mark_complete_button:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2:hover,
.learndash-wrapper .wpProQuiz_content a#quiz_continue_link:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-hover) !important;
}
.learndash-wrapper .ld-button:active,
.learndash-wrapper .learndash_mark_complete_button:active,
.learndash-wrapper #learndash_mark_complete_button:active { transform: translateY(0); }
.learndash-wrapper .ld-button:disabled,
.learndash-wrapper .learndash_mark_complete_button:disabled,
.learndash-wrapper #learndash_mark_complete_button:disabled,
.learndash-wrapper .wpProQuiz_content a#quiz_continue_link[disabled] {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}
.learndash-wrapper .ld-button .ld-text { padding: 0 6px; }

/* Variantes que LD usa como enlace secundario, no como botón sólido. */
.learndash-wrapper .ld-button.ld-button-alternate,
.learndash-wrapper .ld-button.ld-button-transparent {
  background: transparent !important;
  color: var(--bcs-cyan) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
}
.learndash-wrapper .ld-button.ld-button-alternate:hover,
.learndash-wrapper .ld-button.ld-button-transparent:hover {
  background: transparent !important;
  color: var(--bcs-lavender) !important;
  box-shadow: none !important;
  transform: none;
}
.learndash-wrapper .ld-button.ld-button-alternate .ld-icon {
  background: var(--gradient-prism) !important;
  color: #fff !important;
}
/* .ld-compact es el disco de plegar/desplegar: círculo de cristal, no píldora. */
.learndash-wrapper .ld-button.ld-compact,
.learndash-wrapper .ld-expand-button.ld-compact {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  padding: 0 !important;
}
.learndash-wrapper .ld-button.ld-compact:hover,
.learndash-wrapper .ld-expand-button.ld-compact:hover {
  background: rgba(139, 92, 246, .25) !important;
  border-color: rgba(139, 92, 246, .55) !important;
  color: #fff !important;
  transform: none;
}

/* =====================================================================
   LEARNDASH — ACORDEONES (.ld-expand-button)
   ===================================================================== */
.learndash-wrapper .ld-expand-button {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  padding: 9px 16px !important;
  width: auto !important;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease !important;
}
.learndash-wrapper .ld-expand-button:hover {
  background: rgba(139, 92, 246, .22) !important;
  border-color: rgba(139, 92, 246, .55) !important;
  color: #fff !important;
  transform: none;
}
.learndash-wrapper .ld-expand-button .ld-icon,
.learndash-wrapper .ld-expand-button .ld-expand-text { color: inherit; }
.learndash-wrapper .ld-expand-button .ld-icon-arrow-down { transition: transform 250ms ease; }
.learndash-wrapper .ld-expand-button.ld-expanded .ld-icon-arrow-down { transform: rotate(180deg); }

/* =====================================================================
   LEARNDASH — ESTADOS DE COMPLETADO
   ===================================================================== */
.learndash-wrapper .ld-status {
  border-radius: 999px;
  padding: 4px 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .06);
  color: var(--text-muted);
}
.learndash-wrapper .ld-status.ld-status-complete {
  background: rgba(34, 211, 238, .12);
  border-color: rgba(34, 211, 238, .40);
  color: var(--bcs-cyan);
}
.learndash-wrapper .ld-status.ld-status-progress,
.learndash-wrapper .ld-status.ld-status-in-progress {
  background: rgba(139, 92, 246, .16);
  border-color: rgba(139, 92, 246, .42);
  color: var(--bcs-lavender);
}
.learndash-wrapper .ld-status.ld-status-incomplete,
.learndash-wrapper .ld-status.ld-status-unlocked {
  background: rgba(255, 255, 255, .05);
  border-color: var(--border);
  color: var(--text-muted);
}
.learndash-wrapper .ld-status.ld-status-waiting,
.learndash-wrapper .ld-status.ld-status-alert {
  background: rgba(255, 107, 92, .14);
  border-color: rgba(255, 107, 92, .42);
  color: var(--bcs-coral);
}

/* El disco de estado a la izquierda de cada fila. */
.learndash-wrapper .ld-status-icon {
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  background: transparent;
  transition: background 250ms ease, border-color 250ms ease;
}
.learndash-wrapper .ld-status-icon.ld-status-complete {
  background: var(--gradient-prism);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 14px -3px rgba(34, 211, 238, .7);
}
.learndash-wrapper .ld-status-icon.ld-status-in-progress {
  border-color: var(--bcs-violet);
  background: rgba(139, 92, 246, .18);
}
.learndash-wrapper .ld-status-icon.ld-status-incomplete { border-color: var(--border-strong); }
.learndash-wrapper .ld-icon-checkmark { color: #fff; }
.learndash-wrapper .ld-status-icon.ld-status-incomplete .ld-icon-checkmark { color: transparent; }
.learndash-wrapper .ld-quiz-complete,
.learndash-wrapper .ld-quiz-result-passed { color: var(--bcs-cyan); }
.learndash-wrapper .ld-quiz-incomplete,
.learndash-wrapper .ld-quiz-result-failed { color: var(--bcs-coral); }

/* =====================================================================
   LEARNDASH — ESTADO DEL CURSO / PRECIO (.ld-course-status)
   ===================================================================== */
.learndash-wrapper .ld-course-status {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  padding: 24px 26px;
  overflow: hidden;
}
.learndash-wrapper .ld-course-status::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .6;
}
.learndash-wrapper .ld-course-status .ld-course-status-label {
  color: var(--text-muted);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.learndash-wrapper .ld-course-status .ld-course-status-price,
.learndash-wrapper .ld-course-status .ld-course-status-course-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.learndash-wrapper .ld-course-status.ld-course-status-enrolled { border-color: rgba(34, 211, 238, .35); }

/* =====================================================================
   LEARNDASH — AVISOS Y CERTIFICADOS (.ld-alert)
   ===================================================================== */
.learndash-wrapper .ld-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--bcs-violet);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  padding: 18px 22px;
  margin: 20px 0;
  color: var(--text-secondary);
}
.learndash-wrapper .ld-alert .ld-alert-icon {
  background: transparent;
  color: var(--bcs-lavender);
  font-size: 22px;
}
.learndash-wrapper .ld-alert-success,
.learndash-wrapper .ld-alert--step-completed {
  border-left-color: var(--bcs-cyan);
  background: linear-gradient(135deg, rgba(34,211,238,.10), transparent 60%), var(--surface);
}
.learndash-wrapper .ld-alert-success .ld-alert-icon { color: var(--bcs-cyan); }
.learndash-wrapper .ld-alert-warning {
  border-left-color: var(--bcs-coral);
  background: linear-gradient(135deg, rgba(255,107,92,.10), transparent 60%), var(--surface);
}
.learndash-wrapper .ld-alert-warning .ld-alert-icon { color: var(--bcs-coral); }
.learndash-wrapper .ld-alert-certificate,
.learndash-wrapper .ld-course-certificate {
  border-left-color: var(--bcs-cyan);
  background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(139,92,246,.10)), var(--surface);
}
.learndash-wrapper .ld-alert .ld-alert-content,
.learndash-wrapper .ld-alert .ld-alert-text { color: var(--text-secondary); }
.learndash-wrapper .ld-certificate-link,
.learndash-wrapper .ld-certificate-icon { color: var(--bcs-cyan); }

/* =====================================================================
   LEARNDASH — PERFIL Y NAVEGACIÓN DE CURSO EN PÁGINA
   ===================================================================== */
.learndash-wrapper .ld-profile-card,
.learndash-wrapper .ld-profile-summary {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  padding: 24px;
}
.learndash-wrapper .ld-profile-stats { gap: 14px; }
.learndash-wrapper .ld-profile-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--text-secondary);
}
.learndash-wrapper .ld-profile-avatar img { border-radius: 999px; }
.learndash-wrapper .ld-tabs .ld-tabs-navigation {
  border-bottom: 1px solid var(--border);
  gap: 6px;
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  padding: 12px 16px;
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active {
  color: #fff;
  border-bottom-color: var(--bcs-violet);
}
.learndash-wrapper .ld-pagination,
.learndash-wrapper .learndash-pager {
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.learndash-wrapper .ld-pagination .ld-pages a { color: var(--bcs-cyan); }

/* =====================================================================
   LEARNDASH — FOCUS MODE  [pantalla crítica]
   Sidebar sobre --bcs-midnight-deep, contenido sobre --bcs-midnight y
   cabecera fija con el hairline prisma. LD posiciona la cabecera y la
   barra lateral en fixed a top:0, así que la cabecera del sitio se retira
   mientras el alumno está en modo enfoque.
   ===================================================================== */
body.ld-in-focus-mode header.wp-block-template-part,
body.ld-in-focus-mode .wp-site-blocks > footer { display: none; }
body.ld-in-focus-mode { background: var(--bcs-midnight); }

.learndash-wrapper .ld-focus { background: var(--bcs-midnight); }

/* ---- Barra lateral ---- */
.learndash-wrapper .ld-focus .ld-focus-sidebar {
  background-color: var(--bcs-midnight-deep);
  border-right: 1px solid var(--border);
  box-shadow: 18px 0 44px -30px rgba(0, 0, 0, .9);
}
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
}
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-focus-mode-course-heading-wrapper a { color: var(--text); }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h3 {
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-home-link { color: var(--text-muted); }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-home-link:hover { color: var(--bcs-cyan); }
/* El tirador de plegado: disco prisma sobre el filo de la barra. */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
  background: var(--gradient-prism);
  border: 2px solid var(--bcs-midnight-deep);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:hover .ld-icon,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:focus .ld-icon {
  background: var(--gradient-prism);
  box-shadow: var(--shadow-glow-hover);
}

/* ---- Índice de lecciones y temas ---- */
.learndash-wrapper .ld-course-navigation .ld-course-navigation-heading h3 { color: var(--text); }
.learndash-wrapper .ld-course-navigation .ld-lesson-item {
  border-bottom: 1px solid var(--border);
  transition: background 220ms ease;
}
.learndash-wrapper .ld-course-navigation .ld-lesson-item:hover { background: rgba(255, 255, 255, .04); }
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview { padding: 4px 0; }
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview .ld-lesson-title { color: var(--text-secondary); }
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview a.ld-lesson-item-preview-heading { color: var(--text-secondary); }
.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview a.ld-lesson-item-preview-heading:hover { color: var(--bcs-cyan); }
/* La lección en curso: se ilumina y se marca con un filo violeta. */
.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson {
  background: linear-gradient(90deg, rgba(139,92,246,.16), transparent 70%);
  box-shadow: inset 3px 0 0 0 var(--bcs-violet);
}
.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading,
.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-lesson-title { color: #fff; }
.learndash-wrapper .ld-course-navigation .ld-lesson-item-section-heading .ld-lesson-section-heading {
  color: var(--text-muted);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.learndash-wrapper .ld-course-navigation .ld-item-icon,
.learndash-wrapper .ld-course-navigation .ld-sep { color: var(--text-muted); }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list::before { background: var(--border); }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-pagination { border-top: 1px solid var(--border); }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-pagination .ld-pages i,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-pagination .ld-pages span { color: var(--text-muted); }

/* ---- Cabecera fija ---- */
.learndash-wrapper .ld-focus .ld-focus-header {
  position: relative;
  background: rgba(6, 7, 31, .82);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
/* Hairline prisma bajo la cabecera: la firma del sistema en la pantalla que
   el alumno tiene delante todo el rato. */
.learndash-wrapper .ld-focus .ld-focus-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .75;
  pointer-events: none;
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo,
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-text { color: var(--text-secondary); }
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu { border-left: 1px solid var(--border); }
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items {
  background: var(--bcs-midnight-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a { color: var(--text-secondary); padding: 10px 16px; display: block; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-bar { background: rgba(255, 255, 255, .10); }
.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav .ld-trigger-mobile-nav { color: var(--text-secondary); }
/* LD marca este botón con `background: transparent !important` (0,5,0), por lo
   que aquí no hay alternativa a !important: se le devuelve el look de píldora. */
.learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete .learndash_mark_complete_button,
.learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete #learndash_mark_complete_button,
.learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete .learndash_mark_complete_button,
.learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete #learndash_mark_complete_button {
  background: var(--gradient-prism) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  padding: 10px 20px !important;
  font-size: 13.5px !important;
}
.learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete .learndash_mark_complete_button:hover,
.learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete #learndash_mark_complete_button:hover {
  background: var(--gradient-prism) !important;
  background-position: 100% 50% !important;
}
.learndash-wrapper .ld-focus .ld-focus-header .learndash_mark_incomplete_button { color: var(--text-muted) !important; }

/* ---- Contenido ---- */
.learndash-wrapper .ld-focus .ld-focus-main { background: var(--bcs-midnight); }
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
  padding: 56px 48px 96px;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.75;
}
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  color: #fff;
}
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h2 { font-size: clamp(24px, 3vw, 32px); }
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h3 { font-size: 21px; }
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content blockquote {
  border-left: 3px solid var(--bcs-violet);
  background: var(--surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 26px 0;
  padding: 18px 24px;
  color: var(--text-secondary);
}
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-topic-status,
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-lesson-status {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}
.learndash-wrapper .ld-focus .ld-focus-comments,
.learndash-wrapper .ld-focus-comment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.learndash-wrapper .ld-comment-author-name { color: var(--text); }
.learndash-wrapper .ld-comment-permalink,
.learndash-wrapper .ld-comment-reply a { color: var(--bcs-cyan); }

/* =====================================================================
   LEARNDASH — QUIZZES (WpProQuiz)
   El bloque del quiz es una tarjeta glass; cada respuesta, una fila
   seleccionable que se ilumina en violeta al marcarla.
   ===================================================================== */
.learndash-wrapper .wpProQuiz_content {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  padding: 30px 32px;
  overflow: hidden;
  color: var(--text-secondary);
}
.learndash-wrapper .wpProQuiz_content::before {
  content: "";
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .6;
}
.learndash-wrapper .wpProQuiz_header,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_infopageHeader {
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_question { background: transparent; border: 0; }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_question_text,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_question_text p {
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList { background: transparent; border: 0; }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) { margin-bottom: 10px; }
/* Cada respuesta: fila de cristal con hover y selección violeta. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: 14px 18px;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--border-strong);
  transform: translateX(2px);
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label.is-selected,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label:focus-within {
  background: rgba(139, 92, 246, .16);
  border-color: rgba(139, 92, 246, .60);
  color: #fff;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList input[type="radio"],
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList input[type="checkbox"] { accent-color: var(--bcs-violet); }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) .wpProQuiz_sortable:not(.ld-sortable__item-handle) {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
/* Corrección: cyan para acierto, coral para fallo (el verde/rojo de LD no
   pertenece al sistema). */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrect label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_answerCorrect label {
  background: rgba(34, 211, 238, .14);
  border-color: rgba(34, 211, 238, .55);
  color: #fff;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrect label::before { color: var(--bcs-cyan); }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_answerIncorrect label {
  background: rgba(255, 107, 92, .14);
  border-color: rgba(255, 107, 92, .55);
  color: #fff;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrectIncomplete label {
  background: rgba(255, 142, 92, .12);
  border-color: rgba(255, 142, 92, .45);
}
.learndash-wrapper .wpProQuiz_content textarea.wpProQuiz_questionEssay,
.learndash-wrapper .wpProQuiz_content input.wpProQuiz_questionInput[type="text"] {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  padding: 13px 16px;
}
.learndash-wrapper .wpProQuiz_content textarea.wpProQuiz_questionEssay:focus,
.learndash-wrapper .wpProQuiz_content input.wpProQuiz_questionInput:focus {
  outline: none;
  border-color: rgba(139, 92, 246, .55);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .20);
}
/* Pistas, respuesta correcta y avisos de bloqueo. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_tipp > div,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_response,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_lock,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_loadQuiz,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_prerequisite,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_startOnlyRegisteredUser {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--bcs-violet);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: 16px 20px;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_progress {
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
  overflow: hidden;
  height: 8px;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit div,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_progress div { background: var(--gradient-prism); }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_points,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_graded_points { color: var(--bcs-cyan); font-weight: 600; }
/* Tabla de resultados y revisión. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_resultTable table,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_resultTable table tbody { background: transparent; }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_resultTable table tbody td {
  border-color: var(--border);
  color: var(--text-secondary);
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_resultTable .wpProQuiz_resultName { color: var(--text-muted); }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_resultTable .wpProQuiz_resultValue div { color: var(--text); }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion { background: transparent; }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionSolved { background: var(--gradient-prism); color: #fff; border-color: transparent; }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionReview { background: rgba(255, 107, 92, .40); color: #fff; }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionTarget { outline: 2px solid var(--bcs-cyan); }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewLegend { color: var(--text-muted); }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewLegend span { border-radius: 4px; }
.learndash-wrapper .wpProQuiz_content .wpProQuiz_certificate,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_certificate a.btn-blue {
  color: var(--bcs-cyan);
}
.learndash-wrapper .ld-quiz-actions { margin-top: 22px; }

/* =====================================================================
   WOOCOMMERCE — BASE
   Alcance: el envoltorio .bcs-woo del tema o, de respaldo, las clases que
   WooCommerce imprime en <body> (woocommerce-page está en todas sus
   pantallas). :is() toma la especificidad de la rama más alta -> 0,1,1.
   ===================================================================== */
:is(.bcs-woo, body.woocommerce-page) .woocommerce,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-page {
  color: var(--text-secondary);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce h1,
:is(.bcs-woo, body.woocommerce-page) .woocommerce h2,
:is(.bcs-woo, body.woocommerce-page) .woocommerce h3,
:is(.bcs-woo, body.woocommerce-page) .woocommerce h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce a { color: var(--bcs-cyan); text-decoration: none; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce a:hover { color: var(--bcs-lavender); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce hr,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-breadcrumb {
  border-color: var(--border);
  color: var(--text-muted);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); }

/* =====================================================================
   WOOCOMMERCE — FORMULARIOS
   Se unifican con .bcs-form-field (mismos radios, fondos y anillo de foco).
   ===================================================================== */
:is(.bcs-woo, body.woocommerce-page) .woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce form .form-row label,
:is(.bcs-woo, body.woocommerce-page) .woocommerce label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 8px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce label.checkbox,
:is(.bcs-woo, body.woocommerce-page) .woocommerce label.inline,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-form__label-for-checkbox {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .required { color: var(--bcs-coral); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="text"],
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="email"],
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="tel"],
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="url"],
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="number"],
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="password"],
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="search"],
:is(.bcs-woo, body.woocommerce-page) .woocommerce select,
:is(.bcs-woo, body.woocommerce-page) .woocommerce textarea,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .select2-container .select2-selection--single {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.4;
  height: auto;
  box-shadow: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce input::placeholder,
:is(.bcs-woo, body.woocommerce-page) .woocommerce textarea::placeholder { color: var(--text-muted); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce input:focus,
:is(.bcs-woo, body.woocommerce-page) .woocommerce select:focus,
:is(.bcs-woo, body.woocommerce-page) .woocommerce textarea:focus {
  outline: none;
  border-color: rgba(139, 92, 246, .55);
  /* background-color y no el atajo `background`: el atajo borraría el caret
     del <select>, igual que en .bcs-form-field. */
  background-color: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .20);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce textarea { min-height: 120px; resize: vertical; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C8C9F2'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: right 14px center;
  padding-right: 40px;
  /* Sin color-scheme el popup nativo del SO se dibuja blanco sobre blanco. */
  color-scheme: dark;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce select option {
  background-color: var(--bcs-midnight-2);
  color: #fff;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="checkbox"],
:is(.bcs-woo, body.woocommerce-page) .woocommerce input[type="radio"] {
  accent-color: var(--bcs-violet);
  width: auto;
  margin-top: 3px;
}
/* Select2 (país/provincia): WooCommerce lo trae con estilos claros propios. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; line-height: 1.4; padding: 0; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 10px; }
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bcs-midnight-2);
  border-color: var(--glass-border);
  color: #fff;
}
.select2-container--default .select2-results__option { background: transparent; color: var(--text-secondary); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: rgba(139, 92, 246, .30);
  color: #fff;
}
/* Errores de validación de campo. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce form .form-row.woocommerce-invalid input.input-text,
:is(.bcs-woo, body.woocommerce-page) .woocommerce form .form-row.woocommerce-invalid select,
:is(.bcs-woo, body.woocommerce-page) .woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection--single {
  border-color: rgba(255, 107, 92, .70);
  box-shadow: 0 0 0 3px rgba(255, 107, 92, .18);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: rgba(34, 211, 238, .55); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce form .form-row .woocommerce-input-wrapper .description {
  background: rgba(139, 92, 246, .16);
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-password-strength {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-password-strength.strong { border-color: rgba(34, 211, 238, .55); color: var(--bcs-cyan); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-password-strength.bad,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-password-strength.short { border-color: rgba(255, 107, 92, .55); color: var(--bcs-coral); }

/* =====================================================================
   WOOCOMMERCE — BOTONES
   Mismo lenguaje que .bcs-btn-primary. WooCommerce pinta sus botones con
   `.woocommerce #respond input#submit, .woocommerce a.button, ...` (0,2,1),
   así que 0,1,1 + `.woocommerce` + clase basta sin !important.
   ===================================================================== */
:is(.bcs-woo, body.woocommerce-page) .woocommerce a.button,
:is(.bcs-woo, body.woocommerce-page) .woocommerce button.button,
:is(.bcs-woo, body.woocommerce-page) .woocommerce input.button,
:is(.bcs-woo, body.woocommerce-page) .woocommerce #respond input#submit,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .single_add_to_cart_button,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  transition: transform 250ms ease, box-shadow 250ms ease, background 300ms ease, border-color 250ms ease;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce a.button:hover,
:is(.bcs-woo, body.woocommerce-page) .woocommerce button.button:hover,
:is(.bcs-woo, body.woocommerce-page) .woocommerce input.button:hover,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-Button:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--border-strong);
  color: #fff;
  transform: translateY(-2px);
}
/* Acción principal (.alt, añadir al carrito, finalizar compra): prisma + glow. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce a.button.alt,
:is(.bcs-woo, body.woocommerce-page) .woocommerce button.button.alt,
:is(.bcs-woo, body.woocommerce-page) .woocommerce input.button.alt,
:is(.bcs-woo, body.woocommerce-page) .woocommerce #respond input#submit.alt,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .single_add_to_cart_button,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .checkout-button,
:is(.bcs-woo, body.woocommerce-page) .woocommerce #place_order {
  background: var(--gradient-prism);
  background-size: 200% 200%;
  background-position: 0% 50%;
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce a.button.alt:hover,
:is(.bcs-woo, body.woocommerce-page) .woocommerce button.button.alt:hover,
:is(.bcs-woo, body.woocommerce-page) .woocommerce input.button.alt:hover,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .single_add_to_cart_button:hover,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .checkout-button:hover,
:is(.bcs-woo, body.woocommerce-page) .woocommerce #place_order:hover {
  background: var(--gradient-prism);
  background-size: 200% 200%;
  background-position: 100% 50%;
  border-color: transparent;
  box-shadow: var(--shadow-glow-hover);
  transform: translateY(-2px);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce a.button:focus-visible,
:is(.bcs-woo, body.woocommerce-page) .woocommerce button.button:focus-visible,
:is(.bcs-woo, body.woocommerce-page) .woocommerce input.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .45);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce a.button.disabled,
:is(.bcs-woo, body.woocommerce-page) .woocommerce button.button:disabled,
:is(.bcs-woo, body.woocommerce-page) .woocommerce button.button:disabled[disabled],
:is(.bcs-woo, body.woocommerce-page) .woocommerce input.button:disabled {
  background: rgba(255, 255, 255, .05);
  border-color: var(--border);
  color: var(--text-muted);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}
/* La cruz de "eliminar" del carrito. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce a.remove {
  color: var(--bcs-coral) !important; /* Woo la fija con `color: red !important`. */
  background: rgba(255, 107, 92, .12);
  border: 1px solid rgba(255, 107, 92, .30);
  line-height: 1.5;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce a.remove:hover {
  background: var(--bcs-coral);
  color: #fff !important; /* misma razón que arriba. */
}

/* =====================================================================
   WOOCOMMERCE — LISTADO DE PRODUCTOS
   ===================================================================== */
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products::before,
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products::after { content: none; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product {
  position: relative;
  float: none;
  width: auto;
  margin: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .55;
  pointer-events: none;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
  box-shadow: var(--shadow-card);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product img {
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 16px;
  width: 100%;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  padding: 0;
  margin: 0 0 8px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product .price { margin: 0 0 16px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product a.button { margin-top: auto; align-self: flex-start; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce span.onsale {
  top: 16px;
  left: 16px;
  right: auto;
  margin: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--gradient-coral);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--shadow-coral);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-result-count,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-ordering select { color: var(--text-muted); }

/* =====================================================================
   WOOCOMMERCE — FICHA DE PRODUCTO
   ===================================================================== */
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product { color: var(--text-secondary); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .product_title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.06;
  color: #fff;
  margin: 0 0 14px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .summary {
  color: var(--text-secondary);
  font-size: 16px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product p.price,
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product span.price,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
/* El precio tachado se apaga; el vigente se pinta en gradiente prisma. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce .price del {
  color: var(--text-muted);
  font-size: .62em;
  font-weight: 500;
  opacity: 1;
  margin-right: 8px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .price ins {
  background: var(--gradient-prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  font-weight: 700;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product form.cart { margin: 26px 0; gap: 12px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product form.cart .quantity input.qty {
  width: 84px;
  text-align: center;
  padding: 13px 10px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .single_add_to_cart_button { padding: 14px 30px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .product_meta {
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 24px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius-lg); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin: 0 0 24px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--text-muted);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  padding: 12px 16px;
  display: block;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--bcs-violet); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .star-rating span { color: var(--bcs-cyan); }

/* =====================================================================
   WOOCOMMERCE — CARRITO
   ===================================================================== */
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
  color: var(--text-secondary);
  margin: 0 0 26px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table th {
  background: rgba(255, 255, 255, .04);
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 18px;
  text-align: left;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 18px;
  vertical-align: middle;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table tfoot th,
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table tfoot td {
  background: rgba(255, 255, 255, .03);
  border-top: 1px solid var(--border);
  color: var(--text);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table .product-thumbnail img {
  width: 68px;
  border-radius: var(--radius-sm);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table .product-name a { color: var(--text); font-weight: 600; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table .product-name a:hover { color: var(--bcs-cyan); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.cart td.actions .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce table.cart td.actions .coupon input.input-text { width: auto; min-width: 200px; }

:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart-collaterals .cart_totals,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  padding: 26px 28px;
  overflow: hidden;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals::before {
  content: "";
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .6;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals h2 { font-size: 20px; margin: 0 0 18px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals table.shop_table {
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 0;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals table.shop_table th,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals table.shop_table td {
  background: transparent;
  padding: 12px 0;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals .order-total td,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals .order-total th {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  color: #fff;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals .checkout-button { width: 100%; margin-top: 18px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-shipping-destination,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .shipping-calculator-button { color: var(--text-muted); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .cart-empty,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .return-to-shop { text-align: center; }

/* =====================================================================
   WOOCOMMERCE — CHECKOUT  [pantalla crítica]
   ===================================================================== */
/* `.woocommerce-checkout` es el <form> que Woo imprime dentro de .woocommerce
   (templates/checkout/form-checkout.php), así que las reglas cuelgan de él. */
:is(.bcs-woo, body.woocommerce-page) form.woocommerce-checkout { color: var(--text-secondary); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout h3,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #order_review_heading {
  font-size: 20px;
  color: #fff;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout .woocommerce-form-login-toggle,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 20px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce form.checkout_coupon,
:is(.bcs-woo, body.woocommerce-page) .woocommerce form.login,
:is(.bcs-woo, body.woocommerce-page) .woocommerce form.register {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin: 0 0 26px;
}

/* Datos del cliente y resumen del pedido: dos tarjetas glass. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #order_review {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  padding: 28px 30px;
  overflow: hidden;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details::before,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #order_review::before {
  content: "";
  position: absolute;
  top: 0; left: 30px; right: 30px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .6;
  pointer-events: none;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #order_review { margin-top: 26px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details .col-1,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
/* Woo usa ::before/::after de .col2-set como clearfix de su layout flotado;
   con grid sobra, y ::before ya está reasignado arriba al hairline prisma. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details.col2-set::after { content: none; }

:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout table.woocommerce-checkout-review-order-table {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 0 0 22px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout table.woocommerce-checkout-review-order-table th,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  background: transparent;
  padding: 14px 0;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 21px;
  color: #fff;
  border-top: 1px solid var(--border);
}

/* Métodos de pago. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #payment,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout .woocommerce-checkout-payment {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout ul.wc_payment_methods,
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.wc_payment_methods li.wc_payment_method {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  transition: background 220ms ease, border-color 220ms ease;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.wc_payment_methods li.wc_payment_method:hover { background: rgba(255, 255, 255, .07); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  background: rgba(139, 92, 246, .14);
  border-color: rgba(139, 92, 246, .55);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.wc_payment_methods li.wc_payment_method label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.wc_payment_methods li.wc_payment_method .payment_box {
  background: rgba(6, 7, 31, .55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  margin: 12px 0 0;
  padding: 14px 16px;
}
/* Woo dibuja un triángulo con `border-bottom-color: #dcdcdc` hacia la caja. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce ul.wc_payment_methods li.wc_payment_method .payment_box::before {
  border-bottom-color: rgba(6, 7, 31, .55);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout .place-order { margin: 0; padding: 0; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout .place-order #place_order { width: 100%; padding: 16px 28px; font-size: 15.5px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout .woocommerce-privacy-policy-text,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout .woocommerce-terms-and-conditions {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .blockUI.blockOverlay { background: rgba(6, 7, 31, .70) !important; } /* Woo la pinta inline en el elemento. */
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-order,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-thankyou-order-details {
  list-style: none;
  padding: 24px 26px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-thankyou-order-details li { color: var(--text-muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-thankyou-order-details li strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
  margin-top: 6px;
}

/* =====================================================================
   WOOCOMMERCE — MI CUENTA
   ===================================================================== */
/* `woocommerce-account` es una clase de <body>, no un contenedor interior:
   se ancla en el propio body (o en .bcs-woo si el tema envuelve la página). */
body.woocommerce-account .woocommerce,
.bcs-woo.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after { content: none; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation {
  position: relative;
  float: none;
  width: auto;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  padding: 14px;
  overflow: hidden;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .6;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation-link a:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transform: translateX(2px);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--gradient-prism);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  color: var(--text-secondary);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-content p { color: var(--text-secondary); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-content mark {
  background: rgba(34, 211, 238, .16);
  color: var(--bcs-cyan);
  border-radius: 4px;
  padding: 1px 6px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-Address {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-Address-title h3 { font-size: 17px; margin: 0 0 12px; }

/* =====================================================================
   WOOCOMMERCE — AVISOS
   Woo los pinta con fondo #f6f5f8 y un borde superior de 3px por tipo:
   verde (message), azul (info) y rojo (error). Se traducen a cyan,
   lavanda y coral, y el borde pasa al lateral.
   ===================================================================== */
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-message,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-info,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-error,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-notices-wrapper .woocommerce-message,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-notices-wrapper .woocommerce-info,
:is(.bcs-woo, body.woocommerce-page) .woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background-color: var(--surface);
  background-image: none;
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border);
  border-left: 3px solid var(--bcs-violet);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  color: var(--text-secondary);
  padding: 16px 22px;
  margin: 0 0 24px;
  list-style: none;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-message { border-left-color: var(--bcs-cyan); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-message::before { color: var(--bcs-cyan); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-info { border-left-color: var(--bcs-lavender); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-info::before { color: var(--bcs-lavender); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-error {
  border-left-color: var(--bcs-coral);
  background-color: rgba(255, 107, 92, .08);
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-error::before { color: var(--bcs-coral); }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-message::before,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-info::before,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-error::before {
  position: static;
  margin-right: 2px;
}
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-error li { color: var(--text-secondary); width: 100%; }
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-message .button,
:is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-info .button { margin-left: auto; }

/* =====================================================================
   CARTFLOWS - CHECKOUT EMBEBIDO  [movido]
   ---------------------------------------------------------------------
   Los overrides del checkout de CartFlows ya no viven aqui: estan en
   `assets/css/cartflows.css`, que functions.php encola solo en los pasos de
   embudo (`bcs_is_cartflows_screen()`).

   El motivo es la cascada. En el <head> de un paso, esta hoja (`bcs-style`)
   sale en la posicion 29 y las de CartFlows en la 53-58, con selectores del
   tipo `.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout
   .woocommerce form .form-row input.input-text` (0,5,2): todo lo que se
   escribiera aqui para `.wcf-*` perdia por orden Y por especificidad.
   La hoja aparte gana colgando cada regla del prefijo de ID
   `#wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout` (1,1,0).
   Mismo criterio que se siguio con LearnDash.
   ===================================================================== */

/* =====================================================================
   REJILLA DE CURSOS DEL PLUGIN (shortcode [bsa_course_grid])
   ---------------------------------------------------------------------
   Markup real (includes/shortcodes/custom-course-grid.php):

     .bsa-course-grid > .bsa-courses-wrapper > article.bsa-course-card--{state}
       > a.bsa-course-image > img | span.bsa-course-placeholder
       > .bsa-course-content
           > .bsa-course-badges > span.bsa-badge.bsa-badge--{state|lang}
           > h3.bsa-course-title > a
           > p.bsa-course-meta
           > .bsa-course-progress > .bsa-course-progress-track > .bsa-course-progress-bar
                                  + .bsa-course-progress-label
           > a.bsa-course-cta

   El shortcode ya NO imprime <style> propio ni usa !important, así que aquí
   tampoco hace falta: basta con la especificidad normal.

   `{state}` es el estado en crudo (`enrolled` | `completed` | `locked`), no el
   texto traducido, para poder pintar cada caso sin depender del idioma.
   ===================================================================== */
.bsa-course-grid { width: 100%; margin: 0; }
.bsa-course-grid .bsa-courses-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.bsa-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  /* `isolation` crea un contexto de apilamiento propio: sin él, el `scale()`
     de la miniatura se escapaba por las esquinas redondeadas al componerse en
     otra capa. Era el «hover medio roto» de la versión anterior. */
  isolation: isolate;
  overflow: hidden;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.bsa-course-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
  z-index: 4;
  pointer-events: none;
}
.bsa-course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
  box-shadow: var(--shadow-card);
}

/* ---- Miniatura ----
   El <a> ES el contenedor con `overflow:hidden` (antes había un div envolviendo
   un <a> inline al que no se le podía recortar nada). Relación 16/9 fija para
   que todas las tarjetas midan igual aunque las fotos vengan cuadradas. */
.bsa-course-card .bsa-course-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 0% 0%,     rgba(34,211,238,.55), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(139,92,246,.65), transparent 60%),
    #0E1138;
}
.bsa-course-card .bsa-course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  /* `backface-visibility` evita el temblor de subpíxel al escalar en Chromium. */
  backface-visibility: hidden;
  /* El estado de reposo YA lleva transform, y no es un adorno.
     Con `transform: none` la miniatura se pinta como elemento en flujo, pero en
     cuanto arranca la transición pasa a tener transform y salta al grupo de los
     posicionados: cambia de capa a mitad de camino, y durante ese cambio el velo
     de abajo dejaba de taparla y se veía una franja de imagen sin oscurecer.
     Por eso el defecto solo aparecía DURANTE la animación y no en los extremos.
     Arrancando ya con `scale(1)` la capa es la misma de principio a fin. */
  transform: scale(1);
}
.bsa-course-card:hover .bsa-course-image img { transform: scale(1.06); }

/* Velo inferior para que el degradado no compita con el contenido.
   `z-index` explícito: sin él el orden dependía del orden del DOM, que es justo
   lo que se rompía al cambiar la miniatura de capa. */
.bsa-course-card .bsa-course-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,44,0) 45%, rgba(6,7,31,.72) 100%);
}
.bsa-course-card .bsa-course-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
}

/* ---- Contenido ---- */
.bsa-course-card .bsa-course-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 20px 22px 22px;
}

/* ---- Badges ----
   Antes eran una cinta absoluta sobre la foto: se solapaban con la imagen, se
   perdían sobre miniaturas claras y solo cabía una. Ahora van en el flujo, así
   que caben estado + idioma y nunca tapan nada. */
.bsa-course-card .bsa-course-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.bsa-course-card .bsa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--text-secondary);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
}
.bsa-course-card .bsa-badge .bsa-icon { flex-shrink: 0; }
.bsa-course-card .bsa-badge--enrolled {
  background: rgba(139, 92, 246, .22);
  border-color: rgba(139, 92, 246, .50);
  color: #fff;
}
.bsa-course-card .bsa-badge--completed {
  background: rgba(34, 211, 238, .16);
  border-color: rgba(34, 211, 238, .45);
  color: var(--bcs-cyan);
}
.bsa-course-card .bsa-badge--locked {
  background: rgba(255, 107, 92, .16);
  border-color: rgba(255, 107, 92, .42);
  color: var(--bcs-coral);
  letter-spacing: .03em;
}
.bsa-course-card .bsa-badge--lang {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-muted);
}

/* ---- Título ---- */
.bsa-course-card .bsa-course-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0;
}
.bsa-course-card .bsa-course-title a {
  color: #fff;
  text-decoration: none;
  transition: color 250ms ease;
}
.bsa-course-card .bsa-course-title a:hover { color: var(--bcs-cyan); }

/* ---- Meta (nº de lecciones) ---- */
.bsa-course-card .bsa-course-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.35;
}
.bsa-course-card .bsa-course-meta .bsa-icon { flex-shrink: 0; opacity: .8; }

/* ---- Progreso ----
   Solo aparece si el alumno está matriculado. `margin-top:auto` empuja el
   bloque final hacia abajo para que todas las tarjetas alineen su CTA. */
.bsa-course-card .bsa-course-progress {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  padding-top: 4px;
}
.bsa-course-card .bsa-course-progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.bsa-course-card .bsa-course-progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-prism);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bsa-course-card .bsa-course-progress-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-muted);
}

/* ---- Llamada a la acción ---- */
.bsa-course-card .bsa-course-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bcs-cyan);
  text-decoration: none;
  transition: gap 250ms ease, color 250ms ease;
}
/* Sin progreso (curso bloqueado o sin empezar) el CTA hace de última fila. */
.bsa-course-card .bsa-course-progress + .bsa-course-cta { margin-top: 2px; }
.bsa-course-card .bsa-course-meta + .bsa-course-cta,
.bsa-course-card .bsa-course-title + .bsa-course-cta { margin-top: auto; }
.bsa-course-card .bsa-course-cta:hover { gap: 12px; color: #fff; }
.bsa-course-card .bsa-course-cta .bsa-icon { flex-shrink: 0; }
.bsa-course-card .bsa-course-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .45);
  border-radius: 6px;
}

/* =====================================================================
   DASHBOARD DE ALUMNO
   Bloques que el tema imprime alrededor del contenido de LearnDash.
   ===================================================================== */
.bcs-dashboard-section {
  padding: 56px 0 88px;
  background: var(--bcs-midnight);
  color: var(--text-secondary);
}
/* Encarrila los hijos directos al ancho del sistema, salvo los que ya traen
   su propio contenedor (.bcs-container) o piden ancho completo. */
.bcs-dashboard-section > *:not(.bcs-container):not(.alignfull):not(.alignwide) {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}
.bcs-dashboard-section h1,
.bcs-dashboard-section h2 { color: #fff; }

/* Hero del escritorio: texto a la izquierda, puntos a la derecha.
   Antes el bloque de puntos caía debajo del hero, dentro del contenido, y se
   comía media pantalla antes de que el alumno viera un solo curso. */

/* Ancho: manda UNA sola clase. La plantilla ponía `.bcs-container` (1180px) y
   `.bcs-hero-inner` (980px) en el mismo <div>; con la misma especificidad
   ganaba la segunda por orden, así que el hero quedaba 200px más estrecho que
   la retícula de cursos de debajo y no crecía por encima de 1036px de viewport.
   Ahora la plantilla solo trae `.bcs-hero-inner` (que aporta el z-index sobre
   las manchas del fondo) y el ancho se fija aquí, alineado con `.bcs-container`. */
.bcs-dashboard-hero .bcs-hero-inner {
  width: 100%;
  max-width: 1180px;
  padding: 0 28px;
  /* `.bcs-hero-inner` centra todo el texto, que es lo correcto en los heroes de
     una sola columna. Aquí hay dos bloques que deben compartir el eje
     izquierdo del contenedor, así que se reinicia. */
  text-align: left;
}

/* Compactar: la plantilla ya no usa `.bcs-hero-compact` (min-height 45vh, que
   inflaba el hero hasta 378px en una pantalla de 900px) y el padding baja de
   88px a 44/40. El !important es obligado: `.bcs-hero-prismatic` declara
   `padding: 88px 0 !important`, y no hay forma de ganarle por especificidad. */
.bcs-dashboard-hero { padding: 44px 0 40px !important; }

.bcs-dashboard-hero-row {
  display: flex;
  /* Eje común: el pie de la tarjeta de puntos con el pie del texto. Con
     `center` los dos bloques flotaban a alturas distintas y no compartían
     ninguna línea. */
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.bcs-dashboard-hero-text { flex: 1 1 440px; min-width: 0; max-width: 680px; }
.bcs-dashboard-hero-row .puntos-container { flex: 0 1 320px; }

/* El H1 estaba calibrado para un hero de 980px a una columna: topaba en 72px
   dentro de una columna de 544px. Aquí escala con el viewport hasta 1742px, así
   que un monitor de 1920 no ve exactamente el mismo hero que uno de 1440.
   Los !important responden a los de `.bcs-display-md`. */
.bcs-dashboard-hero .bcs-display-md {
  font-size: clamp(32px, 3.1vw, 54px) !important;
  line-height: 1.04 !important;
}
/* El kicker y el lead llegan con márgenes `!important` de las reglas generales
   del hero (`margin: 0 0 16px` y `margin: 32px auto 0`); el `auto` del lead
   además lo centraría dentro de una columna ancha. Se responden con
   `!important` porque la declaración original lo lleva. El `text-align` sí se
   gana por orden: esta regla va después de `.bcs-hero-prismatic .bcs-lead`. */
.bcs-dashboard-hero .bcs-section-kicker { margin: 0 0 10px !important; }
/* El selector repite el `p` porque la regla original es
   `.bcs-hero-prismatic p.bcs-lead` (0,2,1): con `.bcs-dashboard-hero .bcs-lead`
   (0,2,0) el lead se seguía centrando y conservando el `margin: auto`. */
.bcs-dashboard-hero .bcs-lead,
.bcs-dashboard-hero p.bcs-lead {
  margin: 14px 0 0 !important;
  font-size: 17px !important;
  max-width: 560px;
  text-align: left;
}

/* La fila colapsaba a 900px, fuera del sistema: entre 901 y 1035px metía dos
   columnas en 845-980px. Ahora rompe con el resto del tema, a 1024px. */
@media (max-width: 1024px) {
  .bcs-dashboard-hero { padding: 36px 0 34px !important; }
  .bcs-dashboard-hero-row { gap: 24px; align-items: stretch; }
  .bcs-dashboard-hero-text { flex: 1 1 100%; max-width: none; }
  .bcs-dashboard-hero-row .puntos-container { flex: 1 1 100%; }
  /* Apilada, la tarjeta ocupa todo el ancho: la cifra y el enlace se ponen en
     fila para no gastar tres alturas de texto en una franja vacía. */
  .bcs-dashboard-hero-row .puntos-container--hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
  }
  .bcs-dashboard-hero-row .puntos-container--hero .puntos-info-actions { margin-top: 0; }
}

.bcs-dashboard-notices { margin-bottom: 28px; }
.bcs-dashboard-notices > * {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--bcs-lavender);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  color: var(--text-secondary);
  padding: 16px 22px;
  margin-bottom: 12px;
}
.bcs-dashboard-notices .is-error { border-left-color: var(--bcs-coral); }
.bcs-dashboard-notices .is-success { border-left-color: var(--bcs-cyan); }

/* Avisos de curso del plugin ([mensaje_ia] y [mensaje_legalidad]).
   Antes venían con estilos en línea de la marca anterior; ahora solo emiten
   clases y el aspecto se define aquí. */
.bsa-course-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}
.bsa-course-nudge .bsa-course-nudge-text {
  margin: 0;
  flex: 1 1 320px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.4;
}
.bsa-course-nudge .bsa-course-nudge-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--gradient-prism);
  background-size: 200% 100%;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-glow);
  transition: background-position .35s ease, box-shadow .3s ease, transform .2s ease;
}
.bsa-course-nudge .bsa-course-nudge-cta:hover {
  background-position: 100% 0;
  box-shadow: var(--shadow-glow-hover);
  transform: translateY(-2px);
}

.bcs-dashboard-courses { margin-top: 34px; }
.bcs-dashboard-courses > h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Contenedor del contenido de LearnDash embebido en una plantilla del tema. */
.bcs-ld-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 28px 88px;
  color: var(--text-secondary);
}
.bcs-ld-content > .learndash-wrapper { margin: 0; }

/* ---- Muro de pago ---- */
.bcs-paywall-section {
  position: relative;
  max-width: 640px;
  margin: 64px auto;
  padding: 44px 40px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(34,211,238,.07), transparent 50%, rgba(139,92,246,.12)),
    var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
}
.bcs-paywall-section::before {
  content: "";
  position: absolute;
  top: 0; left: 40px; right: 40px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .7;
}
.bcs-paywall-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin-bottom: 22px;
  border-radius: 20px;
  background: var(--gradient-prism-soft);
  border: 1px solid rgba(139, 92, 246, .40);
  color: var(--bcs-cyan);
}
.bcs-paywall-icon svg { width: 30px; height: 30px; }
.bcs-paywall-section h2 { font-size: clamp(24px, 3vw, 32px); color: #fff; margin: 0 0 12px; }
.bcs-paywall-section p { color: var(--text-secondary); font-size: 16px; line-height: 1.65; margin: 0 0 26px; }

/* ---- Acceso / registro ---- */
.bcs-auth-section {
  position: relative;
  max-width: 480px;
  margin: 64px auto;
  padding: 40px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
}
.bcs-auth-section::before {
  content: "";
  position: absolute;
  top: 0; left: 40px; right: 40px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}
.bcs-auth-section h1,
.bcs-auth-section h2 { font-size: clamp(24px, 2.8vw, 30px); color: #fff; margin: 0 0 8px; }
.bcs-auth-section form { display: flex; flex-direction: column; gap: 16px; }
.bcs-auth-section label {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.bcs-auth-section input[type="text"],
.bcs-auth-section input[type="email"],
.bcs-auth-section input[type="password"] {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.bcs-auth-section input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, .55);
  background-color: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .20);
}
.bcs-auth-section input[type="submit"],
.bcs-auth-section button[type="submit"] {
  width: 100%;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--gradient-prism);
  background-size: 200% 200%;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform 250ms ease, box-shadow 250ms ease, background-position 300ms ease;
}
.bcs-auth-section input[type="submit"]:hover,
.bcs-auth-section button[type="submit"]:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-hover);
}
.bcs-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 200ms ease, transform 200ms ease;
}
.bcs-auth-back:hover { color: var(--bcs-cyan); transform: translateX(-2px); }
/* La flecha es una máscara SVG, no el glifo "←": un carácter de flecha depende
   de la fuente del sistema, no hereda bien el color y se lee en voz alta en los
   lectores de pantalla. La máscara hereda `currentColor` y es decorativa. */
.bcs-auth-back::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-left) center / contain no-repeat;
  mask: var(--icon-arrow-left) center / contain no-repeat;
}

/* ---- Envoltorio del checkout del campus ----
   Es el <main align="full"> de `page-funnel-step` y lleva dentro las capas
   decorativas (`.bcs-float-*`, `.bcs-dot-grid`), que se estiran a su caja.
   Con `max-width: 1180px` esas capas se recortaban a 1180 px y el fondo salía
   como un rectángulo pegado en mitad de la página: se veía el corte a los
   lados y abajo. Va a sangre; quien limita el ancho es
   `.bcs-container.bcs-checkout-inner`, que ya está dentro. */
.bcs-checkout {
  max-width: none;
  margin: 0 auto;
  padding: 48px 0 96px;
  color: var(--text-secondary);
}
.bcs-checkout > h1 {
  font-size: clamp(30px, 4vw, 46px);
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.bcs-checkout > p { color: var(--text-secondary); margin: 0 0 34px; }

/* =====================================================================
   CAMPUS — RESPONSIVE
   ===================================================================== */
@media (max-width: 860px) {
  /* --- Rejilla de cursos --- */
  .bsa-course-grid .bsa-courses-wrapper { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* --- LearnDash --- */
  .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview { padding: 16px 18px; }
  .learndash-wrapper .ld-item-list .ld-section-heading { flex-wrap: wrap; gap: 10px; }
  .learndash-wrapper .wpProQuiz_content { padding: 24px 22px; }
  .learndash-wrapper .wpProQuiz_content::before { left: 22px; right: 22px; }

  /* Focus Mode: la barra lateral se convierte en un panel deslizante y el
     contenido recupera todo el ancho. LD ya alterna .ld-focus-sidebar-collapsed
     con JS; aquí solo se ajusta la geometría. */
  .learndash-wrapper .ld-focus .ld-focus-sidebar { width: 300px; }
  .learndash-wrapper .ld-focus .ld-focus-main { margin-left: 0; width: 100%; }
  .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content { padding: 34px 24px 72px; }

  /* --- WooCommerce --- */
  :is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details.col2-set { grid-template-columns: 1fr; gap: 22px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #order_review { padding: 24px 22px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #customer_details::before,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-checkout #order_review::before { left: 22px; right: 22px; }
  /* Mi cuenta: el colapso a una columna y el resto del responsive de esa
     pantalla viven en assets/css/account.css, que se encola solo ahí.
     Aquí había una regla `… .woocommerce-account .woocommerce` que nunca
     llegaba a aplicarse: `woocommerce-account` y `woocommerce-page` son
     clases del MISMO <body>, no una dentro de otra. */
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation-link a { padding: 10px 14px; font-size: 13.5px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation-link a:hover { transform: none; }

  /* --- CartFlows --- */
  .wcf-embed-checkout-form.wcf-embed-checkout-form-two-column .woocommerce-checkout { grid-template-columns: 1fr; gap: 22px; }
  .wcf-embed-checkout-form .woocommerce-checkout .wcf-col2-set,
  .wcf-embed-checkout-form .woocommerce-checkout .wcf-order-wrap { padding: 24px 22px; }
  .wcf-embed-checkout-form .woocommerce-checkout .wcf-col2-set::before,
  .wcf-embed-checkout-form .woocommerce-checkout .wcf-order-wrap::before { left: 22px; right: 22px; }

  /* --- Dashboard --- */
  .bcs-dashboard-section { padding: 40px 0 64px; }
  .bcs-paywall-section,
  .bcs-auth-section { padding: 32px 26px; margin: 44px auto; }
  .bcs-paywall-section::before,
  .bcs-auth-section::before { left: 26px; right: 26px; }
}

@media (max-width: 600px) {
  /* --- Rejilla de cursos --- */
  .bsa-course-grid .bsa-courses-wrapper { grid-template-columns: 1fr; }
  .bsa-course-card .bsa-course-content { padding: 18px 20px 20px; }
  .bsa-course-card .bsa-course-title { font-size: 18px; }

  /* --- LearnDash --- */
  .learndash-wrapper { font-size: 15px; }
  .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview { flex-direction: column; align-items: flex-start; gap: 12px; }
  .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-details { justify-content: flex-start; width: 100%; }
  .learndash-wrapper .ld-item-list .ld-item-list-item::before { left: 16px; right: 16px; }
  .learndash-wrapper .ld-table-list .ld-table-list-item-preview { padding: 12px 16px; }
  .learndash-wrapper .ld-button,
  .learndash-wrapper .learndash_mark_complete_button,
  .learndash-wrapper #learndash_mark_complete_button { width: 100%; padding: 13px 20px !important; }
  .learndash-wrapper .ld-focus .ld-focus-sidebar { width: 86vw; max-width: 320px; }
  .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content { padding: 26px 18px 64px; }
  .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h1 { font-size: 26px; }
  .learndash-wrapper .wpProQuiz_content { padding: 20px 18px; border-radius: var(--radius-md); }
  .learndash-wrapper .wpProQuiz_content::before { left: 18px; right: 18px; }
  .learndash-wrapper .wpProQuiz_content .wpProQuiz_question_text { font-size: 17px; }
  .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label { padding: 12px 14px; }

  /* --- WooCommerce --- */
  :is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products { grid-template-columns: 1fr; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product { padding: 18px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product::before { left: 18px; right: 18px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce div.product .product_title { font-size: 26px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce div.product p.price,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce .price { font-size: 25px; }
  /* Tablas apiladas en móvil. Solo las que Woo marca como shop_table_responsive
     (carrito, totales, pedidos) y solo su <thead>: los <th> de <tbody> son los
     rótulos de "Subtotal"/"Total" y deben seguir visibles. El rótulo de cada
     celda apilada sale de data-title, que Woo escribe en las celdas del carrito. */
  :is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table_responsive thead { display: none; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table_responsive tbody td[data-title] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-align: right;
  }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table_responsive tbody td[data-title]::before {
    content: attr(data-title);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
  }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table_responsive tbody td.product-remove,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce table.shop_table_responsive tbody td.product-thumbnail { display: table-cell; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce table.cart td.actions .coupon input.input-text { min-width: 0; width: 100%; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce .cart-collaterals .cart_totals { padding: 22px 20px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce .cart_totals::before { left: 20px; right: 20px; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce a.button,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce button.button,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce input.button { width: 100%; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product a.button { align-self: stretch; }
  :is(.bcs-woo, body.woocommerce-page) .woocommerce .woocommerce-thankyou-order-details { flex-direction: column; gap: 16px; }

  /* --- CartFlows --- */
  .wcf-bump-order-wrap { padding: 18px 18px; }
  .wcf-embed-checkout-form table.woocommerce-checkout-review-order-table th,
  .wcf-embed-checkout-form table.woocommerce-checkout-review-order-table td { padding: 12px 0; }

  /* --- Dashboard --- */
  /* Misma cadena de :not() que la regla base, para no perder por especificidad. */
  .bcs-dashboard-section > *:not(.bcs-container):not(.alignfull):not(.alignwide) {
    padding-left: 20px;
    padding-right: 20px;
  }
  .bcs-ld-content { padding: 28px 20px 64px; }
  /* Sin padding lateral: el gutter lo pone `.bcs-checkout-inner` (ver
     cartflows.css, sección 7). Dos paddings encadenados dejaban el formulario
     en 192 px de ancho útil a 390 px de pantalla. */
  .bcs-checkout { padding: 32px 0 72px; }
  .bcs-paywall-section,
  .bcs-auth-section { padding: 28px 22px; border-radius: var(--radius-md); }
  .bcs-paywall-section::before,
  .bcs-auth-section::before { left: 22px; right: 22px; }
  .bcs-paywall-icon { width: 56px; height: 56px; border-radius: 16px; }
}

/* =====================================================================
   CAMPUS — PREFERS-REDUCED-MOTION
   La regla global de arriba ya recorta duraciones; aquí se anulan además
   los desplazamientos propios del campus.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .learndash-wrapper .ld-item-list .ld-item-list-item:hover,
  .learndash-wrapper .ld-button:hover,
  .learndash-wrapper .learndash_mark_complete_button:hover,
  .learndash-wrapper #learndash_mark_complete_button:hover,
  .learndash-wrapper .wpProQuiz_content .wpProQuiz_button:hover,
  .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label:hover,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce ul.products li.product:hover,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce a.button:hover,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce button.button:hover,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce input.button:hover,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce .single_add_to_cart_button:hover,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce #place_order:hover,
  :is(.bcs-woo, body.woocommerce-page) .woocommerce-MyAccount-navigation-link a:hover,
  .wcf-next-step:hover,
  .cartflows-bb__next-step-button:hover,
  .wcf-embed-checkout-form #place_order:hover,
  .bsa-course-card:hover,
  .bcs-auth-back:hover,
  .bcs-auth-section input[type="submit"]:hover,
  .bcs-auth-section button[type="submit"]:hover { transform: none !important; }
  .bsa-course-card:hover .bsa-course-image img { transform: none !important; }
  .bsa-course-card .bsa-course-progress-bar { transition: none !important; }
  .bsa-course-card .bsa-course-cta:hover { gap: 8px; }
  .learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage { transition: none !important; }
}


/* =====================================================================
   TIMELINE
   Portada del tema público porque la landing ABC la usa para sus pasos
   («Cómo funciona»). El relleno de la barra lo mueve el script inline
   bcs_timeline_progress_script() de functions.php, que escribe --tl-progress
   según el scroll.
   ===================================================================== */
.bcs-timeline {
  position: relative;
  z-index: 2;
  /* Force 880px on the container itself (overriding the parent constrained
     layout) so the rail/progress and the per-item dots share one origin and
     stay aligned, while keeping the text column readable. */
  max-width: 880px !important;
  margin: 0 auto !important;
  --tl-rail: 24px; /* x-position of the vertical rail */
  /* Item spacing lives here as flex gap: WP's flow-layout rules (printed after
     this sheet, same specificity via :root :where()) zero out the items' own
     margins, so per-item margin-bottom never survives the cascade. */
  display: flex;
  flex-direction: column;
  gap: 44px;
}
/* Dim static track */
.bcs-timeline::before {
  content: "";
  position: absolute;
  left: var(--tl-rail); top: 6px; bottom: 6px;
  width: 2px;
  background: rgba(255,255,255,.13);
  border-radius: 2px;
}
/* Gradient fill whose height is driven by scroll (JS sets --tl-progress 0–1) */
.bcs-timeline-progress {
  position: absolute;
  left: var(--tl-rail); top: 6px;
  width: 2px;
  height: calc(var(--tl-progress, 0) * (100% - 12px));
  background: linear-gradient(180deg, rgba(34,211,238,.95), rgba(139,92,246,.95), rgba(255,107,92,.95));
  border-radius: 2px;
  z-index: 1;
  will-change: height;
  transition: height 140ms linear;
}
/* Glowing head at the leading edge of the fill */
.bcs-timeline-progress::after {
  content: "";
  position: absolute;
  bottom: -3px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px 3px rgba(34,211,238,.8), 0 0 4px 1px rgba(255,255,255,.9);
  opacity: 0;
  transition: opacity 300ms ease;
}
.bcs-timeline[data-started="1"] .bcs-timeline-progress::after { opacity: 1; }
.bcs-timeline-item {
  position: relative;
  z-index: 3; /* sit above the progress fill so the dots paint on top of the line */
  padding-left: 72px;
}
/* Dot — dim by default, lights up when the scroll fill reaches it.
   Laid out at its FINAL size and shrunk while inactive: the active state rests
   at scale(1), so the browser paints it crisp instead of upscaling the raster. */
.bcs-timeline-item::before {
  content: "";
  position: absolute;
  left: 15px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bcs-midnight-2);
  box-shadow: 0 0 0 4px rgba(10,11,44,.6);
  z-index: 2;
  transform: scale(0.9);
  transition: background 360ms ease, box-shadow 360ms ease, transform 360ms cubic-bezier(0.16,1,0.3,1);
}
.bcs-timeline-item.is-reached::before {
  background: var(--gradient-prism);
  box-shadow: 0 0 0 4px rgba(139,92,246,.22), 0 0 16px 2px rgba(34,211,238,.45);
  transform: scale(1);
}
.bcs-timeline-item .bcs-year {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-lavender-muted);
  margin: 0 0 8px !important;
  transition: color 360ms ease;
}
.bcs-timeline-item.is-reached .bcs-year { color: var(--bcs-cyan); }
.bcs-timeline-item h3 { font-size: 22px !important; color: #fff; margin: 0 0 10px !important; letter-spacing: -0.015em; }
.bcs-timeline-item p { font-size: 15px !important; line-height: 1.65 !important; color: var(--bcs-lavender) !important; }



/* =====================================================================
   PUNTOS DEL ALUMNO — [mostrar_puntos_actuales]
   ---------------------------------------------------------------------
   El shortcode ya no imprime CSS propio (antes metía ~200 líneas con la
   marca anterior en el body, después de esta hoja, y había que ganarle con
   !important en cada regla). Ahora el markup es semántico y neutro:

     .puntos-container--default
       > p.puntos-display > span.puntos-number + span.puntos-title
       > details.puntos-details
           > summary.toggle-button > svg.puntos-chevron
           > .explanation-content > .explanation-text
                                  + .advantages-box > .advantages-title + ul.advantages-list
                                  + blockquote.quote-box > .quote-text

     .puntos-container--hero
       > p.puntos-display > span.puntos-number + span.puntos-title
       > a.puntos-info-trigger
       > dialog.puntos-dialog > .puntos-dialog-card
           > .puntos-dialog-head > .puntos-dialog-title + a.puntos-dialog-close
           > .puntos-dialog-body > (el mismo contenido de la explicacion)

   La variante `hero` es la que usa la portada del campus: cabe al lado del
   título en lugar de ocupar una franja entera, y manda la explicación a un
   diálogo superpuesto para que abrirla no empuje el hero.
   ===================================================================== */
.puntos-container {
	position: relative;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	box-shadow: var(--shadow-card);
	padding: 22px 24px;
	overflow: hidden;
	margin: 0;
	text-align: left;
}

/* Hairline de degradado en el borde superior, como el resto de tarjetas. */
.puntos-container::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--gradient-prism);
	opacity: .85;
}

/* ---- La cifra ---- */
.puntos-container .puntos-display {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.puntos-container .puntos-number {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: clamp(34px, 4vw, 44px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	background: var(--gradient-prism);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.puntos-container .puntos-title {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ---- Desplegable ----
   Es un <details> nativo: sin JavaScript, accesible por teclado y sin el
   `onclick` que antes reescribía los colores del botón a mano. */
.puntos-container .puntos-details { margin-top: 16px; }
.puntos-container .toggle-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 11px 16px;
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: var(--surface);
	color: var(--text-secondary);
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	cursor: pointer;
	list-style: none;
	transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
/* Oculta el triángulo por defecto del <summary> en WebKit y en Firefox. */
.puntos-container .toggle-button::-webkit-details-marker { display: none; }
.puntos-container .toggle-button::marker { content: ""; }
.puntos-container .toggle-button:hover {
	color: #fff;
	background: var(--glass);
	border-color: var(--border-strong);
}
.puntos-container .toggle-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, .45);
}
.puntos-container .puntos-chevron {
	flex-shrink: 0;
	transition: transform 250ms ease;
}
.puntos-container .puntos-details[open] .puntos-chevron { transform: rotate(180deg); }

/* ---- Contenido desplegado ---- */
.puntos-container .explanation-content {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	color: var(--text-secondary);
	font-size: 14.5px;
	line-height: 1.65;
}
.puntos-container .explanation-text { margin: 0 0 12px; }
.puntos-container .explanation-text:last-child { margin-bottom: 0; }
.puntos-container .highlight {
	color: var(--bcs-cyan);
	font-weight: 600;
}
.puntos-container .advantages-box {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	margin: 14px 0;
}
.puntos-container .advantages-title {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bcs-cyan);
	margin: 0 0 8px;
}
.puntos-container .advantages-list {
	margin: 0;
	padding-left: 18px;
	color: var(--text-secondary);
}
.puntos-container .advantages-list li { margin-bottom: 6px; }
.puntos-container .advantages-list li:last-child { margin-bottom: 0; }
.puntos-container .quote-box {
	margin: 14px 0 0;
	padding: 12px 16px;
	background: var(--surface);
	border: 0;
	border-left: 3px solid var(--bcs-violet);
	border-radius: var(--radius-sm);
}
.puntos-container .quote-text {
	margin: 0;
	font-style: italic;
	color: var(--text-muted);
	font-size: 14px;
}

/* ---- Variante del hero ----
   Solo la cifra, el rótulo y un enlace: la explicación se abre en un <dialog>
   superpuesto (ver más abajo). Con el <details> aquí dentro, abrirlo llevaba la
   tarjeta de 154px a 940px y el hero de 374px a 1116px — más que el viewport. */
.puntos-container--hero {
	padding: 18px 20px;
	/* Sin `backdrop-filter`: esta tarjeta se apoya sobre `.bcs-hero-prismatic`,
	   que ya lleva dos radial-gradients, dos `.bcs-float` desenfocados y la
	   retícula de puntos. Desenfocar un fondo ya borroso no se ve y cuesta una
	   capa de composición. Además, un `backdrop-filter` en un ancestro crea
	   bloque contenedor para los descendientes `position: fixed`, y eso rompería
	   el diálogo en su modo sin JavaScript. */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.puntos-container--hero .puntos-number { font-size: clamp(30px, 3.4vw, 38px); }

/* Disparador del diálogo. Es un <a> y no un <button> a propósito: apunta al
   `id` del <dialog>, así que sin JavaScript sigue abriéndolo por `:target`.
   El <div> que lo envuelve es cosa de `wpautop()`: sin una etiqueta de bloque
   alrededor, envuelve el enlace en un <p> y añade un <br> suelto. */
.puntos-info-actions { margin-top: 14px; }
.puntos-info-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: var(--surface);
	color: var(--text-secondary);
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-decoration: none;
	transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.puntos-info-trigger:hover {
	color: #fff;
	background: var(--glass);
	border-color: var(--border-strong);
}
.puntos-info-trigger:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, .45);
}
.puntos-info-trigger .puntos-icon { flex-shrink: 0; opacity: .8; }

/* ---- Diálogo de la explicación ----
   `<dialog>` nativo: `showModal()` desde el script del shortcode, Esc y
   `::backdrop` sin librerías, y el foco vuelve solo al disparador al cerrar.

   `.puntos-dialog-wrap` solo existe para `wpautop()`, que no reconoce `dialog`
   como etiqueta de bloque y le abría delante un `<p></p>` vacío de 32px de
   márgenes. `display: contents` lo borra de la caja sin borrarlo del DOM: si
   fuera un `<div>` normal contaría como ítem del flex de la tarjeta apilada y
   se llevaría un `gap` entero. */
.puntos-dialog-wrap { display: contents; }
/* Y aun con el envoltorio, `wpautop()` deja suelto un `<p></p>` sin clase
   dentro de la tarjeta (32px de márgenes de la nada). Todos los párrafos que
   emite el shortcode llevan clase, así que el que no la lleva es basura. */
.puntos-container > p:not([class]) { display: none; }
/* Lo mismo DENTRO del diálogo, que la regla de arriba no alcanza: `wpautop()`
   deja un `<p></p>` vacío antes de la tarjeta y otro después (este con
   tabuladores dentro, así que `:empty` no lo caza; por eso el criterio es «sin
   clase»). Entre los dos sumaban lo justo para que el contenido superara por
   6px la altura máxima del diálogo y apareciera una barra de scroll vertical
   para nada. Todos los párrafos propios del shortcode llevan clase. */
.puntos-dialog > p:not([class]) { display: none; }
/* Y una tercera, un nivel más abajo: `wpautop()` envuelve el enlace de cerrar en
   otro `<p>` sin clase, cuyos 16px de margen superior descolgaban el aspa por
   debajo del título. Aquí no vale ocultarlo —lleva dentro el enlace—, así que
   `display: contents` lo saca de la caja y deja que el enlace sea directamente
   el ítem flex de la cabecera. */
.puntos-dialog-head > p:not([class]) { display: contents; }
.puntos-dialog {
	width: min(560px, calc(100vw - 32px));
	max-width: min(560px, calc(100vw - 32px));
	max-height: min(78vh, 700px);
	padding: 0;
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	background: var(--bcs-midnight-2);
	color: var(--text-secondary);
	box-shadow: var(--shadow-card);
	overflow: auto;
	overscroll-behavior: contain;
}
.puntos-dialog::backdrop { background: rgba(6, 7, 31, .74); }
.puntos-dialog-card { padding: 24px 26px 26px; }
.puntos-dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.puntos-dialog-title {
	margin: 0;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
}
.puntos-dialog-close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--glass-border);
	background: var(--surface);
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.puntos-dialog-close:hover {
	color: #fff;
	background: var(--glass);
	border-color: var(--border-strong);
}
.puntos-dialog-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, .45);
}
.puntos-dialog-body {
	font-size: 14.5px;
	line-height: 1.65;
}

/* Sin JavaScript el enlace no puede llamar a `showModal()`, así que llega al
   `id` del diálogo y lo abre por `:target`. En ese modo no hay `::backdrop`
   (solo existe en el modo modal), de ahí la sombra de 100vmax, que hace de
   velo. Con JavaScript el script llama a `preventDefault()`, el hash nunca
   cambia y estas reglas no llegan a aplicarse. */
.puntos-dialog:target {
	display: block;
	position: fixed;
	inset: 0;
	height: fit-content;
	margin: auto;
	z-index: 1000;
	box-shadow: var(--shadow-card), 0 0 0 100vmax rgba(6, 7, 31, .74);
}

@media (prefers-reduced-motion: no-preference) {
	.puntos-dialog[open] { animation: puntosDialogIn 180ms ease-out; }
	.puntos-dialog[open]::backdrop { animation: puntosBackdropIn 180ms ease-out; }
}
@keyframes puntosDialogIn {
	from { opacity: 0; transform: translateY(10px) scale(.985); }
}
@keyframes puntosBackdropIn {
	from { opacity: 0; }
}

@media (max-width: 600px) {
	.puntos-container { padding: 20px 18px; }
	.puntos-dialog-card { padding: 20px 20px 22px; }
	.puntos-dialog-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.puntos-container .toggle-button,
	.puntos-container .puntos-chevron,
	.puntos-info-trigger,
	.puntos-dialog-close { transition: none; }
}


/* =====================================================================
   PEDIDO RECIBIDO  (los pasos de «gracias» del embudo reutilizan esta pantalla)
   ---------------------------------------------------------------------
   Tanto el bloque del skin «modern checkout» como los estilos de la pantalla
   de pedido recibido se han movido a `assets/css/cartflows.css`: los pasos de
   agradecimiento son `cartflows_step`, así que esa hoja carga allí y además
   se imprime después de las seis de CartFlows. Tener las dos hojas pintando
   `.woocommerce-order` solo servía para que se pelearan.
   ===================================================================== */

/* =====================================================================
   LANDINGS DE EMBUDO — «MASTER + YOSEYOMO» Y «ABC DE CRIPTOMONEDAS»
   ---------------------------------------------------------------------
   Los pasos 5117 / 4070 / 4338 son `cartflows_step` con plantilla
   `page-landing`. Comparten el sistema de secciones del tema, pero su
   contenido (titulares de 13 palabras, un vídeo de 16:9 a 924 px, una foto
   de producto cuadrada de 820 px) desborda las medidas para las que se
   calibraron `.bcs-hero-prismatic` y `.bcs-cta`.

   Va al final de la hoja a propósito: varias de estas reglas empatan en
   especificidad con las generales y ganan por orden.
   ===================================================================== */

/* ---- 1. El hero, dentro de la primera pantalla ----
   Medido a 1440×900 con la cabecera sticky de 104 px:

       .bcs-abc-hero     1296 px de alto
       .bcs-master-hero  1216 px

   Ninguno de los dos entraba: el h1 topaba en los 84 px de `.bcs-display-lg`
   y se comía 330-494 px él solo, y debajo todavía venían el vídeo (520 px) o
   la ficha de datos. `.bcs-hero-manifesto` ya reserva `90vh - cabecera`
   (722 px), así que basta con que el contenido quepa en esa caja: entonces
   manda el `min-height` y el hero cierra en 722 px + 104 de cabecera.

   Los `!important` responden a los de las reglas generales
   (`.bcs-hero-prismatic { padding: 88px 0 !important }`, `.bcs-display-lg`,
   `.bcs-hero-prismatic p.bcs-lead`), que no se pueden batir por
   especificidad sola. */
.bcs-abc-hero,
.bcs-master-hero {
  padding: 44px 0 48px !important;
}
/* 84 px era una medida de póster: con estos titulares daba 4 y 6 líneas. */
.bcs-abc-hero .bcs-display-lg,
.bcs-master-hero .bcs-display-lg {
  font-size: clamp(30px, 3.6vw, 52px) !important;
  line-height: 1.06 !important;
  margin-top: 16px !important;
}
.bcs-abc-hero .bcs-lead,
.bcs-abc-hero p.bcs-lead,
.bcs-master-hero .bcs-lead,
.bcs-master-hero p.bcs-lead {
  margin: 20px auto 0 !important;
  font-size: 17px !important;
  max-width: 620px;
}
.bcs-abc-hero .bcs-hero-actions,
.bcs-master-hero .bcs-hero-actions {
  margin-top: 26px !important;
}
/* 70 px de separación se diseñaron para un hero que terminaba en la ficha. */
.bcs-master-hero .bcs-hero-meta {
  margin-top: 30px !important;
}
.bcs-master-hero .bcs-partner-logos {
  margin-bottom: 4px;
}

/* El vídeo manda en la altura del hero de ABC. El ancho se acota en `vh`
   porque la proporción es fija (16:9): `54vh` de ancho son ~30vh de alto, así
   que el bloque se adapta al alto real de la pantalla en vez de quedar clavado
   en 520 px. El tope en px evita que crezca sin control en monitores altos. */
.bcs-abc-hero .bcs-hero-video {
  max-width: min(640px, 54vh) !important;
  margin: 20px auto 0 !important;
}
/* El radio va en el envoltorio con `overflow: hidden`: el iframe de Vimeo pinta
   su propia barra de controles pegada al borde inferior y redondearlo a el solo
   dejaba las esquinas de abajo en pico. */
.bcs-abc-hero .bcs-hero-video .wp-block-embed__wrapper,
.bcs-abc-hero .bcs-hero-video img {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ---- 2. Botones pegados al texto ----
   El reset de esta misma hoja (`:root:root :where(.is-layout-flow) > *
   { margin-block-start: 0 }`) deja a cero el margen superior de los bloques
   de botones. Donde el párrafo de encima tampoco lleva margen inferior —el
   caso de las tres botoneras de la landing de ABC— el botón salía pegado al
   texto, sin un solo píxel de aire.

   Es un mínimo, no una suma: los márgenes de hermanos colapsan, así que donde
   el elemento anterior ya aporta 36 px el hueco sigue siendo 36, no 64
   (comprobado en las cinco botoneras de las dos páginas).
   `.bcs-hero-actions` se excluye porque tiene su propio ritmo, más amplio. */
main.bcs-landing .entry-content .wp-block-buttons:not(.bcs-hero-actions) {
  margin-top: 28px;
}

/* ---- 3. «Qué incluye el paquete» ----
   `.bcs-master-features li` era `display: flex`. El marcado de cada punto es
   `<li><strong>Trading:</strong> aplicas un método…</li>`: en un contenedor
   flex el `<strong>` es UN elemento flex y el texto suelto de detrás se
   convierte en otro elemento flex anónimo. Resultado: dos columnas de ancho
   independiente por línea, cada una centrada por su cuenta, con el rótulo
   estrujado a la izquierda («Yoseyomo incluido:» partido en dos líneas) y la
   descripción centrada en el hueco sobrante.

   En flujo normal el rótulo y su texto vuelven a ser un párrafo. El icono pasa
   a sangría francesa, que además alinea todas las líneas al mismo eje. */
.bcs-master-features {
  max-width: 660px;
  margin-inline: auto !important;
  text-align: left;
}
.bcs-master-features li {
  display: block;
  position: relative;
  padding-left: 32px;
  line-height: 1.55;
  color: var(--bcs-lavender);
}
.bcs-master-features li strong {
  color: #fff;
}
.bcs-master-features li::before {
  position: absolute;
  left: 0;
  top: 3px;
}

/* ---- 4. Tarjeta de precio ----
   `.bcs-price-now` pedía `clamp(52px, 7vw, 76px) !important`, pero dentro de
   `.bcs-cta` perdía contra `.bcs-cta p { font-size: 18.5px !important }`:
   los dos llevan `!important`, así que decide la especificidad y 0,1,1 gana a
   0,1,0. El precio salía a 18,5 px —más pequeño que su propio rótulo— y en
   lavanda plano, porque ese mismo `.bcs-cta p` también pisaba el
   `color: transparent` que deja ver el degradado.

   Se sube el selector a 0,2,0 (`.bcs-price-card .bcs-price-now`), que bate a
   `.bcs-cta p` sin necesidad de subir la puja de `!important`. */
.bcs-price-card .bcs-price-now {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(46px, 5.4vw, 68px) !important;
  font-weight: 700;
  line-height: 1 !important;
  letter-spacing: -0.04em;
  margin: 0 0 6px !important;
  max-width: none;
  background: var(--gradient-prism);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
}

/* La lista de la tarjeta de precio hereda el `text-align: center` de
   `.bcs-price-card`, asi que las vinetas de dos lineas centraban la segunda
   bajo la primera y el bloque quedaba en pico. El icono ya va en sangria
   francesa; el texto solo tiene que alinearse con el. */
.bcs-price-card .bcs-check-list {
  text-align: left;
}

/* ---- 5. Foto de producto ----
   La imagen llega en 820 × 820 con fondo gris de estudio: a tamaño completo
   partía la sección en dos y metía un bloque claro a sangre en mitad del
   midnight. Se acota y se le da el mismo radio y filete que a las tarjetas
   para que se lea como una pieza más del sistema. */
/* El selector repite `.wp-block-image` porque el rival es la hoja de layout que
   WordPress imprime en linea para el grupo contenedor:
   `.wp-container-core-group-is-layout-... > :where(:not(.alignleft)...)
   { max-width: 820px }`. `:where()` no suma especificidad, asi que vale 0,1,0
   -lo mismo que `.bcs-product-shot`- y ganaba por orden, porque ese <style> se
   imprime despues de la hoja del tema. Con 0,2,0 el empate se rompe aqui. */
.wp-block-image.bcs-product-shot {
  max-width: 380px;
  margin-inline: auto !important;
}
.bcs-product-shot img {
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .bcs-abc-hero,
  .bcs-master-hero { padding: 36px 0 40px !important; }
  .bcs-abc-hero .bcs-hero-video { max-width: min(560px, 46vh) !important; }
}

@media (max-width: 782px) {
  .bcs-abc-hero .bcs-display-lg,
  .bcs-master-hero .bcs-display-lg { font-size: clamp(28px, 7vw, 38px) !important; }
  .bcs-abc-hero .bcs-hero-video { max-width: 100% !important; }
  .bcs-master-features { max-width: none; }
  .wp-block-image.bcs-product-shot { max-width: 300px; }

  /* En movil el hero de Yoseyomo seguia midiendo 922 px contra 765 de hueco
     util (844 de pantalla menos 79 de cabecera). Los tres bloques que se lo
     comian, medidos a 390 px: el lead 237, la ficha de datos 158 y los dos
     logos apilados 112. Se recortan los tres en vez de quitar contenido. */
  .bcs-master-hero .bcs-lead,
  .bcs-master-hero p.bcs-lead { font-size: 15.5px !important; margin-top: 16px !important; }
  /* La regla general pasa la ficha a una columna por debajo de 860 px: cuatro
     filas para cuatro datos de tres palabras. En dos columnas ocupa la mitad. */
  .bcs-master-hero .bcs-hero-meta {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 10px 20px;
    margin-top: 22px !important;
  }
  .bcs-master-hero .bcs-hero-meta .bcs-meta-item { font-size: 12px; }
  /* Los logos llegan con `style="width:180px"` en el <figure>: apilados eran
     112 px. Un estilo en linea sin `!important` pierde contra uno de hoja que
     si lo lleva, que es la unica forma de tocarlos sin editar el contenido. */
  .bcs-master-hero .bcs-partner-logo { width: 124px !important; }
  .bcs-master-hero .bcs-hero-actions { margin-top: 22px !important; }
}