/* ==========================================================================
   LegiLearn — hoja de estilos única
   Orden: tokens → base → utilidades de layout → componentes → secciones →
   animaciones → responsive → accesibilidad/impresión
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* color */
  --ink: #0a0a0b;
  --ink-soft: #16171a;
  --ink-line: rgba(255, 255, 255, 0.1);
  --ink-text: rgba(245, 245, 245, 0.66);
  --ink-fg: #f5f5f5;

  --fg: #0a0a0b;
  --fg-strong: #292524;
  --fg-body: #57534e;
  --fg-muted: #6b655f;
  --fg-faint: #8c867f;

  --surface: #ffffff;
  --surface-2: #fcfcfb;
  --sand: #fafaf9;
  --tint: #f5f5f4;

  --line: #e7e5e4;
  --line-2: #efedea;
  --line-3: #f0efed;
  --line-strong: #d6d3d1;

  --amber: #f1c80f;
  --amber-hover: #f1c80f;
  --amber-deep: #b45309;
  --amber-soft: #fef3e2;

  --green: #16a34a;
  --green-deep: #15803d;
  --green-darkest: #14532d;
  --green-soft: rgba(22, 163, 74, 0.1);

  /* tipografía */
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* medidas */
  --wrap: 1440px;
  --gutter: 48px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 18px;
  --radius-slab: 28px;
  --radius-pill: 999px;

  /* elevación */
  --shadow-rest: 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-lift: 0 22px 44px -26px rgba(10, 10, 11, 0.26);
  --shadow-panel: 0 34px 70px -46px rgba(10, 10, 11, 0.4);

  /* movimiento */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* la nav es sticky */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

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

.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.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: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-s);
  background: var(--amber);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 92px; }
.section--tight { padding-block: 76px; }

/* Fondo arena con hombros en degradado: la transición entre secciones
   nunca es una línea dura. */
.section--sand {
  background: linear-gradient(
    180deg,
    var(--surface) 0,
    var(--sand) 110px,
    var(--sand) calc(100% - 110px),
    var(--surface) 100%
  );
  padding-block: 96px;
}

/* Bloque oscuro embebido en la página (Simulaciones, Certificados). */
.slab-wrap { padding-block: 92px 0; }
/* La losa se separa un poco más del borde que el resto de secciones. */
.wrap--slab { padding-inline: 40px; }
.slab {
  border-radius: var(--radius-slab);
  background: var(--ink);
  color: var(--ink-fg);
  padding: 84px var(--gutter);
}
.slab h2, .slab h3, .slab h4 { color: var(--ink-fg); }

/* Sin esto las columnas no bajan de su ancho mínimo y desbordan en móvil. */
.split > * { min-width: 0; }

/* Cabecera de sección: título a la izquierda, entradilla a la derecha. */
.head {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 44px;
}
.head__title { display: flex; flex-direction: column; gap: 18px; }
/* Entradilla de las franjas de llamada a la acción. Antes iba en un style
   inline repetido en cada página, que además se saltaba el justificado. */
.lead-copy { font-size: 16px; line-height: 1.65; color: var(--fg-body); }

.head__lead {
  max-width: 520px;
  padding-bottom: 4px;
  color: var(--fg-body);
  line-height: 1.65;
  text-wrap: pretty;
}
.slab .head__lead { color: var(--ink-text); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
}
.slab .eyebrow { color: rgba(245, 245, 245, 0.55); }

h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h3 { font-weight: 600; letter-spacing: -0.024em; }
h4 { font-weight: 600; letter-spacing: -0.018em; }

.label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   4. Componentes
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-s);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.btn:hover { transform: translateY(-1px); }
.btn--amber { background: var(--amber); color: var(--ink); font-weight: 600; }
.btn--amber:hover { background: var(--amber-hover); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--fg-strong); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-dark { border: 1px solid rgba(255, 255, 255, 0.18); color: var(--ink-fg); }
.btn--ghost-dark:hover { border-color: rgba(255, 255, 255, 0.42); }
.btn--lg { min-height: 52px; padding: 0 28px; }
.btn--block { width: 100%; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-rest);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: #d9d6d2;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
}
.chip--mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  padding: 7px 12px;
  border: 0;
  background: var(--tint);
  color: var(--fg-body);
}
/* Grupos de etiquetas en rejilla en lugar de flujo libre: así no queda
   nunca una fila coja con un solo elemento suelto. */
.chip-grid { display: grid; gap: 8px; }
.chip-grid--2 { grid-template-columns: repeat(2, 1fr); }
.chip-grid--3 { grid-template-columns: repeat(3, 1fr); }
.chip-grid .chip { justify-content: center; text-align: center; }

.chip--dark {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
  color: rgba(245, 245, 245, 0.86);
  font-weight: 400;
  font-size: 12px;
  transition: border-color 0.25s;
}
.chip--dark:hover { border-color: rgba(255, 255, 255, 0.45); }

