/*
Theme Name: Blockchain School
Theme URI: https://blockchainschoolbcs.com
Author: Blockchain School
Author URI: https://blockchainschoolbcs.com
Description: Block Prism — La Academia de Blockchain Líder en Europa. Block theme with prismatic gradients, glass cards, floating prism shapes and editorial composure.
Version: 1.0.6
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blockchain-school
Domain Path: /languages
*/

/* =====================================================================
   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-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; }

.bcs-nav-row .wp-block-navigation {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14.5px;
}
.bcs-nav-row .wp-block-navigation .wp-block-navigation__container {
  gap: 28px;
}
.bcs-nav-row .wp-block-navigation a {
  color: var(--bcs-lavender);
  text-decoration: none;
  transition: color 200ms ease;
  position: relative;
}
.bcs-nav-row .wp-block-navigation a:hover,
.bcs-nav-row .wp-block-navigation .current-menu-item > a {
  color: #fff;
}
.bcs-nav-row .wp-block-navigation 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 .wp-block-navigation a:hover::after,
.bcs-nav-row .wp-block-navigation .current-menu-item > a::after { right: 0; }

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

  .bcs-mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 104px 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;
  }

  .bcs-mobile-menu .wp-block-navigation { width: 100%; font-family: 'Space Grotesk', sans-serif; }
  .bcs-mobile-menu .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .bcs-mobile-menu .wp-block-navigation-item { width: 100%; }
  .bcs-mobile-menu .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 16px 4px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: color 200ms ease;
  }
  .bcs-mobile-menu .wp-block-navigation-item__content:hover,
  .bcs-mobile-menu .current-menu-item .wp-block-navigation-item__content { color: var(--bcs-cyan); }

  .bcs-login-mobile { margin-top: 28px; width: 100%; }
  .bcs-login-mobile .wp-block-button { width: 100%; }
  .bcs-login-mobile .wp-block-button__link { display: flex; width: 100%; padding: 17px 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;
}

/* =====================================================================
   CATÁLOGO DE CURSOS — barra de filtros (chips + slider dual + switch)
   ===================================================================== */
.bcs-cursos-catalogo { color: #fff; }

/* Panel de filtros: cabecera (contador + limpiar) sobre una hairline y un
   cuerpo con los grupos (categoría / precio / solo gratis). */
.bcs-cursos-filtros {
  margin-bottom: 34px;
  padding: 18px 26px 24px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 200% at 0% 0%, rgba(34,211,238,.08), transparent 55%),
    radial-gradient(130% 200% at 100% 100%, rgba(139,92,246,.10), transparent 55%),
    rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: 0 18px 50px -28px rgba(0, 0, 0, .8);
}

/* Cabecera del panel */
.bcs-filtros-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  margin-bottom: 21px;
  border-bottom: 1px solid var(--glass-border);
}

/* Cuerpo: grupos en fila; las categorías crecen, precio y gratis a la derecha */
.bcs-filtros-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 26px 34px;
}
.bcs-filtros-body .bcs-filtro { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bcs-filtro-cats { flex: 1 1 300px; }
.bcs-filtro-rango { flex: 0 0 auto; width: 230px; }
.bcs-filtro-toggle { flex: 0 0 auto; }
.bcs-filtro-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bcs-lavender-muted);
}

/* --- Chips de categoría (clase propia para no chocar con .bcs-chip del marquee) --- */
.bcs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bcs-cat-chip {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--bcs-lavender);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--glass-border);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.bcs-cat-chip:hover {
  color: #fff;
  border-color: rgba(34, 211, 238, .5);
  transform: translateY(-1px);
}
.bcs-cat-chip.is-active {
  color: #0B0E2A;
  background: var(--gradient-prism);
  border-color: transparent;
  box-shadow: 0 6px 18px -8px rgba(34, 211, 238, .7);
}
.bcs-cat-chip:focus-visible {
  outline: none;
  border-color: rgba(34, 211, 238, .7);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .2);
}

/* --- Slider dual de precio --- */
.bcs-range {
  position: relative;
  width: 100%;
  height: 22px;
}
.bcs-range-track {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}
.bcs-range-fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--gradient-prism);
}
/* Los inputs se centran verticalmente y se limitan a la altura del thumb para
   que el círculo quede exactamente sobre la línea del track. */
.bcs-range input[type="range"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 18px;
  margin: 0;
  background: none;
  pointer-events: none;          /* el track no captura; sí los thumbs */
  -webkit-appearance: none;
  appearance: none;
}
.bcs-range input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bcs-cyan);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.bcs-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.bcs-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bcs-cyan);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.bcs-range input[type="range"]::-moz-range-track { background: transparent; }
.bcs-range-vals {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
}
.bcs-range-lbl-min,
.bcs-range-lbl-max {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--glass-border);
}
.bcs-range-sep { color: var(--bcs-lavender-muted); }
.bcs-range.is-disabled { opacity: .4; pointer-events: none; }

