/* aah! Factor — capa de movimiento */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --marino: #0D2B4E;
  --celeste: #5B9BD5;
}

/* Transición suave entre páginas (navegadores compatibles) */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 220ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

html, body { overflow-x: clip; }

/* Barra de progreso de lectura */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--marino), var(--celeste));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Encabezado fijo con vidrio */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow 240ms ease, background-color 240ms ease;
}
header.is-scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 30px rgba(13, 43, 78, 0.08); }
header nav { transition: padding 240ms var(--ease-out); }
header.is-scrolled nav { padding-top: 10px !important; padding-bottom: 10px !important; }
header nav a[href]:not([style*="999px"]) { position: relative; }
header nav a[href]:not([style*="999px"])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--marino); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 260ms var(--ease-out);
}
header nav a[aria-current]::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  header nav a[href]:not([style*="999px"]):hover::after { transform: scaleX(1); }
}

/* Entrada orquestada del hero */
main > section:first-of-type { position: relative; isolation: isolate; }
main > section:first-of-type h1,
main > section:first-of-type h1 ~ p,
main > section:first-of-type p:first-child,
main > section:first-of-type h1 ~ div,
main > section:first-of-type h1 ~ form {
  animation: rise 900ms var(--ease-out) both;
}
main > section:first-of-type p:first-child { animation-delay: 0ms; }
main > section:first-of-type h1 { animation-delay: 80ms; }
main > section:first-of-type h1 ~ p { animation-delay: 220ms; }
main > section:first-of-type h1 ~ div,
main > section:first-of-type h1 ~ form { animation-delay: 340ms; }
main > section:first-of-type img,
main > section:first-of-type .hero-compass {
  animation: unveil 1200ms var(--ease-out) 200ms both;
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes unveil {
  from { clip-path: inset(18% 18% 18% 18% round 28px); opacity: 0; transform: scale(1.06); }
  to { clip-path: inset(0 0 0 0 round 28px); opacity: 1; transform: scale(1); }
}

/* Hero de Inicio: brújula animada con la palabra COACHING */
.hero-compass { position: relative; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(13, 43, 78, 0.45), 0 0 0 1px rgba(13, 43, 78, 0.06); background: #F2EDE2; }
.hc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hc-t { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 66px; fill: #2E2E2E; text-anchor: middle; }
.hc-t-hi { fill: #FFFFFF; opacity: 0.85; }
.hc-l { opacity: 0; }
.hc-glint { opacity: 0; transition: opacity 600ms ease; }
.hero-compass.done .hc-glint { animation: hc-glint 1.8s ease-in-out infinite; }
@keyframes hc-glint { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hc-l { opacity: 1 !important; filter: none !important; transform: none !important; } }

/* Anillos de la marca girando detrás del hero */
.hero-rings {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(720px, 90vw); aspect-ratio: 1; right: -220px; top: -160px; opacity: 0.55;
  animation: fade-in 1600ms ease 400ms both;
}
.hero-rings circle { transform-origin: 50% 50%; transform-box: view-box; }
.hero-rings .r1 { animation: spin 90s linear infinite; }
.hero-rings .r2 { animation: spin 60s linear infinite reverse; }
.hero-rings .r3 { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }

/* Revelado al hacer scroll (lo activa motion.js) */
.rv { opacity: 0; transform: translateY(32px); }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.rv-img { clip-path: inset(12% 0 0 0 round 24px); opacity: 0; transform: scale(1.04); }
.rv-img.is-in {
  clip-path: inset(0 0 0 0 round 24px); opacity: 1; transform: none;
  transition: clip-path 1100ms var(--ease-out), opacity 700ms ease, transform 1200ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* Fórmula aah!: logo al centro de Criterio, Creatividad y Liderazgo, con la cifra de PwC */
.fx { display: flex; flex-direction: column; gap: 22px; }
.fx-panel {
  --rx: 0deg; --ry: 0deg; --gx: 30%; --gy: 20%;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 34px 30px 34px 16px; border-radius: 32px; color: #FFFFFF;
  background:
    radial-gradient(520px circle at var(--gx) var(--gy), rgba(91, 155, 213, 0.38), rgba(91, 155, 213, 0) 60%),
    linear-gradient(150deg, #123A66 0%, #0D2B4E 48%, #071A31 100%);
  box-shadow: 0 30px 60px -24px rgba(7, 26, 49, 0.55), 0 0 0 1px rgba(143, 200, 255, 0.14) inset;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1), background-position 500ms ease;
}
/* Retícula de puntos y destello que cruza el panel */
.fx-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none;
  background-image: radial-gradient(rgba(207, 230, 255, 0.35) 1px, transparent 1.4px); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 35% 50%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 35% 50%, #000 0%, transparent 75%); }
.fx-panel::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.10), transparent); transform: skewX(-12deg);
  animation: fx-sheen 7s ease-in-out 1.5s infinite; }
@keyframes fx-sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }

.fx-art { position: relative; width: 100%; aspect-ratio: 360 / 340; }
.fx-venn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-halo { opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: fx-breathe 6s ease-in-out infinite; }
.fx-spin { transform-box: view-box; transform-origin: 180px 192px; animation: fx-sway 14s ease-in-out infinite; }
@keyframes fx-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes fx-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.22; } 50% { transform: scale(1.04); opacity: 0.36; } }
.fx-fill { mix-blend-mode: screen; opacity: 0.7; transition: opacity 600ms ease, filter 600ms ease; }
.fx-c { transform-box: view-box; transform-origin: var(--cx) var(--cy); transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.fx-ring { stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 0.55; transition: opacity 500ms ease, stroke-width 500ms ease; }
/* Etiquetas (misma letra del título Modelo Cero Quejas): las letras aparecen desde un difuminado */
.fx-labels { position: absolute; inset: 0; pointer-events: none; }
.fx-label { position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(17px, 1.75vw, 22px); line-height: 1; letter-spacing: -0.01em; color: #FFFFFF;
  text-shadow: 0 0 16px rgba(143, 200, 255, 0.75), 0 2px 6px rgba(7, 26, 49, 0.55);
  opacity: 0.9; transition: opacity 500ms ease, transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.fx-label > span { display: inline-block; }
@keyframes fx-blur-in { 0% { opacity: 0; filter: blur(14px); transform: scale(1.5); } 60% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; } }
.fx-pulse { fill: none; stroke: #CFE6FF; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: fx-pulse 3.2s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.fx-pulse-2 { animation-delay: 1.6s; }
@keyframes fx-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }
.fx-logo { position: absolute; left: 50%; top: 56.5%; width: 25.5%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: #FFFFFF; padding: 3%; box-sizing: border-box;
  box-shadow: 0 0 0 6px rgba(207, 230, 255, 0.18), 0 0 36px rgba(143, 200, 255, 0.75), 0 12px 24px rgba(7, 26, 49, 0.5);
  animation: fx-logo 4s ease-in-out infinite; }
@keyframes fx-logo { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } }

