/* Design Match — portada final, 01/08/2026 */
:root {
  --dmx-paper: #fffefa;
  --dmx-ink: #24231f;
  --dmx-muted: #716f67;
  --dmx-line: #e9e6dc;
  --dmx-yellow: #D8CC61;
  --dmx-yellow-dark: #C9BD4A;
  --dmx-wine: #68002f;
  --dmx-navy: #2d2d4c;
  --dmx-footer: #ded9c6;
}

#dmProgressBar { display: none !important; }

#dmLandNav {
  height: 68px;
  padding: 0 clamp(28px, 5vw, 78px);
  border-bottom: 1px solid var(--dmx-line);
  background: rgba(255, 254, 250, .96);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#dmLandNav .dmn-logo-link,
#dmLandNav .dmn-logo-link img { width: 126px; }

#dmLandNav .dmn-links {
  gap: clamp(20px, 2.5vw, 39px);
  margin: 0 auto;
}

#dmLandNav .dmn-links a {
  position: relative;
  padding: 5px 0;
  color: #595750;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .01em;
  transition: color .2s ease, transform .2s ease;
}

#dmLandNav .dmn-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: var(--dmx-yellow-dark);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s ease;
}

#dmLandNav .dmn-links a:hover,
#dmLandNav .dmn-links a:focus-visible,
#dmLandNav .dmn-links a.is-active {
  color: #111;
  transform: translateY(-1px);
}

#dmLandNav .dmn-links a:hover::after,
#dmLandNav .dmn-links a:focus-visible::after,
#dmLandNav .dmn-links a.is-active::after { transform: scaleX(1); }

#dmLandNav .dmn-links a:focus-visible {
  outline: 1px solid rgba(214, 189, 0, .55);
  outline-offset: 4px;
  border-radius: 3px;
}

.dmn-mobile-drawer > a.is-active {
  color: #111;
  font-weight: 600;
  border-bottom-color: var(--dmx-yellow-dark);
}

/* Menú móvil alineado con el lenguaje visual del dashboard. */
@media (max-width: 900px) {
  #dmLandNav .dmn-hamburger {
    width: 36px;
    height: 36px;
    border: 1px solid var(--dmx-line);
    border-radius: 999px;
    background: var(--dmx-paper);
  }

  #dmLandNav .dmn-hamburger span { width: 16px; height: 1.5px; }

  .dmn-mobile-overlay {
    top: 58px;
    background: rgba(43, 43, 66, .14);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .dmn-mobile-drawer {
    position: absolute;
    top: 8px;
    right: 17px;
    left: auto;
    width: min(320px, calc(100vw - 34px));
    height: auto;
    max-height: calc(100vh - 78px);
    padding: 14px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 18px;
    background: var(--dmx-paper);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .14);
    opacity: 0;
    transform: translateY(-10px) scale(.985);
    transform-origin: top right;
    transition: opacity .22s ease, transform .22s ease;
  }

  .dmn-mobile-overlay.open .dmn-mobile-drawer {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .dmn-mobile-menu-head {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 11px 8px;
    border-bottom: 1px solid var(--dmx-line);
    font-family: 'Petrona', serif;
    font-size: 16px;
    color: var(--dmx-navy);
  }

  .dmn-mobile-section-label {
    margin: 12px 0 5px;
    padding: 0 11px;
    color: #aaa79d;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .dmn-mobile-drawer > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    border: 0;
    border-radius: 10px;
    color: #5b5953;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    transition: background .15s ease, color .15s ease;
  }

  .dmn-mobile-drawer > a:hover,
  .dmn-mobile-drawer > a:focus-visible {
    outline: 0;
    background: #f1eee4;
    color: #24231f;
  }

  .dmn-mobile-drawer > a.is-active {
    border: 0;
    background: #e7e2d4;
    color: var(--dmx-navy);
    font-weight: 500;
  }

  .dmn-mobile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    opacity: .55;
  }

  .dmn-mobile-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dmn-mobile-drawer > a.is-active .dmn-mobile-icon { opacity: .9; }

  .dmn-mob-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dmx-line);
  }

  .dmn-mobile-overlay .dmn-mob-login,
  .dmn-mobile-overlay .dmn-mob-crear {
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
  }

  .dmn-mobile-overlay .dmn-mob-login {
    border: 1px solid #c8c4b7;
    background: transparent;
    color: var(--dmx-navy);
  }

  .dmn-mobile-overlay .dmn-mob-crear {
    border: 1px solid var(--dmx-navy);
    background: var(--dmx-navy);
    color: var(--dmx-paper);
  }
}

