/* =====================================================
   SERSEO PACK FINDER — Hoja de estilos principal
   Fuente: Poppins (Google Fonts, cargada por el plugin)
   ===================================================== */


/* ──────────────────────────────────────────
   VARIABLES — Cambia aquí los colores globales
   ────────────────────────────────────────── */
:root {
    --spf-accent:        #EF377F;       /* Color principal */
    --spf-accent-dark:   #d4206a;       /* Hover del color principal */
    --spf-accent-light:  #fff0f6;       /* Fondo suave de hover en botones */

    --spf-wa-green:      #25d366;       /* WhatsApp */
    --spf-wa-green-dark: #1ebe5a;

    --spf-bg:            #ffffff;       /* Fondo del widget */
    --spf-bg-option:     #f7f8fa;       /* Fondo de cada opción */
    --spf-border:        #e8eaed;       /* Borde de opciones */

    --spf-text-primary:  #0f0f1a;       /* Títulos */
    --spf-text-body:     #4a4a5a;       /* Descripciones */
    --spf-text-muted:    #9fa3ae;       /* Etiquetas secundarias */

    --spf-radius-card:   20px;
    --spf-radius-btn:    14px;
    --spf-radius-pill:   999px;

    --spf-shadow:        0 8px 40px rgba(0, 0, 0, 0.09);
    --spf-font:          'Poppins', sans-serif;
}


/* ──────────────────────────────────────────
   CONTENEDOR PRINCIPAL
   ────────────────────────────────────────── */
.spf-wrap {
    font-family:   var(--spf-font);
    max-width:     640px;
    margin:        0 auto;
    padding:       40px 36px;
    background:    var(--spf-bg);
    border-radius: var(--spf-radius-card);
    box-shadow:    var(--spf-shadow);
    box-sizing:    border-box;
    overflow:      hidden;
    word-wrap:     break-word;
    overflow-wrap: break-word;
}

.spf-wrap * {
    box-sizing: border-box;
}


/* ──────────────────────────────────────────
   BARRA DE PROGRESO
   ────────────────────────────────────────── */
.spf-progress-track {
    background:    var(--spf-border);
    border-radius: var(--spf-radius-pill);
    height:        5px;
    overflow:      hidden;
    margin-bottom: 10px;
}

