/* ══════════════════════════════════════════════════════════════════
   CAPTURA — el aspecto común de las páginas de lead magnet.
   Lo usan /influencer-digital y /skills. Vivía dentro del <style> de la
   guía, así que la página de skills nació sin el hero ni el botón de
   WhatsApp bien formados. Aquí es una sola fuente para las dos: si se
   toca el formulario, se tocan ambas a la vez.
   ══════════════════════════════════════════════════════════════════ */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    /* Quien pide menos movimiento en su sistema (mareos, vértigo) no debe recibir scroll animado */
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    body { -webkit-font-smoothing: antialiased; }
    a { text-decoration: none; color: inherit; }
    img, video { max-width: 100%; }
    .clipwrap { overflow-x: clip; }
    .cap-form { display: grid; gap: .7rem; margin-top: 1.2rem; }
    .cap-form input, .cap-form select {
      background: #1c1c1c; border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
      padding: .95rem 1.1rem; color: #fff; font-family: Inter, sans-serif; font-size: .95rem; width: 100%;
    }
    .cap-form input:focus, .cap-form select:focus { outline: 2px solid #3DDC84; border-color: transparent; }
    .cap-form .phone { display: flex; gap: .5rem; min-width: 0; }
    .cap-form .phone__cc { flex: 0 0 auto; width: 116px; padding: .95rem .5rem .95rem .8rem; cursor: pointer; -webkit-appearance: none; appearance: none; }
    .cap-form .phone input { flex: 1 1 auto; min-width: 0; }
    .cap-form button {
      background: #3DDC84; color: #0C1A12; border: 0; border-radius: 8px; padding: 1rem;
      font-family: Anton, sans-serif; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
      font-size: 1rem; cursor: pointer; transition: transform .25s;
    }
    .cap-form button:hover { transform: translateY(-2px); }
    .cap-ok { display: none; margin-top: 1.2rem; text-align: center; }
    .cap-ok .big { font-size: 2.2rem; }
    .cap-ok p { color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.6; margin-top: .5rem; }
    .cap-ok .gd-btn { margin-top: 1rem; }
    .cap-note { color: rgba(255,255,255,.6); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; margin-top: .8rem; }
    .wa-canal {
      display: block; background: #25D366; color: #06130B; border-radius: 8px; padding: .95rem 1rem;
      text-align: center; font-family: Anton, sans-serif; letter-spacing: .08em; text-transform: uppercase;
      font-size: .98rem; margin-top: 1rem; transition: transform .25s;
    }
    .wa-canal:hover { transform: translateY(-2px); }
    .wa-canal small { display: block; font-family: Inter, sans-serif; text-transform: none; letter-spacing: .02em; font-weight: 600; font-size: .76rem; margin-top: .3rem; color: rgba(6,19,11,.72); }
    /* Fondo oscuro en html: si iOS regala scroll extra, se ve oscuro y no blanco */
    html, body.guia { background: #1e1e2a; }
    /* ═══ Móvil: el video es su propio bloque y la info fluye DEBAJO ═══ */
    @media (max-width: 760px) {
      .gd-hero { flex-direction: column; min-height: auto; align-items: stretch; overflow: visible; }
      .gd-hero__media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
      .gd-hero__media::after { background: linear-gradient(180deg, rgba(20,20,20,0) 72%, #1e1e2a 100%); }
      .gd-hero__card {
        width: 100%; margin: -1rem 0 0; border-radius: 20px 20px 0 0;
        background: #23232e; backdrop-filter: none; padding-top: 2rem;
      }
      .gd-created { position: static; text-align: center; margin: 1.4rem auto 1.8rem; }
    }
  
  /* Guias: el camino que Google no tenia. La portada solo enlazaba a si misma,
     asi que los 13 articulos quedaban descubiertos pero sin rastrear. */
  .gd-guias { max-width: 860px; margin: 0 auto; padding: 3rem 1.25rem 1rem; text-align: center; }
  .gd-guias h2 { font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin-bottom: .5rem; }
  .gd-guias > p { color: rgba(255,255,255,.62); font-size: .92rem; margin-bottom: 1.4rem; }
  .gd-guias__lista {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  }
  .gd-guias__lista a {
    display: inline-block; padding: .55rem .9rem;
    border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
    color: rgba(255,255,255,.82); font-size: .86rem; text-decoration: none;
    transition: border-color .25s, color .25s;
  }
  .gd-guias__lista a:hover { border-color: #3DDC84; color: #fff; }
  .gd-guias__mas { margin-top: 1.3rem; }
  .gd-guias__mas a { color: #3DDC84; font-weight: 700; text-decoration: none; }
  .gd-foot a { color: inherit; }