/* ==========================================================================
   MasterDrone Academy — estilos del sitio

   Portado del UI kit `ui_kits/academy/` del design system, con una
   diferencia que no es cosmetica: aqui NO hay ni un hex literal.
   El kit original usaba #fff, #000 y rgba() sueltos; todo eso sale ahora
   de los tokens del canon. El build aborta si se cuela uno.

   Este archivo NO declara :root. El unico :root es el de
   vault/01_Marca/identidad-visual/colors_and_type.css, servido como
   tokens.css y enlazado ANTES que este archivo.
   ========================================================================== */

/* ------- base ------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; cursor: pointer; }

img { max-width: 100%; display: block; }

/* El foco visible no es opcional: se navega con teclado y con lector. */
:focus-visible {
  outline: 2px solid var(--md-yellow);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.md-salto-contenido {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  background: var(--md-yellow);
  color: var(--md-ink);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-weight: 700;
  z-index: 100;
}
.md-salto-contenido:focus { left: var(--s-4); }

/* ------- logo ------- */
.md-logo { display: inline-flex; align-items: center; gap: var(--s-3); }
.md-logo-mark { width: 26px; height: 24px; object-fit: contain; }
.md-logo-word {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h5);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  line-height: 1;
}
.md-logo-word span {
  display: block;
  font-weight: 500;
  letter-spacing: 0.2em;
  font-size: var(--fs-micro);
  color: var(--fg-2);
  margin-top: 2px;
}

/* ------- nav ------- */
.md-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--md-ink) 82%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--stroke-1);
}
.md-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-3) var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.md-nav-links { display: flex; gap: var(--s-6); flex: 1; margin-left: var(--s-6); }
.md-nav-link {
  font-size: var(--fs-small);
  color: var(--fg-2);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out-cine);
}
.md-nav-link:hover, .md-nav-link[aria-current="page"] { color: var(--fg-1); }
.md-nav-actions { display: flex; align-items: center; gap: var(--s-3); }

/* ------- botones ------- */
.md-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-display);
  font-weight: 700;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out-cine),
              transform var(--dur-fast) var(--ease-out-cine);
}
/* Los CTA van en pildora; los secundarios en radio medio. Regla del canon. */
.md-btn-primario {
  background: var(--md-yellow);
  color: var(--md-ink);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
}
.md-btn-primario:hover { background: var(--md-yellow-hover); }
/* Nunca escalar por encima de 1.02; press a 0.98. Regla del canon. */
.md-btn-primario:active { background: var(--md-yellow-press); transform: scale(.98); }
.md-btn-fantasma {
  background: transparent;
  color: var(--fg-1);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  box-shadow: var(--inner-stroke);
}
.md-btn-fantasma:hover { background: var(--bg-card-hover); }
.md-btn-sm { padding: var(--s-2) var(--s-4); font-size: var(--fs-caption); }
.md-btn-lg { padding: var(--s-4) var(--s-8); font-size: var(--fs-h5); }
.md-btn-brillo { box-shadow: var(--shadow-glow); }

/* ------- secciones ------- */
/* Aire generoso: 80-120px de margen de seccion. Regla del canon. */
.md-seccion { max-width: 1280px; margin: 0 auto; padding: var(--s-24) var(--s-6); }
.md-seccion-cabecera { margin-bottom: var(--s-12); text-align: center; }
.md-seccion-cabecera .md-eyebrow { display: inline-block; margin-bottom: var(--s-3); }

/* ------- FAB de WhatsApp ------- */
/* El aprendizaje de campana dice que WhatsApp es el canal que cierra.
   Por eso esta siempre a la vista, en todas las paginas. */
.md-wa-fab {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--bg-card-elev);
  color: var(--fg-1);
  font-weight: 600;
  font-size: var(--fs-small);
  box-shadow: var(--shadow-lg), var(--inner-stroke);
  transition: background var(--dur-fast) var(--ease-out-cine);
}
.md-wa-fab:hover { background: var(--bg-card-hover); }
.md-wa-fab img { width: 20px; height: 20px; }

