/* MTM Servicios — Componentes compartidos por las páginas nuevas (4 verticales)
   Extiende "Ledger Dark" (tokens.css + base.css + home.css). No introduce color de
   acento nuevo, no introduce escala tipográfica nueva, no introduce breakpoints ajenos
   al patrón ya usado en el sitio (780px = quiebre de nav/chrome ya existente,
   900px = quiebre de grids ya existente en home.css). Se añade 640px como paso
   intermedio "tablet" para grids que necesitan 2 columnas antes de los 780/900 propios
   del chrome del sitio. Mobile-first: reglas base = móvil, min-width escala hacia arriba.
   Todas las transiciones usan `transition`, por lo que ya quedan cubiertas por la regla
   global prefers-reduced-motion definida en base.css — no se duplica aquí. */

/* ---------- Ritmo vertical: bloques explicativos cortos (finanzas) ----------
   Cada una de estas secciones ya reduce su padding-top en línea a var(--space-lg)
   (ver finanzas/index.html); sin este ajuste su padding-bottom se queda en el valor
   por defecto de .section (--space-2xl = 9rem), lo que deja un salto mucho mayor
   entre párrafos cortos que en el resto del sitio. Se igualan ambos lados para que
   la cadencia sea coherente con la densidad real del contenido. Los IDs ya existen
   en el HTML (anclas de navegación), no se añade markup nuevo. */
#educacion-financiera,
#mercados,
#trading,
#copy-trading,
#gestion-riesgo,
#psicologia,
#herramientas,
#recursos {
  padding-bottom: var(--space-lg);
}

/* ---------- Botón CTA de header ("Quiero vender") ---------- */
.btn-cta {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: var(--accent-ink);
  border: 1px solid var(--accent-strong);
  box-shadow: 0 8px 20px -10px rgba(212, 162, 76, 0.55);
  font-size: var(--fs-small);
}
.btn-cta:hover { background: linear-gradient(135deg, var(--accent-strong), var(--accent-strong)); }
.btn-cta::after {
  content: "";
  width: 6px; height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
/* Especificidad (0,2,0) > `.main-nav a` (0,1,1): gana sin depender del orden de carga. */
.main-nav .btn-cta,
.main-nav .btn-cta:hover { color: var(--accent-ink); }
.main-nav .btn-cta[aria-current="page"]::after { display: none; }

@media (max-width: 780px) {
  .main-nav .btn-cta {
    width: 100%; justify-content: center;
    margin-top: var(--space-sm); padding: 1em 1.4em;
    font-size: 1rem;
  }
}

/* ---------- Grid de las 4 verticales (home) ---------- */
.vertical-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.vertical-card {
  display: flex; flex-direction: column; gap: var(--space-sm);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-fast);
}
.vertical-card:hover { transform: translateY(-4px); border-color: var(--panel-border-strong); }
.vertical-card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212, 162, 76, 0.08); color: var(--accent);
}
.vertical-card__icon svg { width: 26px; height: 26px; }
.vertical-card h3 { font-size: var(--fs-h3); color: var(--ink-1); }
.vertical-card p { color: var(--ink-2); font-size: 0.95rem; flex-grow: 1; margin: 0; }
.vertical-card__cta {
  margin-top: auto; font-size: var(--fs-small); color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.vertical-card__cta span { display: inline-block; transition: transform var(--dur-fast); }
.vertical-card:hover .vertical-card__cta span { transform: translateX(3px); }

@media (min-width: 640px) { .vertical-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- "Cómo funciona MTM": pasos numerados ---------- */
.how-steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.how-step { position: relative; padding-left: calc(44px + var(--space-md)); }
.how-step__num {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--panel-border-strong); background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); flex-shrink: 0;
}
.how-step h3 { font-size: 1.1rem; color: var(--ink-1); margin-bottom: 0.3em; }
.how-step p { color: var(--ink-2); font-size: 0.95rem; margin: 0; }

@media (min-width: 780px) {
  .how-steps { flex-direction: row; gap: var(--space-md); position: relative; }
  .how-steps::before {
    content: ""; position: absolute; top: 22px; left: 44px; right: 44px; height: 1px; z-index: 0;
    background: linear-gradient(90deg, var(--panel-border-strong), var(--accent) 50%, var(--panel-border-strong));
    opacity: 0.5;
  }
  .how-step { flex: 1; padding-left: 0; padding-top: calc(44px + var(--space-sm)); }
}

/* ---------- Red de partners (categorías genéricas, discreto) ---------- */
.partners-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-lg); }
.partner-card {
  padding: var(--space-md); border: 1px solid var(--panel-border); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 0.5em;
}
.partner-card .icon { width: 22px; height: 22px; color: var(--ink-3); }
.partner-card h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--ink-2); margin: 0; }
.partner-card p { font-size: var(--fs-small); color: var(--ink-3); margin: 0; }

@media (min-width: 640px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .partners-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } }

