/* ============================================================
   COACHING COMERCIAL — página de solución
   Diseño de Claude Design (Coaching comercial.dc.html) con el
   design system Enfoque Comercial.
   ============================================================ */

.cc { background: var(--ec-white); color: var(--ec-ink); }

/* ---------- Hero ---------- */
.cc-hero { position: relative; overflow: hidden; background: var(--ec-navy); color: var(--ec-white); }
.cc-hero__blob-a {
  position: absolute; right: -20%; top: -55%; width: 80%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(28,128,189,.5), rgba(28,128,189,0));
  animation: ecDriftA 24s ease-in-out infinite;
  pointer-events: none;
}
.cc-hero__blob-b {
  position: absolute; left: -25%; bottom: -70%; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(113,163,205,.22), rgba(113,163,205,0));
  animation: ecDriftB 30s ease-in-out infinite;
  pointer-events: none;
}
.cc-hero__inner {
  position: relative;
  max-width: 1280px; margin: 0 auto;
  padding: calc(80px + clamp(40px, 7vh, 96px)) var(--gutter) clamp(64px, 9vh, 104px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
@media (min-width: 960px) {
  .cc-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.cc-rise { animation: ecRise .8s var(--ease-out) both; }
.cc-hero__copy > .crumbs { animation-duration: .7s; }
.cc-hero__eyebrow { animation-duration: .7s; animation-delay: .08s; }
.cc-hero__title { animation-delay: .16s; }
.cc-hero__bar { animation-delay: .22s; }
.cc-hero__lead { animation-delay: .28s; }
.cc-hero__cta { animation-delay: .38s; }
.cc-hero__viz { animation-duration: .9s; animation-delay: .45s; }

.cc-hero__eyebrow { margin-top: 28px; color: var(--ec-blue-soft); }
.cc-hero__title {
  margin-top: 18px;
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(36px, 4.8vw, 68px); line-height: 1.04; letter-spacing: -.025em;
  color: var(--ec-white); text-wrap: balance;
}
.cc-hero__bar { margin-top: 28px; width: 120px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #1C80BD 0%, #71A3CD 100%); }
.cc-hero__lead {
  margin-top: 26px; max-width: 520px;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55;
  color: var(--ec-on-navy-dim); text-wrap: pretty;
}
.cc-hero__cta { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Antes / después del coaching */
.cc-pill button[data-modo="1"][aria-pressed="true"] { background: var(--ec-blue); color: var(--ec-white); }

.cc-chat {
  margin-top: 14px;
  background: rgba(31,36,64,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--ec-navy-hair); border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.cc-chat__head {
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--ec-navy-hair);
}
.cc-chat__title { font-size: 14px; font-weight: 600; color: var(--ec-white); }
.cc-chat__tag { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ec-on-navy-faint); }
.cc-chat__body { padding: 22px 18px 20px; min-height: 400px; display: flex; flex-direction: column; gap: 12px; }
/* Las dos conversaciones van apiladas y se ve una: el cuadro toma el alto de la más
   larga y no mueve el hero al alternar. */
.cc-chat__modos { flex: 1; display: grid; }
.cc-chat__modo { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; visibility: hidden; }
.cc-chat__modo.is-on { visibility: visible; }

.cc-msg { align-self: flex-start; max-width: 84%; }
.cc-msg__b {
  background: var(--ec-navy-hair); color: var(--ec-white);
  font-size: 15px; line-height: 1.45;
  border-radius: 14px 14px 14px 4px; padding: 11px 14px;
}
.cc-msg__meta { margin-top: 5px; font-size: 11px; color: var(--ec-on-navy-faint); }
.cc-msg--out { align-self: flex-end; text-align: right; }
.cc-msg--out .cc-msg__b { background: var(--ec-blue); border-radius: 14px 14px 4px 14px; text-align: left; }
.cc-msg--gris .cc-msg__b { background: #3A4060; }
.cc-visto { align-self: flex-start; font-size: 12px; color: var(--ec-on-navy-faint); }

.cc-nota {
  margin-top: auto;
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(28,128,189,.14); border: 1px solid var(--ec-blue);
  border-radius: 8px; padding: 14px 16px;
}
.cc-nota__dot { flex: none; margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ec-blue-soft); }
.cc-nota__head { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ec-blue-soft); }
.cc-nota__text { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ec-white); }
.cc-nota--despues { background: var(--ec-white); border-color: transparent; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.cc-nota--despues .cc-nota__dot { background: var(--ec-blue); }
.cc-nota--despues .cc-nota__head { color: var(--ec-blue); }
.cc-nota--despues .cc-nota__text { font-weight: 600; color: var(--ec-navy); }

/* Los mensajes entran de a uno cada vez que se muestra una conversación */
.is-on > .cc-in { animation: ecRise .45s var(--ease-out) var(--d, 0s) both; }
.is-on > .cc-visto.cc-in { animation-timing-function: ease; }
.is-on > .cc-nota.cc-in { animation-duration: .5s; }

/* ---------- Secciones ---------- */
.cc-sec { padding: clamp(72px, 10vw, 120px) 0; }
.cc-sec--white { background: var(--ec-white); }
.cc-sec--blue { background: var(--ec-blue); color: var(--ec-white); }
.cc-sec--faq { padding-top: 0; }
.cc-wrap--narrow { max-width: 840px; }

.cc-eyebrow--white { color: var(--ec-white); }
.cc-h2 {
  margin-top: 16px; max-width: 820px;
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.02em;
  color: var(--ec-navy); text-wrap: balance;
}
.cc-h2--on-dark { color: var(--ec-white); }
.cc-h2--precio { max-width: none; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.cc-h2--faq { max-width: none; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; text-wrap: wrap; }

/* Qué trabajamos */
.cc-momentos {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 0 48px;
}
.cc-momento { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 28px 0; border-top: 1px solid var(--ec-border); }
.cc-momento__num { font-family: var(--fh); font-weight: 700; font-size: 15px; color: var(--ec-blue); }
.cc-momento h3 { font-family: var(--fh); font-weight: 700; font-size: clamp(20px, 1.8vw, 24px); color: var(--ec-navy); }
.cc-momento p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ec-muted); }

/* Cómo funciona */
.cc-pasos {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(32px, 4vw, 48px);
}
.cc-paso__ring { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ec-white); }
.cc-paso__ring--lleno { background: var(--ec-white); }
.cc-paso__label { margin-top: 20px; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; }
.cc-paso__text { margin-top: 12px; max-width: 340px; font-size: 17px; line-height: 1.55; }

/* Precio */
.cc-precio {
  background: var(--ec-card); border-radius: 12px;
  padding: clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 32px 64px; align-items: center;
}
.cc-precio__text { font-size: 17px; line-height: 1.6; }
.cc-precio__btn { margin-top: 28px; }

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .cc-rise, .is-on > .cc-in, .cc-hero__blob-a, .cc-hero__blob-b { animation: none; }
}