/* ------- footer ------- */
.md-footer { border-top: 1px solid var(--stroke-1); padding: var(--s-16) var(--s-6) var(--s-6); }
.md-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: var(--s-10);
}
.md-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.md-footer-cols > div > .md-eyebrow { margin-bottom: var(--s-3); display: block; }
.md-footer-cols a {
  display: block;
  color: var(--fg-2);
  font-size: var(--fs-small);
  padding: var(--s-1) 0;
  transition: color var(--dur-fast) var(--ease-out-cine);
}
.md-footer-cols a:hover { color: var(--fg-1); }
.md-footer-btm {
  max-width: 1280px;
  margin: var(--s-12) auto 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--stroke-1);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  color: var(--fg-3);
  font-size: var(--fs-caption);
}

/* ------- hero -------
   El unico sitio del sitio donde el fondo deja de ser plano. El degradado y
   la mancha amarilla salen del canon; aqui no se inventa ninguno. */
.md-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-gradient-dark);
  border-bottom: 1px solid var(--stroke-1);
}
.md-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-yellow-spot);
  pointer-events: none;
}
.md-hero > .md-seccion { position: relative; padding-block: var(--s-24); }
.md-hero-texto { max-width: 22ch; }
.md-hero-sub { max-width: 54ch; margin-top: var(--s-6); }
/* La linea anticonfusion: "no es un curso de pilotaje". Va contenida, con
   filete, para que se lea como aclaracion y no como otro argumento de venta. */
.md-hero-nota {
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--stroke-3);
  max-width: 48ch;
  color: var(--fg-2);
}
.md-acciones { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-10); }

/* ------- fichas de datos -------
   Cifras verificables del producto (capitulos, horas, garantia). No lleva
   los claims de credenciales, que el vault marca como sin verificar. */
.md-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-10);
  margin-top: var(--s-16);
  padding-top: var(--s-8);
  border-top: 1px solid var(--stroke-1);
}
.md-ficha-num {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.md-ficha-eti {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

/* ------- rejillas ------- */
.md-rejilla { display: grid; gap: var(--s-6); }
.md-rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.md-rejilla-3 { grid-template-columns: repeat(3, 1fr); }

/* ------- tarjetas -------
   Radio grande y filete interior, como las paginas de producto de Apple que
   son la referencia declarada de la marca. */
.md-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--inner-hairline);
  overflow: hidden;
  transition: background var(--dur-med) var(--ease-out-cine),
              transform var(--dur-med) var(--ease-out-cine);
}
a.md-tarjeta:hover { background: var(--bg-card-elev); transform: translateY(-2px); }
.md-tarjeta-media { background: var(--md-black); aspect-ratio: 16 / 9; }
.md-tarjeta-media img { width: 100%; height: 100%; object-fit: cover; }
.md-tarjeta-cuerpo { padding: var(--s-8); display: flex; flex-direction: column; flex: 1; }
.md-tarjeta-cuerpo > .md-eyebrow { display: block; margin-bottom: var(--s-3); }
.md-tarjeta-cuerpo > .md-body { margin-top: var(--s-4); }
/* El pie se pega abajo para que las tarjetas de una fila alineen sus CTA
   aunque el texto de arriba tenga distinto largo. */
.md-tarjeta-pie { margin-top: auto; padding-top: var(--s-6); }
.md-tarjeta-destacada { box-shadow: var(--shadow-glow); background: var(--bg-card-elev); }

/* ------- eyebrow neutro -------
   El .md-eyebrow del canon viene en amarillo. Eso esta bien para la etiqueta
   de una seccion, pero tres tarjetas en fila dan tres eyebrows amarillos
   compitiendo, y la regla del canon dice un solo momento amarillo por
   composicion. Dentro de tarjeta el eyebrow va en gris; el amarillo se lo
   queda el CTA, que es donde tiene que estar. */
.md-eyebrow-neutro { color: var(--fg-3); }