.tick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-strong);
}
.tick__dot {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-tile {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-s);
  background: var(--amber-soft);
  color: var(--amber-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.slab .icon-tile,
.icon-tile--dark {
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.25);
  color: var(--amber);
}

/* Logotipo oficial: en cabecera, pie y certificado siempre es la imagen. */
.brand { display: inline-flex; align-items: center; }
.brand img { height: 34px; width: auto; }
.brand--footer img { height: 42px; }

/* --------------------------------------------------------------------------
   5. Secciones
   -------------------------------------------------------------------------- */

/* 5.1 Navegación --------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
}
.nav__link { color: rgba(245, 245, 245, 0.62); transition: color 0.22s; }
.nav__link:hover, .nav__link:focus-visible { color: #fff; }
.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__cta-m { display: none; }
/* Acceso de clientes: la plataforma vive en legilearn.com, la web en
   web.legilearn.com, así que el enlace de entrada tiene que estar siempre
   visible — también en móvil, donde el resto de botones se pliegan. */
.nav__login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--ink-fg);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.22s, background-color 0.22s;
}
.nav__login:hover, .nav__login:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink-fg);
}

/* 5.2 Hero --------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--ink-fg);
  padding-top: 78px;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}
.hero h1 { max-width: 940px; }
.hero__lead {
  max-width: 700px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
  color: var(--ink-text);
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.shot {
  position: relative;
  padding: 54px 44px 88px;
}
.shot__frame {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  background: #fff;
}
.shot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding-inline: 14px;
  background: var(--ink-soft);
  border-bottom: 1px solid var(--ink-line);
}
.shot__dots { display: flex; gap: 7px; }
.shot__dots i {
  width: 9px; height: 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
}
.shot__url { font-family: var(--mono); font-size: 11px; color: rgba(245, 245, 245, 0.58); }

.float {
  position: absolute;
  width: 268px;
  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55);
}
.float--light {
  left: 10px;
  bottom: 184px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.float--dark {
  right: 10px;
  top: 18px;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.bars i { width: 7px; border-radius: 2px; background: var(--amber); }
.bars i.is-good { background: var(--green); }

.meter {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-3);
  overflow: hidden;
}
.meter--dark { background: rgba(255, 255, 255, 0.1); }
.meter > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--amber); }
.meter > i.is-good { background: var(--green); }

/* Piezas de las tarjetas flotantes del hero. Iban en atributos style, que es
   lo que obligaba a mantener 'unsafe-inline' abierto en la CSP. */
.shot__spacer { width: 44px; }

.float__body { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.float__label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--fg-muted); }
.float--dark .float__label { color: rgba(245, 245, 245, 0.55); }
.float__delta { display: flex; align-items: baseline; gap: 7px; }
.float__delta s { font-size: 13px; color: var(--fg-faint); }
.float__delta svg { color: var(--fg-faint); }
.float__delta b { font-size: 16px; color: var(--green); }
.float__delta span { font-size: 11px; color: var(--fg-muted); }
.float__row { display: flex; align-items: center; gap: 8px; }
.float__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: #22c55e; }
.float__name { font-size: 14px; font-weight: 600; }
.float__gauge { display: flex; align-items: center; gap: 10px; }
.float__gauge .meter { flex: 1; }
.float__gauge .meter > i { width: 68%; }
.float__pct { font-size: 10px; color: rgba(245, 245, 245, 0.7); }
.float__foot { font-size: 10px; color: rgba(245, 245, 245, 0.58); }

/* Las alturas del minigráfico son el dato, no decoración suelta: van aquí
   para que el HTML no lleve nueve atributos style. */
.bars i:nth-child(1) { height: 100%; opacity: 0.5; }
.bars i:nth-child(2) { height: 90%; opacity: 0.55; }
.bars i:nth-child(3) { height: 80%; opacity: 0.62; }
.bars i:nth-child(4) { height: 70%; opacity: 0.7; }
.bars i:nth-child(5) { height: 60%; opacity: 0.8; }
.bars i:nth-child(6) { height: 48%; opacity: 0.6; }
.bars i:nth-child(7) { height: 38%; opacity: 0.75; }
.bars i:nth-child(8) { height: 26%; opacity: 0.88; }
.bars i:nth-child(9) { height: 18%; }

.icon-tile--green { background: var(--green-soft); color: var(--green); }


/* 5.3 Carrusel de clientes ---------------------------------------------- */
/* La prueba social iba suelta entre el hero negro y la primera sección
   blanca, y se leía como un trozo de ninguna de las dos. Ahora va dentro de
   un panel propio sobre la banda de arena: se ve que es un bloque aparte. */
.clients {
  background: linear-gradient(180deg, var(--sand) 0, var(--sand) 72%, var(--surface) 100%);
  padding: 54px 0 60px;
  overflow: hidden;
}
.clients__panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  padding: 28px 0 32px;
  box-shadow: 0 20px 44px -32px rgba(10, 10, 11, 0.4);
  overflow: hidden;
}
.clients__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 28px 26px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
  white-space: nowrap;
}
/* Un filete a cada lado del rótulo: encuadra sin añadir otra caja. */
.clients__title::before,
.clients__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.clients__title em { font-style: normal; font-weight: 600; color: var(--fg); }

/* Los bordes se desvanecen con una máscara sobre el propio carrusel. */
.logos {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: slide 44s linear infinite;
}
.logos:hover .logos__track { animation-play-state: paused; }
.logos__track li { flex: 0 0 auto; margin-inline: 26px; }
.logos__track img { height: 56px; width: 176px; object-fit: contain; }

