/* =============================================================
   Escuela de Experiencia del Cliente · Expand
   1. Tokens
   ============================================================= */
:root {
  --bg:          #ffffff;
  --paper:       #f5f7fa;
  --mist:        #eef2f7;
  --ink:         #1e1d1b;
  --ink-soft:    #3a3936;
  --ink-mute:    #6b7078;
  --blue:        #00376d;
  --blue-deep:   #00284f;
  --blue-mid:    #1a548c;
  --blue-soft:   #e7eef6;
  --line:        rgba(30, 29, 27, 0.12);
  --line-soft:   rgba(30, 29, 27, 0.07);
  --line-blue:   rgba(0, 55, 109, 0.18);

  --titulo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:   "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Etiquetas pequeñas (kickers, números, botones de ciudad). Antes IBM Plex Mono;
     se quitó el 2 de octubre por verse "robótica". Ahora Manrope, corporativa. */
  --etiqueta: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  --nav-h: 64px;
  --gutter: clamp(1.15rem, 5vw, 3.5rem);
  --maxw: 1240px;
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --radius: 3px;
}

@media (min-width: 960px) { :root { --nav-h: 78px; } }

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--blue); color: #fff;
  font-size: .85rem; font-weight: 500; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   4. Typography atoms
   ============================================================= */
.kicker {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.6rem;
}
.kicker .num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 1.55rem;
  border: 1px solid var(--line-blue);
  letter-spacing: .08em;
}
.kicker-rule { display: block; width: 34px; height: 1px; background: var(--blue); }
.kicker-light { color: rgba(255,255,255,.78); }
.kicker-light .num { border-color: rgba(255,255,255,.3); }

.section-title {
  font-size: clamp(1.85rem, 4.2vw, 3.15rem);
  max-width: 22ch;
}
.section-title em { font-style: normal; color: var(--blue); }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* =============================================================
   5. Components — buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  position: relative;
  padding: .82rem 1.5rem;
  font-size: .875rem; font-weight: 500; letter-spacing: .005em;
  border-radius: var(--radius);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft),
              background-color .35s var(--ease-out), color .35s var(--ease-out),
              border-color .35s var(--ease-out);
  will-change: transform;
}
.btn-lg { padding: 1.02rem 1.9rem; font-size: .93rem; }

.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 4px 14px rgba(0,55,109,.14), 0 1px 3px rgba(0,0,0,.06);
}
.btn-primary:hover {
  background: var(--blue-deep);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -12px rgba(0,55,109,.42), 0 8px 18px -8px rgba(0,55,109,.28);
}
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-ghost { color: var(--ink); border: 1px solid var(--line); background: transparent; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); }

.btn-light { background: #fff; color: var(--blue); }
.btn-light:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(0,0,0,.45); }

/* =============================================================
   6. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease-out), clip-path 1s var(--ease-out);
  animation: splashSafety .01s 3.6s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
}
.splash-inner { display: grid; justify-items: center; gap: 1.5rem; }
.splash-mark { display: grid; gap: 7px; width: 92px; }
.splash-mark i {
  display: block; height: 2px; background: var(--blue); border-radius: 2px;
  transform-origin: left center;
  animation: splashAlign 1.5s var(--ease-out) forwards;
}
.splash-mark i:nth-child(1) { width: 46%; animation-delay: .05s; }
.splash-mark i:nth-child(2) { width: 78%; animation-delay: .14s; }
.splash-mark i:nth-child(3) { width: 34%; animation-delay: .23s; }
.splash-mark i:nth-child(4) { width: 62%; animation-delay: .32s; }
@keyframes splashAlign {
  0%   { width: var(--w, 40%); opacity: .25; transform: translateX(6px) rotate(-1.2deg); }
  100% { width: 100%; opacity: 1; transform: none; }
}
.splash-word {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* =============================================================
   7. Cursor + progress
   ============================================================= */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9998;
  pointer-events: none; display: none; opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px; background: var(--blue); border-radius: 50%; }
.cursor-ring {
  width: 30px; height: 30px; margin: -15px;
  border: 1px solid var(--line-blue); border-radius: 50%;
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), border-color .35s var(--ease-out);
}
.cursor.is-interactive .cursor-ring {
  width: 52px; height: 52px; margin: -26px; border-color: var(--blue);
}

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  pointer-events: none;
}
.progress span {
  display: block; height: 100%; width: 0%;
  background: var(--blue);
  transition: width .12s linear;
}

/* =============================================================
   8. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 150;
  height: var(--nav-h);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out),
              backdrop-filter .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 var(--line-soft);
}
.nav-inner {
  height: 100%;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 2rem;
}

.brand { display: flex; align-items: center; gap: .95rem; margin-right: auto; }
/* El logo lleva a la home de expandecuador.com; el nombre de la Escuela, al inicio de esta página. */
.brand-home { display: block; flex: none; }
.brand-logo { height: 27px; width: auto; display: block; }
@media (min-width: 960px) { .brand-logo { height: 32px; } }
.brand-word {
  font-family: var(--sans); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -.035em; color: var(--blue);
}
.brand-rule { display: none; width: 1px; height: 30px; background: var(--line); }
.brand-sub {
  display: none;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); max-width: 19ch; line-height: 1.3;
}
@media (min-width: 640px) { .brand-rule, .brand-sub { display: block; } }

.nav-links { display: none; gap: 1.9rem; }
@media (min-width: 1080px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; font-size: .845rem; color: var(--ink-soft); padding: .25rem 0;
  transition: color .3s var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--blue); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover { color: var(--blue); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: none; }