/* ------- listas ------- */
/* Vinetas en gris, no en amarillo: la regla del canon es un solo momento
   amarillo por composicion, y una lista de doce vinetas serian doce. */
.md-lista { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.md-lista li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
  color: var(--fg-2);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.md-lista li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--fg-4);
}

/* ------- bloque del fundador ------- */
.md-fundador { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-16); align-items: center; }
/* El anillo amarillo alrededor del retrato es un uso declarado del acento. */
.md-fundador-foto {
  border-radius: var(--r-2xl);
  box-shadow: 0 0 0 2px var(--stroke-yellow), var(--shadow-xl);
  background: var(--bg-card);
}
.md-fundador-banderas {
  margin-top: var(--s-6);
  font-size: var(--fs-small);
  color: var(--fg-3);
}

/* ------- cierre ------- */
.md-cierre {
  background: var(--bg-card);
  border-radius: var(--r-2xl);
  box-shadow: var(--inner-hairline);
  padding: var(--s-20) var(--s-10);
  text-align: center;
}
.md-cierre .md-acciones { justify-content: center; }
.md-cierre .md-body { max-width: 52ch; margin-inline: auto; }

/* ------- error 404 ------- */
.md-error { min-height: 60vh; display: grid; place-content: center; text-align: center; }
.md-error .md-display { color: var(--fg-4); }

/* ------- cinta superior ------- */
.md-cinta {
  background: var(--bg-card-elev);
  border-bottom: 1px solid var(--stroke-1);
  text-align: center;
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-small);
  color: var(--fg-2);
}

/* ------- bloque de precio ------- */
.md-precio { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.md-precio-ancla {
  font-size: var(--fs-h3);
  color: var(--fg-3);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.md-precio-ahora {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.md-precio-nota { margin-top: var(--s-4); max-width: 46ch; }

/* Modo campana: lo pinta campana.js anadiendo .md-campana-activa al <body>.
   Sin campana el contenido queda fuera del flujo, no solo invisible. */
.md-solo-campana { display: none; }
.md-campana-activa .md-solo-campana { display: revert; }

/* ------- comparativa "para quien es" ------- */
.md-columnas-si-no { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-10); }

/* ------- FAQ ------- */
.md-faq { max-width: 76ch; margin: 0 auto; }
.md-faq details {
  border-bottom: 1px solid var(--stroke-1);
  padding: var(--s-5) 0;
}
.md-faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h5);
  color: var(--fg-1);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}
.md-faq summary::-webkit-details-marker { display: none; }
/* El signo es glifo Unicode, no emoji: la regla del canon prohibe emoji en UI. */
.md-faq summary::after { content: "+"; color: var(--fg-3); font-weight: 400; }
.md-faq details[open] summary::after { content: "\2212"; }
.md-faq details p { margin: var(--s-4) 0 0; color: var(--fg-2); font-size: var(--fs-small); line-height: var(--lh-relaxed); max-width: 68ch; }

/* ------- formulario de captura ------- */
.md-formulario {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--inner-hairline);
  padding: var(--s-8);
}
.md-campo { display: block; margin-bottom: var(--s-4); }
.md-campo > span {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.md-input {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke-2);
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
}
.md-input::placeholder { color: var(--fg-4); }
.md-input:focus { border-color: var(--stroke-yellow); outline: none; }
.md-formulario .md-btn { width: 100%; justify-content: center; margin-top: var(--s-2); }
.md-privacidad { margin-top: var(--s-4); text-align: center; }
/* Honeypot: invisible para personas, rellenable por bots. No usa display:none
   porque algunos bots lo detectan; se saca del viewport. */
.md-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.md-error-form { margin-top: var(--s-4); color: var(--sem-danger); font-size: var(--fs-small); }

/* ------- pasos numerados ------- */
.md-pasos { counter-reset: paso; display: grid; gap: var(--s-6); }
.md-paso { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; }
.md-paso::before {
  counter-increment: paso;
  content: counter(paso);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h4);
  color: var(--fg-4);
  line-height: 1;
  min-width: 2ch;
}