/* --- Toggle "solo gratis" --- */
.bcs-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.bcs-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bcs-switch-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid var(--glass-border);
  transition: background 200ms ease;
  flex-shrink: 0;
}
.bcs-switch-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 200ms cubic-bezier(.4, 1.3, .6, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.bcs-switch input:checked + .bcs-switch-track { background: var(--gradient-prism); border-color: transparent; }
.bcs-switch input:checked + .bcs-switch-track .bcs-switch-thumb { transform: translateX(18px); }
.bcs-switch input:focus-visible + .bcs-switch-track { box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); }
.bcs-switch-label { font-size: 14px; color: var(--bcs-lavender); }

/* --- Contador de resultados (en la cabecera del panel) --- */
.bcs-cursos-count {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}
.bcs-cursos-count strong { color: #fff; }

/* --- Botón limpiar filtros (cabecera, a la derecha) --- */
.bcs-filtro-reset {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bcs-lavender);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.bcs-filtro-reset .bcs-icon { width: 14px; height: 14px; }
.bcs-filtro-reset:hover { border-color: rgba(34, 211, 238, .55); color: #fff; background: rgba(34, 211, 238, .08); }
.bcs-filtro-reset[hidden] { display: none; }

/* Contenedor de resultados + estado de carga */
.bcs-cursos-resultados-wrap { position: relative; min-height: 120px; }
.bcs-cursos-resultados {
  transition: opacity 220ms ease, filter 220ms ease;
}
.bcs-cursos-catalogo.is-loading .bcs-cursos-resultados {
  opacity: .35;
  filter: saturate(.6);
  pointer-events: none;
}

/* Spinner de tres puntos, centrado sobre los resultados */
.bcs-cursos-spinner {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 5;
}
.bcs-cursos-catalogo.is-loading .bcs-cursos-spinner { opacity: 1; }
.bcs-cursos-spinner span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gradient-prism);
  animation: bcs-bounce 1s infinite ease-in-out both;
}
.bcs-cursos-spinner span:nth-child(1) { animation-delay: -0.30s; }
.bcs-cursos-spinner span:nth-child(2) { animation-delay: -0.15s; }
@keyframes bcs-bounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bcs-cursos-spinner span { animation: none; }
  .bcs-cursos-resultados { transition: none; }
}

.bcs-cursos-vacio { text-align: center; color: var(--bcs-lavender-muted); padding: 50px 0; }

/* Responsive: panel de filtros adaptado a móvil */
@media (max-width: 860px) {
  .bcs-cursos-filtros { padding: 16px 18px 20px; }
  .bcs-filtros-body { gap: 22px; }
  .bcs-filtro-cats,
  .bcs-filtro-rango,
  .bcs-filtro-toggle { flex: 1 1 100%; width: 100%; }
}

/* =====================================================================
   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; }

/* =====================================================================
   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); }

/* =====================================================================
   FACULTY GRID / TEAM
   ===================================================================== */