/* ---------- Formularios de leads: select, checkbox de consentimiento, grid 2 col ---------- */
.form-row select {
  width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-border-strong);
  border-radius: var(--radius-sm); padding: 0.8em 2.4em 0.8em 1em; color: var(--ink-1);
  font-family: var(--font-body); font-size: 1rem; transition: border-color var(--dur-fast);
  appearance: none; -webkit-appearance: none;
  background-repeat: no-repeat; background-position: right 1em center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238991a3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.form-row select:focus { border-color: var(--accent); outline: none; }
.form-row select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-row select option { background: var(--bg-elevated); color: var(--ink-1); }

.form-checkbox {
  display: flex; align-items: flex-start; gap: 0.6em;
  margin-bottom: var(--space-sm); font-size: var(--fs-small); color: var(--ink-2);
}
.form-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 0.15em; flex-shrink: 0;
  accent-color: var(--accent); border-radius: 4px;
}
.form-checkbox a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(212, 162, 76, 0.4); }
.form-checkbox a:hover { text-decoration-color: var(--accent); }

.form-grid-2col { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-md); }

@media (min-width: 900px) {
  .form-grid-2col { grid-template-columns: 1fr 1fr; }
}

/* ---------- Catálogo de cursos ---------- */
.course-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.course-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-med) var(--ease), border-color var(--dur-fast); }
.course-card:hover { transform: translateY(-4px); border-color: var(--panel-border-strong); }
.course-card__thumb {
  height: 160px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(212, 162, 76, 0.16), rgba(95, 182, 156, 0.08));
  border-bottom: 1px solid var(--panel-border);
}
.course-card__thumb .icon { width: 44px; height: 44px; color: var(--accent); }
.course-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.6em; flex-grow: 1; }
.course-card__badges { display: flex; gap: 0.5em; flex-wrap: wrap; }
.badge {
  font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--panel-border-strong); border-radius: 999px; padding: 0.25em 0.7em; white-space: nowrap;
}
.course-card h3 { font-size: 1.1rem; color: var(--ink-1); }
.course-card p { font-size: 0.9rem; color: var(--ink-2); flex-grow: 1; margin: 0; }
.course-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.6em; gap: var(--space-sm); }
.course-card__price { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); }

@media (min-width: 640px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .course-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Ficha de curso individual ---------- */
.course-header { max-width: 62ch; margin-bottom: var(--space-lg); }
.course-header h1 { font-size: var(--fs-h1); margin: 0.4em 0 var(--space-sm); }
.course-header__meta { display: flex; gap: 0.8em; align-items: center; flex-wrap: wrap; }
.course-header__price { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent); }

.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.7em; }
.check-list li {
  position: relative; padding-left: 1.8em; color: var(--ink-2); margin: 0;
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15em; width: 1.1em; height: 1.1em;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a24c' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.module-list { list-style: none; padding: 0; margin: 0; counter-reset: module; }
.module-list li {
  counter-increment: module; position: relative; margin: 0;
  padding: var(--space-sm) 0 var(--space-sm) 2.6em;
  border-bottom: 1px solid var(--panel-border);
}
.module-list li:last-child { border-bottom: none; }
.module-list li::before {
  content: counter(module, decimal-leading-zero);
  position: absolute; left: 0; top: var(--space-sm);
  font-family: var(--font-display); color: var(--accent); font-size: 0.95rem;
}
.module-list li strong { display: block; color: var(--ink-1); margin-bottom: 0.2em; }
.module-list li span { display: block; color: var(--ink-2); font-size: 0.9rem; }

.course-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-md) 0; }

/* Estado "próximamente": transmite "aún no, pero pronto", nunca "roto".
   Usar <button disabled> real (no <a>) para que el estado deshabilitado
   sea semántico y accesible para lectores de pantalla y teclado. */
.btn-soon,
.btn[disabled] {
  background: rgba(212, 162, 76, 0.16); color: var(--ink-2); cursor: not-allowed;
  border: 1px dashed var(--panel-border-strong);
}
.btn-soon:hover,
.btn[disabled]:hover { transform: none; background: rgba(212, 162, 76, 0.16); }
.badge-soon {
  font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent);
  background: rgba(212, 162, 76, 0.14); border-radius: 999px; padding: 0.2em 0.6em; margin-left: 0.4em;
}

/* ---------- Estado de compra (formacion/compra-confirmada) ---------- */
.purchase-result { border-left: 3px solid var(--panel-border-strong); }
.purchase-result--success { border-left-color: var(--accent); }
.purchase-result--error { border-left-color: var(--danger); }
[data-purchase-status]:empty { display: none; }
[data-purchase-status] { color: var(--danger); }

/* ---------- "¿Qué quieres vender?" (5 opciones grandes) ---------- */
.option-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
.option-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: var(--space-lg) var(--space-sm); text-align: center; text-decoration: none; color: var(--ink-1);
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md);
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-fast), background var(--dur-fast);
}
.option-card .icon { width: 34px; height: 34px; color: var(--accent); }
.option-card span { font-family: var(--font-display); font-size: 1.05rem; }
.option-card:hover { border-color: var(--accent); background: rgba(212, 162, 76, 0.06); transform: translateY(-3px); }

@media (min-width: 640px) { .option-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .option-cards { grid-template-columns: repeat(5, 1fr); } }