/* 5.4 Recorrido (Cómo trabajamos) ---------------------------------------- */
.steps { position: relative; }
.steps::before {
  content: "";
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 33px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.steps__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  transition: transform 0.4s var(--ease);
}
.step:hover { transform: translateY(-3px); }
.step__node {
  width: 66px;
  height: 66px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--amber-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(10, 10, 11, 0.05);
}
.step__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--amber);
}
.step h3 { font-size: 23px; line-height: 1.2; letter-spacing: -0.028em; }
.step p {
  max-width: 320px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-body);
  text-wrap: pretty;
}
.step__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.step__tags li {
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--fg-body);
}

.note-strip {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--sand);
}
.note-strip__icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--amber-soft);
  color: var(--amber-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.note-strip h3 { font-size: 16px; }
.note-strip p { font-size: 14px; line-height: 1.55; color: var(--fg-body); }

/* 5.5 Catálogo de ataques (Simulaciones) --------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kind {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--ink-line);
  background: var(--ink-soft);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.kind:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: #1b1c20;
  transform: translateY(-2px);
}
.kind h3 { font-size: 15px; letter-spacing: -0.015em; }
.kind p { font-size: 13px; line-height: 1.55; color: rgba(245, 245, 245, 0.6); }

/* Tarjeta de correo (mockup). Vive dentro de la losa oscura pero es una
   superficie blanca: recupera el color de texto normal. */
.mail, .slab .mail h3, .slab .mail h4 { color: var(--fg); }
.mail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-rest);
}
.mail__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
.mail__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 28px 24px;
  flex: 1;
}
.mail__subject { font-size: 21px; line-height: 1.28; letter-spacing: -0.026em; }
.mail__from {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-2);
}
.avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.mail__text {
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 15px;
  line-height: 1.72;
  color: #3f3b37;
}
.mail__bait { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 3px; }
.mail__sign {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 15px;
  border-left: 2px solid var(--line-2);
}
.attach {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.attach__type {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 7px;
  background: var(--green-deep);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.caption {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 2px 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-body);
}
.slab .caption { color: var(--ink-text); }

.promo {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 36px;
  border-radius: var(--radius-m);
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
}
.promo h3 { font-size: 25px; letter-spacing: -0.03em; }
.promo p { font-size: 14px; line-height: 1.6; color: var(--ink-text); max-width: 560px; }
.promo__chips { max-width: 400px; }


.mail-col { display: flex; flex-direction: column; gap: 12px; }
.mail-col .mail { flex: 1; }
.mail__bar .label { display: inline-flex; align-items: center; gap: 9px; }
.mail__time { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); }
.mail__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mail__name { font-size: 14px; font-weight: 600; }
.mail__role { font-weight: 400; color: var(--fg-muted); }
.mail__addr { font-family: var(--mono); font-size: 12px; color: #44403c; }
.mail__to { font-size: 12px; color: var(--fg-muted); align-self: flex-start; padding-top: 3px; }
.mail__sign span:first-child { font-size: 13px; font-weight: 600; }
.mail__sign span:last-child { font-size: 12px; color: var(--fg-muted); }
.mail__attach { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 4px; }
.mail__attach .label { font-size: 10px; letter-spacing: 0.16em; }

.attach__info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.attach__name { font-size: 13px; font-weight: 600; }
.attach__meta { font-size: 12px; color: var(--fg-muted); }
.attach > svg { color: var(--fg-faint); }

.caption svg { flex: 0 0 auto; margin-top: 2px; color: var(--amber); }

.promo__copy { display: flex; flex-direction: column; gap: 9px; }
.promo .label { color: rgba(245, 245, 245, 0.55); }

/* 5.6 Formación ---------------------------------------------------------- */
.learn { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 20px; align-items: stretch; }
.player {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 316px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background:
    linear-gradient(rgba(10, 10, 11, 0.45), rgba(10, 10, 11, 0.62)),
    radial-gradient(620px 280px at 50% 40%, #212226, var(--ink) 76%);
  background-size: cover;
  background-position: center;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__tag {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(245, 245, 245, 0.78);
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 11px;
  border-radius: var(--radius-pill);
}
.player__play {
  width: 70px; height: 70px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s var(--ease);
}
.player:hover .player__play { transform: scale(1.06); }
.player__meta {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(245, 245, 245, 0.92);
  font-size: 15px;
  font-weight: 500;
}
.player__meta .meter { height: 3px; background: rgba(255, 255, 255, 0.18); }

.modules { display: flex; flex-direction: column; }
.module {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--line-3);
  transition: background 0.25s;
}
.module:hover { background: var(--sand); }
.module__state {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.module__state--done { background: var(--green); border-color: var(--green); color: #fff; }
.module__state--now { border: 2px solid var(--amber); color: var(--amber); }
.module--now { background: #fffbf3; }
.module h3 { font-size: 14.5px; letter-spacing: -0.012em; }
.module p { font-size: 12px; color: var(--fg-muted); }
.badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge--done { background: var(--green-soft); color: var(--green-darkest); }
.badge--now { background: var(--amber-soft); color: var(--amber-deep); }

.trio { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.trio .card { display: flex; align-items: center; gap: 16px; padding: 24px; }


/* Tarjeta que envuelve el reproductor o el listado: el contenido tiene que
   quedar recortado por el borde redondeado. */
.card--stack { overflow: hidden; display: flex; flex-direction: column; }

/* La carátula de la píldora vive aquí y no en el HTML: es parte del diseño
   del reproductor, no un dato de la página. */
.player {
  background-image: linear-gradient(rgba(10, 10, 11, 0.45), rgba(10, 10, 11, 0.62)), url(pildora-01-poster.jpg);
}
.player__play svg { color: var(--ink); }
.player .meter > i { width: 32%; }

.learn__body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: 24px 26px; }
.learn__body h3 { font-size: 19px; }
.learn__body p { font-size: 14px; line-height: 1.65; color: var(--fg-body); }

.module__info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.module--now .module__info p { color: var(--amber-deep); }
.module--todo .module__info h3 { color: #44403c; }
.modules__foot {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding: 20px 24px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
}
.modules__foot .icon-tile { width: 34px; height: 34px; }
.modules__foot span:last-child { font-size: 13px; line-height: 1.55; color: var(--fg-body); }

.trio h3 { font-size: 15px; }
.trio p { font-size: 13px; line-height: 1.5; color: var(--fg-body); }

/* 5.7 Certificado -------------------------------------------------------- */
.cert {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-l);
  background: linear-gradient(155deg, #1a1b1f, #0d0e10 72%);
}
.cert__head,
.cert__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cert__head { padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cert__foot { align-items: flex-end; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cert__name { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.032em; line-height: 1.1; color: #fff; }
.cert__course { font-size: 21px; font-weight: 600; letter-spacing: -0.022em; }
.feature-list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-m);
}
.feature h3 { font-size: 17px; }
.feature p { font-size: 14px; line-height: 1.55; color: rgba(245, 245, 245, 0.58); }


.cert__head img { height: 22px; width: auto; }
.cert__code { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(245, 245, 245, 0.58); }
.cert__intro { display: flex; flex-direction: column; gap: 8px; }
.cert__kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: rgba(245, 245, 245, 0.58); }
.cert__by { font-size: 14px; color: rgba(245, 245, 245, 0.55); }
.cert__cell { display: flex; flex-direction: column; gap: 5px; }
.cert__cell--end { align-items: flex-end; }
.cert__cell .mono { font-size: 10px; letter-spacing: 0.14em; color: rgba(245, 245, 245, 0.58); }
.cert__cell .num { font-size: 14px; font-weight: 500; }
.cert__cell .cert__score { font-weight: 600; color: var(--amber); }
.cert__qr { background: #fff; border-radius: 7px; padding: 4px; }

.feature .icon-tile { width: 42px; height: 42px; border-radius: 11px; }

/* 5.8 Cumplimiento (matriz) ---------------------------------------------- */
.matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.norm { display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.norm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.norm__code { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.norm__scope {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.norm__ok {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.norm p { font-size: 13.5px; line-height: 1.6; color: var(--fg-body); flex: 1; }
.norm__out {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 14px;
  border-top: 1px solid var(--line-3);
}
.norm__out span:last-child { font-size: 13px; font-weight: 500; }

.matrix-foot { margin-top: 16px; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 16px; }
.matrix-foot > * { display: flex; align-items: center; gap: 22px; padding: 26px 28px; }
.matrix-foot .dark {
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--ink-fg);
}
.matrix-foot .dark p { font-size: 13.5px; line-height: 1.55; color: var(--ink-text); }


.norm__out .label { font-size: 9.5px; letter-spacing: 0.16em; }
.matrix-foot .icon-tile { width: 42px; height: 42px; border-radius: 11px; }
.matrix-foot__copy { display: flex; flex-direction: column; gap: 9px; }
.matrix-foot .dark .matrix-foot__copy { gap: 5px; }
.matrix-foot h3 { font-size: 15px; }
.matrix-foot .dark h3 { color: var(--ink-fg); }

/* 5.9 Precios ------------------------------------------------------------ */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  border-radius: var(--radius-l);
}
.plan__name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-body);
}
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__price b { font-size: 42px; font-weight: 600; letter-spacing: -0.042em; }
.plan__price span { font-size: 15px; color: var(--fg-muted); }
.plan__unit { font-size: 14px; color: var(--fg-muted); }
.plan__note {
  font-size: 12px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--amber-deep);
}
.plan__features { display: flex; flex-direction: column; gap: 13px; flex: 1; }
.plan__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #44403c; }
.plan__features svg { flex: 0 0 auto; margin-top: 3px; }

.plan--featured {
  position: relative;
  margin-block: -12px;
  padding: 36px 32px;
  background: var(--ink);
  color: var(--ink-fg);
  box-shadow: 0 34px 64px -32px rgba(10, 10, 11, 0.5);
}
.plan--featured .plan__name { color: rgba(245, 245, 245, 0.72); }
.plan--featured .plan__price span,
.plan--featured .plan__unit { color: rgba(245, 245, 245, 0.58); }
.plan--featured .plan__features li { color: rgba(245, 245, 245, 0.88); }
.plan__flag {
  position: absolute;
  top: -11px; left: 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--amber);
  color: var(--ink);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
/* La equivalencia mensual es lo que hace entendible el precio: 30 € al año
   suena a compra, 2,50 € al mes suena a lo que cuesta de verdad. */
.plan__equiv {
  align-self: flex-start;
  margin-top: -14px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.14);
  color: var(--amber);
  font-size: 13px;
}
.plan__equiv b { font-weight: 600; }

.plan__small { text-align: center; font-size: 12px; color: rgba(245, 245, 245, 0.58); }

.custom {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.custom__body { display: flex; align-items: center; gap: 20px; flex: 1; }
.custom h3 { font-size: 20px; letter-spacing: -0.022em; }
.custom p { font-size: 14px; line-height: 1.6; color: var(--fg-body); max-width: 720px; }


.plan--featured .plan__features svg { color: var(--amber); }
.plan__cta { display: flex; flex-direction: column; gap: 10px; }
.custom .icon-tile { width: 46px; height: 46px; border-radius: 12px; }
.custom__copy { display: flex; flex-direction: column; gap: 6px; }

/* Lo opcional se dice en la propia línea: sacarlo a una nota al pie obliga a
   mirar dos sitios para saber si la charla entra en el precio. */
.plan__opt {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.plan--featured .plan__opt { color: rgba(245, 245, 245, 0.58); }

/* 5.9b Precios · tabla comparativa ---------------------------------------
   Va dentro de la misma sección que las tarjetas, entre ellas y el recuadro
   de "lo adaptamos": las tarjetas dicen cuánto cuesta cada plan y la tabla
   qué los diferencia, y separarlas en dos secciones obligaba a leer los tres
   precios dos veces.

   La tabla es una tabla de verdad —<th scope> en cabeceras y filas— porque un
   lector de pantalla necesita saber a qué plan pertenece cada marca. El "—"
   va aria-hidden con su "No incluido" al lado en .sr-only: un guion suelto no
   se lee. */
.compare__title {
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: 20px;
  letter-spacing: -0.022em;
}
.compare { overflow-x: auto; }
.compare__table { width: 100%; min-width: 700px; border-collapse: collapse; }
.compare__table th,
.compare__table td { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.compare__table tbody th {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #44403c;
}
.compare__table tbody td { text-align: center; vertical-align: middle; width: 19%; padding-block: 10px; }
/* La última fila cierra la columna oscura: sin borde, que si no corta el
   redondeo de abajo. */
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__corner { border-bottom-color: transparent !important; }

.compare__plan { position: relative; text-align: center; vertical-align: bottom; padding-top: 34px; }
.compare__name {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-body);
}
.compare__price { display: block; margin-top: 10px; font-size: 32px; font-weight: 600; letter-spacing: -0.042em; }
.compare__unit { display: block; font-size: 13px; font-weight: 400; color: var(--fg-muted); }
.compare__flag {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--amber);
  color: var(--ink);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* La columna destacada se pinta celda a celda: es una columna de una tabla,
   no una caja, y no hay forma de darle fondo desde <col> sin perder el borde
   de cada fila. */
.compare__table .is-featured { background: var(--ink); color: var(--ink-fg); border-bottom-color: var(--ink-line); }
.compare__table thead .is-featured { border-radius: var(--radius-l) var(--radius-l) 0 0; }
.compare__table tbody tr:last-child .is-featured { border-radius: 0 0 var(--radius-l) var(--radius-l); }
.compare__table .is-featured .compare__name { color: rgba(245, 245, 245, 0.72); }
.compare__table .is-featured .compare__unit { color: rgba(245, 245, 245, 0.58); }
.compare__table .is-featured .compare__opt { color: rgba(245, 245, 245, 0.58); }

/* La marca va en un recuadro y no suelta: en una tabla de ocho filas, un
   check fino del color del texto se pierde, y lo que hay que ver de un
   vistazo es qué columna tiene más recuadros encendidos. El mismo recuadro
   se pinta apagado cuando la prestación no entra, para que las tres columnas
   se lean como una rejilla y no como huecos. */
.compare__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
.compare__mark--yes {
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 6px 14px -8px rgba(241, 200, 15, 0.9);
}
.compare__mark--yes svg { stroke-width: 2.6; }
.compare__mark--no {
  background: var(--line-3);
  color: var(--fg-faint);
  font-size: 14px;
}
/* Sobre la columna oscura el halo no pinta nada: se quita y basta. */
.compare__table .is-featured .compare__mark--yes { box-shadow: none; }
.compare__table .is-featured .compare__mark--no {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 245, 245, 0.42);
}
.compare__opt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* 5.10 Testimonios ------------------------------------------------------- */
.quotes { position: relative; overflow: hidden; }
.quotes::before,
.quotes::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 170px;
  z-index: 2;
  pointer-events: none;
}
.quotes::before { left: 0; background: linear-gradient(to right, var(--ink) 12%, rgba(10, 10, 11, 0)); }
.quotes::after { right: 0; background: linear-gradient(to left, var(--ink) 12%, rgba(10, 10, 11, 0)); }

/* El carrusel sangra hasta los bordes redondeados de la losa. */
.slab .quotes { margin-inline: calc(var(--gutter) * -1); }
.quotes__track {
  display: flex;
  width: max-content;
  padding-block: 8px;
  animation: slide 72s linear infinite;
}
.quotes:hover .quotes__track { animation-play-state: paused; }
.quote {
  width: 380px;
  flex: 0 0 auto;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-l);
  background: var(--ink-soft);
  transition: border-color 0.3s;
}
.quote:hover { border-color: rgba(255, 255, 255, 0.22); }
.quote blockquote { font-size: 15px; line-height: 1.68; color: rgba(245, 245, 245, 0.88); flex: 1; }
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-line);
  color: var(--ink-fg);
}
.quote__avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(245, 166, 35, 0.12);
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}


.quote > svg { color: var(--amber); }
.quote__name { display: block; font-size: 14px; font-weight: 600; }
.quote__role { font-size: 12px; color: rgba(245, 245, 245, 0.6); }

/* 5.11 Contacto ---------------------------------------------------------- */
.contact {
  background:
    radial-gradient(920px 420px at 76% 0%, rgba(245, 166, 35, 0.09), rgba(255, 255, 255, 0) 68%),
    var(--surface);
  padding-block: 92px 96px;
}
.contact__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 48px; align-items: start; }
.contact__col { display: flex; flex-direction: column; gap: 22px; }
.gift {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--amber-soft);
  color: var(--amber-deep);
  font-size: 12px;
  font-weight: 500;
}
.owner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
/* Lleva el icono de calendario: la fila invita a reservar hueco en la
   agenda, y un disco con iniciales obligaba a adivinar de quién eran. */