.bcs-faculty-card,
.bcs-team-card {
  padding: 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-faculty-card:hover,
.bcs-team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
}
.bcs-team-card { padding: 32px; text-align: center; background: rgba(255,255,255,.06); }
.bcs-team-card::before {
  content: "";
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}
.bcs-faculty-avatar,
.bcs-team-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--gradient-prism);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 18px -6px rgba(139,92,246,.5);
}
.bcs-team-avatar {
  width: 130px; height: 130px;
  margin: 0 auto 22px;
  font-size: 48px;
  box-shadow: var(--shadow-glow);
}
.bcs-faculty-avatar.alt-1, .bcs-team-avatar.alt-1 { background: linear-gradient(135deg, #FF6B5C 0%, #8B5CF6 100%); }
.bcs-faculty-avatar.alt-2, .bcs-team-avatar.alt-2 { background: linear-gradient(135deg, #22D3EE 0%, #FF8E5C 100%); }
.bcs-faculty-avatar.alt-3 { background: linear-gradient(135deg, #6366F1 0%, #22D3EE 100%); }
.bcs-faculty-avatar.alt-4 { background: linear-gradient(135deg, #FF8E5C 0%, #22D3EE 100%); }
.bcs-faculty-card h3,
.bcs-team-card h3 { font-size: 18px !important; color: #fff; margin: 0 0 4px !important; letter-spacing: -0.015em; }
.bcs-team-card h3 { font-size: 22px !important; margin-bottom: 6px !important; }
.bcs-faculty-card .bcs-role,
.bcs-team-card .bcs-role {
  font-size: 12.5px;
  color: var(--bcs-cyan) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 16px !important;
}
.bcs-team-card .bcs-role { font-size: 13px; letter-spacing: 0.08em; }
.bcs-faculty-card .bcs-bio,
.bcs-team-card .bcs-bio { font-size: 14.5px; line-height: 1.6; color: var(--bcs-lavender) !important; }
.bcs-faculty-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px !important;
}
.bcs-faculty-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, .10);
  border: 1px solid rgba(34, 211, 238, .30);
  color: var(--bcs-cyan);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Real photos (replace initial avatars) --- */
.bcs-team-photo {
  width: 132px; height: 132px;
  margin: 0 auto 22px !important;
  border-radius: 50%;
  overflow: hidden;
  padding: 3px;
  background: var(--gradient-prism);
  box-shadow: var(--shadow-glow);
}
.bcs-team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: var(--bcs-midnight-2);
}
.bcs-team-card:hover .bcs-team-photo { box-shadow: var(--shadow-glow-hover); }

.bcs-faculty-head {
  display: flex !important;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
}
.bcs-faculty-head > .wp-block-group { flex: 1; min-width: 0; }
.bcs-faculty-photo {
  width: 60px; height: 60px;
  flex-shrink: 0;
  margin: 0 !important;
  border-radius: 50%;
  overflow: hidden;
  padding: 2px;
  background: var(--gradient-prism);
  box-shadow: 0 6px 18px -6px rgba(139,92,246,.5);
}
.bcs-faculty-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: var(--bcs-midnight-2);
}

/* LinkedIn link on team cards */
.bcs-team-link {
  margin: 16px 0 0 !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bcs-team-link a {
  color: var(--bcs-lavender-muted);
  text-decoration: none;
  transition: color 240ms ease;
}
.bcs-team-link a:hover { color: var(--bcs-cyan); }

/* =====================================================================
   EDITORIAL BLOCK (mision/vision/objetivo)
   ===================================================================== */
.bcs-value-trio { margin-top: 8px; }
.bcs-editorial-block {
  padding: 38px 30px 34px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  position: relative;
  overflow: hidden;
  transition: transform 360ms cubic-bezier(0.16,1,0.3,1), border-color 360ms ease, box-shadow 360ms ease;
}
/* Left accent bar that grows on hover */
.bcs-editorial-block::before {
  content: "";
  position: absolute;
  top: 30px; bottom: 30px; left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gradient-prism);
  transform: scaleY(0.18);
  transform-origin: top;
  transition: transform 420ms cubic-bezier(0.16,1,0.3,1);
}
.bcs-editorial-block.v2::before { background: var(--gradient-coral); }
.bcs-editorial-block.v3::before { background: linear-gradient(180deg, #22D3EE 0%, #FF8E5C 100%); }
.bcs-editorial-block:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 92, 246, .45);
  box-shadow: 0 26px 50px -28px rgba(99,102,241,.65);
}
.bcs-editorial-block:hover::before { transform: scaleY(1); }
/* Oversized ghost numeral */
.bcs-editorial-block .bcs-edi-num {
  position: absolute;
  top: 8px; right: 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 116px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.10);
  margin: 0 !important;
  pointer-events: none;
  z-index: 0;
  transition: -webkit-text-stroke-color 360ms ease;
}
.bcs-editorial-block:hover .bcs-edi-num { -webkit-text-stroke-color: rgba(34,211,238,.28); }
.bcs-editorial-block .bcs-kicker,
.bcs-editorial-block h2,
.bcs-editorial-block p { position: relative; z-index: 1; }
.bcs-editorial-block .bcs-kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-cyan);
  margin: 0 0 14px !important;
}
.bcs-editorial-block.v2 .bcs-kicker { color: var(--bcs-coral-warm); }
.bcs-editorial-block.v3 .bcs-kicker { color: var(--bcs-coral); }
.bcs-editorial-block h2 { font-size: 27px !important; line-height: 1.12; color: #fff; margin: 0 0 16px !important; letter-spacing: -0.02em; }
.bcs-editorial-block p { font-size: 15.5px !important; line-height: 1.7 !important; color: var(--bcs-lavender) !important; }

/* =====================================================================
   TIMELINE
   ===================================================================== */
.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; }

/* =====================================================================
   CERT BLOCK
   ===================================================================== */
.bcs-cert-block {
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  text-align: center;
}
.bcs-cert-icon {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  border-radius: 16px;
  background: var(--gradient-prism);
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow-glow);
  letter-spacing: -0.02em;
}
.bcs-cert-icon.is-coral { background: var(--gradient-coral); }
.bcs-cert-icon .bcs-icon { width: 28px; height: 28px; }
.bcs-cert-logo {
  display: block;
  width: auto;
  height: 76px;
  margin: 0 auto 22px;
  object-fit: contain;
}
.bcs-cert-block h3 { font-size: 22px !important; color: #fff; margin: 0 0 10px !important; letter-spacing: -0.015em; }
.bcs-cert-block p  { font-size: 14.5px; line-height: 1.55; color: var(--bcs-lavender); }
.bcs-cert-block .bcs-num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: transparent;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
  background: var(--gradient-prism);
  -webkit-background-clip: text;
  background-clip: text;
}

/* =====================================================================
   TOOLS GRID (herramientas)
   ===================================================================== */
.bcs-tool-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  position: relative;
  overflow: hidden;
}
.bcs-tool-card::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: var(--gradient-prism);
  opacity: .65;
}
.bcs-tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .45);
  box-shadow: var(--shadow-card);
}
.bcs-tool-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--gradient-prism);
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -6px rgba(139,92,246,.5);
  letter-spacing: -0.02em;
}
.bcs-tool-icon.is-coral  { background: var(--gradient-coral); }
.bcs-tool-icon.is-cyan   { background: linear-gradient(135deg, #22D3EE 0%, #6366F1 100%); }
.bcs-tool-icon.is-violet { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); }

/* Icon-less cards: title with inline, compact badges */
.bcs-tool-icon { display: none; }
.bcs-tool-card > .wp-block-group > .wp-block-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.bcs-tool-card h3 { font-size: 18px !important; color: #fff; margin: 0 !important; letter-spacing: -0.015em; }
.bcs-tool-cat-chip {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}
.bcs-tool-card .bcs-tool-cat-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bcs-cyan);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .35);
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.bcs-tool-cat-chip.is-coral  { color: var(--bcs-coral); background: rgba(255,107,92,.12); border-color: rgba(255,107,92,.35); }
.bcs-tool-cat-chip.is-violet { color: #C8C9F2; background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.40); }
.bcs-tool-card p { font-size: 14px; line-height: 1.55; color: var(--bcs-lavender); flex: 1; }
.bcs-tool-card a.bcs-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
  align-self: flex-start;
  width: fit-content;
}
.bcs-tool-card a.bcs-visit::after { content: "↗"; font-size: 12px; }
.bcs-tool-card a.bcs-visit:hover { background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .45); }