#dmLandNav .dmn-right { gap: 11px; }

#dmLandNav .dmn-btn-ghost,
#dmLandNav .dmn-btn-solid {
  height: 31px;
  padding: 0 17px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
}

#dmLandNav .dmn-btn-ghost {
  border: 1px solid #c4b756;
  background: transparent;
  color: #484536;
}

#dmLandNav .dmn-btn-solid {
  border: 1px solid var(--dmx-yellow);
  background: var(--dmx-yellow);
  color: #37320d;
  box-shadow: none;
}

#dmLandNav .dmn-btn-ghost:hover,
#dmLandNav .dmn-btn-solid:hover {
  border-color: var(--dmx-yellow-dark);
  background: var(--dmx-yellow-dark);
  color: #292607;
}

/* Pantallas internas del index: misma cabecera y regreso con mayor respiración. */
.reg-screen {
  justify-content: flex-start;
  padding-top: 68px;
}

.reg-screen .reg-inner,
.reg-screen .exp-reg-inner {
  padding-top: clamp(48px, 7vh, 80px);
}

/* Las pantallas de registro respiran más que el resto: debajo viene la barra
   de progreso y pegarle las migas las hace parecer parte de ella. */
.reg-screen .dm-migas {
  margin-bottom: clamp(40px, 6vh, 64px);
}

#screen-home { background: var(--dmx-paper); color: var(--dmx-ink); }
.dmx-home { width: 100%; overflow: clip; }
.dmx-home > section { scroll-margin-top: 68px; }
.dmx-home button,
.dmx-footer button,
.dmx-home a,
.dmx-footer a { font-family: 'Inter', sans-serif; }

.dmx-hero {
  min-height: 770px;
  padding: 95px 24px 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 31%, rgba(255, 248, 211, .47), transparent 31%),
    var(--dmx-paper);
}

.dmx-hero-art {
  position: relative;
  width: min(480px, 70vw);
  aspect-ratio: 1206 / 1017;
  margin: -22px auto 2px;
}

.dmx-hero-art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  animation: dmx-hero-art-float 6.2s ease-in-out infinite alternate;
  will-change: transform;

  /* El recuadro que se veía alrededor del arte.
   *
   * El JPEG trae su propio fondo —rgb(254,254,252)— y la página es crema
   * —rgb(255,254,250)—. Son tres puntos de diferencia por canal, pero el fondo
   * de la imagen es más FRÍO y el de la página más cálido: sobre una superficie
   * plana de 480×405 px, esa arista recta se ve, y se ve más justo donde el
   * arte se junta con el titular. Encima, al ser opaco, el JPEG recortaba
   * también el resplandor radial del hero, que muere dentro del rectángulo en
   * vez de atravesarlo.
   *
   * `darken` toma, canal a canal, el más oscuro entre imagen y fondo. El fondo
   * casi blanco del JPEG pierde siempre contra el papel, así que desaparece; y
   * las pastillas, que son más oscuras que el papel en todos los canales, salen
   * intactas. No se retoca el archivo ni se cambia el arte. */
  mix-blend-mode: darken;

  /* El fondo del JPEG no es uniforme: arriba rgb(254,254,252) y abajo
   * rgb(253,252,247). `darken` se queda con el más oscuro de los dos, así que
   * puede borrar un fondo más claro que el papel pero no aclarar uno más
   * oscuro: en el canto de abajo —justo donde el arte se junta con el titular,
   * que es donde se notaba— quedaban tres niveles de diferencia y una arista
   * recta de 480 px. El ojo detecta bordes mucho antes que tonos.
   *
   * El archivo tiene 32 de sus 1017 px de alto sin tinta abajo, o sea un 3,1%.
   * Desvanecer exactamente ese 3% convierte el escalón en rampa sin rozar la
   * punta de ninguna pastilla. Va en porcentaje y no en px para que siga
   * cuadrando cuando la caja se encoge en móvil. */
  -webkit-mask-image: linear-gradient(to bottom, #000 97%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 97%, transparent 100%);
}

