/* Página del coach IA.
   Se carga DESPUÉS de calculadoras.css, que trae los tokens y el armazón
   (cabecera, pie, contenedor, migas). Aquí solo va lo propio de esta página. */

/* ---------- Utilidades de entrada ---------- */

/* Ojo al selector: `.js` lo pone un script en línea de la cabecera. Sin él
   —JavaScript desactivado, un error de red, un bloqueador— el contenido se ve
   igual. Una página que es sobre todo texto no puede empezar invisible y
   depender de un script para aparecer. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Héroe ---------- */

.coach-hero {
  position: relative;
  padding: 64px 0 40px;
  overflow: clip;
}

/* Malla de luz que sigue al puntero. Es un gradiente movido por variables CSS
   desde JS: sin canvas, sin librería y sin coste de repintado apreciable. */
.coach-hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 620px;
  background:
    radial-gradient(
      520px 320px at calc(50% + var(--px, 0px)) calc(38% + var(--py, 0px)),
      rgba(43, 182, 255, 0.28),
      transparent 68%
    ),
    radial-gradient(
      420px 280px at calc(78% - var(--px, 0px)) calc(20% - var(--py, 0px)),
      rgba(34, 211, 238, 0.16),
      transparent 66%
    );
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* Grano finísimo. Es lo que más aleja el resultado del degradado plano de
   plantilla: rompe las bandas del gradiente y da textura de impresión. */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.coach-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 44px;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 940px) {
  .coach-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }
}

.coach-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.coach-hero .lede {
  margin: 18px 0 0;
  color: var(--text-200);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.16rem);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-weight: 650;
  font-size: 0.96rem;
  border: 1px solid transparent;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--brand-grad);
  color: #04121b;
  box-shadow: 0 12px 30px rgba(34, 211, 238, 0.22);
}

.btn--primary:hover {
  box-shadow: 0 18px 42px rgba(34, 211, 238, 0.32);
}

.btn--ghost {
  border-color: var(--line-2);
  color: var(--text-100);
  background: var(--surface-1);
}

.btn--ghost:hover {
  background: var(--surface-2);
}

.hero-note {
  margin: 18px 0 0;
  font-size: 0.86rem;
  color: var(--text-400);
  max-width: 44ch;
}

/* ---------- Tarjeta de veredicto del héroe ---------- */

.verdict {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  padding: 22px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}

/* Borde vivo: un degradado girando bajo una máscara. Da la sensación de que
   la tarjeta está "procesando" sin animar nada caro. */
.verdict::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--a, 0deg),
    transparent 0deg,
    rgba(34, 211, 238, 0.55) 40deg,
    transparent 120deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin-border 6s linear infinite;
  pointer-events: none;
}

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes spin-border {
  to {
    --a: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verdict::before {
    animation: none;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.4), transparent);
  }
}

.verdict__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(52, 211, 153, 0.14);
  color: var(--good);
  border: 1px solid rgba(52, 211, 153, 0.28);
}

.pill--muted {
  background: var(--surface-2);
  color: var(--text-300);
  border-color: var(--line);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.verdict__headline {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.32;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.verdict__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.verdict__rows {
  margin-top: 16px;
}

.verdict__label {
  color: var(--text-300);
  font-size: 0.9rem;
}

.verdict__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
}

.verdict__value .was {
  color: var(--text-400);
  text-decoration: line-through;
  font-weight: 500;
  margin-right: 8px;
}

.verdict__cite {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-300);
  line-height: 1.5;
}

.verdict__cite code {
  color: var(--ice);
  font-size: 0.8rem;
}

/* ---------- Bloques de sección ---------- */

.sect {
  padding: 68px 0;
  position: relative;
  z-index: 2;
}

.sect + .sect {
  border-top: 1px solid var(--line);
}

.sect__head {
  max-width: 62ch;
}

.eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.sect h2 {
  margin: 12px 0 0;
  font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 780;
}

.sect .sub {
  margin: 14px 0 0;
  color: var(--text-200);
  font-size: 1.02rem;
}

.grad-text {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Rejilla de fallos ---------- */

.flaws {
  display: grid;
  gap: 16px;
  margin-top: 34px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .flaws {
    grid-template-columns: repeat(3, 1fr);
  }
}

.flaw {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  background: var(--surface-1);
  position: relative;
  overflow: hidden;
}

.js .flaw::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.6), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

.js .flaw.is-in::after {
  transform: scaleX(1);
}

.flaw h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
}

.flaw p {
  margin: 0;
  color: var(--text-300);
  font-size: 0.93rem;
}

/* ---------- Acción → reacción ---------- */

.ar {
  display: grid;
  gap: 22px;
  margin-top: 34px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .ar {
    grid-template-columns: 0.86fr 1.14fr;
    gap: 30px;
    align-items: start;
  }
}