/* Partner cards + badge (herramientas) */
.bcs-chip-row { gap: 6px !important; margin-top: 0; align-items: center; }
.bcs-chip-row .bcs-tool-cat-chip { margin-top: 0; }
.bcs-tool-card .bcs-tool-partner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bcs-cyan-ink, #062A30);
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF8E5C 0%, #FF6B5C 100%);
  box-shadow: 0 6px 16px -8px rgba(255, 107, 92, .75);
  white-space: nowrap;
  flex-shrink: 0;
}
.bcs-tool-partner::before { content: "★"; font-size: 9px; line-height: 1; }
.bcs-tool-card.is-partner { border-color: rgba(255, 142, 92, .34); }
.bcs-tool-card.is-partner::before { background: var(--gradient-coral); opacity: .9; }
.bcs-tool-card.is-partner:hover { border-color: rgba(255, 142, 92, .6); box-shadow: 0 24px 60px -28px rgba(255, 107, 92, .5); }

/* Hero stats strip (herramientas) */
.bcs-tools-hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: 34px;
}
.bcs-tools-hero-stats .bcs-stat { text-align: center; }
.bcs-tools-hero-stats .bcs-stat-num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #22D3EE 0%, #8B5CF6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bcs-tools-hero-stats .bcs-stat-label {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcs-lavender-muted);
}

/* Smooth anchor scrolling + offset for the sticky header & category nav */
html { scroll-behavior: smooth; }
#exchanges, #medios, #datos, #graficos, #defi { scroll-margin-top: 132px; }

/* Category sticky nav (herramientas) */
.bcs-cat-nav {
  position: sticky;
  top: 67px;
  z-index: 50;
  padding: 18px 0;
  background: rgba(6, 7, 31, .72);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.bcs-cat-nav-inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.bcs-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  color: var(--bcs-lavender);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 200ms ease, color 200ms ease, border-color 200ms ease, background 200ms ease;
  white-space: nowrap;
}
.bcs-cat-link:hover { color: #fff; border-color: rgba(139, 92, 246, .45); transform: translateY(-2px); }
.bcs-cat-link .bcs-icon { color: var(--bcs-cyan); transition: color 200ms ease; }
.bcs-cat-link:hover .bcs-icon { color: var(--bcs-violet); }
.bcs-cat-link.is-active {
  color: #fff;
  border-color: rgba(139, 92, 246, .55);
  background: rgba(139, 92, 246, .14);
}
.bcs-cat-link.is-active .bcs-icon { color: var(--bcs-violet); }

/* =====================================================================
   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;
  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; }
.bcs-article-body .bcs-master-tag { 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;
}

/* =====================================================================
   FICHA DE CURSO (shortcodes dinámicos) + RATING + RELACIONADOS
   ===================================================================== */
/* Botoneras emitidas por shortcode (sin block supports de layout). */
.bcs-sc-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.bcs-sc-buttons.is-center { justify-content: center; }
.bcs-btn-block { flex: 1 1 100%; }
.bcs-btn-block .wp-block-button__link { display: block; width: 100%; text-align: center; }

/* Rating con estrellas (tarjetas, ficha y CTA destacado). */
.bcs-course-rating { display: inline-flex; align-items: center; gap: 7px; letter-spacing: normal; }
.bcs-course-rating .bcs-stars { display: inline-flex; gap: 1px; }
.bcs-course-rating .bcs-icon { width: 14px; height: 14px; color: var(--bcs-cyan); }
.bcs-course-rating .bcs-icon.is-dim { opacity: .25; }
.bcs-course-rating .bcs-num { margin-left: 0; }
.bcs-course-rating .bcs-rating-count { color: var(--bcs-lavender-muted); font-size: 12.5px; }

/* Fila profesor + rating dentro de la tarjeta de curso. */
.bcs-course-card p.bcs-course-instructor {
  flex: 0 0 auto;
  font-size: 13px !important;
  color: var(--bcs-lavender) !important;
  margin: 14px 0 0 !important;
}
.bcs-course-instructor .bcs-course-rating { margin-left: auto; }

/* Chips de metadatos en el hero del single. */
.bcs-curso-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 6px 0 28px;
  font-size: 14px;
}