/* ── Entrada del hero ────────────────────────────────────────────────────────
 *
 * El arte se anima SÓLO con `transform`, nunca con `opacity`, y no es un
 * capricho: la imagen del hero es el elemento LCP de la portada —193.000 px² en
 * escritorio, medido—, y Chrome no cuenta como pintado nada que esté a opacidad
 * cero. Un fundido de entrada ahí retrasa la métrica que más pesa en el
 * posicionamiento, tanto como dure el retraso. Con `transform` el elemento
 * cuenta como pintado desde el primer fotograma y el LCP no se mueve.
 *
 * El fundido se lo queda el texto, que no es el LCP y puede permitírselo.
 *
 * Las dos animaciones nacen PAUSADAS. El cargador tapa la portada durante los
 * primeros cientos de milisegundos, y una entrada que ocurre detrás de una
 * cortina no la ve nadie: `home-final.js` la suelta cuando el cargador se va.
 * Si el JS no corre, no se añade ninguna de las dos clases y aquí no pasa nada:
 * el hero se ve como siempre. */
.dmx-entrada .dmx-hero-art-img {
  animation:
    dmx-hero-art-entrada 1.25s cubic-bezier(.22, .61, .36, 1) both paused,
    dmx-hero-art-float 6.2s ease-in-out 1.25s infinite alternate paused;
}

.dmx-entrada .dmx-hero-copy > * {
  animation: dmx-hero-copy-entrada .82s cubic-bezier(.22, .61, .36, 1) both paused;
}

.dmx-entrada .dmx-hero-copy > h1 { animation-delay: .18s; }
.dmx-entrada .dmx-hero-copy > p { animation-delay: .32s; }
.dmx-entrada .dmx-hero-copy > .dmx-actions { animation-delay: .44s; }

.dmx-entrada-va .dmx-hero-art-img,
.dmx-entrada-va .dmx-hero-copy > * { animation-play-state: running; }

/* Termina justo donde arranca el flote —no en la posición de reposo— para que
   el relevo entre las dos animaciones no se vea como un salto. */
@keyframes dmx-hero-art-entrada {
  from { transform: translate3d(0, 30px, 0) scale(.945); }
  to { transform: translate3d(0, -14px, 0) scale(.997); }
}

@keyframes dmx-hero-art-entrada-movil {
  from { transform: translate3d(0, 18px, 0) scale(.965); }
  to { transform: translate3d(0, -14px, 0) scale(.997); }
}