.ar__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar__btn {
  width: 100%;
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-200);
  font: inherit;
  font-size: 0.94rem;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ar__btn:hover {
  background: var(--surface-2);
  transform: translateX(3px);
}

.ar__btn[aria-selected="true"] {
  background: var(--brand-soft);
  border-color: rgba(34, 211, 238, 0.42);
  color: var(--text-100);
}

.ar__btn .n {
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.8rem;
  padding-top: 2px;
  min-width: 1.6em;
}

.ar__panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  min-height: 280px;
}

.ar__case[data-anim="in"] {
  animation: panel-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar__case[data-anim="in"] {
    animation: none;
  }
}

.ar__you {
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-400);
  font-weight: 700;
}

.ar__quote {
  margin: 10px 0 22px;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--text-100);
  font-weight: 620;
  letter-spacing: -0.01em;
}

.ar__does {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar__does li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-200);
  line-height: 1.5;
}

.ar__does .tick {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.4);
  position: relative;
}

.ar__does .tick::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid var(--good);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}

.ar__does .tick--no {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.4);
}

.ar__does .tick--no::after {
  left: 5px;
  top: 8px;
  width: 6px;
  height: 0;
  border-width: 0 0 1.6px 0;
  border-color: var(--bad);
  transform: none;
}

.ar__why {
  margin: 20px 0 0;
  padding: 13px 15px;
  border-left: 2px solid var(--cyan);
  background: rgba(34, 211, 238, 0.05);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.9rem;
  color: var(--text-200);
  line-height: 1.55;
}

/* ---------- Cifras ---------- */

.stats {
  display: grid;
  gap: 14px;
  margin-top: 34px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 780px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  background: var(--surface-1);
}

.stat b {
  display: block;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-300);
  line-height: 1.45;
}

/* ---------- Dos columnas de contenido ---------- */

.split {
  display: grid;
  gap: 26px;
  margin-top: 34px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

.panel h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 720;
}

.panel p {
  margin: 0;
  color: var(--text-300);
  font-size: 0.94rem;
}

.bullets {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.bullets li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-200);
  font-size: 0.96rem;
  line-height: 1.55;
}

.bullets .dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--brand-grad);
}

.bullets strong {
  color: var(--text-100);
  font-weight: 680;
}

/* ---------- Superposición fantasma ---------- */

.ghost-demo {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #0d141f, #070b12);
  display: grid;
  place-items: center;
}

.ghost-demo svg {
  width: 100%;
  height: 100%;
}

.ghost-demo .old {
  opacity: 0.32;
  animation: ghost-pulse 3.6s ease-in-out infinite;
}

@keyframes ghost-pulse {
  0%,
  100% {
    opacity: 0.18;
  }
  50% {
    opacity: 0.42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-demo .old {
    animation: none;
    opacity: 0.3;
  }
}

.ghost-demo figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  font-size: 0.78rem;
  color: var(--text-300);
  background: rgba(6, 9, 15, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  backdrop-filter: blur(6px);
}

/* ---------- Lo que no hace ---------- */

.honest {
  border: 1px solid rgba(245, 181, 36, 0.28);
  background: rgba(245, 181, 36, 0.05);
  border-radius: var(--r-xl);
  padding: 26px;
  margin-top: 30px;
}

.honest ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.honest li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-200);
  font-size: 0.95rem;
  line-height: 1.55;
}

.honest .x {
  flex: 0 0 auto;
  color: var(--warn);
  font-weight: 800;
  line-height: 1.4;
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: 30px;
  display: grid;
  gap: 10px;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.faq details[open] {
  border-color: rgba(34, 211, 238, 0.34);
  background: var(--surface-2);
}

.faq summary {
  cursor: pointer;
  padding: 17px 20px;
  font-weight: 660;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-300);
  border-bottom: 2px solid var(--text-300);
  transform: rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq .answer {
  padding: 0 20px 18px;
  color: var(--text-300);
  font-size: 0.95rem;
  line-height: 1.62;
  animation: faq-open 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq .answer {
    animation: none;
  }
}

.faq .answer p {
  margin: 0 0 10px;
}

.faq .answer p:last-child {
  margin-bottom: 0;
}

/* ---------- Cierre ---------- */

.closer {
  margin: 20px 0 70px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  padding: 40px 28px;
  text-align: center;
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(34, 211, 238, 0.14), transparent 70%),
    var(--surface-1);
  position: relative;
  z-index: 2;
}

.closer h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  letter-spacing: -0.025em;
  font-weight: 780;
}

.closer p {
  margin: 14px auto 0;
  max-width: 52ch;
  color: var(--text-200);
}

.closer .hero-actions {
  justify-content: center;
}