/* Tira de confianza del hero (bajo el CTA): equilibra la columna de texto con
   la ficha y aporta señales reales de certificación / acceso / comunidad. */
.bcs-curso-trust {
  list-style: none;
  margin: 30px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.bcs-curso-trust li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bcs-lavender);
}
.bcs-curso-trust li .bcs-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--bcs-cyan);
}
.bcs-curso-trust li span { line-height: 1.3; }

/* Hero del single: la columna de texto es de alineación izquierda. El hero
   prismático fuerza .bcs-lead centrado (correcto en el archive), así que aquí
   se restablece a la izquierda y se fija un ritmo vertical homogéneo. */
.bcs-course-hero .bcs-course-tag { margin: 0 0 18px; }
.bcs-course-hero .bcs-display-md { margin: 0 0 16px !important; }
.bcs-course-hero .bcs-lead,
.bcs-course-hero p.bcs-lead {
  text-align: left !important;
  margin: 0 !important;
  max-width: 540px;
}
.bcs-course-hero .bcs-sc-buttons { margin: 0; }
/* Estos dos los emite un shortcode como hijos directos de la columna (flow
   layout), así que WP les aplica `:root:root :where(.is-layout-flow) > *`
   (margin-block-start:0, especificidad 0-2-0). Hay que subir especificidad
   con `.wp-block-column` para que el margen superior se respete. */
.bcs-course-hero .wp-block-column .bcs-curso-meta-chips { margin: 26px 0 28px; }
.bcs-course-hero .wp-block-column .bcs-curso-trust { margin-top: 30px; }
@media (max-width: 781px) {
  /* En móvil las columnas se apilan: deja aire entre el bloque de texto y la ficha. */
  .bcs-course-hero .wp-block-column + .wp-block-column { margin-top: 36px; }
}

/* Ficha de compra del single. */
.bcs-price-card .bcs-ficha-rating { margin: 0 0 12px; }
.bcs-price-card .bcs-price-now.is-free {
  background: var(--gradient-prism);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bcs-price-card .bcs-small { margin-bottom: 22px; }
.bcs-price-card h4 { margin: 0 0 14px !important; font-size: 16px; }
.bcs-price-card .bcs-sc-buttons { margin-top: 4px; }

/* Título "El que inclou": era un <h4>; ahora es un <div> que replica su estilo. */
.bcs-ficha-incluye-title {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--text-primary);
  margin: 16px 0 8px;
}

/* "Lo que incluye": un icono propio por línea (mismo set que tarjetas/chips). */
.bcs-ficha-incluye li { align-items: center; }
.bcs-ficha-incluye li::before { content: none !important; }
.bcs-ficha-incluye li .bcs-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--bcs-cyan);
}