/* ------- paginas legales -------
   Prosa larga, no landing: aqui manda la legibilidad, no el ritmo. Una sola
   columna estrecha y TODOS los enlaces subrayados -- en un texto legal el
   enlace tiene que verse como enlace, no como una palabra de otro color. */
.md-legal { max-width: 74ch; margin: 0 auto; }
.md-legal > h2 { margin-top: var(--s-12); }
.md-legal > h3 { margin-top: var(--s-8); }
.md-legal p {
  margin-top: var(--s-4);
  color: var(--fg-2);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.md-legal a { text-decoration: underline; }
.md-legal .md-lista { margin-top: var(--s-4); }
.md-legal-fecha { margin-bottom: var(--s-10); }

/* Quien recibe cada dato y para que. Va en tabla y no en parrafo porque es
   la parte que la gente busca de verdad, y en prosa no se encuentra. */
.md-tabla-envoltura { overflow-x: auto; margin-top: var(--s-6); }
.md-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 520px; }
.md-tabla th, .md-tabla td {
  text-align: left;
  padding: var(--s-4);
  border-bottom: 1px solid var(--stroke-1);
  vertical-align: top;
  line-height: var(--lh-normal);
}
.md-tabla th { color: var(--fg-1); font-weight: 600; }
.md-tabla td { color: var(--fg-2); }

/* ------- banner de consentimiento -------
   Hay audiencia en Espana: ni el Pixel ni GA4 se cargan hasta que el
   visitante acepta. Tres decisiones que no son de estilo:
   1. No es un muro. Se pide consentimiento para medir, no rehen del contenido.
   2. "Rechazar" pesa lo mismo que "Aceptar" y esta al mismo nivel. Un
      rechazo escondido invalida el consentimiento que se obtiene.
   3. Se pinta desde JS, no en el HTML, para que quien ya decidio no vea ni
      un parpadeo del banner en cada pagina. */
.md-consent {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 90;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--s-6);
  background: var(--bg-card-elev);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl), var(--inner-stroke);
}
.md-consent p { margin: 0; color: var(--fg-2); font-size: var(--fs-small); line-height: var(--lh-normal); }
.md-consent a { text-decoration: underline; }
.md-consent-acciones { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.md-consent-acciones .md-btn { flex: 1; justify-content: center; }

/* ------- movil -------
   El breakpoint de la marca es 800px: es el que ya usa la Landing V3 y el
   que trae el UI kit. No inventar otro. */
@media (max-width: 800px) {
  .md-seccion { padding: var(--s-16) var(--s-5); }
  .md-nav-links { display: none; }
  .md-nav-actions { margin-left: auto; }
  .md-nav-inner { gap: var(--s-4); padding: var(--s-3) var(--s-5); }
  .md-footer-inner { grid-template-columns: 1fr; }
  .md-footer-cols { grid-template-columns: repeat(2, 1fr); }
  .md-footer-btm { flex-direction: column; }
  .md-wa-fab { right: var(--s-4); bottom: var(--s-4); }
  .md-hero > .md-seccion { padding-block: var(--s-16); }
  .md-hero-texto { max-width: none; }
  .md-rejilla-2, .md-rejilla-3 { grid-template-columns: 1fr; }
  .md-fichas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-8);
    margin-top: var(--s-12);
  }
  .md-fundador { grid-template-columns: 1fr; gap: var(--s-8); }
  .md-fundador-foto { max-width: 240px; }
  .md-cierre { padding: var(--s-12) var(--s-6); }
  .md-tarjeta-cuerpo { padding: var(--s-6); }
  .md-columnas-si-no { grid-template-columns: 1fr; gap: var(--s-8); }
  .md-formulario { padding: var(--s-6); }
  .md-precio-ahora { font-size: var(--fs-h1); }
  /* El banner se come el FAB de WhatsApp si comparten esquina. */
  .md-consent { bottom: var(--s-20); padding: var(--s-5); }
  .md-consent-acciones { flex-direction: column; }
}