.owner__avatar {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  background: var(--amber-soft);
  color: var(--amber-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--wide { grid-column: span 2; }
.field > span { font-size: 12px; font-weight: 600; color: #44403c; }
.field input,
.field select,
.field textarea {
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--sand);
  font-size: 14px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.field input::placeholder,
.field textarea::placeholder { color: #a8a29e; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.06);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
/* Trampa para robots de spam. Fuera de la pantalla en lugar de display:none,
   que es lo primero que miran los que están bien hechos. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.consent { padding-block: 4px; }
.consent input { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 0; accent-color: var(--ink); }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.form__foot { display: flex; flex-direction: column; gap: 12px; }
.form__alt { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--fg-muted); }
.form__alt a { color: var(--amber-deep); }
.form__status { text-align: center; font-size: 13px; }
.form__status[data-state="error"] { color: #b91c1c; }
.form__status[data-state="ok"] { color: var(--green-deep); }
.form[data-sent="true"] .form__body { display: none; }
.form__done { display: none; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-block: 30px; }
.form[data-sent="true"] .form__done { display: flex; }


.contact__ticks { display: flex; flex-direction: column; gap: 13px; padding-top: 4px; }
.owner__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.owner__note { font-size: 12px; color: var(--fg-muted); }
.owner__note a { color: var(--amber-deep); font-weight: 500; }
.form__title { font-size: 22px; letter-spacing: -0.028em; }
.form__intro { font-size: 13px; color: var(--fg-muted); margin-top: 6px; }
.form__done .icon-tile {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green-deep);
}
.form__done h2 { font-size: 22px; }
.form__done p { font-size: 14px; line-height: 1.6; color: var(--fg-body); max-width: 360px; }

/* 5.12 Footer ------------------------------------------------------------ */
.footer { background: var(--surface); }
.footer__slab {
  background: var(--ink);
  color: var(--ink-fg);
  border-radius: var(--radius-slab) var(--radius-slab) 0 0;
}
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-block: 52px 44px;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13px; margin-top: 4px; }
/* El acceso a la plataforma es el único enlace del pie que sale del sitio. */
.footer__login { color: var(--amber); }
.footer__contact { display: flex; flex-direction: column; gap: 9px; font-style: normal; text-align: right; font-size: 14px; color: rgba(245, 245, 245, 0.78); }

.footer__note { font-size: 14px; color: rgba(245, 245, 245, 0.58); margin-top: 16px; }
.footer__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(245, 245, 245, 0.58); margin-bottom: 4px; }

.footer__legal {
  border-top: 1px solid var(--ink-line);
}
.footer__legal .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
  font-size: 12px;
  color: rgba(245, 245, 245, 0.58);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 20px; }


/* Texto de cuerpo justificado.
   Va con partición de palabras activada a propósito: justificar sin partir
   abre "ríos" de espacio en cuanto la columna se estrecha, y ahí el remedio
   es peor que la enfermedad. Como <html> declara lang="es", el navegador
   parte en español.

   Se escribe con :where() para que no tenga especificidad: cualquier regla
   de componente que ya centre su texto (los pasos, la letra pequeña de los
   planes, los pies de foto) sigue mandando sobre esto. */
:where(
  .head__lead,
  .lead-copy,
  .page-hero__lead,
  .promo p,
  .contact__col p,
  .card p,
  .kind p,
  .module p,
  .feature p,
  .matrix li p,
  .custom__body p,
  .note-strip p,
  .dark > div > p,
  .caption,
  .post-card__body p,
  .quote blockquote,
  .article p,
  .prose p,
  .prose li
) {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   6. Animaciones
   -------------------------------------------------------------------------- */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.pulse { animation: pulse 2.2s ease-in-out infinite; }

.up { opacity: 0; animation: up 0.8s var(--ease) forwards; }
.up--1 { animation-delay: 0.1s; }
.up--2 { animation-delay: 0.2s; }
.up--3 { animation-delay: 0.3s; }
.up--4 { animation-delay: 0.42s; }

/* Aparición al hacer scroll: se activa desde JS añadiendo .is-in.
   Es la única entrada de la web —toda la página usa esta misma— y se
   dispara antes de que el bloque llegue a la pantalla (ver app.js), así
   que conviene que sea corta: si dura más que el gesto de bajar, parece
   que la página va por detrás del usuario. */
.reveal { opacity: 0; transform: translateY(14px); }
.js .reveal { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  :root { --gutter: 36px; }
  .steps::before { left: 12%; right: 12%; }
  .quotes::before, .quotes::after { width: 90px; }
  .logos__track img { height: 48px; width: 152px; }
  .logos__track li { margin-inline: 20px; }
}

@media (max-width: 960px) {
  .brand img { height: 30px; }
  .brand--footer img { height: 38px; }
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__actions .btn { display: none; }
  .nav__actions { gap: 10px; }
  .nav__login { padding: 0 13px; }
  .nav[data-open="true"] .nav__links {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
  }
  .nav[data-open="true"] .nav__cta-m { display: block; color: var(--amber); font-weight: 600; }
  .nav[data-open="true"] .nav__links a {
    padding-block: 14px;
    border-bottom: 1px solid var(--ink-line);
    font-size: 16px;
  }

  .section, .section--sand, .contact { padding-block: 64px; }
  .slab-wrap { padding-block: 64px 0; }
  .slab { padding: 56px 28px; border-radius: 22px; }
  .slab .quotes { margin-inline: -28px; }

  .head { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 32px; }
  .head__lead { max-width: none; }

  .split, .learn, .contact__grid, .matrix-foot { grid-template-columns: 1fr; }
  .wrap--slab { padding-inline: var(--gutter); }
  .matrix { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan--featured { margin-block: 0; }
  .trio { grid-template-columns: 1fr; }

  .steps__grid { grid-template-columns: 1fr; gap: 44px; }
  .steps::before { display: none; }

  .float { display: none; }
  .shot { padding: 40px 0 56px; }
  .hero { padding-top: 56px; }

  .promo, .custom, .matrix-foot > * { flex-direction: column; align-items: flex-start; gap: 20px; }
  .promo { align-items: stretch; }
  .promo__chips { max-width: none; }
  .footer__top { flex-direction: column; gap: 32px; }
  /* objetivos táctiles de 44px en los enlaces del pie */
  .footer__links { gap: 4px 22px; }
  .footer__links a,
  .footer__legal a { display: inline-block; padding-block: 12px; }
  .footer__legal ul { gap: 4px 20px; }
  .footer__contact { text-align: left; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .chip-grid--2 { grid-template-columns: 1fr; }
  .chip-grid--3 { grid-template-columns: repeat(2, 1fr); }
  /* Sólo el icono: el nombre de la marca y el menú necesitan el ancho. */
  .nav__login span { display: none; }
  .nav__login { padding: 0; width: 44px; justify-content: center; }
  .form { padding: 24px; }
  .form__grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .matrix { grid-template-columns: 1fr; }
  .kinds { grid-template-columns: 1fr; }
  .mail__body { padding: 20px; }
  .quote { width: 300px; }
  .cert { padding: 26px; }
  .cert__foot { flex-wrap: wrap; gap: 18px; }
  .footer__legal .wrap { flex-direction: column; align-items: flex-start; }
  .clients__panel { border-radius: 18px; padding: 22px 0 26px; }
  .clients__title { margin-inline: 20px; font-size: 12px; white-space: normal; }
  .logos__track img { height: 40px; width: 122px; }
  .logos__track li { margin-inline: 14px; }
}

/* --------------------------------------------------------------------------
   8. Accesibilidad y preferencias del sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .up { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .quotes__track { animation: none; }
  .quotes { overflow-x: auto; }
}

@media print {
  .nav, .quotes, .form, .skip-link { display: none; }
  .slab, .footer__slab, .plan--featured,
  .compare__table .is-featured { background: #fff !important; color: #000 !important; }
  .compare { overflow-x: visible; }
  .compare__table { min-width: 0; }
  body { font-size: 12pt; }
}

/* --------------------------------------------------------------------------
   9. Páginas interiores (blog, artículo y Sobre nosotros)
   -------------------------------------------------------------------------- */

/* Cabecera de página interior: la nav es oscura, así que el hero también. */
.page-hero {
  background: var(--ink);
  color: var(--ink-fg);
  padding-block: 76px 84px;
}
.page-hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 22px;
}
.page-hero h1 { max-width: 900px; }
.page-hero__lead {
  max-width: 640px;
  margin-top: 24px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: var(--ink-text);
  text-wrap: pretty;
}
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-hero .hero__cta { margin-top: 32px; }

.wrap--narrow { max-width: 760px; }
.wrap--article { max-width: 900px; }
.eyebrow--amber { color: var(--amber); }

/* Franja de cierre con el texto a la izquierda y el botón a la derecha.
   Se repite en el blog, en cada artículo y en «Nosotros». */
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-strip__copy { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.cta-strip h2 { font-size: clamp(26px, 3vw, 34px); }

.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row--push { margin-top: auto; }
.chip-row--below { margin-bottom: 24px; }

.duo__copy { display: flex; flex-direction: column; gap: 18px; }

/* post.html: la página que sólo redirige los enlaces antiguos del blog. */
.moved { background: var(--ink); color: var(--ink-fg); }
.moved__box { max-width: 520px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.moved__box h1 { font-size: 22px; margin-bottom: 12px; }
.moved__box p { color: rgba(245, 245, 245, 0.7); line-height: 1.6; margin-bottom: 24px; }
.moved__box a { color: var(--amber); }


/* Rejilla de artículos ---------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.post-card__cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tint);
}
.post-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.post-card h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.022em; }
.post-card p { font-size: 14px; line-height: 1.6; color: var(--fg-body); flex: 1; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
}
.post-meta.article__crumbs { color: rgba(245, 245, 245, 0.7); margin-bottom: 20px; }
.post-meta.article__crumbs a { color: var(--amber); }
.post-meta.post-card__author { border-top: 1px solid var(--line-3); padding-top: 14px; }
.article__author { margin-top: 20px; font-size: 14px; }
.post-cat {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--amber-soft);
  color: var(--amber-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Artículo destacado */
.post-featured {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  overflow: hidden;
  margin-bottom: 20px;
}
.post-featured .post-card__cover { aspect-ratio: auto; height: 100%; min-height: 320px; }
.post-featured .post-card__body { padding: 40px; justify-content: center; gap: 16px; }
.post-featured h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.14; }
.post-featured p { font-size: 16px; line-height: 1.65; color: var(--fg-body); flex: 0; }

/* Artículo ---------------------------------------------------------------- */
.article { max-width: 760px; margin-inline: auto; }
.article__cover {
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: 40px;
  border: 1px solid var(--line);
}
.article__cover img { width: 100%; }

.prose { font-size: 17px; line-height: 1.75; color: #3f3b37; }
.prose > * + * { margin-top: 22px; }
.prose h2 {
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-top: 44px;
}
.prose h3 { font-size: 21px; color: var(--fg); margin-top: 32px; }
.prose strong { font-weight: 600; color: var(--fg); }
.prose a { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 12px; padding-left: 22px; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li::marker { color: var(--amber); }
.prose figure { margin: 36px 0; }
.prose figure img { width: 100%; border-radius: var(--radius-m); border: 1px solid var(--line); }
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--fg-muted); text-align: center; }
.prose blockquote {
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--amber);
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-strong);
}

/* Recuadro de recomendación dentro del artículo. El marcado ya lo usaba en
   los seis artículos, pero no tenía ninguna regla: se leía como un párrafo
   más, sin el énfasis que pedía. */
.callout {
  padding: 22px 24px;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: var(--radius-m);
  background: var(--amber-soft);
}
.callout p { font-size: 15.5px; line-height: 1.65; color: var(--fg-body); }
.callout-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 10px;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-3); }
.prose th { background: var(--sand); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }
.prose tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* Sobre nosotros ---------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.stat { display: flex; flex-direction: column; gap: 6px; padding: 26px; }
.stat b { font-size: clamp(30px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.04em; }
.stat span { font-size: 13.5px; line-height: 1.5; color: var(--fg-body); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.duo img { width: 100%; border-radius: var(--radius-m); border: 1px solid var(--line); }

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.principle { display: flex; flex-direction: column; gap: 14px; padding: 30px; }
.principle__no { font-family: var(--mono); font-size: 22px; color: var(--amber); }
.principle h3 { font-size: 20px; letter-spacing: -0.022em; }
.principle p { font-size: 14.5px; line-height: 1.65; color: var(--fg-body); }

.chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.chain__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  text-align: center;
}
.chain__step span { font-size: 13.5px; color: var(--ink-text); }
.chain__step b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--amber); }