/* Sello ARP: logo grande con el texto debajo, centrado. */
.bcs-ficha-arp {
  margin: 24px 0 0 !important;
  padding-top: 22px;
  border-top: 1px solid var(--glass-border);
}
.bcs-ficha-arp a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--bcs-lavender);
  text-decoration: none;
  transition: color 200ms ease;
}
.bcs-ficha-arp a:hover { color: #fff; }
.bcs-ficha-arp img { height: 66px; width: auto; border-radius: 6px; }
.bcs-ficha-arp-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.bcs-ficha-arp .bcs-icon { width: 13px; height: 13px; color: var(--bcs-cyan); }
.bcs-ficha-colab-label { margin: 20px 0 10px !important; }
.bcs-ficha-colab { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bcs-ficha-colab img { height: 26px; width: auto; max-width: 120px; object-fit: contain; opacity: .85; }

/* Cursos relacionados (single). */
.bcs-related-section { padding: 96px 0 !important; }
.bcs-related-section:not(:has(.bcs-related-cursos)) { display: none; }
.bcs-related-cursos { position: relative; z-index: 2; }
.bcs-related-title {
  text-align: center;
  font-size: clamp(26px, 3.4vw, 38px) !important;
  letter-spacing: -0.02em;
  margin: 0 0 40px !important;
  color: #fff;
}

/* Rating centrado en el CTA destacado del archive. */
.bcs-cta-rating { display: flex; justify-content: center; margin: 0 0 8px !important; }

/* =====================================================================
   BLOG ARCHIVE  (category / tag / author / date — templates/index.html)
   ===================================================================== */
/* Hero: the archive title comes from core/query-title, the optional
   intro from core/term-description. Both must read as the prismatic hero. */
.bcs-archive-hero .wp-block-query-title {
  margin: 0 auto !important;
  max-width: 16ch;
}
.bcs-archive-hero .wp-block-term-description {
  margin: 28px auto 0 !important;
  max-width: 620px;
}
.bcs-archive-hero .wp-block-term-description,
.bcs-archive-hero .wp-block-term-description p {
  font-size: 18.5px !important;
  line-height: 1.55 !important;
  color: var(--bcs-lavender) !important;
  text-align: center;
}
.bcs-archive-hero .wp-block-term-description:empty { display: none; }

/* Card section sits cleanly below the hero. No negative-margin overlap:
   the section clips its overflow (for the float blobs), which would shave
   the top edge / category chip off the first row of cards. */
.bcs-archive-section { padding: 72px 0 110px !important; }

/* Pagination — glass pills that echo the eyebrow / category chips. */
.bcs-pagination {
  margin-top: 56px !important;
  gap: 8px !important;
  flex-wrap: wrap;
  align-items: center;
}
.bcs-pagination .wp-block-query-pagination-numbers {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 6px;
}
.bcs-pagination a,
.bcs-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  color: var(--bcs-lavender);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, color 220ms ease, background 220ms ease;
}
.bcs-pagination a:hover,
.bcs-pagination .page-numbers:hover {
  color: #fff;
  border-color: rgba(139, 92, 246, .45);
  transform: translateY(-2px);
}
.bcs-pagination .page-numbers.current {
  color: #fff;
  background: var(--gradient-prism);
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(139, 92, 246, .7);
}
/* The "…" gap is a label, not a target — no pill around it. */
.bcs-pagination .page-numbers.dots {
  background: none;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-width: 20px;
  padding: 0 2px;
  color: var(--bcs-lavender-muted);
}
.bcs-pagination .page-numbers.dots:hover { transform: none; color: var(--bcs-lavender-muted); }

/* Prev / next carry a directional arrow so the row scans at a glance. */
.bcs-pagination .wp-block-query-pagination-previous,
.bcs-pagination .wp-block-query-pagination-next {
  font-weight: 600;
  gap: 8px;
}
.bcs-pagination .wp-block-query-pagination-previous::before { content: '←'; font-size: 15px; line-height: 1; }
.bcs-pagination .wp-block-query-pagination-next::after { content: '→'; font-size: 15px; line-height: 1; }

/* Empty archive */
.bcs-no-results {
  margin: 20px auto 0;
  padding: 56px 32px;
  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-align: center;
}
.bcs-no-results h2 { font-size: 26px !important; margin: 0 0 12px !important; }
.bcs-no-results p { color: var(--bcs-lavender) !important; margin: 0 0 24px !important; }

@media (max-width: 781px) {
  .bcs-pagination a,
  .bcs-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 12px; }
}

/* =====================================================================
   DECORATIVE POST-CARD THUMBNAILS  (used on /blog/ and archives)
   Posts carry no featured image, so each card gets a prismatic header
   band. Colour rotates by position so a grid never reads as monotone.
   ===================================================================== */
.bcs-post-card .bcs-post-thumb {
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--glass-border);
}
.bcs-post-card:nth-child(3n+1) .bcs-post-thumb {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(34,211,238,.70), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(99,102,241,.45), transparent 60%),
    #0B1F33;
}
.bcs-post-card:nth-child(3n+2) .bcs-post-thumb {
  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,.50), transparent 60%),
    #1A0F33;
}
.bcs-post-card:nth-child(3n+3) .bcs-post-thumb {
  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;
}
/* Center the prism glyph as a quiet motif rather than a corner chip. */
.bcs-post-card .bcs-post-thumb .bcs-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 46px; height: 46px;
  border-radius: 14px;
  opacity: .9;
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1);
}
.bcs-post-card:hover .bcs-post-thumb .bcs-glyph {
  transform: translate(-50%, -50%) rotate(135deg);
}

/* =====================================================================
   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; }
}

/* =====================================================================
   TRANSLATEPRESS — Popup de detección automática de idioma (ALD)
   Reestiliza #trp_ald_modal_container (add-on Automatic Language Detection)
   para que encaje con la estética glass/oscura del theme. Todas las reglas
   se prefijan con #trp_ald_modal_container para ganar en especificidad a
   `automatic-language-detection/assets/css/trp-popup.css`; se usa !important
   solo donde el plugin también lo usa (top del popup, colores del enlace de
   cerrar y el glifo dashicon de la X).
   ===================================================================== */

/* Overlay a pantalla completa (el plugin ya lo fija centrado y 100vw/vh). */
#trp_ald_modal_container {
  background-color: rgba(6, 7, 31, .72);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
}

