/* =========================================================
   ProtokolCloud — Design Tokens (Guía de Estilos de marca)
   ========================================================= */
:root{
  --pc-primary: #0097D8;      /* Protokol Blue */
  --pc-secondary: #005B99;    /* Deep Cloud Blue */
  --pc-accent: #00D2FF;       /* Electric Cyan */
  --pc-light: #F6FBFF;        /* Cloud White */
  --pc-dark: #1F2A33;         /* Dark Slate */

  --pc-font-title: 'Roboto', sans-serif;
  --pc-font-body: 'Open Sans', sans-serif;

  --pc-radius: 14px;
  --pc-shadow: 0 10px 30px rgba(0,0,0,.12);
  --pc-max-width: 1180px;
}

/* Reset básico */
*, *::before, *::after{ box-sizing: border-box; }
body{
  margin:0;
  font-family: 'Open Sans', sans-serif;
  color: #1F2A33;
  background: #ffffff;
  line-height: 1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: #005B99; text-decoration:none; }
a:hover{ color: #0097D8; }

h1,h2,h3,h4,h5,h6{
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #1F2A33;
  line-height: 1.2;
  margin: 0 0 .5em;
}

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 14px 22px;
  border-radius: 12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
}
.btn-primary{
  background: linear-gradient(135deg, #0097D8, #005B99);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.btn-primary:hover{ opacity:.92; color:#fff; }
.btn-outline{
  background: transparent;
  border: 2px solid #0097D8;
  color: #0097D8;
}

/* =========================================================
   Íconos (Material Symbols, según Guía de Estilos)
   ========================================================= */
.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 18px;
  vertical-align: middle;
  line-height: 1;
  opacity: 0;
}
html.pc-fonts-ready .material-symbols-outlined{
  opacity: 1;
  transition: opacity .15s ease;
}

/* =========================================================
   Topbar de confianza (enterprise trust signal)
   ========================================================= */
.topbar{
  background: #005B99;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  padding: 8px 0;
}
.topbar-inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:4px; }
.topbar-divider{
  width:1px; height:14px;
  background: rgba(255,255,255,.35);
  flex-shrink:0;
}
.topbar-tag{
  font-family:'Roboto', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;
  color:#00D2FF;
  white-space:nowrap;
}
.topbar-right a{ color: rgba(255,255,255,.92); display:flex; align-items:center; gap:6px; }
.topbar-right a:hover{ color: #00D2FF; }
@media (max-width: 1050px){
  .topbar-divider, .topbar-tag{ display:none; }
}
@media (max-width: 700px){ .topbar-left{ display:none; } }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  background: #1F2A33;
  padding: 18px 0;
  position: sticky;
  top:0;
  z-index: 999;
  transition: padding .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled{
  padding: 10px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-logo img{ height: 42px; width:auto; }
.site-logo{ color:#fff; font-family:'Roboto', sans-serif; font-weight:900; font-size:20px; }

.site-brand{ display:flex; align-items:center; gap:16px; min-width:0; }

.main-nav ul{
  list-style:none;
  display:flex;
  gap: 28px;
  margin:0;
  padding:0;
}
.main-nav a{
  color: rgba(255,255,255,.88);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing:.02em;
}
.main-nav a:hover{ color: #00D2FF; }

/* Submenús desplegables */
.main-nav li{ position: relative; }
.main-nav .menu-item-has-children > a::after{
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  vertical-align: middle;
}
.main-nav ul ul{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 10px;
  z-index: 1000;
  flex-direction: column;
  gap: 2px;
}
.main-nav ul ul li{ width: 100%; }
.main-nav ul ul a{
  color: #1F2A33;
  text-transform: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
}
.main-nav ul ul a:hover{
  background: #F6FBFF;
  color: #005B99;
}
.main-nav li:hover > ul{ display: flex; }

/* Botón CTA dentro de la nav */
.main-nav .nav-cta a{
  background: linear-gradient(135deg, #0097D8, #005B99);
  padding: 10px 18px;
  border-radius: 10px;
  color: #fff !important;
}

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding: 4px; }
.nav-toggle span{
  display:block; width:26px; height:3px; background:#fff; margin:5px 0; border-radius:2px;
}

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .main-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background: #1F2A33;
    padding: 12px 24px 24px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:0; }
  .main-nav li{ width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  .main-nav > ul > li > a{ display:block; padding: 14px 0; }
  .main-nav ul ul{
    position: static;
    display: none;
    box-shadow: none;
    background: rgba(255,255,255,.04);
    border-radius: 8px;
    padding: 4px 0 8px 16px;
  }
  .main-nav ul ul a{ color: rgba(255,255,255,.75); padding: 10px 6px; }
  .main-nav ul ul a:hover{ background: transparent; color: #00D2FF; }
  .main-nav li.submenu-open > ul{ display: flex; flex-direction: column; }
  .main-nav .menu-item-has-children > a::after{ float: right; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  background: linear-gradient(160deg, #005B99 0%, #1F2A33 100%);
  color:#fff;
  padding: 90px 0;
  overflow:hidden;
  position:relative;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items:center;
}
.hero h1{ color:#fff; font-size: 44px; margin-bottom: 18px; }
.hero p{ font-size: 18px; color: rgba(255,255,255,.85); max-width: 560px; }
.hero-media{
  border-radius: 50%;
  overflow:hidden;
  aspect-ratio: 1/1;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.hero-actions{ display:flex; gap:14px; margin-top: 26px; flex-wrap:wrap; }

@media (max-width: 860px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 32px; }
}

/* =========================================================
   Secciones genéricas / tarjetas
   ========================================================= */
.section{ padding: 70px 0; }
.section-alt{ background: #F6FBFF; }
.section-title{ text-align:center; max-width: 720px; margin: 0 auto 46px; }
.section-title h2{ font-size: 32px; }
.section-title p{ color: rgba(31,42,51,.7); font-size:17px; }

.eyebrow{
  display:block;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  font-weight: 700;
  color: #005B99;
  margin-bottom: 10px;
}

.grid{
  display:grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

.card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.card h3{ font-size:20px; color: #005B99; }
/* =========================================================
   Hero oscuro tipo "landing enterprise" (usa solo paleta Protokol)
   ========================================================= */
.hero-dark{
  background: radial-gradient(circle at 20% 0%, rgba(0,151,216,.18), transparent 55%),
              linear-gradient(180deg, #1F2A33 0%, #10161c 100%);
  color:#fff;
  padding: 100px 0 70px;
  text-align: center;
}
.hero-dark .eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,151,216,.4);
  background: rgba(0,151,216,.1);
  color: #00D2FF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hero-dark .eyebrow-pill .dot{
  width:6px; height:6px; border-radius:50%; background: #00D2FF;
}
.hero-dark h1{
  color:#fff;
  font-size: 46px;
  max-width: 900px;
  margin: 0 auto 20px;
  line-height: 1.15;
}
.hero-dark h1 .highlight{
  background: linear-gradient(135deg, #0097D8, #00D2FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-dark p{
  color: rgba(255,255,255,.75);
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: 18px;
}
.hero-dark .hero-actions{ justify-content: center; margin-top: 0; }

.hero-dark .pc-stats-bar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  max-width: 920px;
  margin: 50px auto 0;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.14);
  text-align: center;
}
.hero-dark .pc-stat-number{
  background: linear-gradient(135deg, #fff, #00D2FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 34px;
}
.hero-dark .pc-stat-label{ color: rgba(255,255,255,.7) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 700px){
  .hero-dark h1{ font-size: 32px; }
}

/* =========================================================
   Sección oscura genérica (para testimonios, cursos, lead-form)
   ========================================================= */
.section-dark{
  background: #1F2A33;
  color: #fff;
  padding: 70px 0;
}
.section-dark .section-title h2{ color:#fff; }
.section-dark .section-title p{ color: rgba(255,255,255,.6); }
.section-dark .eyebrow{
  display:block;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  font-weight: 700;
  color: #00D2FF;
  margin-bottom: 10px;
}

/* =========================================================
   Tarjetas de curso con badge de certificación
   Por defecto: fondo claro (fácil de leer, confiable).
   Dentro de .section-dark: variante oscura para el hero/CTA.
   ========================================================= */
.pc-course-card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s ease, border-color .2s ease;
}
.pc-course-card:hover{ transform: translateY(-4px); border-color: #0097D8; }
.pc-course-card.is-popular{ border-color: rgba(0,151,216,.5); }
.pc-course-card .ribbon{
  position: absolute;
  top: 0; right: 0;
  background: linear-gradient(135deg, #0097D8, #005B99);
  color:#fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-bottom-left-radius: 10px;
}
.pc-course-badge{
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0097D8, #005B99);
  display:flex; align-items:center; justify-content:center;
}
.pc-course-badge .material-symbols-outlined{ color:#fff; font-size: 30px; }
.pc-course-badge-img{
  display: block;
  width: 60px; height: 60px;
  max-width: 60px; max-height: 60px;
  object-fit: contain;
  margin: 0 auto 12px;
}
.pc-level-label{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(31,42,51,.5);
  margin-bottom: 4px;
}
.pc-level-stars{ margin-bottom: 10px; }
.pc-level-stars .material-symbols-outlined{ font-size: 15px; font-variation-settings: 'FILL' 1; }
.pc-level-stars .is-filled{ color: #ffb020; }
.pc-level-stars .is-empty{ color: rgba(0,0,0,.15); }

.section-dark .pc-level-label{ color: rgba(255,255,255,.5); }
.section-dark .pc-level-stars .is-empty{ color: rgba(255,255,255,.2); }
.pc-course-card .code{
  display:block;
  color: #005B99;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.pc-course-card h3{ color: #1F2A33; font-size: 17px; margin-bottom: 8px; }
.pc-course-card p{ color: rgba(31,42,51,.75); font-size: 14px; margin:0 0 16px; }
.pc-course-cta{ width: 100%; justify-content: center; margin-top: auto; }

.section-dark .pc-course-cta{ color:#fff; border-color: rgba(255,255,255,.4); }

.section-dark .pc-course-card{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow:none; }
.section-dark .pc-course-card .code{ color: #00D2FF; }
.section-dark .pc-course-card h3{ color:#fff; }
.section-dark .pc-course-card p{ color: rgba(255,255,255,.65); }

/* =========================================================
   Checklist "Por qué es oficial" (señales de confianza sin logos)
   ========================================================= */
.pc-trust-checklist{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
}
.pc-trust-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.pc-trust-item .material-symbols-outlined{
  color: #0097D8;
  font-size: 22px;
  flex-shrink: 0;
}
.pc-trust-item span.label{ color: rgba(31,42,51,.8); font-size: 14px; line-height: 1.5; }
@media (max-width: 700px){ .pc-trust-checklist{ grid-template-columns: 1fr; } }

.section-dark .pc-trust-item{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); box-shadow:none; }
.section-dark .pc-trust-item .material-symbols-outlined{ color: #00D2FF; }
.section-dark .pc-trust-item span.label{ color: rgba(255,255,255,.85); }

/* =========================================================
   Testimonios (prueba social)
   ========================================================= */
.pc-testimonial-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.pc-testimonial-stars{ color: #ffb020; letter-spacing: 2px; margin-bottom: 12px; font-size: 15px; }
.pc-testimonial-quote{ color: #1F2A33; font-style: italic; line-height: 1.6; margin-bottom: 20px; }
.pc-testimonial-author{ display:flex; align-items:center; gap: 12px; }
.pc-testimonial-avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0097D8, #00D2FF);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  display:flex; align-items:center; justify-content:center;
  font-size: 14px;
}
.pc-testimonial-name{ color: #1F2A33; font-weight: 700; font-size: 14px; }
.pc-testimonial-role{ color: rgba(31,42,51,.65); font-size: 12px; }

.section-dark .pc-testimonial-card{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow:none; }
.section-dark .pc-testimonial-quote{ color: rgba(255,255,255,.85); }
.section-dark .pc-testimonial-name{ color:#fff; }
.section-dark .pc-testimonial-role{ color: rgba(255,255,255,.55); }

/* =========================================================
   Formulario de lead avanzado (dos columnas, sobre fondo oscuro)
   ========================================================= */
.pc-lead-form{
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 32px;
}
.pc-lead-form .eyebrow{ text-align:left; }
.pc-lead-form h3{ color:#fff; margin: 0 0 4px; }
.pc-lead-form .subtitle{ color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 24px; }
.pc-lead-form .pc-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px){ .pc-lead-form .pc-form-row{ grid-template-columns: 1fr; } }
.pc-lead-form label{
  display:block; font-family: 'Roboto', sans-serif; font-weight:700;
  font-size:13px; margin-bottom:6px; color: rgba(255,255,255,.85);
}
.pc-lead-form input,
.pc-lead-form select,
.pc-lead-form textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  margin-bottom: 16px;
}
.pc-lead-form input::placeholder,
.pc-lead-form textarea::placeholder{ color: rgba(255,255,255,.35); }
.pc-lead-form select option{ color: #1F2A33; background: #fff; }
.pc-lead-form textarea{ min-height: 90px; resize: vertical; }
.pc-lead-form .btn-primary{ width:100%; justify-content:center; }
.pc-lead-form .trust-note{
  text-align:center;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-top: 14px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.pc-lead-form .trust-note a{ color: rgba(255,255,255,.7); }

/* =========================================================
   Botón flotante de WhatsApp
   ========================================================= */
.pc-whatsapp-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 9999;
  transition: transform .2s ease;
}
.pc-whatsapp-float:hover{ transform: scale(1.08); }
.pc-whatsapp-float .material-symbols-outlined{ color:#fff; font-size: 30px; }

.card .badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: #0097D8;
  background: rgba(0,151,216,.1);
  padding:4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* Feature cards con ícono */
.pc-feature-card{ text-align: left; }
.pc-feature-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0097D8, #005B99);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pc-feature-icon .material-symbols-outlined{ color: #fff; font-size: 26px; }

/* Barra de estadísticas (social proof) */
.pc-stats-bar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  text-align: center;
  margin: 2em 0;
}
.pc-stat-number{
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 40px;
  background: linear-gradient(135deg, #0097D8, #00D2FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pc-stat-label{
  font-size: 14px;
  color: rgba(31,42,51,.65);
  margin-top: 4px;
}

/* =========================================================
   Trainings (CPT)
   ========================================================= */
.training-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 14px 0;
}
.training-meta span{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.1);
  color: rgba(31,42,51,.75);
}

.training-cta{
  margin-top: 40px;
  padding: 34px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(6,15,30,.95), #1F2A33);
  color:#fff;
}
.training-cta h2{ color:#fff; font-size: 26px; }
.training-cta p{ color: rgba(255,255,255,.85); max-width: 760px; }

/* =========================================================
   Formulario de contacto (custom, sin plugin)
   ========================================================= */
.pc-form{
  max-width: 640px;
  margin: 0 auto;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.pc-form label{
  display:block;
  font-family: 'Roboto', sans-serif;
  font-weight:700;
  font-size:14px;
  margin-bottom:6px;
  color: #1F2A33;
}
.pc-form input,
.pc-form select,
.pc-form textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  margin-bottom: 18px;
}
.pc-form textarea{ min-height: 120px; resize: vertical; }
.pc-form .pc-form-msg{
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pc-form .pc-form-msg.success{ background: rgba(0,151,216,.12); color: #005B99; }
.pc-form .pc-form-msg.error{ background: rgba(200,40,40,.1); color: #a41f1f; }

/* =========================================================
   Contenido enriquecido (imported/editor content)
   Aplica a cualquier texto traído del sitio viejo vía WXR,
   para que se vea pulido sin tener que re-diseñar cada página.
   ========================================================= */
.single-content h1{ font-size: 36px; margin-top: 1.2em; }
.single-content h1:first-child{ margin-top: 0; }

.single-content h2{
  font-size: 24px;
  margin-top: 2em;
  padding-left: 18px;
  border-left: 5px solid #0097D8;
  line-height: 1.3;
}
.single-content h3{ font-size: 19px; color: #005B99; margin-top: 1.6em; }
.single-content p{ margin: 0 0 1.1em; }
.single-content p:first-of-type{ font-size: 18px; color: rgba(31,42,51,.75); }
.single-content strong{ color: #1F2A33; }
.single-content a{ text-decoration: underline; text-decoration-color: rgba(0,151,216,.35); text-underline-offset: 3px; }

.single-content ul, .single-content ol{ padding-left: 4px; margin: 0 0 1.4em; list-style: none; }
.single-content ul li{ position: relative; padding-left: 30px; margin-bottom: 10px; line-height: 1.55; }
.single-content ul li::before{
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, #0097D8, #005B99);
}
.single-content ol{ counter-reset: pc-counter; padding-left: 0; }
.single-content ol li{ position: relative; padding-left: 34px; margin-bottom: 10px; counter-increment: pc-counter; }
.single-content ol li::before{
  content: counter(pc-counter);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: #F6FBFF; color: #005B99;
  font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.single-content blockquote{
  margin: 1.6em 0; padding: 18px 24px;
  border-left: 4px solid #00D2FF;
  background: #F6FBFF; border-radius: 0 12px 12px 0;
  font-style: italic; color: #005B99;
}
.single-content table{ width: 100%; border-collapse: collapse; margin: 1.6em 0; }
.single-content table th{ background: #005B99; color: #fff; padding: 10px 14px; text-align: left; }
.single-content table td{ padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.08); }
.single-content img{ border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.single-content hr{ border: none; border-top: 1px solid rgba(0,0,0,.1); margin: 2.4em 0; }

/* =========================================================
   Shortcodes reutilizables: CTA, precio, badges
   ========================================================= */
.pc-badge{
  display:inline-block; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  color: #005B99; background: rgba(0,151,216,.12);
  padding:5px 12px; border-radius: 999px; margin: 0 6px 6px 0;
}
.pc-cta-box{
  margin: 2.4em 0; padding: 34px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(6,15,30,.95), #1F2A33); color:#fff;
}
.pc-cta-box h2, .pc-cta-box h3{ color:#fff; border-left: none; padding-left: 0; margin-top: 0; }
.pc-cta-box p{ color: rgba(255,255,255,.85); max-width: 760px; }

.pc-price-card{
  border: 2px solid #0097D8; border-radius: 14px;
  padding: 30px; text-align: center; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12); max-width: 360px; margin: 0 auto 2em;
}
.pc-price-card .amount{ font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 42px; color: #005B99; margin: 6px 0; }
.pc-price-card .period{ font-size: 14px; color: rgba(31,42,51,.6); }
.pc-price-card .btn{ width: 100%; justify-content: center; margin-top: 16px; }

.pc-course-layout{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.pc-course-sidebar{ position: sticky; top: 100px; }
@media (max-width: 900px){
  .pc-course-layout{ grid-template-columns: 1fr; }
  .pc-course-sidebar{ position: static; }
}

/* =========================================================
   Blog
   ========================================================= */
.post-card{ margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid rgba(0,0,0,.08); }
.post-card .post-date{ font-size:13px; color: rgba(31,42,51,.6); text-transform:uppercase; letter-spacing:.04em; }
.post-card h2{ font-size: 26px; margin: 8px 0 12px; }
.post-card h2 a{ color: #1F2A33; }
.post-card h2 a:hover{ color: #0097D8; }

/* =========================================================
   Tarjetas de blog con imagen (home: "Últimos Artículos")
   ========================================================= */
.pc-blog-card{
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .2s ease;
}
.pc-blog-card:hover{ transform: translateY(-4px); }
.pc-blog-card .thumb{
  display:block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.pc-blog-card .thumb-placeholder{
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #0097D8, #005B99);
  display:flex; align-items:center; justify-content:center;
}
.pc-blog-card .thumb-placeholder .material-symbols-outlined{ color: rgba(255,255,255,.6); font-size: 46px; }
.pc-blog-card .body{ padding: 22px; }
.pc-blog-card .cat-pill{
  display:inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #005B99;
  background: rgba(0,151,216,.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.pc-blog-card h3{ font-size: 18px; line-height: 1.35; margin-bottom: 12px; }
.pc-blog-card .excerpt{
  font-size: 14px;
  color: rgba(31,42,51,.65);
  margin: 0 0 12px;
}
.pc-blog-card h3 a{ color: #1F2A33; }
.pc-blog-card h3 a:hover{ color: #0097D8; }
.pc-blog-card .meta{
  display:flex; align-items:center; gap:6px;
  font-size: 13px; color: rgba(31,42,51,.55);
}
.pc-blog-card .meta .material-symbols-outlined{ font-size: 16px; }

.single-content{ max-width: 780px; margin: 0 auto; }
.single-content img{ border-radius: 14px; margin: 24px 0; }

/* =========================================================
   Homologación de estilos en todo el sitio (v1.5.0)
   Misma jerarquía tipográfica en blogs, noticias, páginas,
   cursos y trainings. No requiere clases manuales al publicar.
   ========================================================= */
.section-title h1{ font-size: 32px; }
.post-date{
  font-size: 13px; color: rgba(31,42,51,.6);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}
.single-content .pc-badge{ margin-bottom: 10px; }
.training-cta .btn{ margin-top: 16px; }

@media (max-width: 768px){
  .single-content h1{ font-size: 28px; }
  .section-title h1{ font-size: 26px; }
  .training-cta{ padding: 24px; }
  .training-cta h2{ font-size: 22px; }
}

/* =========================================================
   Blindaje de cajas oscuras (CTA) dentro de .single-content
   Evita que hereden colores oscuros y márgenes del contenido:
   texto siempre legible sobre fondo oscuro.
   ========================================================= */
.single-content .training-cta h2,
.single-content .pc-cta-box h2{
  margin-top: 0;
  color: #fff;
}
.single-content .training-cta p,
.single-content .training-cta p:first-of-type,
.single-content .pc-cta-box p,
.single-content .pc-cta-box p:first-of-type{
  color: rgba(255,255,255,.85);
  font-size: 16px;
}
.single-content .training-cta strong,
.single-content .pc-cta-box strong{ color: #fff; }
.single-content .training-cta a:not(.btn),
.single-content .pc-cta-box a:not(.btn){
  color: #00D2FF;
  text-decoration-color: rgba(0,210,255,.5);
}
.single-content .training-cta label{ color: rgba(255,255,255,.9); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background: linear-gradient(135deg, #1F2A33 0%, #005B99 100%);
  color: rgba(255,255,255,.75);
  padding: 56px 0 26px;
  margin-top: 60px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-brand p{ max-width: 320px; }
.footer-social{ margin-top: 16px; display:flex; gap: 10px; }
.footer-social a{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.footer-social a:hover{ background: #00D2FF; color: #1F2A33; }
.site-footer h4{ color:#fff; font-size:16px; margin-bottom:14px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom: 10px; }
.site-footer a{ color: rgba(255,255,255,.75); }
.site-footer a:hover{ color: #00D2FF; }
.footer-bottom{
  text-align:center;
  font-size:13px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Página de Contacto (split layout)
   ========================================================= */
.pc-contact-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}
.pc-contact-media{
  position: relative;
  overflow: hidden;
}
.pc-contact-map{
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  filter: grayscale(.15) contrast(1.05);
}
.pc-contact-info-card{
  position: absolute;
  left: 24px; bottom: 24px;
  max-width: 360px;
  background: linear-gradient(160deg, rgba(6,15,30,.95), rgba(0,91,153,.92));
  color: #fff;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 2;
}
.pc-contact-info-card .eyebrow{ color: #00D2FF; text-align:left; }
.pc-contact-info-card h1{ color:#fff; font-size: 26px; margin-bottom: 14px; }
.pc-contact-info-card p{ color: rgba(255,255,255,.85); margin: 4px 0; font-size: 14px; }
.pc-contact-info-card .footer-social{ margin-top: 16px; }
.pc-contact-form-wrap{
  background: #fff;
  padding: 80px 60px;
  display: flex;
  align-items: center;
}
.pc-contact-form-wrap .pc-form{
  box-shadow: none;
  border: none;
  padding: 0;
  max-width: none;
  width: 100%;
}
@media (max-width: 900px){
  .pc-contact-split{ grid-template-columns: 1fr; }
  .pc-contact-media{ height: 420px; }
  .pc-contact-form-wrap{ padding: 50px 28px; }
  .pc-contact-info-card{ left:16px; right:16px; max-width:none; }
}

/* =========================================================
   v1.3 — Logo en header
   ========================================================= */
.site-logo-img,
.site-logo .custom-logo{
  display:block;
  height: 74px;
  width: auto;
  margin: -15px 0;
}

/* =========================================================
   v1.3 — Hero split: copy + formulario corto de lead
   ========================================================= */
.hero-dark.hero-split{ text-align: left; padding: 72px 0 64px; position: relative; overflow: hidden; }
.hero-cloud-float{
  position: absolute;
  right: -60px;
  top: -40px;
  width: 480px;
  opacity: .05;
  pointer-events: none;
  animation: pcCloudFloat 10s ease-in-out infinite;
}
@keyframes pcCloudFloat{
  0%,100%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-18px) translateX(10px); }
}
@media (prefers-reduced-motion: reduce){
  .hero-cloud-float{ animation: none; }
}
@media (max-width: 960px){
  .hero-cloud-float{ width: 320px; right: -80px; }
}
.hero-split-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
.hero-dark.hero-split h1{ margin: 0 0 18px; max-width: none; }
.hero-dark.hero-split p{ margin: 0 0 14px; max-width: 560px; }
.hero-dark.hero-split .pc-stats-bar{
  text-align: left;
  margin: 36px 0 0;
  padding-top: 30px;
  max-width: none;
}
@media (max-width: 960px){
  .hero-split-grid{ grid-template-columns: 1fr; gap: 40px; }
}

.pc-hero-form{
  background: #fff;
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.pc-hero-form h2{
  font-size: 21px;
  color: #1F2A33;
  margin: 0 0 6px;
}
.pc-hero-form .subtitle{
  font-size: 14px;
  color: rgba(31,42,51,.65) !important;
  margin: 0 0 18px;
  max-width: none;
}
.pc-hero-form input,
.pc-hero-form select{
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid rgba(31,42,51,.18);
  border-radius: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #1F2A33;
  background: #fff;
  margin-bottom: 12px;
}
.pc-hero-form input:focus,
.pc-hero-form select:focus{ border-color: #0097D8; outline: none; }
.pc-hero-form .btn-primary{ width: 100%; justify-content: center; }
.pc-hero-form .alt-contact{
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(31,42,51,.6) !important;
}
.pc-hero-form .alt-contact a{ color: #0097D8; font-weight: 700; }

/* =========================================================
   v1.3 — Feature cards enterprise: reveal + CTA por card
   ========================================================= */
.pc-feature-card{
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,91,153,.14);
  box-shadow: 0 4px 14px rgba(0,91,153,.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pc-feature-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,91,153,.16);
  border-color: #0097D8;
}
.pc-feature-card p{ flex-grow: 1; margin-bottom: 18px; }
.pc-feature-icon{ background: #005B99; border-radius: 10px; }
.pc-feature-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #005B99;
  border-top: 1px solid rgba(0,91,153,.1);
  padding-top: 14px;
  transition: gap .2s ease, color .2s ease;
}
.pc-feature-link:hover{ color: #0097D8; gap: 10px; }

/* Reveal al hacer scroll (respetando reduced motion) */
.pc-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay: 0s;
}
.pc-reveal.is-visible{ opacity: 1; transform: none; }
/* Al hacer hover sobre una card ya revelada, el transform del hover manda */
.pc-feature-card.pc-reveal.is-visible:hover{ transform: translateY(-6px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce){
  .pc-reveal{ opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   v1.3 — Tarjetas de curso: meta + CTA primario
   ========================================================= */
.pc-course-meta{
  font-size: 13px;
  color: rgba(31,42,51,.6);
  border-top: 1px solid rgba(31,42,51,.1);
  padding-top: 12px;
  margin-bottom: 14px;
}
.section-dark .pc-course-meta{
  color: rgba(255,255,255,.75);
  border-top-color: rgba(255,255,255,.1);
}
.pc-course-card .ribbon{
  background: rgba(0,210,255,.12);
  color: #007ea8;
  border: 1px solid rgba(0,151,216,.45);
}
.section-dark .pc-course-card .ribbon{ color: #00D2FF; }

/* =========================================================
   v1.3 — Testimonios: pill de certificación verificada
   ========================================================= */
.pc-testimonial-cert{
  margin-left: auto;
  background: rgba(0,151,216,.1);
  color: #005B99;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.section-dark .pc-testimonial-cert{ background: rgba(0,210,255,.12); color: #00D2FF; }

/* =========================================================
   v1.3 — FAQ (acordeón con details/summary)
   ========================================================= */
.pc-faq{
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.pc-faq-item{
  background: #fff;
  border: 1px solid rgba(0,151,216,.15);
  border-radius: 12px;
  padding: 18px 22px;
}
.pc-faq-item summary{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1F2A33;
  cursor: pointer;
}
.pc-faq-item p{
  font-size: 15px;
  color: rgba(31,42,51,.72);
  margin: 12px 0 0;
}

/* =========================================================
   v1.3 — Barra sticky de CTA en móvil
   ========================================================= */
.pc-sticky-cta{ display: none; }
@media (max-width: 860px){
  .pc-sticky-cta{
    display: flex;
    gap: 10px;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9998;
    background: #1F2A33;
    box-shadow: 0 -8px 24px rgba(0,0,0,.3);
    padding: 10px 16px;
  }
  .pc-sticky-cta .btn-primary{ flex: 1; justify-content: center; }
  .pc-sticky-wa{
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    border-radius: 10px;
  }
  .pc-sticky-wa .material-symbols-outlined{ color: #fff; font-size: 24px; }
  /* Evitar doble botón de WhatsApp en móvil */
  .pc-whatsapp-float{ display: none; }
  body{ padding-bottom: 72px; }
}

/* =========================================================
   v1.3 — Contacto en footer
   ========================================================= */
.footer-contact{
  margin-top: 16px;
  display: grid;
  gap: 6px;
  font-size: 14px;
}
.footer-contact a{ color: #00D2FF; }


/* =========================================================
   v1.4 — Rediseño "Vibrant Azure" (capa de override)
   Portado desde la maqueta aprobada. Se aplica sobre los
   estilos base sin romper plantillas existentes.
   ========================================================= */
:root{ --pc-font-title:'Sora',sans-serif; --pc-font-body:'Manrope',sans-serif; }
body{ font-family:'Manrope',sans-serif; color:#47606F; }
h1,h2,h3,h4,h5,h6{ font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-0.02em; color:#14212B; }
.btn{ font-family:'Sora',sans-serif; text-transform:none; letter-spacing:0; }
.eyebrow,.section-dark .eyebrow{ font-family:'Sora',sans-serif; letter-spacing:.2em; font-size:12px; }

/* Header claro con blur */
.site-header{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid #E7EFF5; padding:12px 0; }
.site-header.is-scrolled{ box-shadow:0 8px 26px rgba(0,73,122,.12); }
.main-nav a{ color:#3C5665; text-transform:none; letter-spacing:0; font-weight:600; }
.main-nav a:hover{ color:#0097D8; }
.main-nav .nav-cta a{ color:#fff !important; border-radius:999px; box-shadow:0 6px 20px rgba(0,151,216,.3); }
.nav-toggle span{ background:#14212B; }
@media (max-width:860px){
  .main-nav{ background:#fff; border-top:1px solid #E7EFF5; }
  .main-nav li{ border-bottom:1px solid #F0F5F9; }
  .main-nav > ul > li > a{ color:#14212B; }
  .main-nav ul ul{ background:#F4F9FC; }
  .main-nav ul ul a{ color:#3C5665; }
}

/* Hero — Vibrant Azure */
.hero-dark{ background:radial-gradient(700px 500px at 85% -10%, rgba(0,210,255,.35), transparent 60%), linear-gradient(150deg,#0097D8 0%,#006DAD 46%,#004E86 100%); }
.hero-cloud-float{ opacity:.07; }
.hero-dark .eyebrow-pill{ text-transform:none; letter-spacing:.02em; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#E6FAFF; }
.hero-dark .eyebrow-pill .dot{ background:#7FE6FF; }
.hero-dark h1 .highlight{ background:none; -webkit-text-fill-color:#A6EEFF; color:#A6EEFF; }

/* Sección oscura → azul de marca (formulario de lead) */
.section-dark{ background:radial-gradient(640px 480px at 80% -20%, rgba(0,210,255,.28), transparent 60%), linear-gradient(150deg,#0097D8 0%,#006DAD 46%,#004E86 100%); }

/* Tarjetas de servicio */
.pc-feature-icon{ background:linear-gradient(140deg,#0097D8,#005B99); box-shadow:0 8px 20px rgba(0,151,216,.28); border-radius:13px; }
.pc-feature-card{ border-radius:18px; }
.pc-feature-link{ font-family:'Sora',sans-serif; text-transform:none; letter-spacing:0; }

/* Sección de cursos (ahora clara) */
.pc-courses{ background:linear-gradient(180deg,#EAF4FB,#F4F9FC); }

/* Tarjetas de curso — nuevo look */
.pc-course-card{ text-align:left; border-radius:20px; padding:30px 28px; }
.pc-course-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#0097D8,#35D6FF,#005B99); opacity:.35; transition:opacity .3s; }
.pc-course-card.is-popular::before{ opacity:1; }
.pc-course-card:hover::before{ opacity:1; }
.pc-course-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.pc-course-badge-tile{ width:58px; height:58px; border-radius:15px; flex-shrink:0; background:linear-gradient(150deg,#F0F8FD,#E1EEF7); border:1px solid #E1ECF4; display:flex; align-items:center; justify-content:center; }
.pc-course-badge-tile .pc-course-badge-img{ width:42px; height:42px; margin:0; }
.pc-course-idcol{ display:flex; flex-direction:column; gap:6px; }
.pc-course-card .code{ display:inline-block; width:max-content; margin:0; font-family:'Sora',sans-serif; font-weight:700; color:#005B99; background:rgba(0,151,216,.09); border:1px solid rgba(0,151,216,.2); padding:3px 11px; border-radius:8px; font-size:13.5px; letter-spacing:.02em; }
.pc-course-level{ font-family:'Sora',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.pc-course-level.associate{ color:#0097D8; }
.pc-course-level.expert{ color:#7A4FD8; }
.pc-course-level.fundamentals{ color:#0B7A43; }
.pc-course-card .ribbon{ top:18px; right:18px; left:auto; border-radius:999px; background:linear-gradient(120deg,#0097D8,#005B99); color:#fff; border:none; }
.pc-course-meta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.pc-course-meta .mi{ display:inline-flex; align-items:center; gap:4px; }
.pc-course-meta .material-symbols-outlined{ font-size:15px; color:#0097D8; }
.pc-course-cta{ text-transform:none; letter-spacing:0; }

/* Testimonios / FAQ */
.pc-testimonial-card{ border-radius:18px; }
.pc-faq-item summary{ font-family:'Sora',sans-serif; }

/* Proceso */
.pc-process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:900px){ .pc-process-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pc-process-grid{ grid-template-columns:1fr; } }
.pc-process-card{ position:relative; background:#F4F9FC; border:1px solid #E7EFF5; border-radius:18px; padding:28px 26px; transition:transform .3s,box-shadow .3s; }
.pc-process-card:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,73,122,.12); }
.pc-process-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pc-process-icon{ width:46px; height:46px; border-radius:12px; background:linear-gradient(140deg,#0097D8,#005B99); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,151,216,.28); }
.pc-process-icon .material-symbols-outlined{ color:#fff; font-size:23px; }
.pc-process-num{ font-family:'Sora',sans-serif; font-size:34px; font-weight:800; color:#E0EDF6; line-height:1; }
.pc-process-card h3{ font-size:18px; margin:0 0 8px; }
.pc-process-card p{ font-size:13.5px; margin:0; color:#47606F; }

/* VMware → Azure */
.pc-vmware{ padding:100px 0; color:#fff; background:radial-gradient(620px 460px at 90% -10%, rgba(0,210,255,.28), transparent 60%), linear-gradient(160deg,#003A63,#005B99 55%,#0072B4); }
.pc-vmware-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media(max-width:900px){ .pc-vmware-grid{ grid-template-columns:1fr; gap:36px; } }
.pc-vmware h2{ color:#fff; font-size:42px; margin:0 0 16px; }
.pc-vmware p{ color:rgba(255,255,255,.86); font-size:16px; max-width:540px; margin:0 0 28px; }
.pc-vmware-pill{ display:inline-block; font-family:'Sora',sans-serif; font-size:11.5px; letter-spacing:.02em; color:#A6EEFF; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); padding:8px 15px; border-radius:999px; margin-bottom:20px; }
.pc-vmware-benefits{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:560px; margin:0 0 30px; }
.pc-vmware-benefit{ display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:13px 16px; font-size:13.5px; color:#EAF6FC; }
.pc-vmware-benefit .material-symbols-outlined{ font-size:20px; color:#A6EEFF; }
.pc-vmware-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.pc-vmware-actions .btn{ background:#fff; color:#005B99; }
.pc-vmware-actions .btn:hover{ color:#0097D8; }
.pc-vmware-actions .link{ display:inline-flex; align-items:center; gap:7px; color:#fff; font-family:'Sora',sans-serif; font-weight:700; }
.pc-vmware-actions .link:hover{ color:#A6EEFF; }
.pc-vmware-diagram{ display:flex; align-items:center; justify-content:center; gap:20px; }
.pc-vmware-node{ flex:1; max-width:200px; text-align:center; border-radius:18px; padding:26px 22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); }
.pc-vmware-node.dest{ background:linear-gradient(160deg,rgba(0,210,255,.22),rgba(255,255,255,.06)); border-color:rgba(0,210,255,.4); box-shadow:0 0 40px rgba(0,210,255,.15); }
.pc-vmware-node .ic{ width:54px; height:54px; margin:0 auto 14px; border-radius:14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26); display:flex; align-items:center; justify-content:center; }
.pc-vmware-node .ic .material-symbols-outlined{ color:#fff; font-size:27px; }
.pc-vmware-node .t{ font-family:'Sora',sans-serif; font-weight:700; color:#fff; font-size:17px; }
.pc-vmware-node .s{ font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(255,255,255,.6); }
.pc-vmware-arrow{ display:flex; flex-direction:column; align-items:center; gap:6px; color:#A6EEFF; }
.pc-vmware-arrow .material-symbols-outlined{ font-size:40px; }
.pc-vmware-arrow small{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.7); }

/* =========================================================
   v1.8 — Diagrama animado en dos planos:
   · Plano de identidad: Usuarios -> Entra ID -> autoriza acceso
   · Plano de datos: VMware (VMs) -> migra -> Suscripción Azure
   ========================================================= */
@keyframes pcWire { from { background-position:0 0; } to { background-position:16px 0; } }
@keyframes pcWireV { from { background-position:0 0; } to { background-position:0 16px; } }
@keyframes pcCtrlGlow {
  0%,100% { box-shadow:0 0 0 1px rgba(0,210,255,.55), 0 0 18px rgba(0,210,255,.18); }
  50%     { box-shadow:0 0 0 1px rgba(0,210,255,.9), 0 0 34px rgba(0,210,255,.42); }
}
@keyframes pcPacket { 0% { left:-4px; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:calc(100% - 4px); opacity:0; } }
@keyframes pcPacketV { 0% { top:-3px; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { top:calc(100% - 3px); opacity:0; } }
@keyframes pcSrcFade { 0%,60% { opacity:1; } 80% { opacity:.55; } 100% { opacity:1; } }

.pc-arch{ position:relative; }
.pc-arch::before{
  content:""; position:absolute; inset:-14px; border-radius:16px; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
}
.pc-arch-grid{ position:relative; }

/* --- nodos base --- */
.pc-arch-node{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:11px 13px; min-width:0;
}
.pc-arch-node .k{
  display:block; font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.14em;
  color:rgba(255,255,255,.45); margin-bottom:5px;
}
.pc-arch-node strong{
  display:block; font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700; color:#fff; line-height:1.2;
}
.pc-arch-node em{ display:block; font-style:normal; font-size:10px; color:rgba(255,255,255,.66); margin-top:2px; line-height:1.3; }

/* --- plano de identidad --- */
.pc-arch-idplane{ display:flex; align-items:center; gap:0; min-width:0; margin-bottom:2px; }
.pc-arch-node.users{ flex:1 1 0; }
.pc-arch-row{ display:flex; align-items:center; gap:8px; }
.pc-arch-row .material-symbols-outlined{ font-size:18px; color:rgba(255,255,255,.7); }
.pc-arch-row strong{ font-size:12px; }
.pc-arch-node.ctrl{
  flex:1.15 1 0; background:rgba(0,210,255,.1); border-color:rgba(0,210,255,.5);
  animation:pcCtrlGlow 3.4s ease-in-out infinite;
}
.pc-arch-ctrl-head{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.pc-arch-ctrl-head .material-symbols-outlined{ font-size:15px; color:#35D6FF; }
.pc-arch-ctrl-head .k{ margin:0; color:#35D6FF; }
.pc-arch-node.ctrl strong{ font-size:13px; }

/* --- conectores horizontales --- */
.pc-arch-flow{ position:relative; }
.pc-arch-flow.id{ flex:0 0 46px; height:12px; }
.pc-arch-flow.id .pc-arch-line{
  position:absolute; top:5px; left:0; right:0; height:1px; opacity:.6;
  background-image:linear-gradient(90deg, rgba(166,238,255,.85) 50%, transparent 50%);
  background-size:10px 1px; animation:pcWire 1.6s linear infinite;
}
.pc-arch-flow.data{ flex:0 0 58px; align-self:center; height:14px; }
.pc-arch-flow.data .pc-arch-line{
  position:absolute; top:6px; left:0; right:0; height:2px; opacity:.75;
  background-image:linear-gradient(90deg,#7FE6FF 60%, transparent 60%);
  background-size:16px 2px; animation:pcWire 1s linear infinite;
}
.pc-arch-flow-label{
  position:absolute; top:-15px; left:0; right:0; text-align:center; white-space:nowrap;
  font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.08em; color:rgba(255,255,255,.5);
}
.pc-arch-vm{
  position:absolute; top:3px; width:8px; height:8px; border-radius:2px;
  background:#7FE6FF; box-shadow:0 0 10px rgba(127,230,255,.9);
  animation:pcPacket 2s linear infinite;
}
.pc-arch-vm.d2{ animation-delay:.66s; }
.pc-arch-vm.d3{ animation-delay:1.33s; }

/* --- bajada de autorización --- */
.pc-arch-authtrunk{
  position:relative; height:30px; width:1px; margin:0 0 0 auto; margin-right:22%;
}
.pc-arch-line-v{
  position:absolute; inset:0; opacity:.55;
  background-image:linear-gradient(180deg, rgba(166,238,255,.8) 45%, transparent 45%);
  background-size:1px 9px; animation:pcWireV 1.7s linear infinite;
}
.pc-arch-packet-v{
  position:absolute; left:-2.5px; width:6px; height:6px; border-radius:50%;
  background:#35D6FF; box-shadow:0 0 9px #35D6FF; animation:pcPacketV 2.8s ease-in-out infinite;
}
.pc-arch-authlabel{
  position:absolute; left:10px; top:8px; white-space:nowrap;
  font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.1em; color:rgba(255,255,255,.42);
}

/* --- plano de datos --- */
.pc-arch-dataplane{ display:flex; align-items:stretch; gap:0; min-width:0; }
.pc-arch-node.src{
  flex:0 1 118px; align-self:center; padding:12px;
  animation:pcSrcFade 5s ease-in-out infinite;
}
.pc-arch-node.src .k{ letter-spacing:.12em; margin-bottom:7px; }
.pc-arch-node.src .src-ic{ display:block; font-size:19px; color:rgba(255,255,255,.72); margin-bottom:5px; }
.pc-arch-node.src em{ font-size:9.5px; color:rgba(255,255,255,.55); }

.pc-arch-sub{
  flex:1 1 0; min-width:0; position:relative;
  border:1px dashed rgba(255,255,255,.24); border-radius:12px; padding:19px 11px 11px;
}
.pc-arch-sub-label{
  position:absolute; top:-8px; left:13px; background:#00507F; padding:0 7px;
  font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.12em; color:rgba(255,255,255,.6);
}
.pc-arch-node.telemetry{
  background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12);
  border-radius:9px; padding:9px 12px; margin-bottom:8px;
}
.pc-arch-node.telemetry .k{ font-size:8px; letter-spacing:.13em; color:rgba(255,255,255,.42); margin-bottom:3px; }
.pc-arch-node.telemetry em{ font-size:10.5px; color:rgba(255,255,255,.78); margin-top:0; }

.pc-arch-sub-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); gap:7px; }
.pc-arch-node.small{ border-radius:9px; padding:9px 11px; border-color:rgba(255,255,255,.14); }
.pc-arch-node.small strong{ font-size:11px; margin-bottom:2px; }
.pc-arch-node.small em{ font-size:9.5px; color:rgba(255,255,255,.58); margin-top:0; line-height:1.25; }
.pc-arch-node.small.target{ background:rgba(0,210,255,.08); border-color:rgba(0,210,255,.32); }

@media (max-width:640px){
  .pc-arch-idplane, .pc-arch-dataplane{ flex-direction:column; align-items:stretch; }
  .pc-arch-authtrunk{ margin:0 auto; }
  .pc-arch-flow.id, .pc-arch-flow.data{ flex:none; width:1px; height:26px; margin:0 auto; align-self:center; }
  .pc-arch-flow .pc-arch-line{
    top:0 !important; bottom:0; left:0 !important; right:auto !important; width:1px; height:auto !important;
    background-image:linear-gradient(180deg,#7FE6FF 55%, transparent 55%) !important;
    background-size:1px 16px !important; animation:pcWireV 1.3s linear infinite !important;
  }
  .pc-arch-flow-label{ display:none; }
  .pc-arch-vm{ left:-3px !important; animation-name:pcPacketV; }
}

/* Footer con logo blanco */
.footer-brand .footer-logo{ height:42px; width:auto; margin-bottom:18px; }

/* =========================================================
   v1.6 — Reducción de patrones "genéricos IA": sin blobs
   difuminados, sin anillos giratorios, sin tiles de icono con
   gradiente repetidos, sin pastillas con punto pulsante.
   ========================================================= */
.hero-dark{ background: linear-gradient(150deg,#0097D8 0%,#006DAD 46%,#004E86 100%); position: relative; }
.hero-dark.hero-split::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 45%, rgba(0,42,74,0.22) 100%);
  pointer-events:none;
}
.hero-dark.hero-split::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:44%;
  border-left:1px solid rgba(255,255,255,.14); pointer-events:none;
}
.hero-cloud-float{ animation:none; opacity:.05; }
.hero-dark .eyebrow-pill{
  display:flex; align-items:center; gap:12px;
  padding:0; border:none; background:none; border-radius:0;
  font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#A6EEFF;
}
.hero-dark .eyebrow-pill::before{ content:""; width:28px; height:1px; background:#A6EEFF; }
.hero-dark .eyebrow-pill .dot{ display:none; }

.pc-hero-form{ border-radius:14px; border-top:3px solid #0097D8; box-shadow:0 24px 60px rgba(0,42,74,.28); }

.pc-feature-icon{
  width:auto; height:auto; background:none; box-shadow:none; border-radius:0;
  display:flex; align-items:baseline; gap:14px; margin-bottom:18px;
}
.pc-feature-icon::after{ content:""; width:100%; height:1px; background:#E1ECF4; }
.pc-feature-icon .material-symbols-outlined{ color:#0097D8; font-size:26px; }

.pc-process-icon{ width:auto; height:auto; background:none; box-shadow:none; border-radius:0; order:2; }
.pc-process-icon .material-symbols-outlined{ color:#9DB0BC; font-size:22px; }
.pc-process-num{ color:#0097D8; font-size:36px; order:1; }
.pc-process-head{ flex-direction:row-reverse; justify-content:space-between; }

.pc-testimonial-avatar{ background:#fff; border:1.5px solid #0097D8; color:#005B99; }

.pc-course-card .ribbon{
  position:absolute; top:0; right:24px; left:auto;
  background:#005B99; color:#fff; border:none;
  border-radius:0 0 6px 6px; padding:6px 12px 5px;
  font-family:'Sora',sans-serif; font-weight:700; letter-spacing:.04em; text-transform:none;
}

.pc-vmware{ background: linear-gradient(160deg,#003A63,#005B99 55%,#0072B4); position:relative; overflow:hidden; }
.pc-vmware::before{
  content:""; position:absolute; right:0; top:0; bottom:0; width:38%;
  background:rgba(255,255,255,.04); border-left:1px solid rgba(255,255,255,.12); pointer-events:none;
}
.section-dark#pc-lead, #pc-lead.section-dark{ background: linear-gradient(150deg,#0097D8 0%,#006DAD 46%,#004E86 100%); position:relative; overflow:hidden; }
.section-dark#pc-lead::before, #pc-lead.section-dark::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:30%;
  background:rgba(255,255,255,.04); border-right:1px solid rgba(255,255,255,.12); pointer-events:none;
}

/* =========================================================
   v1.5.2 — Rediseño moderno de cajas CTA (.training-cta y .pc-cta-box)
   Fondo con glow radial de marca, borde cyan sutil, eyebrow,
   botón pill con gradiente y flecha animada.
   ========================================================= */
.training-cta, .pc-cta-box{
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  padding: 30px 32px;
  border-radius: 18px;
  background:
    radial-gradient(560px 280px at 88% -10%, rgba(0,151,216,.38), transparent 62%),
    radial-gradient(420px 260px at -8% 115%, rgba(0,210,255,.15), transparent 60%),
    linear-gradient(160deg, #0B1622 0%, #16222D 55%, #1F2A33 100%);
  border: 1px solid rgba(0,210,255,.16);
  box-shadow: 0 20px 55px rgba(0,20,40,.35);
}
.training-cta::after, .pc-cta-box::after{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #0097D8, #00D2FF 45%, rgba(0,210,255,0) 80%);
}
.cta-eyebrow{
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #00D2FF;
  background: rgba(0,210,255,.1);
  border: 1px solid rgba(0,210,255,.25);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 12px;
}
.single-content .training-cta h2,
.single-content .pc-cta-box h2,
.training-cta h2, .pc-cta-box h2{
  margin: 0 0 10px; padding-left: 0; border-left: none;
  color: #fff; font-size: 22px; line-height: 1.3;
}
.single-content .training-cta p:first-of-type,
.single-content .pc-cta-box p:first-of-type,
.training-cta p, .pc-cta-box p{
  color: rgba(255,255,255,.78);
  font-size: 15px; max-width: 620px; margin: 0 0 18px;
}
.training-cta .btn, .pc-cta-box .btn{
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #00D2FF 0%, #0097D8 45%, #005B99 100%);
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 11px 24px; border-radius: 999px; border: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,151,216,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.training-cta .btn::after, .pc-cta-box .btn::after{
  content: "→"; font-size: 17px; line-height: 1;
  transition: transform .2s ease;
}
.training-cta .btn:hover, .pc-cta-box .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,151,216,.5);
  color: #fff;
}
.training-cta .btn:hover::after, .pc-cta-box .btn:hover::after{ transform: translateX(4px); }

@media (max-width: 768px){
  .training-cta, .pc-cta-box{ padding: 24px 20px; border-radius: 16px; margin-top: 32px; }
  .training-cta h2, .pc-cta-box h2{ font-size: 20px; }
  .training-cta .btn, .pc-cta-box .btn{ width: 100%; justify-content: center; }
}

/* =========================================================
   v1.9.1 — Anti-spam: el honeypot se oculta desde la hoja de
   estilo, no con style inline, para que el bot no lea el
   escondite en el HTML. Solo valores hex literales (sin var())
   porque W3TC corrompe las custom properties al minificar.
   ========================================================= */
.pc-hp-wrap{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.pc-hp-wrap label,
.pc-hp-wrap input{
  display:block;
  width:1px;
  height:1px;
  border:0;
  padding:0;
  margin:0;
  font-size:1px;
  color:#0e1a24;
  background:#ffffff;
}
.cf-turnstile{
  margin:14px 0 10px;
  min-height:65px;
}
.pc-form-error{
  background:#fdecea;
  border:1px solid #f5c2c0;
  border-left:3px solid #c0392b;
  border-radius:8px;
  padding:12px 14px;
  margin-bottom:14px;
  font-size:13.5px;
  line-height:1.5;
  color:#8c2620;
}
.pc-form-error a{ color:#8c2620; text-decoration:underline; }
.pc-form-error a:hover{ color:#c0392b; }

/* =========================================================
   v1.9.3 — Página de contacto sin mapa embebido.
   El panel izquierdo pasa a ser el azul de marca y la tarjeta
   de datos se centra en él.
   ========================================================= */
.pc-contact-media.no-map{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 40px;
  min-height:520px;
  background:linear-gradient(150deg,#0097d8 0%,#006dad 46%,#004e86 100%);
  overflow:hidden;
}
.pc-contact-media.no-map::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:34%;
  background:rgba(255,255,255,.04);
  border-left:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.pc-contact-media.no-map .pc-contact-info-card{
  position:relative;
  inset:auto;
  max-width:420px;
  width:100%;
  margin:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(0,42,74,.28);
}
@media (max-width:900px){
  .pc-contact-media.no-map{ min-height:0; padding:52px 26px; }
}

/* =========================================================
   v1.9.5 — Plantilla de página rediseñada
   · Hero de marca con breadcrumb (jerarquía inmediata).
   · Dos columnas: contenido + aside de conversión sticky,
     que aprovecha el espacio muerto de la derecha.
   · Chips de atributos alineados y legibles.
   Solo hex literales: W3TC corrompe var() al minificar.
   ========================================================= */
.pc-page-hero{
  position:relative;
  overflow:hidden;
  padding:64px 0 58px;
  background:linear-gradient(150deg,#0097d8 0%,#006dad 46%,#004e86 100%);
  color:#ffffff;
}
.pc-page-hero::before{
  content:"";
  position:absolute;
  right:0; top:0; bottom:0;
  width:38%;
  background:rgba(255,255,255,.04);
  border-left:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.pc-page-hero > .container{ position:relative; }
.pc-page-hero h1{
  margin:14px 0 0;
  font-size:44px;
  line-height:1.08;
  letter-spacing:-.024em;
  color:#ffffff;
  max-width:820px;
  text-wrap:balance;
}
.pc-page-lead{
  margin:18px 0 0;
  max-width:660px;
  font-size:17px;
  line-height:1.68;
  color:rgba(255,255,255,.86);
}

.pc-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pc-breadcrumb a{ color:#a6eeff; text-decoration:none; }
.pc-breadcrumb a:hover{ color:#ffffff; text-decoration:underline; }
.pc-breadcrumb .sep{ color:rgba(255,255,255,.4); }
.pc-breadcrumb [aria-current]{ color:rgba(255,255,255,.72); }

/* --- layout de dos columnas --- */
.pc-page-body{ padding-top:56px; padding-bottom:56px; }
.pc-page-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:52px;
  align-items:start;
}
.pc-page-main{ max-width:760px; margin:0; min-width:0; }
.pc-page-thumb{ margin:0 0 28px; }
.pc-page-thumb img{ width:100%; height:auto; border-radius:14px; }

/* El H1 ya vive en el hero: el contenido no debe repetir ese peso. */
.pc-page-main h1{ font-size:28px; margin-top:1.6em; }

/* --- aside de conversión --- */
.pc-page-aside{ position:sticky; top:104px; }
.pc-aside-card{
  background:linear-gradient(160deg,#00507f,#003a63);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:28px 26px;
  box-shadow:0 22px 54px rgba(0,42,74,.22);
}
.pc-aside-eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a6eeff;
  margin-bottom:12px;
}
.pc-aside-card h2{
  margin:0 0 10px;
  padding:0;
  border:0;
  font-size:20px;
  line-height:1.25;
  color:#ffffff;
}
.pc-aside-card p{
  margin:0 0 18px;
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,255,255,.8);
}
.pc-aside-list{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.pc-aside-list li{
  position:relative;
  padding-left:22px;
  margin:0;
  font-size:12.5px;
  line-height:1.45;
  color:rgba(255,255,255,.88);
}
.pc-aside-list li::before{
  content:"";
  position:absolute;
  left:0; top:5px;
  width:9px; height:9px;
  border-radius:50%;
  background:#35d6ff;
  box-shadow:0 0 8px rgba(53,214,255,.6);
}
.pc-aside-btn{ display:block; width:100%; text-align:center; }
.pc-aside-wa{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:12px;
  font-size:12.5px;
  font-weight:600;
  color:rgba(255,255,255,.8);
  text-decoration:none;
}
.pc-aside-wa:hover{ color:#a6eeff; }
.pc-aside-wa .material-symbols-outlined{ font-size:16px; }

.pc-aside-note{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  padding:12px 14px;
  border:1px solid #e1ecf4;
  border-radius:12px;
  background:#f4f9fc;
  font-size:12px;
  line-height:1.4;
  color:#47606f;
}
.pc-aside-note .material-symbols-outlined{ font-size:17px; color:#0097d8; }

.pc-page-cta{ padding-top:0; }

/* --- chips de atributos dentro del contenido --- */
.pc-page-main .wp-block-buttons,
.pc-page-main .pc-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 30px;
}
.pc-page-main .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  min-height:0;
  padding:9px 17px;
  border:1px solid #d7e6f0;
  border-radius:999px;
  background:#f4f9fc;
  color:#3c5665;
  font-family:'Sora',sans-serif;
  font-size:12.5px;
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
  box-shadow:none;
}
.pc-page-main .wp-block-button__link:hover{
  border-color:#0097d8;
  color:#005b99;
  background:#ffffff;
}

@media (max-width:1024px){
  .pc-page-layout{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .pc-page-aside{ position:static; max-width:520px; }
  .pc-page-main{ max-width:none; }
}
@media (max-width:768px){
  .pc-page-hero{ padding:44px 0 40px; }
  .pc-page-hero h1{ font-size:31px; }
  .pc-page-lead{ font-size:15.5px; }
  .pc-page-body{ padding-top:40px; padding-bottom:40px; }
}

/* =========================================================
   v1.9.6 — Chips de atributos escritos con estilos inline
   dentro del contenido de las páginas de servicio.
   Los <span> traen style="" propio, así que hay que ganarle
   con !important; el markup no se toca (sigue editable en WP).
   Entrada escalonada al hacer scroll + elevación en hover.
   ========================================================= */
@keyframes pcChipIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.pc-page-main div[style*="flex"]{
  align-items:center !important;
  gap:10px !important;
  margin:6px 0 30px !important;
}
.pc-page-main div[style*="flex"] > span[style*="999px"]{
  display:inline-flex !important;
  align-items:center !important;
  padding:9px 17px !important;
  border:1px solid #d7e6f0 !important;
  border-radius:999px !important;
  background:#f4f9fc !important;
  color:#3c5665 !important;
  font-family:'Sora',sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  white-space:nowrap;
  opacity:0;
  animation:pcChipIn .5s cubic-bezier(.16,.84,.44,1) forwards;
  transition:border-color .25s, background .25s, color .25s, transform .25s, box-shadow .25s;
}
.pc-page-main div[style*="flex"] > span[style*="999px"]:nth-child(1){ animation-delay:.05s; }
.pc-page-main div[style*="flex"] > span[style*="999px"]:nth-child(2){ animation-delay:.13s; }
.pc-page-main div[style*="flex"] > span[style*="999px"]:nth-child(3){ animation-delay:.21s; }
.pc-page-main div[style*="flex"] > span[style*="999px"]:nth-child(4){ animation-delay:.29s; }
.pc-page-main div[style*="flex"] > span[style*="999px"]:nth-child(5){ animation-delay:.37s; }
.pc-page-main div[style*="flex"] > span[style*="999px"]:hover{
  border-color:#0097d8 !important;
  background:#ffffff !important;
  color:#005b99 !important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,151,216,.16);
}

/* Un punto de acento antes de cada chip: los vuelve legibles
   como atributos y no como botones deshabilitados. */
.pc-page-main div[style*="flex"] > span[style*="999px"]::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#0097d8;
  margin-right:9px;
  flex-shrink:0;
}

@media (prefers-reduced-motion:reduce){
  .pc-page-main div[style*="flex"] > span[style*="999px"]{
    opacity:1;
    animation:none;
  }
}

/* =========================================================
   v1.9.7 — Aside de conversión, versión técnica.
   Sin lista de promesas comerciales: el alcance se declara
   como línea de disciplinas, al modo de un estudio de
   arquitectura o una consultora técnica.
   ========================================================= */
.pc-aside-scope{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.07em;
  line-height:1.5;
  color:rgba(255,255,255,.62);
  text-align:center;
}

/* =========================================================
   v2.1 — Portada sin patrón "tarjeta repetida"
   · Pilares como columnas editoriales numeradas
   · Proceso como línea de tiempo con riel animado
   · Trainings como tabla técnica por filas
   · Testimonios como citas tipográficas
   Solo hex literales (W3TC rompe var() al minificar).
   ========================================================= */

/* ---- Pilares ---- */
.pc-pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #d7e6f0; }
.pc-pillar{ position:relative; padding:34px 32px 34px 0; margin-right:40px; display:flex; flex-direction:column; }
.pc-pillar:last-child{ margin-right:0; }
.pc-pillar-accent{ position:absolute; top:-1px; left:0; height:2px; width:40px; background:#0097d8; transition:width .45s cubic-bezier(.16,.84,.44,1); }
.pc-pillar:hover .pc-pillar-accent{ width:calc(100% + 40px); }
.pc-pillar:last-child:hover .pc-pillar-accent{ width:100%; }
.pc-pillar-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; }
.pc-pillar-num{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; color:#0097d8; }
.pc-pillar-tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#9db0bc; }
.pc-pillar h3{ font-family:'Sora',sans-serif; font-size:22px; font-weight:700; color:#14212b; margin:0 0 14px; line-height:1.22; letter-spacing:-.015em; }
.pc-pillar p{ font-size:14.5px; line-height:1.68; margin:0 0 26px; color:#5b7080; flex:1; }
.pc-pillar-link{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:'Sora',sans-serif; font-size:13.5px; font-weight:700; color:#005b99; text-decoration:none; transition:color .25s, gap .3s; }
.pc-pillar-link:hover{ color:#0097d8; gap:12px; }
.pc-pillar-link .material-symbols-outlined{ font-size:17px; }
@media (max-width:900px){
  .pc-pillars{ grid-template-columns:1fr; border-top:0; }
  .pc-pillar{ margin-right:0; padding:28px 0; border-top:1px solid #d7e6f0; }
  .pc-pillar:hover .pc-pillar-accent{ width:100%; }
}

/* ---- Proceso: línea de tiempo ---- */
@keyframes pcRail{ to{ width:75%; } }
.pc-timeline{ position:relative; padding-top:8px; }
.pc-timeline.pc-reveal{ opacity:1; transform:none; }
.pc-timeline-rail{ position:absolute; left:12.5%; right:12.5%; top:21px; height:1px; background:#cfe0ec; }
.pc-timeline-rail-fill{ position:absolute; left:12.5%; top:21px; height:1px; width:0; background:#0097d8; }
.pc-timeline.is-visible .pc-timeline-rail-fill{ animation:pcRail 1.6s cubic-bezier(.16,.84,.44,1) .3s forwards; }
.pc-timeline-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:relative; }
.pc-step{ padding:0 22px; text-align:center; }
.pc-step-node{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0 auto 26px; border-radius:50%; background:#ffffff; border:1.5px solid #0097d8; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:#005b99; }
.pc-step-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#9db0bc; margin-bottom:8px; }
.pc-step h3{ font-family:'Sora',sans-serif; font-size:19px; font-weight:700; color:#14212b; margin:0 0 12px; letter-spacing:-.01em; }
.pc-step p{ font-size:13.5px; line-height:1.65; margin:0; color:#5b7080; }
/* escalonado: cada etapa entra después del riel */
.pc-timeline .pc-step:nth-child(1){ transition-delay:.25s; }
.pc-timeline .pc-step:nth-child(2){ transition-delay:.47s; }
.pc-timeline .pc-step:nth-child(3){ transition-delay:.69s; }
.pc-timeline .pc-step:nth-child(4){ transition-delay:.91s; }
@media (max-width:900px){
  .pc-timeline-rail, .pc-timeline-rail-fill{ display:none; }
  .pc-timeline-steps{ grid-template-columns:1fr 1fr; gap:34px 20px; }
}
@media (max-width:560px){ .pc-timeline-steps{ grid-template-columns:1fr; } }

/* ---- Trainings: tabla técnica ---- */
.pc-courses{ background:#f4f9fc; }
.pc-rows-head{ display:grid; grid-template-columns:96px minmax(0,1fr) 128px; gap:24px; padding:0 22px 14px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#9db0bc; border-bottom:1px solid #d7e6f0; }
.pc-rows{ display:flex; flex-direction:column; }
.pc-row{ position:relative; display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:24px; align-items:center; padding:24px 22px; border-bottom:1px solid #e7eff5; transition:background .25s; }
.pc-row:hover{ background:#ffffff; }
.pc-row-accent{ position:absolute; left:0; top:0; bottom:0; width:2px; background:#0097d8; transform:scaleY(0); transition:transform .35s cubic-bezier(.16,.84,.44,1); }
.pc-row:hover .pc-row-accent{ transform:scaleY(1); }
.pc-row-code{ font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:#005b99; padding-top:2px; }
.pc-row-body{ min-width:0; }
.pc-row-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pc-row-title h3{ font-family:'Sora',sans-serif; font-size:16.5px; font-weight:700; color:#14212b; margin:0; line-height:1.3; }
.pc-row-pill{ font-family:'Sora',sans-serif; font-size:10px; font-weight:700; letter-spacing:.04em; color:#005b99; background:rgba(0,151,216,.1); padding:3px 9px; border-radius:4px; white-space:nowrap; }
.pc-row-body p{ font-size:13.5px; line-height:1.55; margin:6px 0 10px; color:#5b7080; }
.pc-row-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; color:#708997; }
.pc-row-level{ display:inline-flex; align-items:center; gap:7px; font-family:'Sora',sans-serif; font-size:11.5px; font-weight:700; }
.pc-row-level img{ display:block; width:20px; height:20px; }
.pc-row-level.associate{ color:#0097d8; }
.pc-row-level.expert{ color:#7a4fd8; }
.pc-row-level.fundamentals{ color:#0b7a43; }
.pc-row-sep{ width:1px; height:12px; background:#d7e6f0; }
.pc-row-cta{ display:inline-flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-size:13px; font-weight:700; color:#005b99; border:1px solid #cfe2ee; background:#ffffff; padding:11px 16px; border-radius:8px; white-space:nowrap; text-decoration:none; transition:border-color .25s, color .25s, background .25s; }
.pc-row-cta:hover{ border-color:#0097d8; color:#ffffff; background:#0097d8; }
@media (max-width:640px){
  .pc-rows-head{ display:none; }
  .pc-row{ grid-template-columns:72px minmax(0,1fr); }
  .pc-row-cta{ grid-column:2; justify-self:start; }
}

/* ---- Testimonios: citas ---- */
.pc-quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #d7e6f0; }
.pc-quote{ margin:0 36px 0 0; padding:36px 36px 36px 0; display:flex; flex-direction:column; }
.pc-quote:last-child{ margin-right:0; }
.pc-quote-mark{ display:block; font-family:'Sora',sans-serif; font-size:52px; line-height:.6; color:#0097d8; margin-bottom:22px; }
.pc-quote blockquote{ margin:0 0 28px; padding:0; border:0; background:none; font-family:'Sora',sans-serif; font-size:17px; font-weight:500; line-height:1.55; color:#14212b; letter-spacing:-.01em; flex:1; font-style:normal; }
.pc-quote figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:18px; border-top:1px solid #e7eff5; }
.pc-quote-name{ font-family:'Sora',sans-serif; font-size:13.5px; font-weight:700; color:#14212b; }
.pc-quote-role{ font-size:12.5px; color:#708997; margin-top:2px; }
.pc-quote-cert{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; color:#0097d8; white-space:nowrap; }
@media (max-width:900px){
  .pc-quotes{ grid-template-columns:1fr; border-top:0; }
  .pc-quote{ margin-right:0; padding:28px 0; border-top:1px solid #d7e6f0; }
}

/* =========================================================
   v2.2 — Franja "Ecosistema Microsoft" bajo el hero
   Dos cintas de íconos oficiales (M365 / Azure) deslizándose
   en sentidos opuestos; se pausan al pasar el cursor.
   Solo hex literales (W3TC rompe var() al minificar).
   ========================================================= */
@keyframes pcEcoScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.pc-ecosystem{ background:#ffffff; padding:56px 0 48px; border-bottom:1px solid #eef4f8; overflow:hidden; }
.pc-eco-head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:32px; align-items:baseline; margin-bottom:30px; }
.pc-eco-head .eyebrow{ margin:0; white-space:nowrap; }
.pc-eco-head p{ margin:0; max-width:640px; font-size:14.5px; line-height:1.65; color:#5b7080; }
.pc-eco-band{ position:relative; display:flex; align-items:center; gap:26px; padding:14px 0; border-top:1px solid #eef4f8; }
.pc-eco-band:last-child{ border-bottom:1px solid #eef4f8; }
.pc-eco-label{
  flex:0 0 150px; padding-left:max(24px, calc((100% - 1200px) / 2));
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#9db0bc; white-space:nowrap;
}
.pc-eco-marquee{
  flex:1 1 auto; min-width:0; 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);
}
.pc-eco-track{ display:flex; align-items:center; gap:14px; width:max-content; animation:pcEcoScroll 46s linear infinite; }
.pc-eco-band.reverse .pc-eco-track{ animation-direction:reverse; animation-duration:54s; }
.pc-eco-marquee:hover .pc-eco-track{ animation-play-state:paused; }
.pc-eco-item{
  display:inline-flex; align-items:center; gap:11px; padding:9px 16px 9px 11px;
  border:1px solid #e7eff5; border-radius:10px; background:#f8fbfd;
  font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:#3c5665; white-space:nowrap;
  transition:border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.pc-eco-item:hover{ border-color:#cfe2ee; background:#ffffff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,73,122,.08); }
.pc-eco-item img{ width:28px; height:28px; display:block; object-fit:contain; }
@media (max-width:900px){
  .pc-eco-head{ grid-template-columns:1fr; gap:10px; }
  .pc-eco-label{ display:none; }
  .pc-eco-track{ animation-duration:32s; }
  .pc-eco-band.reverse .pc-eco-track{ animation-duration:38s; }
}
@media (prefers-reduced-motion:reduce){ .pc-eco-track{ animation:none; } }

/* =========================================================
   v2.3 — Hero sin formulario: dos acciones + señales de
   credibilidad. El formulario completo vive en #pc-lead.
   Solo hex literales (W3TC rompe var() al minificar).
   ========================================================= */
.hero-split-actions{ display:flex; flex-direction:column; gap:22px; padding-left:8px; }
.pc-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.pc-hero-btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:'Sora',sans-serif; font-size:15px; font-weight:700; border-radius:12px;
  transition:transform .25s, box-shadow .25s, color .25s, background .25s, border-color .25s;
}
.pc-hero-btn .material-symbols-outlined{ font-size:18px; }
.pc-hero-btn.primary{ color:#005b99; background:#ffffff; padding:15px 26px; box-shadow:0 14px 34px rgba(0,0,0,.22); }
.pc-hero-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.28); color:#0097d8; }
.pc-hero-btn.ghost{ color:#ffffff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.32); padding:14px 24px; }
.pc-hero-btn.ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.6); color:#ffffff; }

.pc-hero-proof{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.18); }
.pc-hero-proof li{ display:flex; align-items:flex-start; gap:14px; padding:16px 0; margin:0; border-bottom:1px solid rgba(255,255,255,.12); }
.pc-hero-proof li:last-child{ border-bottom:0; }
.pc-hero-proof .material-symbols-outlined{ font-size:22px; color:#a6eeff; flex-shrink:0; margin-top:1px; }
.pc-hero-proof strong{ display:block; font-family:'Sora',sans-serif; font-size:14px; font-weight:700; color:#ffffff; line-height:1.3; }
.pc-hero-proof em{ display:block; font-style:normal; font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.45; margin-top:2px; }

.pc-hero-wa{ display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; color:rgba(255,255,255,.7); }
.pc-hero-wa .material-symbols-outlined{ font-size:16px; }
.pc-hero-wa a{ color:#a6eeff; font-weight:600; text-decoration:none; }
.pc-hero-wa a:hover{ color:#ffffff; }

@media (max-width:960px){ .hero-split-actions{ padding-left:0; } }

/* v2.3.1 — Hero a una sola columna: el formulario vive en #pc-lead. */
.hero-split .hero-split-grid{ display:block; }
.hero-split .hero-split-copy{ max-width:900px; }
.hero-split .hero-split-copy h1{ font-size:60px; line-height:1.04; margin-bottom:24px; }
.hero-split .hero-split-copy > p{ font-size:18px; line-height:1.7; max-width:620px; margin-bottom:34px; }
.hero-split .pc-hero-ctas{ margin-top:0; }
@media (max-width:760px){ .hero-split .hero-split-copy h1{ font-size:38px; } }

/* =========================================================
   v2.4 — Hero con visual animado: Azure + Microsoft 365
   conectados a ProtokolCloud, órbita de servicios y
   credenciales como insignias flotantes.
   Solo hex literales (W3TC rompe var() al minificar).
   ========================================================= */
@keyframes pcHvSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes pcHvSpinBack{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
@keyframes pcHvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes pcHvPulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.55); opacity:0; } }
@keyframes pcHvDash{ to{ stroke-dashoffset:-40; } }

.hero-split .hero-split-grid.has-visual{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:40px; align-items:center;
}
.hero-split .has-visual .hero-split-copy h1{ font-size:52px; }
.hero-split:has(.has-visual) .hero-cloud-float{ display:none; }

.pc-hero-visual{ position:relative; width:420px; height:420px; margin-left:auto; }
.pc-hv-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pc-hv-links path{ fill:none; stroke:#a6eeff; stroke-width:1.4; stroke-dasharray:4 6; opacity:.7; animation:pcHvDash 2.4s linear infinite; }
.pc-hv-dot{ fill:#7fe6ff; filter:drop-shadow(0 0 6px #7fe6ff); }

.pc-hv-ring{ position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none; }
.pc-hv-ring.r1{ width:336px; height:336px; margin:-168px 0 0 -168px; border:1px dashed rgba(255,255,255,.22); animation:pcHvSpin 60s linear infinite; }
.pc-hv-ring.r2{ width:210px; height:210px; margin:-105px 0 0 -105px; border:1px solid rgba(255,255,255,.12); }

.pc-hv-orbit{ position:absolute; left:50%; top:50%; width:0; height:0; animation:pcHvSpin 40s linear infinite; }
.pc-hv-sat{ position:absolute; left:-21px; top:-21px; width:42px; height:42px; }
.pc-hv-sat-in{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px;
  background:#ffffff; box-shadow:0 8px 20px rgba(0,30,60,.28); animation:pcHvSpinBack 40s linear infinite;
}
.pc-hv-sat-in img{ width:26px; height:26px; display:block; }

.pc-hv-hub{
  position:absolute; left:50%; top:50%; width:128px; height:128px; margin:-64px 0 0 -64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 0 0 10px rgba(255,255,255,.04), 0 24px 60px rgba(0,30,60,.35);
}
.pc-hv-hub::before{ content:""; position:absolute; inset:-1px; border-radius:50%; border:2px solid #7fe6ff; animation:pcHvPulse 2.8s ease-out infinite; }
.pc-hv-hub img{ width:74px; height:auto; display:block; }

.pc-hv-tile{
  position:absolute; display:flex; align-items:center; gap:11px; padding:11px 15px 11px 11px; border-radius:14px;
  background:#ffffff; box-shadow:0 18px 40px rgba(0,30,60,.3); animation:pcHvFloat 6s ease-in-out infinite; z-index:2;
}
.pc-hv-tile img{ width:38px; height:38px; display:block; }
.pc-hv-tile strong{ display:block; font-family:'Sora',sans-serif; font-size:13.5px; font-weight:700; color:#14212b; line-height:1.2; }
.pc-hv-tile em{ display:block; font-style:normal; font-size:11px; color:#5b7080; margin-top:2px; }
.pc-hv-tile.azure{ left:-18px; top:44px; }
.pc-hv-tile.m365{ right:-18px; bottom:44px; animation-delay:-3s; }

.pc-hv-badge{
  position:absolute; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; z-index:3;
  background:rgba(0,40,70,.55); border:1px solid rgba(166,238,255,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:'Sora',sans-serif; font-size:11px; font-weight:600; color:#ffffff; white-space:nowrap;
  animation:pcHvFloat 7s ease-in-out infinite;
}
.pc-hv-badge .material-symbols-outlined{ font-size:15px; color:#a6eeff; }
.pc-hv-badge.b1{ right:-10px; top:6px; animation-delay:-1.5s; }
.pc-hv-badge.b2{ left:-6px; bottom:6px; animation-delay:-4.5s; }

@media (max-width:1180px){ .pc-hero-visual{ transform:scale(.86); transform-origin:right center; } }
@media (max-width:960px){
  .hero-split .hero-split-grid.has-visual{ grid-template-columns:1fr; }
  .hero-split .has-visual .hero-split-copy h1{ font-size:40px; }
  .pc-hero-visual{ margin:10px auto 0; transform:scale(.82); transform-origin:center top; }
}
@media (max-width:560px){ .pc-hero-visual{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .pc-hv-orbit, .pc-hv-sat-in, .pc-hv-ring, .pc-hv-tile, .pc-hv-badge, .pc-hv-links path, .pc-hv-hub::before{ animation:none; }
}

/* v2.4.2 — Hero: sin raya decorativa en el eyebrow; un solo CTA (trainings). */
.hero-dark .eyebrow-pill::before{ display:none; }
.hero-dark .eyebrow-pill{ gap:0; }
.pc-hero-btn.ghost{ background:#ffffff; color:#005b99; border-color:#ffffff; box-shadow:0 14px 34px rgba(0,0,0,.22); }
.pc-hero-btn.ghost:hover{ background:#ffffff; color:#0097d8; border-color:#ffffff; transform:translateY(-2px); }

/* =========================================================
   v2.5 — Sección "IA y Seguridad" (reemplaza VMware)
   Núcleo Security Copilot con anillo cálido + productos de
   seguridad orbitando. Solo hex literales.
   ========================================================= */
@keyframes pcAiSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes pcAiSpinBack{ from{ transform:rotate(0deg);} to{ transform:rotate(-360deg);} }
.pc-ai{ position:relative; overflow:hidden; padding:104px 0; color:#ffffff;
  background:linear-gradient(135deg,#003a63 0%,#004e86 45%,#1b2a78 100%); }
.pc-ai::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 420px at 78% 50%, rgba(226,62,187,.22), transparent 62%),
             radial-gradient(520px 380px at 70% 40%, rgba(255,122,0,.14), transparent 60%); }
.pc-ai::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(800px 500px at 75% 50%, #000, transparent 75%); mask-image:radial-gradient(800px 500px at 75% 50%, #000, transparent 75%); }
.pc-ai-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 520px; gap:48px; align-items:center; }
.pc-ai-eyebrow{ display:block; font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#a6eeff; margin-bottom:18px; }
.pc-ai h2{ font-size:40px; line-height:1.08; letter-spacing:-.026em; color:#ffffff; margin:0 0 18px; text-wrap:balance; }
.pc-ai p{ font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.86); max-width:560px; margin:0 0 30px; }
.pc-ai-chips{ display:flex; flex-wrap:wrap; gap:10px; max-width:600px; }
.pc-ai-chip{ display:inline-flex; align-items:center; gap:9px; padding:8px 14px 8px 9px; border-radius:10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  font-family:'Sora',sans-serif; font-size:12.5px; font-weight:600; color:#ffffff; white-space:nowrap; transition:background .25s,border-color .25s; }
.pc-ai-chip:hover{ background:rgba(255,255,255,.14); border-color:rgba(166,238,255,.5); }
.pc-ai-chip img{ width:22px; height:22px; display:block; }
.pc-ai-visual{ position:relative; width:520px; height:520px; justify-self:end; }
.pc-ai-visual svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pc-ai-visual .o1{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:1; }
.pc-ai-visual .o2{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; stroke-dasharray:3 7; }
.pc-ai-visual .ring{ fill:none; stroke:url(#pcAiRing); stroke-width:22; opacity:.95; }
.pc-ai-visual .ring-hl{ fill:none; stroke:#ffffff; stroke-width:22; stroke-dasharray:90 652; stroke-linecap:round; opacity:.35; transform-origin:260px 260px; animation:pcAiSpin 6s linear infinite; }
.pc-ai-visual .tick{ stroke:rgba(255,255,255,.35); stroke-width:1.2; }
.pc-ai-visual .dot{ fill:#ffffff; filter:drop-shadow(0 0 6px #a6eeff); }
.pc-ai-visual .dot.warm{ fill:#ffb64a; filter:drop-shadow(0 0 6px #ffb64a); }
.pc-ai-core{ position:absolute; left:50%; top:50%; width:170px; height:170px; margin:-85px 0 0 -85px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #ffd08a 0%, #f0a860 40%, #b98bff 100%);
  box-shadow:0 24px 70px rgba(0,0,0,.35), inset 0 -10px 30px rgba(120,60,200,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.pc-ai-core img{ width:40px; height:40px; display:block; margin-bottom:8px; filter:drop-shadow(0 4px 10px rgba(0,40,90,.35)); }
.pc-ai-core strong{ font-family:'Sora',sans-serif; font-size:14px; font-weight:800; color:#14212b; line-height:1.15; }
.pc-ai-orbit{ position:absolute; inset:0; animation:pcAiSpin 70s linear infinite; }
.pc-ai-sat{ position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateX(200px) rotate(calc(var(--a) * -1)); }
.pc-ai-sat-card{ position:absolute; left:-54px; top:-22px; width:108px; display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:pcAiSpinBack 70s linear infinite; }
.pc-ai-sat-card img{ width:22px; height:22px; display:block; flex-shrink:0; }
.pc-ai-sat-card span{ font-family:'Sora',sans-serif; font-size:10.5px; font-weight:600; color:#ffffff; line-height:1.2; white-space:nowrap; }
@media (max-width:1100px){ .pc-ai-grid{ grid-template-columns:1fr; } .pc-ai-visual{ justify-self:center; transform:scale(.86); transform-origin:center top; } }
@media (max-width:560px){ .pc-ai-visual{ display:none; } .pc-ai h2{ font-size:30px; } }
@media (prefers-reduced-motion:reduce){ .pc-ai-orbit, .pc-ai-sat-card, .pc-ai-visual .ring-hl{ animation:none; } }


/* v2.6 — Hero: mini diagrama Security Copilot (tarjeta flotante). */
.pc-hv-mini{ position:relative; flex:0 0 auto; width:170px; height:170px; transform:scale(1); border-radius:22px;
  background:linear-gradient(135deg, rgba(0,58,99,.92), rgba(27,42,120,.92)); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 22px 54px rgba(0,30,60,.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:pcHvFloat 7s ease-in-out infinite -2s; }
.pc-hv-mini::before{ content:""; position:absolute; inset:0; border-radius:22px; background:radial-gradient(120px 90px at 70% 55%, rgba(226,62,187,.22), transparent 70%); pointer-events:none; }
.pc-hv-mini svg{ position:absolute; inset:0; width:100%; height:100%; }
.pc-hv-mini .o{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:1; }
.pc-hv-mini .ring{ fill:none; stroke:url(#pcHvMiniRing); stroke-width:9; }
.pc-hv-mini .hl{ fill:none; stroke:#ffffff; stroke-width:9; stroke-dasharray:36 241; stroke-linecap:round; opacity:.35; transform-origin:98px 98px; animation:pcAiSpin 6s linear infinite; }
.pc-hv-mini-core{ position:absolute; left:50%; top:50%; width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #ffd08a 0%, #f0a860 45%, #b98bff 100%); box-shadow:inset 0 -5px 14px rgba(120,60,200,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.pc-hv-mini-core img{ width:18px; height:18px; display:block; margin-bottom:2px; }
.pc-hv-mini-core strong{ font-family:'Sora',sans-serif; font-size:6.5px; font-weight:800; color:#14212b; line-height:1.15; }
.pc-hv-mini-orbit{ position:absolute; inset:0; }
.pc-hv-mini-sat{ position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateX(76px) rotate(calc(var(--a) * -1)); }
.pc-hv-mini-sat .in{ position:absolute; left:-31px; top:-11px; width:62px; display:flex; align-items:center; gap:4px; padding:3px 5px; border-radius:7px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); }
.pc-hv-mini-sat img{ width:12px; height:12px; display:block; flex-shrink:0; }
.pc-hv-mini-sat em{ font-style:normal; font-family:'Sora',sans-serif; font-size:7px; font-weight:600; color:#ffffff; white-space:nowrap; line-height:1; }

/* v2.6.2 — Fila de pilares bajo el hero: Azure · M365 · mini Security Copilot. */
.pc-hero-pillars{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:44px; }
.pc-hero-pillar{ display:flex; align-items:center; gap:11px; padding:12px 16px 12px 12px; border-radius:14px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pc-hero-pillar img{ width:34px; height:34px; display:block; }
.pc-hero-pillar strong{ display:block; font-family:'Sora',sans-serif; font-size:13px; font-weight:700; color:#ffffff; line-height:1.2; }
.pc-hero-pillar em{ display:block; font-style:normal; font-size:10.5px; color:rgba(255,255,255,.7); margin-top:2px; }
.pc-hv-mini svg, .pc-hv-mini-core, .pc-hv-mini-orbit{ transform-origin:center; }
.pc-hv-mini > svg{ width:170px; height:170px; }
.pc-hv-mini-core{ width:57px; height:57px; margin:-28.5px 0 0 -28.5px; }
.pc-hv-mini-core img{ width:16px; height:16px; }
.pc-hv-mini-core strong{ font-size:5.8px; }
.pc-hv-mini-sat{ transform:rotate(var(--a)) translateX(66px) rotate(calc(var(--a) * -1)); }
.pc-hv-mini-sat .in{ left:-27px; top:-10px; width:54px; padding:2px 4px; }
.pc-hv-mini-sat img{ width:11px; height:11px; }
.pc-hv-mini-sat em{ font-size:6.3px; }
@media (max-width:560px){ .pc-hv-mini{ display:none; } }

/* v2.6.3 — Hero: órbita íntegra; la mini Security Copilot vive sola bajo el texto con su rótulo. */
.pc-hero-pillars{ gap:22px; }
.pc-hero-pillar-text{ max-width:280px; }
.pc-hero-pillar-text .k{ display:block; font-family:'Sora',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#a6eeff; margin-bottom:8px; }
.pc-hero-pillar-text strong{ display:block; font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#ffffff; line-height:1.3; margin-bottom:6px; }
.pc-hero-pillar-text p{ margin:0; font-size:13px; line-height:1.55; color:rgba(255,255,255,.74); max-width:none; }

/* v2.6.6 — Hero más compacto: menos alto, mini alineada, órbita en su columna. */
.hero-split{ padding:56px 0 52px; }
.hero-split .hero-split-grid.has-visual{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:40px; align-items:center; }
.hero-split .hero-split-copy{ max-width:none; }
.hero-split .hero-split-copy h1{ font-size:50px; line-height:1.06; margin:18px 0 18px; }
.hero-split .hero-split-copy > p{ font-size:17px; margin-bottom:26px; max-width:560px; }
.pc-hero-pillars{ margin-top:30px; }
.pc-hero-visual{ justify-self:end; }
@media (max-width:960px){ .hero-split{ padding:44px 0 40px; } }

/* v2.7 — Hero en tres columnas: mini Security Copilot · texto · órbita. */
.hero-split .hero-split-grid.has-visual{ grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,420px); gap:40px; align-items:center; }
.pc-hero-pillars--side{ flex-direction:column; align-items:flex-start; gap:16px; margin:0; justify-self:start; }
.pc-hero-pillars--side .pc-hero-pillar-text{ max-width:200px; }
.pc-hero-pillars--side .pc-hero-pillar-text strong{ font-size:15px; }
.pc-hero-pillars--side .pc-hero-pillar-text p{ font-size:12.5px; }
.hero-split .hero-split-copy h1{ font-size:46px; }
@media (max-width:1180px){ .hero-split .hero-split-grid.has-visual{ grid-template-columns:minmax(0,1fr) minmax(0,380px); } .pc-hero-pillars--side{ grid-column:1 / -1; flex-direction:row; align-items:center; order:3; margin-top:10px; } .pc-hero-pillars--side .pc-hero-pillar-text{ max-width:280px; } }
@media (max-width:960px){ .hero-split .hero-split-grid.has-visual{ grid-template-columns:1fr; } .pc-hero-pillars--side{ order:2; } .pc-hero-visual{ order:3; } }

/* v2.7.1 — Hero 3 col: más aire al texto central. */
@media (min-width:1181px){
  .hero-split .hero-split-grid.has-visual{ grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,400px); gap:44px; }
  .hero-split .hero-split-copy h1{ font-size:44px; line-height:1.08; }
  .pc-hero-visual{ transform:scale(.94); transform-origin:center; }
}

/* v2.8 — Hero: diagrama Security Copilot completo (mismo que la sección IA) a escala, sin tarjeta. */
.pc-hero-copilot{ position:relative; width:300px; height:300px; justify-self:start; }
.pc-ai-visual--hero{ position:absolute; left:50%; top:50%; width:520px; height:520px; transform:translate(-50%,-50%) scale(.577); transform-origin:center; justify-self:auto; }
.pc-ai-visual--hero .o1{ stroke:rgba(255,255,255,.22); }
.pc-ai-visual--hero .o2{ stroke:rgba(255,255,255,.16); }
.pc-ai-visual--hero .tick{ stroke:rgba(255,255,255,.45); }
.pc-ai-visual--hero .pc-ai-sat-card{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
.pc-ai-visual--hero .pc-ai-sat-card span{ font-size:13px; }
.pc-ai-visual--hero .pc-ai-sat-card img{ width:24px; height:24px; }
.hero-split .hero-split-grid.has-visual{ grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,400px); gap:40px; }
@media (max-width:1180px){
  .hero-split .hero-split-grid.has-visual{ grid-template-columns:minmax(0,1fr) minmax(0,380px); }
  .pc-hero-copilot{ grid-column:1 / -1; order:3; justify-self:center; margin-top:8px; }
}
@media (max-width:960px){ .hero-split .hero-split-grid.has-visual{ grid-template-columns:1fr; } .pc-hero-copilot{ order:2; } .pc-hero-visual{ order:3; } }
@media (max-width:560px){ .pc-hero-copilot{ display:none; } }

/* =========================================================
   v2.8.1 — Hero reordenado: texto arriba a todo el ancho,
   debajo los dos diagramas (Security Copilot · ProtokolCloud)
   lado a lado. Evita el texto estrangulado en 3 columnas.
   ========================================================= */
@media (min-width:961px){
  .hero-split{ padding:64px 0 48px; }
  .hero-split .hero-split-grid.has-visual{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"copy copy" "copilot orbit";
    gap:36px 48px;
    align-items:center;
  }
  .hero-split .hero-split-copy{ grid-area:copy; max-width:820px; text-align:left; }
  .hero-split .hero-split-copy h1{ font-size:54px; line-height:1.05; margin:18px 0 18px; }
  .hero-split .hero-split-copy > p{ font-size:17.5px; max-width:680px; }
  .pc-hero-copilot{ grid-area:copilot; justify-self:center; width:360px; height:360px; margin:0; order:0; }
  .pc-ai-visual--hero{ transform:translate(-50%,-50%) scale(.69); }
  .pc-hero-visual{ grid-area:orbit; justify-self:center; margin:0; transform:none; order:0; }
}
@media (min-width:1181px){
  .hero-split .hero-split-grid.has-visual{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px 64px; }
  .hero-split .hero-split-copy h1{ font-size:56px; }
  .pc-hero-visual{ transform:none; }
}

/* v2.8.2 — Garantiza el grid "copy arriba / copilot + órbita abajo" por encima de reglas previas. */
@media (min-width:961px){
  section.hero-split .container.hero-split-grid.has-visual{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:"copy copy" "copilot orbit" !important;
    gap:32px 56px !important;
    align-items:center !important;
  }
  section.hero-split .hero-split-copy{ grid-area:copy !important; grid-column:auto !important; order:0 !important; }
  section.hero-split .pc-hero-copilot{ grid-area:copilot !important; grid-column:auto !important; order:0 !important; justify-self:center !important; margin:0 !important; }
  section.hero-split .pc-hero-visual{ grid-area:orbit !important; grid-column:auto !important; order:0 !important; justify-self:center !important; margin:0 !important; transform:none !important; }
}

/* v2.8.3 — Hero: texto centrado sobre los dos diagramas. */
@media (min-width:961px){
  section.hero-split .hero-split-copy{
    justify-self:center !important; text-align:center !important;
    max-width:900px !important; width:100%; margin:0 auto !important;
  }
  section.hero-split .hero-split-copy h1{ margin-left:auto; margin-right:auto; text-wrap:balance; }
  section.hero-split .hero-split-copy > p{ margin-left:auto !important; margin-right:auto !important; max-width:720px !important; }
  section.hero-split .hero-split-copy .eyebrow-pill{ justify-content:center !important; }
  section.hero-split .hero-split-copy .pc-hero-ctas{ justify-content:center !important; }
  section.hero-split .container.hero-split-grid.has-visual{ gap:40px 56px !important; }
}

/* =========================================================
   v2.9 — Hero en 3 columnas con el texto como prioridad:
   la columna central tiene ancho fijo suficiente para que el
   título rompa en 3 líneas limpias; los diagramas se escalan
   para ocupar el resto. Anula los layouts previos (2.8.x).
   ========================================================= */
@media (min-width:961px){
  section.hero-split{ padding:56px 0 48px; }
  section.hero-split .container.hero-split-grid.has-visual{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 540px minmax(0,1fr) !important;
    grid-template-areas:"copilot copy orbit" !important;
    gap:0 24px !important;
    align-items:center !important;
  }
  section.hero-split .hero-split-copy{
    grid-area:copy !important; justify-self:center !important; text-align:left !important;
    max-width:540px !important; width:100% !important; margin:0 !important;
  }
  section.hero-split .hero-split-copy .eyebrow-pill{ justify-content:flex-start !important; }
  section.hero-split .hero-split-copy h1{ font-size:46px !important; line-height:1.06 !important; margin:16px 0 16px !important; letter-spacing:-.026em; text-wrap:balance; }
  section.hero-split .hero-split-copy > p{ font-size:16px !important; line-height:1.65 !important; max-width:none !important; margin:0 0 24px !important; }
  section.hero-split .hero-split-copy .pc-hero-ctas{ justify-content:flex-start !important; }

  section.hero-split .pc-hero-copilot{ grid-area:copilot !important; justify-self:center !important; width:300px !important; height:300px !important; margin:0 !important; }
  section.hero-split .pc-ai-visual--hero{ transform:translate(-50%,-50%) scale(.577) !important; }
  section.hero-split .pc-hero-visual{ grid-area:orbit !important; justify-self:center !important; margin:0 !important; transform:scale(.8) !important; transform-origin:center !important; }
}
@media (min-width:1181px){
  section.hero-split .container.hero-split-grid.has-visual{ grid-template-columns:minmax(0,1fr) 560px minmax(0,1fr) !important; gap:0 32px !important; }
  section.hero-split .hero-split-copy h1{ font-size:48px !important; }
  section.hero-split .pc-hero-copilot{ width:330px !important; height:330px !important; }
  section.hero-split .pc-ai-visual--hero{ transform:translate(-50%,-50%) scale(.635) !important; }
  section.hero-split .pc-hero-visual{ transform:scale(.88) !important; }
}
@media (min-width:1400px){
  section.hero-split .container.hero-split-grid.has-visual{ grid-template-columns:minmax(0,1fr) 580px minmax(0,1fr) !important; gap:0 40px !important; }
  section.hero-split .pc-hero-copilot{ width:360px !important; height:360px !important; }
  section.hero-split .pc-ai-visual--hero{ transform:translate(-50%,-50%) scale(.69) !important; }
  section.hero-split .pc-hero-visual{ transform:none !important; }
}

/* v2.9.1 — Hero vuelve a dos columnas: texto a la izquierda, órbita a la derecha. */
@media (min-width:961px){
  section.hero-split .container.hero-split-grid.has-visual{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) !important;
    grid-template-areas:"copy orbit" !important;
    gap:0 48px !important;
  }
  section.hero-split .hero-split-copy{ justify-self:start !important; max-width:620px !important; }
  section.hero-split .hero-split-copy h1{ font-size:52px !important; }
  section.hero-split .pc-hero-visual{ justify-self:end !important; transform:none !important; }
}
@media (min-width:961px) and (max-width:1180px){
  section.hero-split .hero-split-copy h1{ font-size:44px !important; }
  section.hero-split .pc-hero-visual{ transform:scale(.88) !important; transform-origin:right center !important; }
}

/* v2.9.2 — Contacto por correo en lugar de formulario. */
.pc-mail-cta{ padding:96px 0; }
.pc-mail-box{ position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center; }
.pc-mail-box .eyebrow{ color:#a6eeff; text-align:center; }
.pc-mail-box h2{ color:#ffffff; font-size:38px; line-height:1.15; margin:12px 0 14px; text-wrap:balance; }
.pc-mail-box p{ color:rgba(255,255,255,.82); font-size:16.5px; line-height:1.65; margin:0 auto 30px; max-width:600px; }
.pc-mail-actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 24px; }
.pc-mail-btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:999px; background:#ffffff; color:#005b99; font-family:'Sora',sans-serif; font-size:15.5px; font-weight:700; text-decoration:none; box-shadow:0 14px 34px rgba(0,0,0,.22); transition:transform .25s, box-shadow .25s, color .25s; }
.pc-mail-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.28); color:#0097d8; }
.pc-mail-btn .material-symbols-outlined{ font-size:20px; }
.pc-mail-wa{ display:inline-flex; align-items:center; gap:7px; color:#ffffff; font-family:'Sora',sans-serif; font-size:14px; font-weight:600; text-decoration:none; }
.pc-mail-wa:hover{ color:#a6eeff; }
.pc-mail-wa .material-symbols-outlined{ font-size:18px; }
@media (max-width:640px){ .pc-mail-cta{ padding:64px 0; } .pc-mail-box h2{ font-size:28px; } .pc-mail-btn{ font-size:14px; padding:14px 22px; } }

/* v2.9.3 — Contacto sobrio: título + dos datos de contacto. */
.pc-mail-cta{ padding:80px 0; }
.pc-mail-box h2{ font-size:34px; margin:0 0 24px; }
.pc-mail-actions{ gap:14px 28px; }
.pc-mail-link{ display:inline-flex; align-items:center; gap:9px; color:#ffffff; font-family:'Sora',sans-serif; font-size:16px; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:3px; transition:color .2s, border-color .2s; }
.pc-mail-link:hover{ color:#a6eeff; border-color:#a6eeff; }
.pc-mail-link .material-symbols-outlined{ font-size:19px; color:#a6eeff; }
.pc-mail-sep{ width:1px; height:22px; background:rgba(255,255,255,.25); }
@media (max-width:640px){ .pc-mail-cta{ padding:56px 0; } .pc-mail-box h2{ font-size:26px; } .pc-mail-sep{ display:none; } .pc-mail-actions{ flex-direction:column; } }


/* =========================================================
   v3.0 — Dirección visual FLUENT (Microsoft Partner moderno)
   Superficies planas sin borde, profundidad por sombra,
   Acrylic sobre azul, Sora 600, radios 16/12/999, movimiento
   contenido. Pilares editoriales con numeración. Capa final.
   Solo hex literales (W3TC rompe var()).
   ========================================================= */
body{ color:#4a6070; }
h1,h2,h3,h4{ font-weight:600; color:#0b2236; }
.eyebrow, .section-dark .eyebrow, .pc-ai-eyebrow{ font-family:'Sora',sans-serif; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.section{ padding:96px 0; }
.section-alt{ background:#f7fafc; }
.section-title h2{ font-size:34px; letter-spacing:-.02em; line-height:1.2; }
.section-title p{ font-size:16px; line-height:1.6; color:#4a6070; }
.btn, .btn-primary, .btn-outline{ font-family:'Sora',sans-serif; font-weight:600; border-radius:999px; text-transform:none; letter-spacing:0; }
.btn-outline{ background:#ffffff; border:0; color:#005b99; box-shadow:0 2px 6px rgba(0,40,80,.06); transition:box-shadow .2s, transform .2s; }
.btn-outline:hover{ background:#ffffff; color:#005b99; box-shadow:0 12px 32px rgba(0,40,80,.12); transform:translateY(-2px); }

/* --- Hero --- */
.pc-fluent-hero{ background:linear-gradient(150deg,#0097d8 0%,#0073b5 50%,#004e86 100%); padding-bottom:128px; }
.pc-fluent-hero.hero-split::before{ background:radial-gradient(circle at 85% 10%, rgba(0,210,255,.18), transparent 32%), radial-gradient(circle at 5% 95%, rgba(255,255,255,.08), transparent 30%); }
.pc-fluent-hero.hero-split::after{ display:none; }
.pc-fluent-hero .hero-cloud-float{ display:none; }
.pc-fluent-hero .eyebrow-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-family:'Sora',sans-serif; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#ffffff; }
.pc-fluent-hero .eyebrow-pill::before{ display:none; }
.pc-fluent-hero .eyebrow-pill .dot{ display:none; }
.pc-fluent-hero h1{ font-size:52px; font-weight:600; line-height:1.08; letter-spacing:-.02em; margin:24px 0; max-width:560px; }
.pc-fluent-hero .hero-split-copy > p{ font-size:17px; line-height:1.65; max-width:560px; margin-bottom:32px; }
.pc-fluent-hero .pc-hero-btn.ghost{ font-weight:600; padding:15px 28px; border:0; box-shadow:0 12px 32px rgba(0,40,80,.22); }
.pc-fluent-hero .pc-hero-btn.ghost:hover{ box-shadow:0 16px 40px rgba(0,40,80,.28); }
.pc-fluent-hero .pc-hv-sat-in{ background:rgba(255,255,255,.92); box-shadow:0 12px 32px rgba(0,40,80,.22); }
.pc-fluent-hero .pc-hv-tile{ border-radius:16px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 12px 32px rgba(0,40,80,.22); }
.pc-fluent-hero .pc-hv-tile strong{ font-weight:600; color:#0b2236; }
.pc-fluent-hero .pc-hv-tile em{ color:#4a6070; }
.pc-fl-curve{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:72px; display:block; }
.pc-fl-curve.top{ position:static; }

/* --- Ecosistema --- */
.pc-ecosystem{ background:#ffffff; padding:40px 0 56px; border-bottom:0; }
.pc-eco-head .eyebrow{ color:#0097d8; }
.pc-eco-head p{ font-size:15px; color:#4a6070; }
.pc-eco-band{ border:0; padding:12px 0; }
.pc-eco-band:last-child{ border:0; }
.pc-eco-label{ font-family:'Sora',sans-serif; font-size:12px; font-weight:600; letter-spacing:.08em; color:#4a6070; }
.pc-eco-item{ border:0; border-radius:12px; background:#f7fafc; color:#0b2236; padding:10px 18px 10px 12px; }
.pc-eco-item:hover{ background:#ffffff; transform:translateY(-2px) scale(1.03); box-shadow:0 12px 32px rgba(0,40,80,.12); }

/* --- Pilares editoriales --- */
#servicios.section-alt{ background:#ffffff; }
.pc-pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid #e3ecf3; margin-top:8px; }
.pc-pillar{ position:relative; display:flex; flex-direction:column; padding:40px 40px 40px 0; margin-right:40px; border-right:1px solid #e3ecf3; background:none; box-shadow:none; border-radius:0; }
.pc-pillar:last-child{ border-right:0; margin-right:0; padding-right:0; }
.pc-pillar-accent{ position:absolute; top:-1px; left:0; height:2px; width:0; background:#0097d8; transition:width .5s cubic-bezier(.16,.84,.44,1); }
.pc-pillar:hover .pc-pillar-accent{ width:100%; }
.pc-pillar-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pc-pillar-num{ font-family:'Sora',sans-serif; font-size:64px; font-weight:600; line-height:.85; letter-spacing:-.04em; color:#0b2236; }
.pc-pillar-tag{ font-family:'Sora',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#0097d8; padding-bottom:6px; }
.pc-pillar h3{ font-size:22px; font-weight:600; margin:0 0 14px; line-height:1.22; letter-spacing:-.015em; }
.pc-pillar p{ font-size:15px; line-height:1.65; margin:0 0 28px; color:#4a6070; flex:1; }
.pc-pillar-link{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:'Sora',sans-serif; font-size:14px; font-weight:600; color:#005b99; padding-bottom:2px; border-bottom:1px solid rgba(0,91,153,.3); transition:color .2s, border-color .2s, gap .25s; }
.pc-pillar-link:hover{ color:#0097d8; border-color:#0097d8; gap:12px; }
.pc-pillar-link .material-symbols-outlined{ font-size:18px; }
@media (max-width:900px){ .pc-pillars{ grid-template-columns:1fr; } .pc-pillar{ border-right:0; margin-right:0; padding-right:0; border-bottom:1px solid #e3ecf3; } }

/* --- Metodología --- */
.pc-process{ background:#f7fafc; }
.pc-step-node{ width:40px; height:40px; border-radius:50%; background:#ffffff; border:2px solid #0097d8; color:#005b99; font-family:'Sora',sans-serif; font-size:14px; font-weight:600; box-shadow:0 0 0 6px #f7fafc; }
.pc-step-label{ display:none; }
.pc-step h3{ font-size:18px; margin:22px 0 8px; }
.pc-step p{ font-size:15px; line-height:1.6; color:#4a6070; }
.pc-timeline-rail{ background:#e3ecf3; }
.pc-timeline-rail-fill{ background:#0097d8; }

/* --- IA y Seguridad --- */
.pc-ai{ background:linear-gradient(150deg,#0b2236 0%,#003a63 100%); padding:96px 0; }
.pc-ai::before{ background:radial-gradient(circle at 80% 30%, rgba(185,139,255,.10), transparent 40%); }
.pc-ai::after{ display:none; }
.pc-ai h2{ font-size:34px; font-weight:600; letter-spacing:-.02em; color:#ffffff; }
.pc-ai-eyebrow{ color:#a6eeff; }
.pc-ai-chip{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.pc-ai-sat-card{ border-radius:12px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* --- Formación oficial --- */
.pc-trust-checklist{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; background:#ffffff; border-radius:16px; padding:20px 48px; box-shadow:0 2px 6px rgba(0,40,80,.06); }
.pc-trust-item{ display:flex; align-items:flex-start; gap:14px; padding:20px 0; border:0; border-bottom:1px solid #e3ecf3; border-radius:0; background:none; box-shadow:none; }
.pc-trust-item .material-symbols-outlined{ color:#0097d8; font-size:20px; margin-top:1px; }
.pc-trust-item .label{ font-size:15px; line-height:1.55; color:#0b2236; }
@media (max-width:760px){ .pc-trust-checklist{ grid-template-columns:1fr; padding:12px 24px; } }

/* --- Trainings (tabla Learn) --- */
.pc-courses{ background:#f7fafc; }
.pc-rows-head{ display:grid; grid-template-columns:112px minmax(0,1fr) 140px; gap:24px; padding:14px 24px; font-family:'Sora',sans-serif; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#4a6070; background:#ffffff; border-radius:16px 16px 0 0; border-bottom:1px solid #e3ecf3; }
.pc-rows{ background:#ffffff; border-radius:0 0 16px 16px; box-shadow:0 2px 6px rgba(0,40,80,.06); overflow:hidden; }
.pc-row{ display:grid; grid-template-columns:112px minmax(0,1fr) 140px; gap:24px; align-items:center; padding:16px 24px; border-bottom:1px solid #e3ecf3; background:#ffffff; transition:background .2s; }
.pc-row:hover{ background:#f7fafc; }
.pc-row:last-child{ border-bottom:0; }
.pc-row-accent{ width:3px; opacity:0; }
.pc-row:first-child{ background:#e6f4fb; }
.pc-row:first-child .pc-row-accent{ opacity:1; }
.pc-row-code{ font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:#005b99; }
.pc-row-title h3{ font-size:15px; font-weight:600; color:#0b2236; }
.pc-row-pill{ font-family:'Sora',sans-serif; font-size:11px; font-weight:600; color:#005b99; background:#e6f4fb; padding:3px 10px; border-radius:999px; }
.pc-row-body p{ font-size:13.5px; color:#4a6070; margin:4px 0 8px; }
.pc-row-level{ display:inline-flex; align-items:center; gap:6px; font-family:'Sora',sans-serif; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; }
.pc-row-level.associate{ color:#005b99; background:#e6f4fb; }
.pc-row-level.expert{ color:#5b3bb5; background:#efeafb; }
.pc-row-level.fundamentals{ color:#0b7a43; background:#e6f6ec; }
.pc-row-cta{ justify-self:end; display:inline-flex; align-items:center; gap:6px; font-family:'Sora',sans-serif; font-size:14px; font-weight:600; color:#0097d8; background:none; border:0; padding:0; box-shadow:none; white-space:nowrap; transition:color .2s, gap .2s; }
.pc-row-cta:hover{ color:#005b99; gap:10px; background:none; }
.pc-row-cta .material-symbols-outlined{ font-size:18px; }
@media (max-width:900px){ .pc-rows-head{ display:none; } .pc-row{ grid-template-columns:1fr; gap:10px; } .pc-row-cta{ justify-self:start; } }

/* --- Blog --- */
.pc-blog-card{ border:0; border-radius:16px; padding:12px 12px 24px; background:#ffffff; box-shadow:0 2px 6px rgba(0,40,80,.06); transition:transform .2s, box-shadow .2s; }
.pc-blog-card:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,40,80,.12); }
.pc-blog-card .thumb, .pc-blog-card .thumb-placeholder{ border-radius:12px; height:180px !important; }
.pc-blog-card .thumb-placeholder{ background:#e6f4fb; }
.pc-blog-card .body{ padding:20px 12px 0; }
.pc-blog-card .cat-pill{ background:none; border:0; padding:0; font-family:'Sora',sans-serif; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#0097d8; }
.pc-blog-card h3{ font-size:18px; font-weight:600; }
.pc-blog-card h3 a{ color:#0b2236; }
.pc-blog-card .excerpt{ font-size:14.5px; color:#4a6070; }
.pc-blog-card .meta{ font-size:12.5px; color:#4a6070; }

/* --- FAQ --- */
#faq.section-alt{ background:#ffffff; }
#faq .container{ max-width:860px; }
#faq .eyebrow, #faq .section-title{ text-align:center; }
.pc-faq-item{ border:0; border-bottom:1px solid #e3ecf3; border-radius:12px; padding:0 20px; background:none; box-shadow:none; transition:background .2s; }
.pc-faq-item[open]{ background:#f7fafc; }
.pc-faq-item summary{ min-height:64px; padding:18px 0; font-family:'Sora',sans-serif; font-size:16px; font-weight:600; color:#0b2236; }
.pc-faq-item summary::after{ color:#0097d8; }
.pc-faq-item p{ font-size:15px; line-height:1.65; color:#4a6070; margin:0 0 20px; }

/* --- Contacto ligero --- */
.pc-fl-contact{ padding:0 0 56px; background:linear-gradient(150deg,#0097d8 0%,#0073b5 50%,#004e86 100%); position:relative; overflow:hidden; }
.pc-fl-contact::before, .pc-fl-contact::after{ display:none; }
.pc-fl-contact-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; margin-top:16px; position:relative; }
.pc-fl-contact-row h2{ font-size:24px; font-weight:600; letter-spacing:-.02em; color:#ffffff; margin:0; }
.pc-fl-contact .pc-mail-actions{ justify-content:flex-start; gap:12px 36px; }
.pc-fl-contact .pc-mail-link{ border:0; padding:0; font-size:16px; }
.pc-fl-contact .pc-mail-link .material-symbols-outlined{ color:#a6eeff; }
@media (max-width:760px){ .pc-fl-contact-row{ grid-template-columns:1fr; gap:18px; } }

/* --- Footer --- */
.site-footer{ background:#0b2236; }
.site-footer a{ color:#a6b8c6; }
.site-footer a:hover{ color:#ffffff; }
.footer-contact a{ color:#a6eeff; }

/* v3.0.3 — Ecosistema: Microsoft 365 como tarjeta única; Azure en cinta. */
.pc-eco-single .pc-eco-tile{ display:inline-flex; align-items:center; gap:12px; padding:12px 18px 12px 14px; border-radius:14px; background:#ffffff; box-shadow:0 2px 6px rgba(0,40,80,.06); }
.pc-eco-single .pc-eco-tile img{ width:38px; height:38px; display:block; }
.pc-eco-single .pc-eco-tile strong{ display:block; font-family:'Sora',sans-serif; font-size:14px; font-weight:600; color:#0b2236; line-height:1.2; }
.pc-eco-single .pc-eco-tile em{ display:block; font-style:normal; font-size:11.5px; color:#4a6070; margin-top:2px; }