/* Paso activo: su círculo se enciende y los otros se atenúan */
.fx[data-step] .fx-fill { opacity: 0.42; }
.fx[data-step] .fx-label { opacity: 0.55; }
.fx[data-step="1"] .fx-c-1, .fx[data-step="2"] .fx-c-2, .fx[data-step="3"] .fx-c-3 { transform: scale(1.07); }
.fx[data-step="1"] .fx-c-1 .fx-fill, .fx[data-step="2"] .fx-c-2 .fx-fill, .fx[data-step="3"] .fx-c-3 .fx-fill { opacity: 0.95; filter: drop-shadow(0 0 18px rgba(143, 200, 255, 0.85)); }
.fx[data-step="1"] .fx-ring-1, .fx[data-step="2"] .fx-ring-2, .fx[data-step="3"] .fx-ring-3 { opacity: 1; stroke-width: 3; stroke: #FFFFFF; animation: fx-draw 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.fx[data-step="1"] .fx-label-1, .fx[data-step="2"] .fx-label-2, .fx[data-step="3"] .fx-label-3 { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
.fx[data-step="1"] .fx-label-1 > span, .fx[data-step="2"] .fx-label-2 > span, .fx[data-step="3"] .fx-label-3 > span { animation: fx-blur-in 900ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i) * 70ms) both; }
@keyframes fx-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Cifra */
.fx-stat { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.fx-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(44px, 4.6vw, 64px); line-height: 0.95; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 30%, #8FC8FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(143, 200, 255, 0.55)); }
.fx-unit { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; color: #CFE6FF; }
.fx-desc { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(207, 230, 255, 0.25); font-size: 15px; line-height: 1.45; color: #DCE6F2; max-width: 15em; }

.fx-cap { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid #5B9BD5; font-size: 16px; line-height: 1.6; color: #33475E; }

/* Entrada: los círculos salen del centro, la cifra cuenta y el texto sube */
.fx.fx-pre .fx-c { transform: scale(0.2); opacity: 0; }
.fx.fx-pre .fx-label, .fx.fx-pre .fx-logo, .fx.fx-pre .fx-stat > *, .fx.fx-pre .fx-cap { opacity: 0; }
.fx.fx-pre .fx-ring { stroke-dashoffset: 100; }
.fx.fx-in .fx-c { animation: fx-pop-in 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.fx.fx-in .fx-c-2 { animation-delay: 140ms; } .fx.fx-in .fx-c-3 { animation-delay: 280ms; }
.fx.fx-in .fx-ring { animation: fx-draw 1400ms cubic-bezier(0.23, 1, 0.32, 1) 300ms both; }
.fx.fx-in .fx-logo { animation: fx-logo-in 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 500ms both, fx-logo 4s ease-in-out 1.4s infinite; }
.fx.fx-in .fx-label { animation: fx-fade 200ms ease 750ms both; }
.fx.fx-in .fx-label > span { animation: fx-blur-in 1100ms cubic-bezier(0.23, 1, 0.32, 1) calc(800ms + var(--i) * 75ms) both; }
.fx.fx-in .fx-stat > * { animation: fx-rise 800ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.fx.fx-in .fx-unit { animation-delay: 120ms; } .fx.fx-in .fx-desc { animation-delay: 240ms; }
.fx.fx-in .fx-cap { animation: fx-rise 800ms cubic-bezier(0.23, 1, 0.32, 1) 500ms both; }
@keyframes fx-pop-in { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fx-logo-in { from { transform: translate(-50%, -50%) scale(0) rotate(-40deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }
@keyframes fx-fade { from { opacity: 0; } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .fx-panel { grid-template-columns: 1fr; padding: 18px 20px 26px; }
  .fx-stat { align-items: center; text-align: center; }
  .fx-desc { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-panel { transform: none !important; transition: none; }
  .fx-panel::after, .fx-halo, .fx-spin, .fx-pulse, .fx-logo { animation: none !important; }
  .fx-pulse, .fx-sparks { display: none; }
  .fx .fx-c, .fx .fx-ring, .fx .fx-label, .fx .fx-label > span, .fx .fx-stat > *, .fx .fx-cap { animation: none !important; opacity: 1; }
  .fx-c { transition: none; }
}

/* Pasos como recuadros que se iluminan al pasar el ratón, con el número centrado */
.formula-steps { gap: 14px !important; }
.formula-steps > li {
  position: relative; isolation: isolate; overflow: hidden; cursor: pointer;
  align-items: center !important; gap: 18px !important;
  padding: 16px 20px 18px; border-radius: 20px; background: #FFFFFF; border: 1px solid #E3EBF5;
  transition: border-color 300ms ease, background-color 300ms ease, box-shadow 400ms ease;
}
.formula-steps > li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 155, 213, 0.30), rgba(91, 155, 213, 0) 65%);
  transition: opacity 300ms ease;
}
.formula-steps > li > div > h3 { margin: 0 0 4px !important; }
.formula-steps > li > div { opacity: 0.7; transition: opacity 300ms ease; }
.formula-steps > li > span[aria-hidden] { flex: none; transition: transform 300ms var(--ease-out), box-shadow 300ms ease; }
.formula-steps > li.active { background: #F4F8FD; border-color: #9DB3CC; }
.formula-steps > li.active > div { opacity: 1; }
.formula-steps > li.active > span[aria-hidden] { box-shadow: 0 0 0 6px rgba(91, 155, 213, 0.22); }
@media (hover: hover) and (pointer: fine) {
  .formula-steps > li:hover { border-color: #5B9BD5; box-shadow: 0 0 0 1px rgba(91, 155, 213, 0.35), 0 0 28px rgba(91, 155, 213, 0.35); }
  .formula-steps > li:hover::before { opacity: 1; }
  .formula-steps > li:hover > div { opacity: 1; }
  .formula-steps > li:hover > span[aria-hidden] { box-shadow: 0 0 0 6px rgba(91, 155, 213, 0.30), 0 0 18px rgba(91, 155, 213, 0.55); }
}
.formula-steps > li:focus-visible { outline: 3px solid #5B9BD5; outline-offset: 3px; }
.formula-steps > li::after { content: ""; position: absolute; left: 82px; right: 22px; bottom: 9px; height: 2px; border-radius: 2px;
  background: #1F5C9E; transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.formula-steps.auto > li.active::after { opacity: 0.6; animation: step-progress var(--step-ms, 4200ms) linear both; }
@keyframes step-progress { to { transform: scaleX(1); } }

/* Botones y enlaces en píldora */
a[style*="999px"], button[style*="999px"] {
  transition: transform 160ms var(--ease-out), box-shadow 240ms ease, background-color 200ms ease, color 200ms ease;
}
a[style*="999px"]:active, button[style*="999px"]:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  a[style*="999px"]:hover, button[style*="999px"]:hover {
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13, 43, 78, 0.18);
  }
  a[style*="999px"]:hover:active, button[style*="999px"]:hover:active { transform: translateY(0) scale(0.97); }
}

/* Tarjetas de programas en Inicio */
/* (tarjetas antiguas de programas retiradas) */
.page-index .x-old article img { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .page-index .x-old article:hover img { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(13, 43, 78, 0.16); }
}

/* Paralaje suave en las fotos de Servicios */
@supports (animation-timeline: view()) {
  .page-servicios article > img.is-in {
    animation: drift linear both; animation-timeline: view(); animation-range: cover;
  }
  @keyframes drift { from { object-position: 50% 20%; } to { object-position: 50% 80%; } }
}

/* Modelo Cero Quejas: anillos que giran y laten en pulso */
.cq-rings { overflow: visible; }
.cq-rings .cq-g, .cq-rings .cq-ripple, .cq-rings circle { transform-box: view-box; transform-origin: 120px 120px; }
.cq-rings .cq-g { animation: cq-breathe 2.4s ease-in-out infinite; }
.cq-rings .cq-g-1 { animation-delay: 0.3s; }
.cq-rings .cq-g-2 { animation-delay: 0.15s; }
.cq-rings .cq-g-3 { animation-delay: 0s; }
.cq-rings .cq-g-1 circle { animation: spin 50s linear infinite; }
.cq-rings .cq-g-2 circle { animation: spin 34s linear infinite reverse; }
.cq-rings .cq-g-3 circle { animation: spin 22s linear infinite; }
.cq-rings .cq-ripple { animation: cq-ripple 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.cq-rings .cq-ripple-2 { animation-delay: 1.2s; }
.cq-rings .cq-zero { transform-box: fill-box; transform-origin: center; animation: beat 2.4s ease-in-out infinite; }
@keyframes cq-breathe { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.07); } 60% { transform: scale(0.98); } }
@keyframes cq-ripple { from { transform: scale(0.35); opacity: 0.8; } to { transform: scale(1.2); opacity: 0; } }

/* Aplicaciones: indicador "en construcción" */
.page-aplicaciones main > section:first-of-type p:first-child::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #1F5C9E; margin-right: 10px; vertical-align: 1px;
  animation: pulse 1800ms ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 92, 158, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(31, 92, 158, 0); } }

/* Campos de formulario */
input, textarea { transition: border-color 200ms ease, box-shadow 200ms ease; }
input:focus, textarea:focus { border-color: #1F5C9E !important; box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.25); }

/* Movimiento reducido: menos y más suave, no cero */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }
  .hero-rings circle, .cq-rings circle, .cq-rings .cq-g, .cq-rings .cq-zero { animation: none !important; }
  .cq-rings .cq-ripple { display: none; }
  .rv, .rv-img { transform: none; clip-path: none; }
  .rv.is-in, .rv-img.is-in { transition: opacity 300ms ease; }
  .formula-steps > li::before { transition: none; }
  a[style*="999px"]:hover, button[style*="999px"]:hover { transform: none; }
}

/* ===== Quiénes somos: "Cómo entendemos la transformación" ===== */
.enfoque-card {
  position: relative; background: #FFFFFF; border-radius: 24px;
  border-top: 0 !important; padding: 36px 32px 34px !important;
  box-shadow: 0 1px 2px rgba(13, 43, 78, 0.06), 0 12px 32px rgba(13, 43, 78, 0.06);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.enfoque-card::before {
  content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--marino), var(--celeste));
  transform-origin: 0 50%;
}
.ico-wrap {
  width: 88px; height: 88px; border-radius: 50%; background: #EEF3F9;
  display: grid; place-items: center; margin: 0 0 24px;
  transition: transform 500ms var(--ease-out), background-color 300ms ease;
}
.ico { width: 60px; height: 60px; overflow: visible; }
.ico .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ico .bar { transform-box: fill-box; transform-origin: 50% 100%; }

/* Estado inicial (lo activa motion.js al entrar en pantalla) */
.enfoque-card.rv::before { transform: scaleX(0); }
.enfoque-card.rv .ico-wrap { transform: scale(0.8); opacity: 0; }
.enfoque-card.rv .ico .d { stroke-dashoffset: 1; }
.enfoque-card.rv .ico .bar { transform: scaleY(0); }
.enfoque-card.rv .ico .heart { opacity: 0; }
.enfoque-card.rv h3, .enfoque-card.rv p, .enfoque-card.rv .t { opacity: 0; transform: translateY(12px); }

.enfoque-card.rv.is-in::before { transform: scaleX(1); transition: transform 900ms var(--ease-out) calc(var(--d) + 150ms); }
.enfoque-card.rv.is-in .ico-wrap { transform: none; opacity: 1; transition: transform 700ms var(--ease-out) calc(var(--d) + 100ms), opacity 400ms ease calc(var(--d) + 100ms); }
.enfoque-card.rv.is-in .ico .d { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease-out) calc(var(--d) + 250ms + var(--dd, 0ms)); }
.enfoque-card.rv.is-in .ico .bar { transform: none; transition: transform 800ms var(--ease-out) calc(var(--d) + 250ms + var(--dd, 0ms)); }
.enfoque-card.rv.is-in .ico .heart { opacity: 1; transition: opacity 400ms ease calc(var(--d) + 1000ms); }
.enfoque-card.rv.is-in h3, .enfoque-card.rv.is-in p, .enfoque-card.rv.is-in .t { opacity: 1; transform: none; transition: opacity 600ms ease, transform 800ms var(--ease-out); }
.enfoque-card.rv.is-in .t { display: block; transition-delay: calc(var(--d) + 600ms); }
.enfoque-card.rv.is-in h3 { transition-delay: calc(var(--d) + 550ms); }
.enfoque-card.rv.is-in p { transition-delay: calc(var(--d) + 700ms); }

/* Bucles vivos, suaves, tras el dibujo */
.ico-personas .heart { transform-box: fill-box; transform-origin: 50% 80%; animation: beat 2.4s ease-in-out 2s infinite; }
.ico-personas .side-l { animation: bob 3.2s ease-in-out 1.6s infinite; }
.ico-personas .side-r { animation: bob 3.2s ease-in-out 2.2s infinite; }
.ico-aprender .gear { transform-box: fill-box; transform-origin: 50% 50%; animation: spin 8s linear 1.4s infinite; }
.ico-aprender .rays { animation: glow 2.6s ease-in-out 1.8s infinite; }
.ico-resultados .trend { animation: nudge 2.8s var(--ease-in-out) 2s infinite; }
.ico-resultados .bar:nth-of-type(3) { animation: grow 2.8s var(--ease-in-out) 2s infinite; }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } 40% { transform: scale(1.1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.5px, -1.5px); } }
@keyframes grow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.08); } }