/* Curso con contenido ya publicado y comprable, frente a los "Próximamente". */
.badge-nuevo { background: rgba(95, 182, 156, 0.16); color: #7fd0b6; border-color: rgba(95, 182, 156, 0.3); }

/* ---------- Señales de confianza bajo un hero (nivel 1: comercial) ----------
   Mismo patrón que .empresas-trust, pero disponible en cualquier página que
   cargue sections.css. */
.hero-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--panel-border);
  list-style: none;
  padding-left: 0;
}
.hero-trust li { display: flex; align-items: flex-start; gap: 0.65em; font-size: var(--fs-small); color: var(--ink-2); }
.hero-trust svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); margin-top: 0.05em; }
@media (min-width: 860px) { .hero-trust { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } }

/* ---------- "Marco de actuación" (nivel 5: alcance legal, al final) ----------
   El detalle jurídico vive aquí y en /tyc, nunca por delante de la propuesta
   comercial. Equivalente a .empresas-marco, reutilizable en cualquier página. */
.marco-legal { padding: var(--space-lg) 0 var(--space-xl); border-top: 1px solid var(--panel-border); }
.marco-legal h2 {
  font-size: 1rem; font-family: var(--font-body); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 var(--space-sm);
}
.marco-legal p { font-size: var(--fs-small); color: var(--ink-3); max-width: 74ch; margin: 0 0 0.85em; line-height: 1.7; }
.marco-legal p:last-child { margin-bottom: 0; }
.marco-legal a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(212, 162, 76, 0.35); }
.marco-legal a:hover { text-decoration-color: var(--accent); }

/* ---------- Enlaces en línea dentro de texto y de notas legales ----------
   `a { color: inherit; text-decoration: none }` los dejaba invisibles: los
   enlaces a /tyc dentro de párrafos no se distinguían del texto. La jerarquía
   nueva apoya el detalle jurídico en esos enlaces, así que tienen que verse. */
.legal-content a:not(.btn),
.form-note a:not(.btn),
.hero-disclaimer a:not(.btn),
.faq-answer a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(212, 162, 76, 0.35);
}
.legal-content a:not(.btn):hover,
.form-note a:not(.btn):hover,
.hero-disclaimer a:not(.btn):hover,
.faq-answer a:not(.btn):hover { text-decoration-color: var(--accent); }

/* ---------- Nota secundaria (nivel 5 en línea) ----------
   La aclaración breve que acompaña a un bloque comercial: pequeña, discreta y
   con el enlace visible. Sustituye a los `style="font-size:…; color:…"`
   repetidos por la web. */
.nota-legal { font-size: var(--fs-small); color: var(--ink-3); }
.nota-legal a:not(.btn) { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(212, 162, 76, 0.35); }
.nota-legal a:not(.btn):hover { text-decoration-color: var(--accent); }

/* ---------- Ficha de curso en movil: el boton de compra, sin bajar ----------
   El bloque de compra vive ahora en la cabecera, justo debajo del titulo. En
   pantallas pequenas la cabecera del curso mas largo (6 insignias y un titulo
   de tres lineas) lo empujaba fuera de la pantalla: medido, el boton caia a
   706 px en un viewport de 667. Esto lo sube sin tocar ni una palabra del
   contenido.

   El :has() y el !important no son un descuido: el padding-top de 140 px va
   EN LINEA en cada pagina de curso (style="padding-top: 140px"), y desde una
   hoja de estilos no hay otra forma de ganarle. 140 px son el 21 % de un movil
   de 667 px de alto, y ahi solo hacen falta los 68 px de la barra superior mas
   un respiro. */
@media (max-width: 640px) {
  .section:has(> .container.course-detail) { padding-top: 92px !important; }
  .course-detail .section-label { margin-bottom: 0.4em; }
  .course-header { margin-bottom: 0.8rem; }
  .course-header h1 { font-size: 1.7rem; line-height: 1.18; margin: 0.2em 0 0.4em; }
  .course-header > p { font-size: 0.95rem !important; margin-bottom: 0.55em !important; }
  /* Las insignias dejan de apilarse en cinco filas y pasan a UNA fila que se
     desliza con el dedo. No se oculta ninguna -el "Profesor con voz de IA" es
     parte del aviso del art. 50 y no puede desaparecer-, solo dejan de empujar
     el boton fuera de la pantalla: medido, en el curso de 999 EUR pasaban de
     ocupar unos 130 px a 26.
     El precio se queda pegado a la izquierda mientras el resto se desliza, que
     es el dato que no puede perderse de vista. */
  .course-header__meta {
    gap: 0.4em; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px; -webkit-overflow-scrolling: touch;
  }
  .course-header__meta::-webkit-scrollbar { display: none; }
  .course-header__meta .badge { font-size: 0.66rem; padding: 0.18em 0.55em; flex: 0 0 auto; }
  .course-header__price {
    font-size: 1.2rem; order: -1; position: sticky; left: 0; flex: 0 0 auto;
    background: var(--bg); padding-right: 0.5em;
  }
  .course-actions { margin: 0.7em 0 0.5em; }
}