/* --- Preguntas frecuentes -------------------------------------------------
   Acordeón de <details>: el contenido está en el HTML aunque esté plegado,
   así que lo lee tanto un buscador como un lector de pantalla. El name=
   compartido hace que sólo quede una abierta, sin una línea de JavaScript. */
.faq__list {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin-inline: auto;
}
.faq__item { padding: 0; overflow: hidden; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  transition: background 0.3s var(--ease);
}
/* Safari pinta su propio triángulo si no se le quita por aquí. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--surface-2); }
.faq__q h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: balance;
}
.faq__mark {
  flex: none;
  color: var(--fg-muted);
  transition: transform 0.3s var(--ease), color 0.3s;
}
.faq__item details[open] .faq__mark { transform: rotate(180deg); color: var(--amber-deep); }

.faq__a {
  padding: 0 26px 24px;
  border-top: 1px solid var(--line-3);
}
.faq__a p {
  max-width: 68ch;
  padding-top: 18px;
  color: var(--fg-body);
  line-height: 1.7;
  text-wrap: pretty;
}

.faq__foot { margin-top: 32px; text-align: center; }

/* El navegador da el foco al <summary>, no al <details>. */
.faq__q:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

@media (max-width: 640px) {
  .faq__q { padding: 18px 20px; }
  .faq__q h3 { font-size: 16px; }
  .faq__a { padding: 0 20px 20px; }
}

@media (max-width: 960px) {
  .posts { grid-template-columns: 1fr 1fr; }
  .post-featured { grid-template-columns: 1fr; }
  .post-featured .post-card__cover { min-height: 220px; aspect-ratio: 16 / 9; }
  .post-featured .post-card__body { padding: 28px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .duo, .principles, .chain { grid-template-columns: 1fr; gap: 20px; }
  .page-hero { padding-block: 56px 64px; }
}

@media (max-width: 640px) {
  .posts { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 23px; }
}