.enfoque-card.settled { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .enfoque-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(13, 43, 78, 0.06), 0 24px 48px rgba(13, 43, 78, 0.12); }
  .enfoque-card:hover .ico-wrap { transform: scale(1.06) rotate(-3deg); background-color: #E1EBF7; }
  .enfoque-card:hover .ico-aprender .gear { animation-duration: 2.5s; }
  .enfoque-card:hover .ico-personas .heart { animation-duration: 1.2s; }
}

@media (prefers-reduced-motion: reduce) {
  .enfoque-card.rv .ico .d { stroke-dashoffset: 0; }
  .enfoque-card.rv .ico .bar, .enfoque-card.rv .ico-wrap, .enfoque-card.rv h3, .enfoque-card.rv p, .enfoque-card.rv .t { transform: none; }
  .ico * { animation: none !important; }
}

/* ===== Inicio: "Lo que logramos en tu equipo" ===== */
.logro-card { padding: 28px 24px 30px !important; }
.logro-card::before { left: 24px; right: 24px; }
.logro-card .ico-wrap { width: 76px; height: 76px; margin-bottom: 20px; }
.logro-card .ico { width: 52px; height: 52px; }
.logro-card .t { display: block; }
#resultados ~ ul { gap: 20px !important; }
.ico-prod .needle { transform-box: view-box; transform-origin: 32px 44px; animation: sweep 3.4s var(--ease-in-out) 1.8s infinite; }
.ico-rot .orbit { transform-box: view-box; transform-origin: 32px 32px; animation: orbit 6s var(--ease-in-out) 1.8s infinite; }
.ico-ticket .coin { animation: rise-coin 2.8s var(--ease-in-out) 1.6s infinite; }
.ico-asesor .plus { transform-box: fill-box; transform-origin: 50% 50%; animation: plus 2.6s ease-in-out 1.6s infinite; }
.ico-curva .runner { offset-path: path("M14 50C19 26 27 17 54 15"); offset-rotate: 0deg; animation: run 3.2s var(--ease-in-out) 1.6s infinite both; }
@keyframes sweep { 0%, 100% { transform: rotate(-95deg); } 55%, 80% { transform: rotate(0deg); } }
@keyframes orbit { 0% { transform: rotate(0deg); } 60%, 100% { transform: rotate(180deg); } }
@keyframes rise-coin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes plus { 0%, 70%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(0.96); } }
@keyframes run { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 80% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.enfoque-card.rv .ico-ticket .coin, .enfoque-card.rv .ico-asesor .plus, .enfoque-card.rv .ico-prod .hub { opacity: 0; }
.enfoque-card.rv.is-in .ico-ticket .coin, .enfoque-card.rv.is-in .ico-asesor .plus, .enfoque-card.rv.is-in .ico-prod .hub { opacity: 1; transition: opacity 400ms ease calc(var(--d) + 800ms); }
@media (hover: hover) and (pointer: fine) {
  .enfoque-card:hover .ico-prod .needle, .enfoque-card:hover .ico-rot .orbit, .enfoque-card:hover .ico-curva .runner { animation-duration: 1.6s; }
}
@media (prefers-reduced-motion: reduce) {
  .ico-curva .runner { offset-distance: 100%; }
  .enfoque-card.rv .ico-ticket .coin, .enfoque-card.rv .ico-asesor .plus, .enfoque-card.rv .ico-prod .hub, .enfoque-card.rv .t { opacity: 1; transform: none; }
}
@media (max-width: 600px) { .formula-steps > li { padding: 14px 16px 16px; gap: 14px !important; } .formula-steps > li::after { left: 74px; } }

/* ===== Ribbon de clientes: logos fluyendo de derecha a izquierda ===== */
.ribbon {
  display: flex; overflow: hidden; padding: 28px 0; margin: 0 -24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ribbon-track {
  display: flex; align-items: center; gap: 64px; padding: 0 64px 0 0; margin: 0; list-style: none; flex: none;
  animation: marquee var(--ribbon-s, 80s) linear infinite;
}
.ribbon-track li { flex: none; display: flex; align-items: center; }
.ribbon-track img { height: 56px; width: auto; max-width: 190px; object-fit: contain; display: block;
  filter: saturate(0.9); transition: transform 300ms var(--ease-out), filter 300ms ease; }
@media (hover: hover) and (pointer: fine) {
  .ribbon:hover .ribbon-track { animation-play-state: paused; }
  .ribbon-track img:hover { transform: scale(1.1); filter: saturate(1.1); }
}
.ribbon.is-paused .ribbon-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.ribbon-toggle {
  display: block; margin: 8px auto 0; font: inherit; font-size: 14px; font-weight: 600; color: #1F5C9E;
  background: none; border: 0; padding: 10px 14px; border-radius: 999px; cursor: pointer;
}
.ribbon-toggle:hover { background: #EEF3F9; }
@media (max-width: 600px) { .ribbon-track { gap: 40px; padding-right: 40px; } .ribbon-track img { height: 44px; max-width: 150px; } }
@media (prefers-reduced-motion: reduce) {
  .ribbon { -webkit-mask-image: none; mask-image: none; margin: 0; }
  .ribbon-track { animation: none !important; flex-wrap: wrap; justify-content: center; gap: 32px 48px; padding: 0; flex: 1; }
  .ribbon-track[aria-hidden] { display: none; }
  .ribbon-toggle { display: none; }
}

/* ===== Servicios: programas al estilo de una página de producto de Apple ===== */
.apple-progs { border-top: 1px solid #E3EBF5; }
.ap-head { max-width: 1200px; margin: 0 auto; padding: 112px 24px 8px; text-align: center; }
.ap-h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(42px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.03em; color: #0D2B4E; margin: 0 0 16px; }
.ap-h2-sm { font-size: clamp(36px, 5vw, 64px); max-width: 14em; margin-left: auto; margin-right: auto; text-wrap: balance; }
.ap-nav a.ap-nav-all { color: #1F5C9E; }
.ap-lead { font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: #5A6B80; margin: 0 auto; max-width: 28em; }
.ap-nav {
  position: sticky; top: 84px; z-index: 40; display: flex; gap: 4px; width: max-content; max-width: calc(100% - 32px);
  margin: 36px auto 40px; padding: 6px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(13, 43, 78, 0.06), 0 10px 30px rgba(13, 43, 78, 0.10);
}
.ap-nav::-webkit-scrollbar { display: none; }
.ap-nav a { white-space: nowrap; padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  color: #33475E; text-decoration: none; transition: background-color 250ms ease, color 250ms ease; }
.ap-nav a:active { transform: scale(0.97); }
.ap-nav a[aria-current="true"] { background: #0D2B4E; color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { .ap-nav a:not([aria-current="true"]):hover { background: rgba(13, 43, 78, 0.06); } }
.ap-tiles { max-width: 1240px; margin: 0 auto; padding: 0 20px 112px; display: flex; flex-direction: column; gap: 20px; }
.ap-tile { border-radius: 32px; padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px) 0; text-align: center; overflow: hidden; scroll-margin-top: 160px; }
.ap-light { background: #F2F6FB; }
.ap-dark { background: #0D2B4E; color: #DCE6F2; }
.ap-kicker { font-size: 17px; font-weight: 600; color: #1F5C9E; margin: 0 0 10px; }
.ap-dark .ap-kicker { color: #8DBDE8; }
.ap-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.025em; color: #0D2B4E; margin: 0 auto 18px; max-width: 13em; }
.ap-dark .ap-title { color: #FFFFFF; }
.ap-sub { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; max-width: 32em; margin: 0 auto 28px; }
.ap-cta { display: inline-block; padding: 13px 26px; border-radius: 999px; font-weight: 600; text-decoration: none; background: #0D2B4E; color: #FFFFFF;
  transition: transform 160ms var(--ease-out), box-shadow 240ms ease; }
.ap-dark .ap-cta { background: #FFFFFF; color: #0D2B4E; }
.ap-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ap-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13, 43, 78, 0.22); color: inherit; } .ap-light .ap-cta:hover { color: #FFFFFF; } .ap-dark .ap-cta:hover { color: #0D2B4E; } }
.ap-media { margin: clamp(44px, 5vw, 64px) auto 0; max-width: 820px; }
.ap-media img, .ap-illus { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(13, 43, 78, 0.12); }
.ap-illus { background: #EEF3F9; display: flex; align-items: center; justify-content: center; }
.ap-illus svg { width: 60%; height: auto; }
@supports (animation-timeline: view()) {
  .ap-media { animation: ap-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  .ap-copy { animation: ap-copy linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  @keyframes ap-rise { from { transform: translateY(90px) scale(0.86); opacity: 0.25; } to { transform: none; opacity: 1; } }
  @keyframes ap-copy { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 700px) {
  header { position: relative !important; }
  .ap-nav { top: 8px; justify-content: flex-start; }
  .ap-tile { border-radius: 24px; scroll-margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) { .ap-media, .ap-copy { animation: none !important; transform: none !important; opacity: 1 !important; } }
@media (prefers-reduced-transparency: reduce) { .ap-nav { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ===== Servicios: temáticas — el texto baja desde cada barra ===== */
.dim-card { position: relative; overflow: hidden; border-top-color: transparent !important; padding-top: 26px !important; }
.dim-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #0D2B4E, #5B9BD5); transform-origin: 0 50%; }
.dim-card.rv { opacity: 1; transform: none; }
.dim-card.rv::before { transform: scaleX(0); }
.dim-card.rv > h3, .dim-card.rv > p { transform: translateY(-140%); opacity: 0; }
.dim-card.rv.is-in::before { transform: scaleX(1); transition: transform 800ms var(--ease-out) var(--d, 0ms); }
.dim-card.rv.is-in > h3, .dim-card.rv.is-in > p { transform: none; opacity: 1; }
.dim-card.rv.is-in > h3 { transition: transform 900ms var(--ease-out) calc(var(--d, 0ms) + 450ms), opacity 300ms ease calc(var(--d, 0ms) + 450ms); }
.dim-card.rv.is-in > p { transition: transform 1000ms var(--ease-out) calc(var(--d, 0ms) + 700ms), opacity 400ms ease calc(var(--d, 0ms) + 700ms); }
@media (prefers-reduced-motion: reduce) { .dim-card.rv > h3, .dim-card.rv > p, .dim-card.rv::before { transform: none !important; } }

/* Logo oficial en el encabezado */
.site-logo { transition: transform 400ms var(--ease-out), width 240ms var(--ease-out), height 240ms var(--ease-out); }
header.is-scrolled .site-logo { width: 46px !important; height: 46px !important; }
@media (hover: hover) and (pointer: fine) { header a:hover .site-logo { transform: rotate(-8deg) scale(1.04); } }
@media (max-width: 600px) { .site-logo { width: 48px !important; height: 48px !important; } }

/* Quiénes somos: imagen panorámica del hero */
@media (max-width: 700px) { .qs-hero-img { aspect-ratio: 4 / 3 !important; object-position: 38% 50%; } }

/* Servicios: todas las imágenes de los programas con la misma altura, sin recortar */
.page-servicios .ap-media {
  max-width: none; display: flex; justify-content: center;
  --ap-h: min(461px, calc((100vw - 200px) / 1.83));
}
.page-servicios .ap-media img {
  height: var(--ap-h); width: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain;
}
.page-servicios .ap-illus { height: var(--ap-h); width: calc(var(--ap-h) * 16 / 9); max-width: 100%; aspect-ratio: auto; }
@media (max-width: 700px) { .page-servicios .ap-media { --ap-h: calc((100vw - 88px) / 1.83); } }

/* ===== Páginas de resultado del formulario (gracias / error) ===== */
.res { max-width: 1200px; margin: 0 auto; padding: 96px 24px 104px; }
.res-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.res-visual { flex: 0 1 300px; min-width: 0; display: grid; place-items: center; }
.res-copy { flex: 1 1 420px; min-width: 0; }
.res-rings { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.res-kicker { display: inline-block; margin: 0 0 18px; padding: 6px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; background: #EEF3F9; color: #0D2B4E; }
.res-err .res-kicker { background: #FCEBEA; color: #9B2C24; }
.res-rings circle, .res-rings path { transform-box: view-box; transform-origin: 120px 120px; }
.res-arc { transform: rotate(-90deg); stroke-dasharray: 0 100; }
.res-ok .res-arc-1 { animation: res-fill 1200ms var(--ease-out) 150ms forwards; }
.res-ok .res-arc-2 { animation: res-fill 1000ms var(--ease-out) 450ms forwards; }
.res-ok .res-arc-3 { animation: res-fill 800ms var(--ease-out) 750ms forwards; }
.res-mark { stroke-dasharray: 1; stroke-dashoffset: 1; animation: res-draw 600ms var(--ease-out) 1300ms forwards; }
.res-ok .res-rings { animation: res-pop 700ms var(--ease-out) 1700ms; }
@keyframes res-fill { to { stroke-dasharray: 100 100; } }
@keyframes res-draw { to { stroke-dashoffset: 0; } }
@keyframes res-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.06); } }
/* Error: los anillos se quedan a medio llenar y el aviso tiembla */
.res-err .res-arc-1 { stroke: #C0392B; animation: res-part1 1100ms var(--ease-out) 150ms forwards; }
.res-err .res-arc-2 { stroke: #E07A5F; animation: res-part2 900ms var(--ease-out) 400ms forwards; }
.res-err .res-arc-3 { stroke: #F2B5A7; animation: res-part3 700ms var(--ease-out) 650ms forwards; }
.res-err .res-mark { stroke: #9B2C24; }
.res-err .res-dot { fill: #9B2C24; opacity: 0; animation: res-dot 300ms ease 1700ms forwards; }
.res-err .res-rings { animation: res-shake 500ms ease-in-out 1900ms; }
@keyframes res-part1 { to { stroke-dasharray: 62 100; } }
@keyframes res-part2 { to { stroke-dasharray: 44 100; } }
@keyframes res-part3 { to { stroke-dasharray: 28 100; } }
@keyframes res-dot { to { opacity: 1; } }
@keyframes res-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.res-card { transition: transform 300ms var(--ease-out), box-shadow 300ms ease, border-color 300ms ease; }
@media (hover: hover) and (pointer: fine) { .res-card:hover { transform: translateY(-3px); border-color: #9DB3CC !important; box-shadow: 0 14px 30px rgba(13, 43, 78, 0.10); } }
@media (prefers-reduced-motion: reduce) {
  .res-ok .res-arc { stroke-dasharray: 100 100; } .res-err .res-arc-1 { stroke-dasharray: 62 100; } .res-err .res-arc-2 { stroke-dasharray: 44 100; } .res-err .res-arc-3 { stroke-dasharray: 28 100; }
  .res-mark { stroke-dashoffset: 0; } .res-err .res-dot { opacity: 1; }
}
@media (max-width: 600px) { .res { padding-top: 56px; } .res-inner { gap: 32px; } .res-visual { flex-basis: auto; justify-items: start; } .res-rings { max-width: 150px; } }

/* Servicios: todas las imágenes con el mismo ancho y alto que la de Coaching (1287 × 707) */
.page-servicios .ap-media img { width: calc(var(--ap-h) * 1287 / 707); max-width: 100%; object-fit: cover; }
.page-servicios .ap-media img[src*="contacto-laptop"] { object-position: 50% 60%; }
.page-servicios .ap-media img[src*="talleres-taller"] { object-position: 50% 62%; }
.page-servicios .ap-illus { width: calc(var(--ap-h) * 1287 / 707); }
.ap-dark .ap-cta.ap-cta-ghost, .ap-dark .ap-cta.ap-cta-ghost:hover { background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; padding: 11px 24px; }