@keyframes dmx-hero-copy-entrada {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* Cuánto baja el arte respecto de donde lo pone la maquetación.
 *
 * La animación va de -14px a 0 y NO de -7 a +7 a propósito: así el punto más
 * bajo del recorrido es exactamente la posición de reposo, la que se afinó a
 * ojo. Con el reparto simétrico anterior, el arte se metía 7px por debajo de
 * esa posición y la tinta llegaba a quedar a 1px del titular —un margen que
 * cualquier cosa se come: otro zoom, otra tipografía de reserva, otro
 * redondeo—. Y a 1px de margen, un día se encima. */
@keyframes dmx-hero-art-float {
  from { transform: translate3d(0, -14px, 0) scale(0.997); }
  to { transform: translate3d(0, 0, 0) scale(1.003); }
}

.dmx-hero-copy { max-width: 890px; margin: -8px auto 0; }
.dmx-hero h1,
.dmx-path-card h2,
.dmx-community h2,
.dmx-about h2,
.dmx-final-cta h2,
.dmx-quote-card blockquote { font-family: 'Petrona', serif; }

.dmx-hero h1 {
  margin: 0;
  font-size: clamp(38px, 3.35vw, 58px);
  line-height: 1.08;
  font-weight: 350;
  letter-spacing: -.045em;
}

.dmx-hero h1 em { font-weight: 350; }
.dmx-hero-copy > p {
  margin: 24px auto 0;
  color: #69665f;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 350;
}

.dmx-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.dmx-button {
  min-width: 142px;
  height: 39px;
  padding: 0 23px;
  border-radius: 999px 999px 0 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.dmx-button:hover { transform: translateY(-1px); }
.dmx-button--solid { border-color: var(--dmx-yellow); background: var(--dmx-yellow); color: #3e3807; }
.dmx-button--solid:hover { border-color: var(--dmx-yellow-dark); background: var(--dmx-yellow-dark); }
/* La esquina recta del botón secundario va abajo-izquierda, de modo que la
   pareja quede en espejo: la del sólido apunta a la derecha y la de éste a la
   izquierda. */
.dmx-button--outline { border-radius: 999px 999px 999px 0; border-color: #bcb6a2; background: transparent; color: #38362e; }
.dmx-button--outline:hover { border-color: #777267; background: rgba(255,255,255,.58); }

.dmx-intro {
  --dmx-intro-left: #dfa1e6;
  --dmx-intro-right: #65002f;
  --dmx-intro-ink: #65002f;
  --dmx-intro-copy: #f0c8e3;
  min-height: 292px;
  display: grid;
  grid-template-columns: 39.5% 60.5%;
}

.dmx-intro-steps {
  padding: 54px clamp(34px, 6vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  background: var(--dmx-intro-left);
  transition: background-color .48s cubic-bezier(.22, 1, .36, 1);
}

.dmx-step {
  width: min(270px, 100%);
  height: 43px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid color-mix(in srgb, var(--dmx-intro-ink) 62%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--dmx-intro-ink);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color .38s cubic-bezier(.22, 1, .36, 1), color .38s ease, border-color .38s ease, opacity .38s ease;
}

.dmx-step--active { border-color: var(--dmx-intro-ink); background: var(--dmx-intro-ink); color: #fff; }
.dmx-step-icon { width: 18px; font-size: 16px; text-align: center; }
.dmx-intro-message {
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dmx-intro-right);
  color: var(--dmx-intro-copy);
  font-family: 'Inter', sans-serif;
  font-size: clamp(21px, 1.85vw, 30px);
  font-weight: 450;
  letter-spacing: -.035em;
  text-align: center;
  transition: background-color .48s cubic-bezier(.22, 1, .36, 1), color .38s ease;
}
.dmx-intro-message span { opacity: 1; transform: translateY(0); transition: opacity .2s ease, transform .32s cubic-bezier(.22, 1, .36, 1); }
.dmx-intro-message.is-changing span { opacity: 0; transform: translateY(5px); }
.dmx-intro-message em { font-style: italic; }

.dmx-paths {
  min-height: 630px;
  padding: 74px 24px 92px;
  border-bottom: 1px solid var(--dmx-line);
  background: var(--dmx-paper);
}

.dmx-eyebrow {
  margin: 0 auto 46px;
  color: #6b6861;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  text-align: center;
}

.dmx-paths-grid {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 98px;
}

.dmx-path-card {
  min-height: 400px;
  padding: 48px 50px 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 24px;
  background: #f5f4ef;
}

.dmx-path-card h2 {
  margin: 0 0 18px;
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.08;
  font-weight: 360;
  letter-spacing: -.03em;
}

.dmx-path-card > p {
  max-width: 455px;
  color: #747169;
  font-size: 12px;
  line-height: 1.48;
  font-weight: 350;
}

.dmx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 19px 0 27px; }
.dmx-tags span {
  padding: 4px 9px;
  border: 1px solid #d7d2b7;
  border-radius: 999px;
  background: #efeddf;
  color: #676356;
  font-size: 12px;
  line-height: 1;
}

.dmx-path-card .dmx-button { min-width: 128px; height: 36px; margin-top: auto; }

.dmx-community {
  min-height: 472px;
  padding: 78px 24px 84px;
  background: #fff;
}

.dmx-community > h2 {
  margin: 0 0 51px;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.1;
  font-weight: 350;
  letter-spacing: -.04em;
  text-align: center;
}

.dmx-community-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.dmx-role-card {
  min-height: 220px;
  padding: 25px 24px 24px;
  border-radius: 14px;
}

.dmx-role-card--explorer { background: #efefed; }
.dmx-role-card--freelance { background: #ffad5e; }
.dmx-role-card--company { background: #8eaceb; }
.dmx-role-card--provider { background: #e9a4ed; }
.dmx-role-icon {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 7px;
  background: rgba(255,255,255,.28);
}
.dmx-role-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.dmx-role-card h3 {
  margin: 32px 0 10px;
  font-family: 'Petrona', serif;
  font-size: 21px;
  line-height: 1;
  font-weight: 420;
  letter-spacing: -.02em;
}
.dmx-role-card p { color: rgba(27,26,22,.78); font-size: 12px; line-height: 1.5; }

.dmx-about {
  --dmx-about-bg: #92781e;
  --dmx-about-accent: #e0cc7b;
  --dmx-about-muted: rgba(255,255,255,.62);
  min-height: 320px;
  padding: 65px 24px 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--dmx-about-bg);
  color: #f4f1ed;
  text-align: center;
  transition: background-color .58s cubic-bezier(.22, 1, .36, 1);
}

.dmx-about .dmx-eyebrow { margin-bottom: 26px; color: var(--dmx-about-muted); transition: color .45s ease; }
.dmx-about h2 {
  margin: 0 0 23px;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.1;
  font-weight: 350;
  letter-spacing: -.04em;
}
.dmx-about-word {
  --dmx-word-width: 190px;
  width: var(--dmx-word-width);
  min-width: 49px;
  height: 1.38em;
  padding: 0 13px 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  vertical-align: -.16em;
  border: 1px solid color-mix(in srgb, var(--dmx-about-accent) 78%, transparent);
  border-radius: 999px;
  color: var(--dmx-about-accent);
  font-style: italic;
  white-space: nowrap;
  transition: width .28s cubic-bezier(.22, 1, .36, 1), color .45s ease, border-color .45s ease;
}
.dmx-about-word > span { display: inline; }
.dmx-about-word i {
  width: 1px;
  height: .85em;
  display: none;
  flex: 0 0 1px;
  background: currentColor;
  animation: dmx-caret-blink .7s steps(1, end) infinite;
}
.dmx-about-word.is-typing i { display: block; }
/* Los tres párrafos se apilan en la misma celda de rejilla: así conviven en el
   DOM —siguen siendo rastreables— sin `display:none` y sin que la sección
   pegue un salto de alto al cambiar de uno a otro. El alto lo marca el más
   largo de los tres. */
.dmx-about-copy {
  width: min(760px, 100%);
  display: grid;
}
.dmx-about-copy > p {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--dmx-about-muted);
  font-size: 12px;
  line-height: 1.65;
  opacity: 0;
  visibility: hidden;
  transition: opacity .42s ease, visibility .42s, color .45s ease;
}
.dmx-about-copy > p.is-visible { opacity: 1; visibility: visible; }

@keyframes dmx-caret-blink { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }

.dmx-pricing {
  min-height: 500px;
  padding: 76px 24px 56px;
  border-bottom: 1px solid var(--dmx-line);
  background: #fff;
}

.dmx-pricing .dmx-eyebrow { margin-bottom: 14px; }
.dmx-pricing-title {
  width: min(780px, 100%);
  margin: 0 auto 16px;
  color: var(--dmx-ink);
  font-family: 'Petrona', serif;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 350;
  letter-spacing: -.03em;
  text-align: center;
}
.dmx-pricing-title em {
  color: var(--dmx-wine);
  font-style: italic;
  font-weight: 300;
}
.dmx-pricing-copy {
  width: min(680px, 100%);
  margin: 0 auto 26px;
  color: #77736a;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.dmx-pricing-toggle {
  margin: 0 auto 18px;
  display: flex;
  gap: 6px;
  padding: 4px;
  width: fit-content;
  border: 1px solid #e5e1d8;
  border-radius: 999px;
  background: #fffef8;
}
.dmx-toggle-btn {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #77736a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.dmx-toggle-btn.is-on { background: var(--dmx-navy); color: var(--dmx-paper); }
.dmx-toggle-btn span {
  margin-left: 6px;
  font-size: 12px;
  letter-spacing: .06em;
  opacity: .72;
  text-transform: none;
}
/* Barra del carrusel: sólo existe donde hay carrusel, o sea en móvil y tablet.
   En escritorio los cinco planes caben y no hay nada que recorrer. */
.dmx-pricing-bar {
  display: none;
  width: min(1180px, 100%);
  margin: 0 auto 12px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.dmx-pricing-hint {
  margin: 0;
  color: #a09b90;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dmx-pricing-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.dmx-nav-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #d9d4c7;
  border-radius: 999px;
  background: #fffef8;
  color: var(--dmx-ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.dmx-nav-btn:hover:not(:disabled) { border-color: var(--dmx-navy); background: var(--dmx-paper); }
.dmx-nav-btn:disabled { opacity: .32; cursor: default; }
.dmx-pricing-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  border: 1px solid #e5e1d8;
  border-radius: 16px;
  background: #fffef8;
}
.dmx-pricing-grid::-webkit-scrollbar { display: none; }
.dmx-price-card {
  position: relative;
  min-height: 520px;
  padding: 28px 24px 24px;
  border-right: 1px solid #e5e1d8;
  scroll-snap-align: start;
}
.dmx-price-card:last-child { border-right: 0; }
.dmx-price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--dmx-plan-color, var(--dmx-yellow));
}
.dmx-price-card h3 { margin: 0 0 14px; color: var(--dmx-ink); font-family: Petrona, serif; font-size: 20px; font-weight: 360; }
.dmx-price-kicker { margin: 0 0 6px; color: var(--dmx-plan-color, var(--dmx-yellow)); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.dmx-price-row { display:flex; align-items:flex-end; gap: 6px; margin-bottom: 14px; }
.dmx-price { color: var(--dmx-ink); font-family: Petrona, serif; font-size: 34px; line-height: .95; }
.dmx-price-row small { color: #77736a; font-size: 12px; }
.dmx-price-old { color: #aaa59a; font-size: 12px; text-decoration: line-through; }
/* En anual el importe del año no es un precio anterior, es el cargo real: se
   enseña como dato, no tachado. */
.dmx-price-old--plain { text-decoration: none; }
.dmx-price-desc { min-height: 70px; margin: 0 0 18px; color: #77736a; font-size: 12px; line-height: 1.55; }
.dmx-price-card ul { display:flex; flex-direction:column; gap: 12px; min-height: 190px; margin: 0 0 22px; padding: 0; list-style: none; color: #49463f; font-size: 12px; line-height: 1.45; }
.dmx-price-card li { display:flex; gap: 10px; align-items:flex-start; }
.dmx-price-card li::before { content: "→"; color: var(--dmx-plan-color, var(--dmx-yellow)); flex: 0 0 auto; }
.dmx-price-btn { width: 100%; min-height: 44px; border: 1px solid #e5e1d8; border-radius: 999px; background: transparent; color: var(--dmx-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor:pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, filter .2s ease; }
.dmx-price-btn--filled { border-color: var(--dmx-plan-color, var(--dmx-yellow)); background: var(--dmx-plan-color, var(--dmx-yellow)); color: #fff; }

/* Al apuntar a cualquier parte del plan se enciende su botón y la tarjeta se
   tiñe de su propio color: así se ve cuál se está a punto de contratar, que
   con cinco columnas pegadas no era evidente.
   Va dentro de `hover:hover` porque en una pantalla táctil el `:hover` se
   queda pegado tras el toque y la tarjeta se quedaría resaltada sola. */
@media (hover: hover) and (pointer: fine) {
  .dmx-price-card { transition: background .2s ease; }
  .dmx-price-card:hover { background: color-mix(in srgb, var(--dmx-plan-color, var(--dmx-yellow)) 7%, #fffef8); }
  .dmx-price-card:hover .dmx-price-btn,
  .dmx-price-btn:hover {
    border-color: var(--dmx-plan-color, var(--dmx-yellow));
    background: var(--dmx-plan-color, var(--dmx-yellow));
    color: #fff;
  }
  /* El que ya venía relleno no puede «rellenarse más»: se oscurece un punto. */
  .dmx-price-card:hover .dmx-price-btn--filled,
  .dmx-price-btn--filled:hover { filter: brightness(.92); }
}

.dmx-final-cta {
  min-height: 300px;
  padding: 68px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--dmx-paper);
  text-align: center;
}
.dmx-final-cta h2 { margin: 0; font-size: clamp(24px, 2.35vw, 38px); line-height: 1.22; font-weight: 350; font-style: italic; letter-spacing: -.025em; }
.dmx-final-cta .dmx-actions { margin-top: 29px; }

.dmx-footer {
  padding: 63px clamp(28px, 7vw, 112px) 21px;
  display: block;
  background: var(--dmx-footer);
  color: #3d3b34;
}
.dmx-footer-grid {
  width: min(1230px, 100%);
  min-height: 245px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(340px, 1.8fr) repeat(3, minmax(110px, .7fr));
  gap: clamp(34px, 5vw, 78px);
}
.dmx-footer-brand img { display: block; width: 126px; height: auto; margin-bottom: 17px; }
.dmx-footer-brand > p { max-width: 390px; color: #6f6b60; font-size: 12px; line-height: 1.55; }
.dmx-footer-brand > h3,
.dmx-footer-col h3 { margin: 22px 0 12px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.dmx-footer-brand .dmx-footer-note { max-width: 430px; margin-bottom: 12px; }
.dmx-contact-form {
  width: min(390px, 100%);
  height: 36px;
  display: flex;
  padding: 3px 3px 3px 14px;
  border: 1px solid #858071;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.dmx-contact-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #302f2a; font: 9px 'Inter', sans-serif; }
.dmx-contact-form input::placeholder { color: #817c6f; }
.dmx-contact-form button { padding: 0 15px; border: 0; border-radius: 999px; background: #22221f; color: #fff; font-size: 12px; cursor: pointer; }
.dmx-footer-col {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dmx-footer-col h3 { margin-top: 2px; margin-bottom: 5px; }
.dmx-footer-col a { color: #6a675e; font-size: 12px; text-decoration: none; }
.dmx-footer-col a:hover { color: #222; }
.dmx-instagram { font-size: 20px; line-height: 1; }
.dmx-footer-bottom {
  width: min(1230px, 100%);
  margin: 0 auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(56,53,45,.17);
  color: #918c7d;
  font-size: 12px;
}
.dmx-footer-bottom a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 769px) {
  #dmLandNav .dmn-links { display: flex; }
}

@media (max-width: 980px) {
  #dmLandNav { padding: 0 24px; }
  #dmLandNav .dmn-links { gap: 18px; }
  #dmLandNav .dmn-links a { font-size: 12px; }
  .dmx-paths-grid { gap: 32px; }
  .dmx-community-grid { gap: 16px; }
  .dmx-footer-grid { grid-template-columns: 1.7fr repeat(3, .7fr); gap: 28px; }
}

@media (max-width: 768px) {
  #dmLandNav { height: 58px; padding: 0 17px; }
  #dmLandNav .dmn-logo-link,
  #dmLandNav .dmn-logo-link img { width: 104px; }
  #dmLandNav .dmn-links,
  #dmLandNav .dmn-right { display: none; }
  #dmLandNav .dmn-hamburger { display: flex; }

  .dmn-mobile-overlay .dmn-mobile-drawer { background: var(--dmx-paper); }
  .dmn-mobile-overlay .dmn-mobile-drawer > a { font-family: 'Inter', sans-serif; }
  .dmn-mobile-overlay .dmn-mob-login {
    border-color: #aaa48f;
    background: transparent;
    color: #2c2a24;
  }
  .dmn-mobile-overlay .dmn-mob-crear {
    border-color: var(--dmx-navy);
    background: var(--dmx-navy);
    color: var(--dmx-paper);
  }

  .dmx-hero { min-height: 650px; padding: 84px 20px 65px; }
  .dmx-hero-art { width: min(365px, 95vw); margin-bottom: 6px; }
  .dmx-hero-copy { margin-top: -5px; }
  .dmx-hero h1 { max-width: 520px; font-size: clamp(34px, 10vw, 48px); }
  .dmx-hero-copy > p { max-width: 430px; margin-top: 19px; font-size: 12px; }
  .dmx-actions { margin-top: 23px; gap: 9px; }
  .dmx-button { min-width: 126px; height: 38px; padding: 0 18px; }

  .dmx-intro { grid-template-columns: 1fr; }
  .dmx-intro-steps { padding: 42px 24px; align-items: center; }
  .dmx-step { width: min(310px, 100%); }
  .dmx-intro-message { min-height: 175px; padding: 42px 22px; }

  .dmx-paths { padding: 62px 18px 70px; }
  .dmx-paths .dmx-eyebrow { margin-bottom: 33px; }
  .dmx-paths-grid { grid-template-columns: 1fr; gap: 20px; }
  .dmx-path-card { min-height: 360px; padding: 38px 30px 32px; }
  .dmx-path-card h2 { font-size: 29px; }

  .dmx-community { padding: 62px 18px 68px; }
  .dmx-community > h2 { margin-bottom: 36px; font-size: 34px; }
  .dmx-community-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  .dmx-role-card { min-height: 205px; padding: 21px 19px; }
  .dmx-role-card h3 { margin-top: 27px; }

  .dmx-about { min-height: 340px; padding: 58px 23px; }
  .dmx-about h2 { font-size: 35px; }
  .dmx-about > p:last-child { max-width: 520px; }

  .dmx-pricing { min-height: auto; padding: 62px 18px 50px; }
  .dmx-pricing .dmx-eyebrow { margin-bottom: 12px; }
  .dmx-pricing-title { margin-bottom: 14px; }
  .dmx-pricing-copy { margin-bottom: 18px; font-size: 12.5px; }
  .dmx-pricing-bar { display: flex; }

  /* En móvil los cinco planes no caben: el panel único con divisiones se leía
     como una tarjeta recortada a la mitad, no como «hay más a la derecha». Se
     separa en tarjetas independientes que asoman, con snap y sangrado completo
     para que el carrusel se explique solo. */
  .dmx-pricing-grid {
    width: auto;
    margin-inline: -18px;
    padding: 4px 18px 8px;
    grid-template-columns: repeat(5, min(84vw, 320px));
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    scroll-padding-left: 18px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .dmx-price-card,
  .dmx-price-card:last-child {
    min-height: 0;
    padding: 26px 22px 22px;
    border: 1px solid #e5e1d8;
    border-radius: 16px;
    background: #fffef8;
  }
  .dmx-price-card::before { border-radius: 16px 16px 0 0; }
  .dmx-price-desc { min-height: 0; margin-bottom: 16px; }
  .dmx-price-card ul { min-height: 0; margin-bottom: 20px; }

  .dmx-final-cta { min-height: 290px; padding: 61px 20px; }
  .dmx-final-cta h2 { font-size: 26px; }

  .dmx-footer { padding: 49px 22px 20px; }
  .dmx-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 38px 24px; }
  .dmx-footer-brand { grid-column: 1 / -1; }
  .dmx-footer-col:last-child { grid-column: 2; }
  .dmx-footer-bottom { margin-top: 35px; gap: 20px; }
}

@media (max-width: 460px) {
  /* Más sobrio en pantalla pequeña: recorridos cortos y menos tiempo. Aquí el
     scroll es con el dedo y una entrada larga se lee como lentitud de carga. */
  .dmx-entrada .dmx-hero-art-img {
    animation:
      dmx-hero-art-entrada-movil .9s cubic-bezier(.22, .61, .36, 1) both paused,
      dmx-hero-art-float 6.2s ease-in-out .9s infinite alternate paused;
  }
  .dmx-entrada .dmx-hero-copy > * { animation-duration: .58s; }
  .dmx-entrada .dmx-hero-copy > h1 { animation-delay: .12s; }
  .dmx-entrada .dmx-hero-copy > p { animation-delay: .22s; }
  .dmx-entrada .dmx-hero-copy > .dmx-actions { animation-delay: .30s; }

  .dmx-hero { min-height: 620px; padding-top: 76px; }
  .dmx-hero-art { width: min(330px, 92vw); max-width: 92vw; margin-bottom: 14px; }
  .dmx-hero h1 { font-size: 36px; }
  .dmx-hero-copy > p { max-width: 330px; }
  .dmx-intro-message { font-size: 25px; }
  .dmx-community-grid { grid-template-columns: 1fr; }
  .dmx-role-card { min-height: 190px; }
  .dmx-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .dmx-footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* ── Entrada de cada sección al aparecer ─────────────────────────────────────
 *
 * Sube y aparece. Nada más: en reposo el resultado es EXACTAMENTE la página de
 * siempre —mismos colores, cajas, tipografías y espaciados—, porque el estado
 * final de la animación es «sin transformar y opaco», que es como está escrito
 * el CSS. Esto no redecora nada, sólo decide cuándo se ve.
 *
 * El contenido nace VISIBLE. Sólo se esconde cuando `home-final.js` marca el
 * documento con `dmx-revelados`, y eso sólo pasa si el navegador sabe animarlo
 * y la persona no ha pedido menos movimiento. Al revés —esconder por CSS y
 * confiar en que el JS lo enseñe— un fallo de JavaScript deja la portada en
 * blanco, y ninguna animación vale eso. */
.dmx-revelados .dmx-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
              transform .62s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.dmx-revelados .dmx-reveal.is-in {
  opacity: 1;
  transform: none;
  /* Se suelta `will-change` al terminar: mantenerlo reserva una capa de
     composición por elemento y en un móvil de gama media eso se nota. */
  will-change: auto;
}

/* El escalonado sale de una variable que pone el JS con el índice del elemento
   dentro de su sección, así el orden lo decide el HTML y no una lista de
   selectores que hay que mantener a mano. */
.dmx-revelados .dmx-reveal { transition-delay: calc(var(--dmx-reveal-i, 0) * 90ms); }

/* En celular, más sobrio: el scroll es con el dedo y un recorrido largo se
   siente como que la página va lenta, no como que es elegante. */
@media (max-width: 640px) {
  .dmx-revelados .dmx-reveal {
    transform: translate3d(0, 10px, 0);
    transition-duration: .42s;
    transition-delay: calc(var(--dmx-reveal-i, 0) * 55ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dmx-home *,
  .dmx-footer * { scroll-behavior: auto !important; transition: none !important; }
  .dmx-hero-art-img { animation: none !important; transform: none !important; }
  /* Sin movimiento: todo visible desde el primer momento. */
  .dmx-entrada .dmx-hero-copy > * {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .dmx-revelados .dmx-reveal { opacity: 1 !important; transform: none !important; }
}