@media (min-width: 720px) { .nav-cta { display: inline-flex; padding: .68rem 1.25rem; font-size: .83rem; } }

.nav-burger {
  display: grid; gap: 6px; width: 46px; padding: 15px 9px;
  margin-left: auto; margin-right: -9px;
}
@media (min-width: 1080px) { .nav-burger { display: none; } }
.nav-burger span[aria-hidden] {
  display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .3s;
}
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(3.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); }

/* Con el menu movil abierto la barra queda sobre fondo azul: logo y X en blanco */
.nav.is-menu-open { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.is-menu-open .brand-logo { filter: brightness(0) invert(1); }
.nav.is-menu-open .brand-sub { color: rgba(255,255,255,.78); }
.nav.is-menu-open .brand-rule { background: rgba(255,255,255,.25); }
.nav.is-menu-open .nav-burger span[aria-hidden] { background: #fff; }
.nav.is-menu-open .nav-cta { visibility: hidden; }

.nav-mobile {
  position: fixed; inset: 0; z-index: 140;
  background: var(--blue-deep); color: #fff;
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-soft);
}
.nav-mobile[aria-hidden="false"] { clip-path: inset(0); }
@media (min-width: 1080px) { .nav-mobile { display: none; } }
.nav-mobile nav { display: grid; gap: 1.35rem; text-align: center; padding: 2rem; }
.nav-mobile a { font-family: var(--titulo); font-size: 1.65rem; color: #fff; }
.nav-mobile-cta {
  margin-top: 1rem; font-family: var(--sans) !important; font-size: .9rem !important;
  padding: .95rem 1.6rem; background: #fff; color: var(--blue) !important;
  border-radius: var(--radius); justify-self: center;
}

/* =============================================================
   9. Hero
   ============================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5.5rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(60% 55% at 88% 8%, var(--blue-soft) 0%, transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--paper) 100%);
}

.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.08fr .82fr; gap: clamp(3rem, 5vw, 5.5rem); }
}

.hero-title {
  font-size: clamp(2.35rem, 6.1vw, 4.6rem);
  line-height: 1.015;
  letter-spacing: -.032em;
  max-width: 15ch;
}
.hero-title em { font-style: normal; color: var(--blue); }

.hero-sub {
  margin-top: 1.6rem;
  font-size: clamp(1.02rem, 1.55vw, 1.2rem);
  line-height: 1.6;
  max-width: 46ch;
  color: var(--ink-soft);
}

.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-modalidad {
  margin-top: .7rem; font-size: clamp(1.02rem, 1.55vw, 1.2rem); line-height: 1.6;
  color: var(--ink-soft);
}
.hero-modalidad strong { color: var(--blue); font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
@media (max-width: 539px) { .hero-actions .btn { flex: 1 1 100%; } }

.hero-note {
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  font-size: .84rem; color: var(--ink-mute); max-width: 42ch;
}
.hero-note strong { color: var(--ink); font-weight: 500; }

.hero-figure { position: relative; margin: 0; }
.hero-frame {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 40px 80px -40px rgba(0,55,109,.32), 0 2px 0 0 rgba(0,55,109,.06);
}
.hero-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.hero-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.hero-caption {
  position: relative;
  margin-top: -2.4rem; margin-left: auto;
  width: min(90%, 20rem);
  background: #fff; padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--blue);
  box-shadow: 0 22px 40px -26px rgba(0,55,109,.4);
  font-size: .845rem; color: var(--ink-soft); line-height: 1.45;
}
@media (min-width: 960px) { .hero-caption { margin-left: -2.5rem; margin-right: auto; } }
.hero-caption-label {
  display: block; font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); margin-bottom: .35rem;
}

.hero-stats {
  display: grid; gap: 1.6rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (min-width: 1000px) { .hero-stats { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.hero-stats li { display: grid; gap: .45rem; }
.hero-stats strong {
  font-family: var(--titulo); font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1;
  color: var(--blue); letter-spacing: -.03em;
}
.hero-stats strong i { font-style: normal; opacity: .5; }
.hero-stats strong span { font: inherit; color: inherit; }
.hero-stats > li > span { font-size: .865rem; color: var(--ink-mute); max-width: 26ch; }

/* =============================================================
   10. Marquee
   ============================================================= */
.marquee {
  overflow: hidden; position: relative;
  display: flex; align-items: center; flex-wrap: nowrap;
  padding: 1.15rem 0;
  border-block: 1px solid var(--line);
  background: var(--bg);
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee-track {
  display: inline-flex; align-items: center; gap: 2.2rem; white-space: nowrap;
  will-change: transform; padding-left: 2.2rem;
}
.marquee-track span {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.marquee-track i { color: var(--blue); font-style: normal; }

/* Variante con logos de clientes: la franja bajo el hero muestra las marcas
   con las que ya hemos trabajado, no una lista de sectores. */
.marquee-clientes { padding: 1.5rem 0; }
.marquee-clientes .marquee-track { gap: clamp(2.4rem, 4.5vw, 3.6rem); padding-left: clamp(2.4rem, 4.5vw, 3.6rem); }
.marquee-logo { display: inline-flex; align-items: center; flex: none; }
.marquee-logo img {
  /* --k (en el HTML) escala cada logo segun su proporcion, para que todos
     pesen parecido a la vista: los anchos no se agrandan, los cuadrados si. */
  display: block; width: auto; height: calc(var(--k, 1) * 26px);
  max-width: none; max-height: none; object-fit: contain;
  /* Mismo tratamiento que la franja de la seccion 01: en gris la fila
     acompana al hero en lugar de competir con el. Algo mas de opacidad
     que alli, porque aqui los logos van a un tamano menor. */
  filter: grayscale(1) contrast(1.3) opacity(.72);
}
@media (max-width: 640px) {
  .marquee-logo img { height: calc(var(--k, 1) * 21px); }
}

/* =============================================================
   11. Sections — shared
   ============================================================= */
.section { padding-block: var(--section-y); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head-wide .section-title { max-width: 26ch; }

.section-problema { background: var(--bg); }
.section-programa { background: var(--paper); }
.section-quien { background: var(--paper); }
.section-voces { background: var(--bg); }
.section-faq { background: var(--paper); }
.section-cta { background: var(--bg); }

/* =============================================================
   12. Problema
   ============================================================= */
.problema-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) { .problema-grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }

.check-list { display: grid; gap: .95rem; margin-top: 2rem; }
.check-list li {
  position: relative; padding-left: 1.9rem;
  font-size: .95rem; color: var(--ink-soft);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 1px; background: var(--blue);
}

/* Comparativa "sin / con habilidades blandas" en las tres dimensiones.
   Es un esquema conceptual, no una medicion: por eso no lleva cifras. Si
   Praxis nos pasa numeros reales, se anaden dentro de .duo-bar y ya. */
.duo {
  margin: 0; padding: clamp(1.5rem, 3vw, 2.4rem);
  background: #fff; border: 1px solid var(--line-soft);
  box-shadow: 0 30px 60px -40px rgba(0,55,109,.35);
}
.duo-head { display: grid; gap: .9rem; margin-bottom: 2.2rem; }
.duo-titulo {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.duo-leyenda { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.duo-key {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.duo-key::before { content: ""; width: 1.1rem; height: .55rem; background: var(--duo-sin); }
.duo-key-con { color: var(--blue); }
.duo-key-con::before { background: var(--blue); }

.duo-rows { display: grid; gap: 1.7rem; }
.duo-row { display: grid; gap: .45rem; }
.duo-dim { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.duo-dim strong { font-family: var(--titulo); font-weight: 700; font-size: 1rem; color: var(--ink); }
.duo-dim span { font-size: .82rem; color: var(--ink-mute); }

/* La pista gris marca el maximo, la barra interior crece al entrar en pantalla.
   --duo-sin tiene que separarse bien de la pista: con --blue-soft (mas claro
   que --mist) la barra "sin" desaparecia sobre el fondo. */
.duo { --duo-sin: #b6cde2; }
.duo-bar { position: relative; height: 15px; margin-right: 2.6rem; background: var(--mist); }
.duo-bar i {
  display: block; position: absolute; inset: 0 auto 0 0;
  width: 0; transition: width 1.1s var(--ease-out) var(--d);
}
.duo.is-on .duo-bar i { width: var(--w); }
.duo-bar.is-sin i { background: var(--duo-sin); border-right: 3px solid var(--blue-mid); }
.duo-bar.is-con i { background: var(--blue); }
.duo-bar b {
  position: absolute; top: 50%; left: var(--w); transform: translateY(-50%);
  margin-left: .55rem; font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .8rem;
  color: var(--ink-soft); opacity: 0; transition: opacity .5s var(--ease-out) calc(var(--d) + .75s);
}
.duo.is-on .duo-bar b { opacity: 1; }
.duo-bar.is-con b { color: var(--blue); }
/* Sin animacion las barras deben verse igual: el <html> solo recibe la clase
   "js" si el script corre, asi que sin JS entra por :not(.js). */
html:not(.js) .duo-bar i,
.duo.is-static .duo-bar i { width: var(--w); transition: none; }
html:not(.js) .duo-bar b,
.duo.is-static .duo-bar b { opacity: 1; transition: none; }

.duo-pie {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  font-size: .875rem; line-height: 1.6; color: var(--ink-mute);
}
.duo-nps {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .9rem;
  margin-bottom: .8rem;
}
.duo-nps-lab {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.duo-nps s {
  font-family: var(--titulo); font-weight: 700; font-size: 1.15rem;
  color: var(--ink-mute); text-decoration-thickness: 1px;
}
.duo-nps b {
  font-family: var(--titulo); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1; color: var(--blue);
}
.duo-nota {
  display: block; margin-top: .8rem;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* =============================================================
   13. Programa
   ============================================================= */
.programa-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 960px) { .programa-grid { grid-template-columns: .95fr 1.05fr; align-items: start; } }

.programa-figure { margin: 0; position: relative; }
.programa-figure img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--line-soft);
  box-shadow: 0 30px 70px -45px rgba(0,55,109,.45);
}

/* La tarjeta la hace el contenedor, no el SVG: asi el rotulo es texto HTML
   real (escala solo, se puede seleccionar y traducir) y la piramide aprovecha
   todo el ancho del viewBox. */
.piramide-card {
  background: #fff; border: 1px solid var(--line-soft);
  box-shadow: 0 30px 70px -45px rgba(0,55,109,.45);
  padding: clamp(.85rem, 2.2vw, 1.6rem);
}
.piramide-titulo {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: clamp(.9rem, 2vw, 1.3rem);
}
.programa-figure .piramide { display: block; width: 100%; height: auto; }

/* Piramide: las tres dimensiones de la experiencia */
/* Rampa de tres pasos dentro del azul de marca: la cuspide es la mas
   saturada. Blanco sobre el tono mas claro queda en 4,2:1, suficiente
   para texto grande. */
.piramide-band-1 { fill: #4079ad; }   /* base   · efectividad */
.piramide-band-2 { fill: #12558f; }   /* centro · facilidad   */
.piramide-band-3 { fill: #002a52; }   /* cuspide· emoción     */
.piramide-name {
  font-family: var(--sans); font-size: 42px; font-weight: 600;
  letter-spacing: -.4px; fill: #fff;
}
.piramide-desc {
  font-family: var(--sans); font-size: 30px; font-weight: 400;
  fill: rgba(255,255,255,.9);
}
@media (min-width: 960px) { .programa-figure { position: sticky; top: calc(var(--nav-h) + 3rem); } }

.programa-text > p + p { margin-top: 1rem; }
.pillars { display: grid; gap: 1.5rem; margin-top: 2.6rem; counter-reset: p; }
.pillars > li {
  display: grid; gap: .4rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
}
.pillar-num {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .76rem; letter-spacing: .08em; color: var(--blue);
}
.pillars h3 { font-size: 1.18rem; letter-spacing: -.01em; }
.pillars > li > p { font-size: .93rem; color: var(--ink-mute); }

/* .pillars / .pillar-items ya no se usan: el temario vive ahora en la seccion 03 */
.pillar-items { display: grid; gap: .45rem; margin-top: .85rem; }
.pillar-items li {
  position: relative; padding-left: 1.1rem;
  font-size: .875rem; line-height: 1.5; color: var(--ink-soft);
}
.pillar-items li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .45rem; height: 1px; background: var(--blue);
}

.trabajo-bloque { margin-top: clamp(3rem, 6vw, 5rem); scroll-margin-top: 5rem; }

/* Como se dicta: las dos modalidades, a la vista */
.modalidad { margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.modalidad-label {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue);
}
.modalidad-pregunta {
  margin: .5rem 0 1rem; font-family: var(--sans); font-weight: 700;
  font-size: 1.05rem; line-height: 1.35; color: var(--ink);
}
.modalidad-opciones { display: grid; gap: .6rem; align-items: stretch; }
.modalidad-op {
  display: grid; gap: .15rem; justify-items: start;
  background: #fff; border: 1px solid var(--line-blue); border-top: 3px solid var(--blue);
  padding: 1.1rem 1.2rem;
}
.modalidad-op strong { font-size: 1.1rem; color: var(--blue); }
.modalidad-op span:not(.modalidad-icono) { font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }
.modalidad-icono { width: 2.8rem; height: 2.8rem; margin-bottom: .4rem; color: var(--blue); }
.modalidad-icono svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.modalidad-o {
  align-self: center; justify-self: center;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}
@media (min-width: 560px) {
  .modalidad-opciones { grid-template-columns: 1fr auto 1fr; gap: .8rem; }
}
.modalidad-detalle { margin-top: 1rem; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }

/* =============================================================
   13c. Respaldo — investigacion propia que sostiene el programa
   ============================================================= */
.respaldo {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--paper);
  border-left: 2px solid var(--blue);
  border-radius: var(--radius);
}
.respaldo-titulo {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 1.6rem;
}
/* El segundo titulo hereda el estilo del primero y se queda con la linea
   divisoria que antes llevaba .respaldo-pie, para que el corte siga estando
   donde estaba y el titulo caiga justo debajo. */
.respaldo-titulo-pie {
  margin-top: 1.8rem; margin-bottom: .9rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.respaldo-lista {
  display: grid; gap: 1.4rem;
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 720px) { .respaldo-lista { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.respaldo-lista li { display: grid; gap: .35rem; }
.respaldo-lista strong {
  font-family: var(--titulo); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.1; color: var(--blue);
}
.respaldo-lista span { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.respaldo-pie {
  font-size: .9rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 68ch;
}

/* Con que se quedan los equipos. Va justo encima del bloque de respaldo, y por
   eso es liviano: solo una linea arriba, sin caja, para no competir con el. */
.herramientas {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.8rem, 4vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.herramientas-titulo {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.6rem;
}
.herramientas-lista {
  display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none;
}
@media (min-width: 720px) { .herramientas-lista { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.herramientas-lista li {
  display: grid; gap: .4rem;
  padding-left: 1.1rem; border-left: 2px solid var(--line-blue);
}
.herramientas-lista strong {
  font-family: var(--titulo); font-weight: 600;
  font-size: 1.02rem; line-height: 1.25; color: var(--blue);
}
.herramientas-lista span { font-size: .88rem; line-height: 1.55; color: var(--ink-mute); }

/* =============================================================
   13b. Cadena de valor — propuesta → experiencia → ingresos
   ============================================================= */
.cadena-wrap { margin-bottom: clamp(3rem, 6vw, 5rem); }
.cadena-titulo {
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  color: var(--ink-soft); margin-bottom: 1.8rem;
}
.cadena { display: grid; }

/* Rampa de cinco pasos; el mas claro queda en 4,7:1 sobre blanco. */
.cadena-paso:nth-child(1) { --paso: #4a76a0; }
.cadena-paso:nth-child(2) { --paso: #2f6191; }
.cadena-paso:nth-child(3) { --paso: #164d82; }
.cadena-paso:nth-child(4) { --paso: #00396f; }
.cadena-paso:nth-child(5) { --paso: #002a52; }

/* align-content: start es obligatorio. Por defecto Grid estira las filas para
   llenar la altura de la columna mas alta, y como los textos de abajo tienen
   distinto numero de lineas, las barras acababan escalonadas. */
.cadena-paso { position: relative; display: grid; align-content: start; }
.cadena-paso p { font-size: .855rem; line-height: 1.5; color: var(--ink-soft); }

.cadena-icono {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border: 1px solid var(--paso); border-radius: 50%;
  color: var(--paso); background: #fff;
}
.cadena-icono svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.cadena-icono polygon { fill: currentColor; stroke-width: 1; }

.cadena-foco {
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  line-height: 1.35; color: var(--blue);
}
.cadena-bar {
  display: block; background: var(--paso);
  /* baja de cuerpo cerca del breakpoint: con nowrap, "PROPUESTA DE VALOR"
     desbordaria el galon a 860 px */
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(.6rem, 1.1vw, .7rem);
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
}

/* ---------- Apilada: linea de tiempo con conector y flecha ---------- */
@media (max-width: 859px) {
  .cadena-paso {
    grid-template-columns: 52px 1fr; column-gap: 1.1rem;
    padding-bottom: 2.3rem;
  }
  .cadena-paso:last-child { padding-bottom: 0; }
  .cadena-icono { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .cadena-foco, .cadena-bar, .cadena-paso p { grid-column: 2; }
  .cadena-bar { padding: .62rem .9rem; text-align: left; align-self: start; }
  .cadena-foco { margin-top: .6rem; }
  .cadena-foco::before { content: "\2191\00a0"; }   /* flecha hacia arriba: apunta a la barra */
  .cadena-paso p { margin-top: .6rem; }

  /* El hilo que une un paso con el siguiente */
  .cadena-paso:not(:last-child)::before {
    content: ""; position: absolute; left: 26px; top: 58px; bottom: .95rem;
    border-left: 1px solid var(--line-blue);
  }
  /* La punta de flecha, que es lo que da la direccion */
  .cadena-paso:not(:last-child)::after {
    content: ""; position: absolute; left: 22px; bottom: .55rem;
    width: 9px; height: 9px;
    border-right: 1.5px solid var(--paso); border-bottom: 1.5px solid var(--paso);
    transform: rotate(45deg);
  }
}

/* ---------- En fila: galon apuntando a la derecha ---------- */
@media (min-width: 860px) {
  .cadena { grid-template-columns: repeat(5, 1fr); }
  .cadena-paso { padding-top: 0; grid-template-rows: auto auto auto 1fr; }
  .cadena-icono { margin: 0 auto 1.6rem; position: relative; }
  .cadena-icono::after {                    /* tallo hasta el galon */
    content: ""; position: absolute; top: 100%; left: 50%;
    width: 1px; height: 1.6rem; background: currentColor; opacity: .45;
  }
  .cadena-foco {
    position: relative;
    margin-top: 1.5rem; padding: .7rem .9rem 0; text-align: center;
    border-top: 2px solid var(--blue);
  }
  /* Flecha hacia arriba, hasta la barra "Experiencia": palo y punta */
  .cadena-foco::before {
    content: ""; position: absolute; left: 50%; bottom: 100%;
    width: 2px; height: 1.2rem; margin-left: -1px; background: var(--blue);
  }
  .cadena-foco::after {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 1.2rem - 3px);
    width: 9px; height: 9px; margin-left: -4.5px;
    border-left: 2px solid var(--blue); border-top: 2px solid var(--blue);
    transform: rotate(45deg);
  }
  .cadena-bar {
    padding: .78rem .9rem .78rem 1.5rem; text-align: center; white-space: nowrap;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%,
                       0 100%, 13px 50%);
  }
  .cadena-paso:first-child .cadena-bar {
    padding-left: .9rem;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  }
  .cadena-paso:last-child .cadena-bar {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%);
  }
  .cadena-paso p { margin-top: .85rem; padding-inline: .9rem; text-align: center; }
}

/* -------------------------------------------------------------
   Simbolos de las tres dimensiones
   Se definen una vez en el <svg class="simbolos-def"> y se pintan con
   <use>. Ojo: el CSS no entra dentro de un <use>, asi que dentro de
   cada simbolo solo valen las propiedades que se heredan (color,
   stroke, fill, opacity). Por eso los puntos llevan fill="currentColor"
   como atributo y no como clase.
   ------------------------------------------------------------- */
.simbolos-def { position: absolute; width: 0; height: 0; overflow: hidden; }
.simbolo {
  display: block; width: 100%; height: 100%;
  color: var(--blue); fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* =============================================================
   13d. Franja de clientes
   ============================================================= */
.clientes {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--line);
}
.clientes-titulo {
  font-family: var(--sans); font-weight: 700; font-size: 1.35rem;
  color: var(--ink); margin-bottom: 2rem;
}
.clientes-lista {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.6rem, 3.4vw, 3.2rem);
}
.clientes-lista img {
  display: block; width: auto; height: calc(var(--k, 1) * 34px);
  max-width: none; max-height: none; object-fit: contain;
  /* Escala de grises por defecto: con diez marcas en sus colores originales
     la franja compite con el contenido en vez de acompanarlo. El contraste
     compensa a los logos claros, que a solo opacidad se desvanecian. */
  filter: grayscale(1) contrast(1.25) opacity(.62);
  transition: filter .4s var(--ease-out);
}
.clientes-lista img:hover { filter: grayscale(0) opacity(1); }
@media (prefers-reduced-motion: reduce) { .clientes-lista img { transition: none; } }

/* =============================================================
   13e. Carrusel de talleres por ciudad
   ============================================================= */
.carrusel {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--line);
}
.carrusel-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem;
}
.carrusel-cab .clientes-titulo { margin-bottom: 0; }
.carrusel-ctrl { display: flex; gap: .5rem; flex: none; }
.carrusel-btn {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1px solid var(--line-blue); border-radius: 50%;
  background: #fff; color: var(--blue); cursor: pointer;
  transition: background .25s, color .25s, opacity .25s;
}
.carrusel-btn:hover:not(:disabled) { background: var(--blue); color: #fff; }
.carrusel-btn:disabled { opacity: .35; cursor: default; }
.carrusel-pista {
  display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; cursor: grab;
}
.carrusel-pista.is-arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.carrusel-foto { -webkit-user-drag: none; user-select: none; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-slide {
  position: relative; flex: 0 0 calc((100% - 2rem) / 3);
  scroll-snap-align: start; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 4px; background: var(--mist);
}
.carrusel-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ciudad de cada foto. Desde el 6 de octubre no hay botones de ciudad: las fotos
   van mezcladas (Quito, Panamá y Lima primero) y se recorren con las flechas. */
.carrusel-etiqueta {
  position: absolute; left: .55rem; bottom: .55rem; z-index: 2;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); background: #fff; padding: .3rem .55rem; border-radius: 3px;
  box-shadow: 0 6px 14px -8px rgba(0,30,60,.5);
}
@media (max-width: 900px) { .carrusel-slide { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 560px) { .carrusel-slide { flex-basis: 86%; } }
@media (prefers-reduced-motion: reduce) { .carrusel-pista { scroll-behavior: auto; } }

/* =============================================================
   14. Temario — qué se trabaja
   ============================================================= */
.temario { display: grid; gap: 1rem; }
@media (min-width: 720px) { .temario { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .temario { grid-template-columns: repeat(3, 1fr); } }

.temario-modulos { margin-top: .5rem; display: grid; gap: .7rem; counter-reset: m; }
.temario-modulos li {
  position: relative; padding-left: 2.1rem;
  font-size: .885rem; line-height: 1.5; color: var(--ink-soft);
}
.temario-modulos li::before {
  counter-increment: m; content: counter(m, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .74rem; color: var(--blue-mid);
}

/* -------------------------------------------------------------
   Tarjetas del temario. Cada dimension muestra su simbolo y, debajo,
   todos sus modulos a la vista. Al pasar el raton (o tabular dentro)
   el cuadro cambia de color.
   ------------------------------------------------------------- */
.temario-card {
  display: grid; align-content: start; gap: .55rem;
  background: #fff; border: 1px solid var(--line-soft);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out),
              box-shadow .35s var(--ease-out);
}
.temario-card:hover, .temario-card:focus-within {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 30px 60px -36px rgba(0,55,109,.6);
}
/* Sobre el azul oscuro, todo el contenido pasa a claro */
.temario-card * { transition: color .35s var(--ease-out), border-color .35s var(--ease-out); }
.temario-card:hover .temario-num, .temario-card:focus-within .temario-num,
.temario-card:hover .temario-etiqueta, .temario-card:focus-within .temario-etiqueta,
.temario-card:hover .temario-modulos li::before, .temario-card:focus-within .temario-modulos li::before {
  color: #a9c4e2;
}
.temario-card:hover h3, .temario-card:focus-within h3,
.temario-card:hover .simbolo, .temario-card:focus-within .simbolo,
.temario-card:hover .temario-head p, .temario-card:focus-within .temario-head p,
.temario-card:hover .temario-modulos li, .temario-card:focus-within .temario-modulos li {
  color: #fff;
}
.temario-card:hover .temario-etiqueta, .temario-card:focus-within .temario-etiqueta {
  border-top-color: rgba(255,255,255,.28);
}
.temario-head { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.temario-simbolo {
  width: clamp(5rem, 8vw, 6.4rem); height: clamp(5rem, 8vw, 6.4rem);
  margin: 0 auto .6rem;
}
.temario-num {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .76rem; letter-spacing: .08em; color: var(--blue);
}
.temario-head h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
.temario-head p { font-size: .93rem; color: var(--ink-soft); max-width: 30ch; }
.temario-etiqueta {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue);
}

.bento { display: grid; gap: 1rem; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(240px, auto); }
  .bento .card:nth-child(1) { grid-column: span 5; grid-row: span 2; }
  .bento .card:nth-child(2) { grid-column: span 7; }
  .bento .card:nth-child(3) { grid-column: span 7; }
  .bento .card:nth-child(4) { grid-column: span 12; }
}

.card {
  --rx: 0deg; --ry: 0deg;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-soft);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft),
              border-color .55s var(--ease-soft);
}
.card:hover {
  transition-duration: .18s;
  border-color: var(--line-blue);
  box-shadow: 0 40px 70px -40px rgba(0,55,109,.42), 0 4px 14px -6px rgba(0,55,109,.12);
}
.card-body {
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: grid; align-content: start; gap: .7rem;
}
.card-num {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .76rem; letter-spacing: .08em; color: var(--blue);
}
/* En el temario el simbolo manda: es el primero que se ve de la tarjeta. */
.card-simbolo {
  width: clamp(4.3rem, 7vw, 5.7rem); height: clamp(4.3rem, 7vw, 5.7rem);
  margin-bottom: .6rem;
}
.card:hover .simbolo, .card:focus-within .simbolo { color: var(--blue-mid); }
.card-simbolo .simbolo { transition: color .45s var(--ease-out); }
.card h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
.card p { font-size: .93rem; color: var(--ink-mute); max-width: 46ch; }

.card-art {
  width: 100%; height: 190px; object-fit: cover; object-position: center;
  opacity: .82; transition: transform 1s var(--ease-soft), opacity .6s;
}
.card:hover .card-art { transform: scale(1.06); opacity: 1; }
.card-lg { justify-content: space-between; }
.card-lg .card-art { order: 2; height: auto; aspect-ratio: 16 / 10; }

.card-wide { display: grid; }
@media (min-width: 720px) {
  .card-wide { grid-template-columns: minmax(180px, 260px) 1fr; align-items: stretch; }
  .card-art-side { height: 100%; max-height: 260px; }
  .card-wide .card-body { align-content: center; }
  .card-wide p { max-width: 60ch; }
}
@media (max-width: 719px) { .card-art-side { height: 150px; } }

/* =============================================================
   15. Para quién
   ============================================================= */
.quien-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .quien-grid { grid-template-columns: 1fr 1fr; } }
.quien-text .lead { margin-top: 1.4rem; max-width: 48ch; }

.quien-figure { margin: 0; position: relative; }
.quien-figure img {
  width: 100%; aspect-ratio: 8 / 5; object-fit: cover;
  border: 1px solid var(--line-soft);
  box-shadow: 0 30px 70px -45px rgba(0,55,109,.4);
}

/* =============================================================
   16. Manifiesto
   ============================================================= */
.manifiesto {
  position: relative; overflow: hidden;
  padding-block: clamp(5rem, 12vw, 9.5rem);
  background: var(--blue-deep); color: #fff; isolation: isolate;
}
.manifiesto-bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; opacity: .85;
}
.manifiesto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,40,79,.55), rgba(0,30,60,.8));
}
.manifiesto-inner { display: grid; justify-items: start; }
.manifiesto-quote {
  font-family: var(--titulo); font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.85rem);
  line-height: 1.24; letter-spacing: -.022em;
  max-width: 26ch; color: #fff; text-wrap: balance;
}
.manifiesto-quote em { font-style: normal; color: #fff; }
.manifiesto-quote em .split-word { box-shadow: inset 0 -1px 0 rgba(255,255,255,.35); }
.manifiesto .btn { margin-top: clamp(2.2rem, 4vw, 3rem); }

/* =============================================================
   17. Testimonios
   ============================================================= */
.voces { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .voces { grid-template-columns: repeat(3, 1fr); } }
.voz {
  position: relative; margin: 0;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--paper);
  border-top: 2px solid var(--blue);
  display: grid; align-content: space-between; gap: 1.8rem;
}
.voz::before {
  content: "”"; position: absolute; top: .1rem; right: 1rem;
  font-family: var(--titulo); font-size: 4.5rem; color: var(--blue); opacity: .12; line-height: 1;
}
.voz blockquote { font-size: .985rem; line-height: 1.6; color: var(--ink-soft); }
.voz figcaption { display: flex; align-items: center; gap: .85rem; }
.voz-mono {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .78rem; letter-spacing: .05em;
}
.voz-quien { font-size: .8rem; color: var(--ink-mute); line-height: 1.35; }
.voz-quien strong { display: block; font-weight: 500; color: var(--ink); font-size: .88rem; }

.voz-tag { display: none; }
.voces.is-demo .voz-tag {
  display: inline-block; position: absolute; top: .85rem; left: 1rem;
  padding: .18rem .5rem;
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); border: 1px solid var(--line-blue); background: #fff;
}
.voces.is-demo .voz { padding-top: 3.1rem; }

/* =============================================================
   18. FAQ
   ============================================================= */
.faq-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: .85fr 1.15fr; } }
@media (min-width: 960px) { .faq-head { position: sticky; top: calc(var(--nav-h) + 3rem); } }
.faq-help { margin-top: 1.6rem; font-size: .9rem; color: var(--ink-mute); }
.faq-help a { color: var(--blue); text-decoration: underline; text-underline-offset: .18em; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--titulo); font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink);
  transition: color .3s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
.faq-item summary i {
  position: relative; flex: none; width: 14px; height: 14px;
}
.faq-item summary i::before, .faq-item summary i::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px;
  background: var(--blue); transition: transform .4s var(--ease-out);
}
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0deg); }
.faq-item[open] summary { color: var(--blue); }
.faq-answer { padding: 0 0 1.5rem; max-width: 58ch; }
.faq-answer p { font-size: .95rem; color: var(--ink-mute); }
.faq-item[open] .faq-answer { animation: faqIn .45s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* =============================================================
   19. CTA final
   ============================================================= */
.cta-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { .cta-grid { grid-template-columns: 1fr 1fr; } }
.cta-title { font-size: clamp(1.75rem, 3.6vw, 2.75rem); max-width: 18ch; }
.cta-copy .lead { margin-top: 1.4rem; max-width: 42ch; }

.cta-contact { display: grid; gap: 1rem; margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.cta-contact li { display: grid; gap: .18rem; font-size: .92rem; color: var(--ink-soft); }
.cta-contact span {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cta-contact a { color: var(--blue); }
.cta-contact a:hover { text-decoration: underline; text-underline-offset: .2em; }

.cta-panel {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--blue);
  min-height: 30rem;
}
.cta-form { display: grid; gap: .9rem; transition: opacity .55s var(--ease-out), transform .55s var(--ease-soft); }
@media (min-width: 560px) { .cta-form { grid-template-columns: 1fr 1fr; } }
.cta-form.is-sent { opacity: 0; transform: translateY(-10px); pointer-events: none; }

.field { position: relative; }
.field-full, .cta-submit, .cta-legal { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: .92rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.45rem .9rem .55rem;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field textarea { padding-top: 1.6rem; resize: vertical; min-height: 6.5rem; }
.field select { padding: 1.02rem 2.6rem 1.02rem .9rem; color: var(--ink-mute); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,55,109,.1);
}
.field label {
  position: absolute; left: .95rem; top: .95rem;
  font-size: .92rem; color: var(--ink-mute); pointer-events: none;
  transition: transform .25s var(--ease-out), font-size .25s var(--ease-out), color .25s;
  transform-origin: left top;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-.62rem) scale(.72);
  color: var(--blue);
  letter-spacing: .09em; text-transform: uppercase;
}

.cta-submit { position: relative; margin-top: .5rem; }
.cta-form-spinner {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
}
.cta-form.is-sending .cta-form-label { opacity: 0; }
.cta-form.is-sending .cta-form-spinner { opacity: 1; }
.cta-form-spinner::after {
  content: ""; width: 17px; height: 17px;
  border: 1.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cta-legal { font-size: .74rem; color: var(--ink-mute); line-height: 1.5; }
.cta-legal a { color: var(--blue); text-decoration: underline; text-underline-offset: .18em; }

.cta-success {
  position: absolute; left: clamp(1.6rem, 3vw, 2.5rem); right: clamp(1.6rem, 3vw, 2.5rem);
  top: 50%; transform: translateY(-40%);
  display: grid; gap: .8rem; justify-items: start;
  opacity: 0; pointer-events: none;
  transition: opacity .7s var(--ease-out) .2s, transform .8s var(--ease-soft) .2s;
}
.cta-success.is-visible { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.cta-success-mark {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--blue);
}
.cta-success-mark svg { width: 22px; height: 22px; }
.cta-success-mark path {
  stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s var(--ease-out) .5s;
}
.cta-success.is-visible .cta-success-mark path { stroke-dashoffset: 0; }
.cta-success h3 { font-size: 1.5rem; }
.cta-success p { font-size: .95rem; color: var(--ink-mute); max-width: 34ch; }

/* =============================================================
   20. Footer
   ============================================================= */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.footer-inner { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 720px) { .footer-inner { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; } }
.footer-logo { height: 46px; width: auto; display: block; }
.footer-brand p { margin-top: 1rem; font-size: .85rem; max-width: 34ch; line-height: 1.6; }
.footer-col h4 {
  font-family: var(--etiqueta); font-variant-numeric: tabular-nums; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.64); font-weight: 600; margin-bottom: 1rem;
}
.footer-col ul { display: grid; gap: .55rem; }
.footer-col li { font-size: .865rem; }
.footer-col a { transition: color .3s var(--ease-out); }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem; color: rgba(255,255,255,.45);
}
.footer-bottom a:hover { color: #fff; }

/* =============================================================
   21. Reveals & split text
   ============================================================= */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Defensa: un elemento con reveal + split nunca debe quedar invisible */
.js [data-reveal][data-split] { opacity: 1; transform: none; }

[data-split] .split-word { display: inline-block; will-change: transform; }

.is-ready [data-split] { visibility: visible; }

/* =============================================================
   22. Reduced motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .splash-mark i { animation: none; width: 100%; opacity: 1; transform: none; }
  .card-art { transition: none; }
}

/* =============================================================
   23. Print
   ============================================================= */
@media print {
  .nav, .nav-mobile, .splash, .cursor, .progress, .marquee, .hero-figure { display: none !important; }
  body { color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Logo del cliente sobre la foto: se ve con quien se hizo el taller */
.foto-cliente {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  display: block; background: #fff; padding: .45rem .75rem;
  border-radius: 3px; box-shadow: 0 10px 24px -12px rgba(0,30,60,.45);
}
.foto-cliente img {
  display: block; height: 3.4rem; width: auto; aspect-ratio: auto;
  object-fit: contain; border: 0; box-shadow: none;
}


/* =============================================================
   Aviso de cookies y casilla de consentimiento
   ============================================================= */
.cta-check {
  grid-column: 1 / -1; display: flex; gap: .7rem; align-items: flex-start;
  font-size: .8rem; line-height: 1.5; color: var(--ink-soft); cursor: pointer;
}
.cta-check input { margin-top: .22rem; width: 1rem; height: 1rem; accent-color: var(--blue); flex: none; }
.cta-check a { color: var(--blue); text-decoration: underline; text-underline-offset: .18em; }

.link-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: .18em;
}
.link-btn:hover { color: #fff; }

.cookies {
  position: fixed; z-index: 300; left: var(--gutter); bottom: 1.2rem;
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -18px rgba(0,40,79,.35), 0 4px 14px rgba(0,0,0,.08);
  padding: 1.2rem 1.3rem 1.1rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.cookies[hidden] { display: none; }
.cookies.is-in { opacity: 1; transform: none; }
.cookies-titulo { font-family: var(--titulo); font-weight: 700; font-size: .95rem; color: var(--blue); margin-bottom: .35rem; }
.cookies-texto { font-size: .8rem; line-height: 1.55; color: var(--ink-soft); }
.cookies-texto a { color: var(--blue); text-decoration: underline; text-underline-offset: .18em; }
.cookies-botones { display: flex; gap: .6rem; margin-top: .95rem; }
.cookies-botones .btn { flex: 1 1 0; padding: .7rem 1rem; }