.spf-progress-bar {
    height:     100%;
    width:      33%;
    background: linear-gradient(90deg, var(--spf-accent), #f4a261);
    border-radius: var(--spf-radius-pill);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.spf-step-label {
    font-size:     0.72rem;
    font-weight:   600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:         var(--spf-text-muted);
    margin:        0 0 30px;
}


/* ──────────────────────────────────────────
   PASOS — Animación de entrada
   ────────────────────────────────────────── */
.spf-step {
    display: none;
}

.spf-step.active {
    display:   block;
    animation: spf-fade-in 0.35s ease forwards;
}

@keyframes spf-fade-in {
    from {
        opacity:   0;
        transform: translateY(14px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}


/* ──────────────────────────────────────────
   EYEBROW + PREGUNTA
   ────────────────────────────────────────── */
.spf-eyebrow {
    display:        inline-block;
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--spf-accent);
    margin-bottom:  8px;
}

.spf-question {
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--spf-text-primary);
    line-height: 1.4;
    margin:      0 0 22px;
}


/* ──────────────────────────────────────────
   HINT BAJO LA PREGUNTA (paso 3)
   ────────────────────────────────────────── */
.spf-question-hint {
    font-size:     0.82rem;
    color:         var(--spf-text-muted);
    margin:        -14px 0 18px;
    line-height:   1.5;
    font-style:    italic;
}

/* ──────────────────────────────────────────
   OPCIONES — lista de botones
   ────────────────────────────────────────── */
.spf-options {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.spf-btn {
    display:       flex;
    align-items:   center;
    gap:           14px;
    background:    var(--spf-bg-option);
    border:        2px solid var(--spf-border);
    border-radius: var(--spf-radius-btn);
    padding:       14px 18px;
    cursor:        pointer;
    text-align:    left;
    transition:    border-color 0.2s ease,
                   background  0.2s ease,
                   transform   0.2s ease,
                   box-shadow  0.2s ease;
    font-family:   var(--spf-font);
    width:         100%;
}

.spf-btn:hover {
    border-color: var(--spf-accent);
    background:   var(--spf-accent-light);
    transform:    translateX(5px);
    box-shadow:   0 4px 16px rgba(230, 57, 70, 0.12);
}

.spf-btn-icon {
    font-size:  1.6rem;
    flex-shrink: 0;
    line-height: 1;
}

.spf-btn-text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.spf-btn-text strong {
    font-size:    0.9rem;
    font-weight:  600;
    color:        var(--spf-text-primary);
    display:      block;
    white-space:  normal;
    overflow-wrap: break-word;
}

.spf-btn-text {
    font-size:     0.8rem;
    font-weight:   400;
    color:         var(--spf-text-body);
    line-height:   1.4;
    white-space:   normal;
    overflow-wrap: break-word;
}


/* ──────────────────────────────────────────
   PANTALLA DE RESULTADO
   ────────────────────────────────────────── */
#spf-result {
    text-align: center;
}

.spf-result-badge {
    animation:       spf-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
	display: block;
	margin: 0 auto 15px auto;
}

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

.spf-result-title {
    font-size:   1.6rem;
    font-weight: 700;
    color:       var(--spf-text-primary);
    margin:      8px 0 14px;
}

.spf-result-price {
    font-size:   1.9rem !important;
    font-weight: 700;
    color:       var(--spf-accent) !important;
    margin:      0 0 16px;
    line-height: 1;
}

.spf-result-desc {
    font-size:   0.95rem;
    color:       var(--spf-text-body);
    line-height: 1.7;
    max-width:   480px;
    margin:      0 auto 32px;
}


/* ──────────────────────────────────────────
   BOTÓN WHATSAPP
   ────────────────────────────────────────── */
.spf-wa-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            10px;
    background:     var(--spf-wa-green);
    color:          #ffffff;
    font-family:    var(--spf-font);
    font-weight:    600;
    font-size:      1rem;
    padding:        15px 32px;
    border-radius:  var(--spf-radius-pill);
    text-decoration: none;
    transition:     background 0.2s ease,
                    transform  0.2s ease,
                    box-shadow 0.2s ease;
    box-shadow:     0 6px 20px rgba(37, 211, 102, 0.35);
}

.spf-wa-btn svg {
    width:     22px;
    height:    22px;
    flex-shrink: 0;
}

.spf-wa-btn:hover {
    background: var(--spf-wa-green-dark);
    transform:  translateY(-3px);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
}


/* ──────────────────────────────────────────
   BOTÓN REINICIAR
   ────────────────────────────────────────── */
.spf-restart {
    display:     block;
    margin:      20px auto 0;
    background:  none;
    border:      none;
    color:       var(--spf-text-muted);
    font-family: var(--spf-font);
    font-size:   0.82rem;
    font-weight: 500;
    cursor:      pointer;
    transition:  color 0.2s ease;
    padding:     4px 8px;
}

.spf-restart:hover {
    color: var(--spf-accent);
}


/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */
@media ( max-width: 520px ) {

    .spf-wrap {
        padding:       28px 20px;
        border-radius: 14px;
    }

    .spf-question {
        font-size: 1.1rem;
    }

    .spf-btn {
        padding: 12px 14px;
        gap:     10px;
    }

    .spf-btn-icon {
        font-size: 1.3rem;
    }

    .spf-wa-btn {
        width:      100%;
        font-size:  0.95rem;
        padding:    14px 20px;
    }

    .spf-result-title {
        font-size: 1.35rem;
    }
}