/* ... (el resto del CSS de arriba no cambia) ... */
.atico-cta{
    display: grid;
    place-items: center;
    padding: clamp(28px, 6vw, 72px);
    background:
      radial-gradient(60% 120% at 50% 0%, rgba(224,139,164,.08), transparent 60%),
      radial-gradient(40% 100% at 80% 20%, rgba(0,186,240,.08), transparent 60%);
  }

  .atico-cta__btn{
    --shine-x: 50%;
    --shine-y: 50%;
    --dx: 0;
    --dy: 0;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: 18px 28px;
    border-radius: var(--atico-radius, 999px);
    /* MODIFICACIÓN: Quitar subrayado por defecto del enlace */
    text-decoration: none !important;
    color: var(--atico-text, #f3f3f3);
    font-family: var(--atico-font, Satoshi, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
    letter-spacing: -0.02em;
    line-height: 1.05;
    box-shadow: var(--atico-shadow, 0 18px 40px rgba(0,0,0,.35));
    transform: translate3d(calc(var(--dx)*6px), calc(var(--dy)*6px), 0);
    transition: transform .18s ease, filter .18s ease;
    background:
      linear-gradient(var(--atico-bg, #0a0a0a), var(--atico-bg, #0a0a0a)) padding-box,
      linear-gradient(120deg, rgba(255,255,255,.65), var(--atico-accent-1, #e08ba4), var(--atico-accent-2, #00baf0)) border-box;
    border: 1px solid transparent;
    backdrop-filter: saturate(120%) blur(6px);
  }

  .atico-cta__btn:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--atico-accent-2, #00baf0) 60%, white);
    outline-offset: 2px;
  }
  
  /* MODIFICACIÓN: Añadir base para el subrayado personalizado */
  .atico-cta__line1,
  .atico-cta__line2 {
    /* Por defecto, el borde es transparente. Se activa al darle color. */
    border-bottom: 1px solid transparent;
    padding-bottom: 2px; /* Pequeño espacio entre texto y línea */
  }

  .atico-cta__line1{
    color: var(--atico-muted, #cfcfcf);
    text-transform: none;
  }

  .atico-cta__line2{
    font-weight: 700;
    text-transform: none;
  }

/* ... (el resto del CSS de abajo no cambia) ... */
  .atico-cta__icon{
    flex: 0 0 auto;
    transition: transform .25s ease;
  }
  .atico-cta__btn::before{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(140px 140px at var(--shine-x) var(--shine-y), var(--atico-shine-hotspot, rgba(255,255,255,.25)), transparent 60%),
      radial-gradient(400px 200px at var(--shine-x) calc(var(--shine-y) + 15%), color-mix(in srgb, var(--atico-shine-glow, var(--atico-accent-1)) 24%, transparent), transparent 70%);
    opacity: .0;
    transition: opacity .25s ease;
  }
  .atico-cta__btn::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 20%, var(--atico-shine-sweep, rgba(255,255,255,.18)) 40%, transparent 60%);
    background-size: 200% 100%;
    translate: 0 0;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .atico-cta__btn:hover::before{ opacity: 1; }
  .atico-cta__btn:hover::after{
    opacity: 1;
    animation: atico-shine 1.2s ease;
  }
  .atico-cta__btn:hover .atico-cta__icon{ transform: translateX(3px); }
  @keyframes atico-shine{
    from { background-position: 200% 0; }
    to   { background-position: 0% 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .atico-cta__btn{ transition: none; transform: none; }
    .atico-cta__btn::before,
    .atico-cta__btn::after{ display: none; }
    .atico-cta__icon{ transition: none; }
  }