/* ==========================================================================
 * 0.4.2 — Movimiento. Todo en CSS: cero archivos extra, cero JavaScript.
 * Regla que no se rompe: el contenido está SIEMPRE visible. La animación
 * sólo lo acompaña. Así Google siempre lee el texto y la página no "salta"
 * mientras carga (las dos cosas que Google penaliza).
 * ========================================================================== */

/* 1 · Las cajas se levantan apenas al pasar el mouse. Sólo en escritorio:
 *     en celular no hay mouse y un "hover" pegado molesta. */
@media (hover: hover) and (pointer: fine) {
  .dn33-card, .dn32-card, .dn40-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    will-change: transform;
  }
  .dn33-card:hover, .dn32-card:hover, .dn40-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgb(20 32 44 / 11%);
    border-color: #c9d3d0;
  }
}

/* 2 · Botones y enlaces con transición suave. */
.dn33-cta, .dn-header-cta, .dn40-btn, .dn-floating-call,
a[class*="cta"], button[type="submit"] {
  transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.dn33-cta:active, .dn-header-cta:active, a[class*="cta"]:active, button[type="submit"]:active {
  transform: translateY(1px);
}

/* 3 · Las secciones suben apenas al entrar en pantalla.
 *     Se usa animation-timeline, que es CSS puro y no necesita JavaScript.
 *     En los navegadores que todavía no lo soportan no pasa nada: el
 *     contenido se ve normal, que es justamente el estado de partida. */
@supports (animation-timeline: view()) {
  .dn33-section > .dn33-wrap,
  .dn32-section > .dn32-wrap,
  .dn40-trust .dn32-wrap {
    animation: dn-entrada linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
  /* Sólo desplazamiento, sin bajar la opacidad. Si algo fallara, el texto
     nunca queda desteñido ni a medio leer: se ve entero siempre. */
  @keyframes dn-entrada {
    from { transform: translateY(16px); }
    to   { transform: none; }
  }
}

/* 4 · Quien tenga configurado "reducir movimiento" en su teléfono o
 *     computadora no ve nada de esto. */
@media (prefers-reduced-motion: reduce) {
  .dn33-card, .dn32-card, .dn40-card,
  .dn33-section > .dn33-wrap, .dn32-section > .dn32-wrap, .dn40-trust .dn32-wrap {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}