/* Tarjeta del popup: glass oscuro centrado en el viewport. */
#trp_ald_modal_container #trp_ald_modal_popup {
  position: absolute;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 460px;
  max-width: calc(100vw - 40px);
  padding: 30px 32px 24px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(139, 92, 246, .18), transparent 55%),
    linear-gradient(160deg, rgba(17, 19, 59, .98) 0%, rgba(6, 7, 31, .98) 100%);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  color: var(--text);
}

/* Texto del mensaje. */
#trp_ald_modal_container #trp_ald_popup_text {
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

#trp_ald_modal_container .trp_ald_select_and_button {
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 15px;
}

#trp_ald_modal_container .trp_ald_button {
  margin-left: 0;
}

/* --- Selector de idioma (dropdown TRP) como campo oscuro --- */
#trp_ald_modal_container .trp_ald_ls_container {
  color: var(--text);
  font-size: 15px;
}

/* IMPORTANTE: se usan longhand `background-color`/`background-image:none` en vez
   del shorthand `background`. El plugin dibuja el caret del <select> con dos
   gradientes lineales sobre estos mismos divs; el shorthand reseteaba
   `background-size` a `auto`, así que esos gradientes rellenaban TODO el campo
   (se veía un recuadro lavanda con un triángulo). Aquí se anula el caret del
   plugin y se dibuja uno propio con ::after. */
#trp_ald_modal_container .trp_ald_ls_container .trp-ls-shortcode-current-language,
#trp_ald_modal_container .trp_ald_ls_container [special-selector="trp_ald_popup_current_language"] {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, .05);
  background-image: none;
  color: var(--text);
  font-size: 15px;
  overflow: visible;
}

/* Chevron propio (sustituye al caret de gradientes del plugin). */
#trp_ald_modal_container .trp_ald_ls_container .trp-ls-shortcode-current-language::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--bcs-lavender);
  border-bottom: 2px solid var(--bcs-lavender);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Lista desplegable de idiomas (se muestra al hover/click). */
#trp_ald_modal_container .trp_ald_ls_container .trp-ls-shortcode-language {
  height: auto;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background-color: #11133B;
  background-image: none;
  color: var(--text);
  box-shadow: var(--shadow-card);
}

#trp_ald_modal_container .trp_ald_ls_container .trp-ald-popup-select {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
}

#trp_ald_modal_container .trp_ald_ls_container .trp-ls-shortcode-language > div:hover {
  background: var(--accent);
  color: #fff;
}

/* Banderas: quita el padding-top del plugin (rompe el centrado flex). */
#trp_ald_modal_container .trp_ald_ls_container img.trp-flag-image {
  padding-top: 0;
  margin: 0 9px 0 0;
  border-radius: 2px;
}

/* --- Botón "Cambiar idioma": píldora con gradiente prisma del theme --- */
#trp_ald_modal_container #trp_ald_popup_change_language {
  height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--gradient-prism);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-glow);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#trp_ald_modal_container #trp_ald_popup_change_language:hover {
  background: var(--gradient-prism);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-hover);
}

/* --- Enlace "Cerrar y no cambiar de idioma" --- */
#trp_ald_modal_container #trp_ald_x_button_and_textarea {
  width: auto; /* el plugin lo fija a 50%, lo ensancha innecesariamente */
}

#trp_ald_modal_container #trp_ald_x_button_and_textarea,
#trp_ald_modal_container #trp_ald_x_button_textarea {
  color: var(--text-muted) !important;
  font-size: 13px;
  transition: color 180ms ease;
}

#trp_ald_modal_container #trp_ald_x_button_and_textarea:hover #trp_ald_x_button_textarea {
  color: #fff !important;
}

#trp_ald_modal_container #trp_ald_modal_popup #trp_ald_x_button::before {
  color: var(--text-muted) !important;
}

