/* ═══════════════════════════════════════════════════════════════════════════
   VIVENTA · PÁGINA "GRACIAS POR TU CONFIANZA"  (/gracias-por-tu-confianza/)
   Página de agradecimiento post-formulario. El contenido se pega como módulo
   HtmlText (ver docs/gracias-por-tu-confianza-htmltext.html); misma convención
   que nosotros.css: tokens --vv-* de chrome.css y todo cuelga de .vv-landing.

       <div class="vv-landing">
         <section class="vv-gracias"> … </section>
       </div>

   El envoltorio no es opcional: el reset de box-sizing y los estilos de
   enlaces y botones cuelgan de él (vive en chrome.css).

   Bootstrap carga antes que este archivo y sus selectores de elemento (h1, p)
   ganan al reset genérico, así que cada regla usa clase propia y fija su
   propio margin.

   Al modificar este archivo, sube el ?v= en ThemeInfo.cs (cache-busting).
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-gracias {
    /* Verde de éxito del check: no existe en la paleta --vv-*; se toma del
       diseño aprobado. Alternativa de marca si se prefiere: la pareja menta
       (--vv-menta-fondo / --vv-menta-texto). */
    --vv-gracias-exito-fondo: #DCFCE7;
    --vv-gracias-exito:       #166534;

    background: var(--vv-gris-200);
    padding: 96px var(--vv-margen);
    display: flex;
    justify-content: center;
}

/* — Tarjeta — */

.vv-gracias__tarjeta {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 760px;
    background: var(--vv-blanco);
    border-radius: 24px;
    box-shadow: 0 22px 56px rgba(42, 45, 82, 0.10);
    padding: 56px 48px;
    text-align: center;
}

/* Filo superior magenta, como sello de la marca. */
.vv-gracias__tarjeta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--vv-rosa), var(--vv-rosa-oscuro));
}

/* — Check de confirmación — */

.vv-gracias__icono {
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--vv-gracias-exito-fondo);
    color: var(--vv-gracias-exito);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: vv-gracias-pop 420ms var(--vv-ease-back) both;
}

.vv-gracias__check {
    width: 44px;
    height: 44px;
}

.vv-gracias__check-trazo {
    stroke-dasharray: 36;
    stroke-dashoffset: 0;
    animation: vv-gracias-trazo 540ms 220ms ease-out both;
}

@keyframes vv-gracias-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes vv-gracias-trazo {
    from { stroke-dashoffset: 36; }
    to   { stroke-dashoffset: 0; }
}

/* — Textos — */

.vv-gracias__eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--vv-rosa-suave);
    color: var(--vv-rosa);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vv-gracias__titulo {
    margin: 0 0 16px;
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: clamp(30px, 4.5vw, 42px);
    line-height: 1.15;
    color: var(--vv-navy);
}

.vv-gracias__titulo-resalte {
    display: block;
    font-style: normal;
    color: var(--vv-rosa);
}

.vv-gracias__texto {
    margin: 0 auto 32px;
    max-width: 52ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--vv-gris-900);
}

/* — CTAs — */

.vv-gracias__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0 0 40px;
}

/* Secundario en navy: --contorno de chrome.css es blanco/rosa, aquí el diseño
   pide contorno navy. Sin sombra: la de --mediano es rosa y aquí desentona. */
.vv-gracias__boton--navy {
    background: var(--vv-blanco);
    color: var(--vv-navy);
    border: 1.5px solid var(--vv-navy);
    box-shadow: none;
}

.vv-gracias__boton--navy:hover {
    background: var(--vv-navy);
    color: var(--vv-blanco);
}

/* — Qué sigue: 3 pasos — */

.vv-gracias__pasos {
    border-top: 2px dashed var(--vv-gris-400);
    padding-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.vv-gracias__paso-insignia {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: var(--vv-navy);
    color: var(--vv-blanco);
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vv-gracias__paso-insignia--listo {
    background: var(--vv-gracias-exito-fondo);
    color: var(--vv-gracias-exito);
}

.vv-gracias__paso-titulo {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 15px;
    color: var(--vv-navy);
}

.vv-gracias__paso-descripcion {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--vv-gris-800);
}

/* — Responsive — */

@media (max-width: 760px) {
    .vv-gracias {
        padding: 56px 20px;
    }

    .vv-gracias__tarjeta {
        padding: 40px 24px;
    }

    .vv-gracias__pasos {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .vv-gracias__boton {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vv-gracias__icono,
    .vv-gracias__check-trazo {
        animation: none;
    }
}