/* =====================================================================
   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; }
}

/* =====================================================================
   COMPLIANZ — Banner de cookies
   Reestiliza el banner (#cmplz-cookiebanner-container) y la pestaña
   "Gestionar consentimiento" para que encajen con la estética glass/oscura
   del theme.

   ESPECIFICIDAD: este stylesheet se imprime ANTES que
   `uploads/complianz/css/banner-1-optin.css`, así que el orden de origen NO
   ayuda: todas las reglas se prefijan con `#cmplz-cookiebanner-container`
   (o `#cmplz-manage-consent`) y replican la cadena de clases del plugin,
   quedando siempre un ID por encima. No hace falta ningún !important salvo
   donde el plugin lo usa.

   El plugin declara sus variables (--cmplz_*) en `:root`, de modo que
   redefinirlas sobre el propio banner basta para que las hereden todos los
   descendientes; sólo se sobrescriben propiedades sueltas donde el plugin
   codifica el valor a mano (fondo de las categorías, fill de los chevrons).
   ===================================================================== */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
  /* Variables del plugin, repintadas con los tokens del theme. */
  --cmplz_banner_border_color:              var(--glass-border);
  --cmplz_banner_border_width:              1px;
  --cmplz_banner_border_radius:             var(--radius-lg);
  --cmplz_banner_margin:                    10px;
  --cmplz_text_color:                       var(--text-secondary);
  --cmplz_hyperlink_color:                  var(--bcs-cyan);
  --cmplz_title_font_size:                  17px;
  --cmplz_text_font_size:                   13.5px;
  --cmplz_link_font_size:                   12.5px;
  --cmplz_category_body_font_size:          13px;
  --cmplz_category_header_title_font_size:  14px;
  --cmplz_category_header_active_font_size: 12px;
  --cmplz_category_header_always_active_color: var(--bcs-cyan);
  --cmplz_button_font_size:                 14.5px;
  --cmplz_button_border_radius:             var(--radius-sm);
  --cmplz_slider_active_color:              var(--bcs-cyan);
  --cmplz_slider_inactive_color:            rgba(255, 255, 255, .22);
  --cmplz_slider_bullet_color:              #fff;

  /* Tarjeta glass (mismo tratamiento que el popup de TranslatePress). */
  padding: 22px 24px 20px;
  gap: 12px;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(139, 92, 246, .18), transparent 55%),
    linear-gradient(160deg, rgba(17, 19, 59, .97) 0%, rgba(6, 7, 31, .97) 100%);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  color: var(--text);
  font-family: var(--wp--preset--font-family--inter, 'Inter', system-ui, sans-serif);
}

/* OJO: el banner no declara `width`; en escritorio su ancho lo fijaban sus
   hijos vía `calc(var(--cmplz_banner_width) - 42px)`, un cálculo que asume el
   padding original de 20px del plugin. Al subir el padding a 24px ese cálculo
   desborda, así que el ancho se declara aquí explícitamente y los hijos pasan
   a fluir al 100%. Sin esta línea el banner se estira a todo el viewport. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  width: var(--cmplz_banner_width);
  max-width: calc(100vw - 20px);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
  width: 100%;
  max-width: 100%;
}

/* --- Cabecera --- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  font-family: var(--wp--preset--font-family--space-grotesk, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
  color: var(--text-muted);
  transition: color 200ms ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible {
  color: var(--text);
}

/* Separadores: el plugin los deja a 0px de alto, aquí se dibujan como hairline
   a sangre (compensando el margen negativo de -20px con el padding real). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
  height: 1px;
  margin-left: -24px;
  margin-right: -24px;
  background: var(--border);
}

/* --- Mensaje y enlaces --- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
  color: var(--text-secondary);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
  color: var(--bcs-cyan);
  text-underline-offset: 3px;
  transition: color 200ms ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
  color: var(--text);
}

/* --- Categorías (Funcional / Preferencias / Estadísticas / Marketing) --- */
/* El plugin codifica rgba(239,239,239,.5) a mano: hay que anularlo. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
  color: var(--text);
  font-weight: 600;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
  color: var(--text-muted);
  line-height: 1.5;
}

/* Chevron de desplegar: el <path> del SVG no trae fill, así que sin esto se
   pinta negro sobre fondo oscuro. `fill` se hereda desde el <svg>. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
  color: var(--text-muted);
  transition: color 200ms ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle:hover {
  color: var(--bcs-cyan);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open svg {
  fill: currentColor;
}

/* Foco del switch: el plugin usa un azul suelto (#245FCC). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before {
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .55);
}

/* --- Botones --- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform 200ms ease, box-shadow 200ms ease,
              background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

/* Aceptar: CTA con el gradiente prisma del theme. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
  background: var(--gradient-prism);
  background-color: transparent;
  border: 1px solid transparent;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-hover);
}

/* Denegar / Ver preferencias / Guardar preferencias: botones fantasma glass. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
  background-color: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
  background-color: rgba(255, 255, 255, .12);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Scrollbar del cuerpo (WebKit): el plugin la pinta con el color del botón
   aceptar, que ahora es un gradiente y no vale como background-color. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
}

/* --- Pestaña flotante "Gestionar consentimiento" (post-consentimiento) --- */
/* El plugin la estiliza con `#cmplz-manage-consent .cmplz-manage-consent`
   (1,1,0); con `.cmplz-btn` extra se sube a (1,2,0) y gana. */
#cmplz-manage-consent .cmplz-btn.cmplz-manage-consent {
  background: linear-gradient(160deg, rgba(17, 19, 59, .97) 0%, rgba(6, 7, 31, .97) 100%);
  border-color: var(--glass-border);
  border-bottom: 0;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-card);
}
#cmplz-manage-consent .cmplz-btn.cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-btn.cmplz-manage-consent:focus-visible {
  color: var(--text);
}

@media (max-width: 768px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    /* A ancho completo el plugin la pega abajo: sin esquinas inferiores.
       El `width: 100%` replica el del plugin, que aquí perdería por
       especificidad frente a la regla de escritorio de arriba. */
    width: 100%;
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 20px 20px 18px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
    margin-left: -20px;
    margin-right: -20px;
  }
}

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