/**
 * ============================================================
 * PÁGINA: GUÍA DE COMPRA
 * ============================================================
 *
 * Componente visual de la página "Guía de compra".
 *
 * Estructura:
 * 1. Contenedor general
 * 2. Hero
 * 3. Pasos de compra
 * 4. Bloque de ayuda
 * 5. Botón CTA
 * 6. Responsive
 *
 * Utiliza las variables globales definidas en :root.
 *
 * ============================================================
 */


/* ============================================================
   1. CONTENEDOR GENERAL
   ============================================================ */

/*
 * Evitamos que estilos generales del tema afecten
 * innecesariamente los elementos internos de la guía.
 */
.purchase-guide {
    width: 100%;
    max-width: 1200px;

    /* margin: 0 auto;
    padding: 0 30px; */

    font-family: var(--font-family);
    color: var(--color-text);
}


/* ============================================================
   2. HERO
   ============================================================ */

/*
 * Hero principal de la Guía de compra.
 *
 * Como actualmente no contiene imagen,
 * todo el contenido se centra horizontalmente.
 */
.purchase-guide__hero {
    width: 100%;

    margin: 10px;
}


/*
 * Contenedor principal del hero.
 *
 * El contenido queda centrado tanto horizontal
 * como verticalmente.
 */
.purchase-guide__hero-content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 230px;

    padding: 35px 40px;

    overflow: hidden;

    border-radius: 28px;

    background-color: var(--color-secondary);
}


/*
 * Contenedor del contenido textual.
 *
 * Ya no necesitamos width: 50% porque
 * el hero no tiene imagen.
 */
.purchase-guide__hero-text {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 700px;

    text-align: center;
}


/*
 * Título principal.
 */
.purchase-guide__title {
    margin: 0 0 10px;

    font-family: var(--font-family);
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;

    color: var(--color-product-title);
}


/*
 * Texto introductorio.
 */
.purchase-guide__intro {
    margin: 0;

    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;

    color: var(--color-text-long);
}


/*
 * Separador decorativo.
 *
 * Al estar dentro de un contenido centrado,
 * margin-inline: auto lo centra.
 */
.purchase-guide__divider {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 180px;

    margin: 18px auto 12px;
}


/*
 * Líneas laterales del separador.
 */
.purchase-guide__divider span:not(:nth-child(2)) {
    flex: 1;

    height: 1px;

    background-color: var(--color-primary);
}


/*
 * Corazón central.
 */
.purchase-guide__divider span:nth-child(2) {
    color: var(--color-regular-price);

    font-size: 14px;
}


/*
 * Texto "Seguí estos 3 pasos".
 */
.purchase-guide__subtitle {
    margin: 0;

    font-size: 16px;
    font-weight: 700;

    color: var(--color-text-long);
}


/*
 * Decoración del corazón.
 */
.purchase-guide__hero-decoration {
    position: absolute;

    z-index: 3;

    font-size: 28px;

    color: var(--color-regular-price);

    pointer-events: none;
}


/*
 * Corazón ubicado en la esquina inferior derecha.
 */
.purchase-guide__hero-decoration--right {
    right: 30px;
    bottom: 20px;
}


/* ============================================================
   3. PASOS DE COMPRA
   ============================================================ */

/*
 * Cada paso funciona como una sección independiente.
 */
.purchase-guide__step {
    width: 100%;

    margin-bottom: 55px;
}


/*
 * Contenedor interno de cada paso.
 *
 * Grid nos permite controlar con precisión:
 * número → contenido → imagen
 */
.purchase-guide__step-inner {
    display: grid;

    grid-template-columns:
        80px 52px minmax(280px, 1fr) minmax(300px, 420px);

    align-items: center;

    gap: 35px;

    min-height: 280px;

    padding: 40px;

    border-radius: 28px;

    background-color: var(--color-background);
}


/*
 * Paso 1 y paso 3 tienen una tonalidad muy suave.
 */
.purchase-guide__step--one .purchase-guide__step-inner,
.purchase-guide__step--three .purchase-guide__step-inner {
    background-color: #fffaf7;
}


/*
 * Paso 2 utiliza una tonalidad diferente para
 * generar ritmo visual.
 */
.purchase-guide__step--two .purchase-guide__step-inner {
    background-color: #faf7ff;
}


/* ============================================================
   3.1 NÚMERO DEL PASO
   ============================================================ */

/*
 * Círculo 01 / 02 / 03.
 *
 * No es una imagen:
 * es HTML + CSS, por lo que se puede modificar
 * fácilmente desde el código.
 */
.purchase-guide__step-number {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: var(--color-primary);

    color: #FFFFFF;

    font-size: 23px;
    line-height: 1;
    font-weight: 800;

    flex-shrink: 0;
}


/*
 * Colores individuales para cada número.
 */
.purchase-guide__step--one .purchase-guide__step-number {
    background-color: var(--rosa-fucsia);
}


.purchase-guide__step--two .purchase-guide__step-number {
    background-color: var(--violeta);
}


.purchase-guide__step--three .purchase-guide__step-number {
    background-color: var(--verde-oscuro);
}


/* ============================================================
   3.2 ICONOS
   ============================================================ */

/*
 * Contenedor del pequeño icono que acompaña
 * cada paso.
 */
.purchase-guide__step-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border-radius: 50%;

    background-color: var(--color-secondary);

    font-size: 23px;
}


/*
 * Paso 2.
 */
.purchase-guide__step--two .purchase-guide__step-icon {
    background-color: var(--lila);
}


/*
 * Paso 3.
 */
.purchase-guide__step--three .purchase-guide__step-icon {
    background-color: var(--verde-claro);
}


/* ============================================================
   3.3 CONTENIDO DEL PASO
   ============================================================ */

/*
 * Contenedor de título + descripción.
 */
.purchase-guide__step-content {
    max-width: 520px;
}


/*
 * Título del paso.
 */
.purchase-guide__step-title {
    margin: 0 0 14px;

    font-family: var(--font-family);
    font-size: 25px;
    line-height: 1.25;
    font-weight: 800;

    color: var(--color-product-title);
}


/*
 * Texto descriptivo.
 */
.purchase-guide__step-text {
    margin: 0;

    font-size: 17px;
    line-height: 1.7;

    color: var(--color-text-long);
}


/*
 * Enlaces dentro de los pasos.
 *
 * La idea es que "tienda" y "WhatsApp"
 * se identifiquen claramente como links.
 */
.purchase-guide__step-text a {
    color: var(--rosa-fucsia);

    font-weight: 800;

    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


/*
 * Hover de los enlaces.
 */
.purchase-guide__step-text a:hover {
    color: var(--color-regular-price);
}


/*
 * Texto destacado, por ejemplo:
 * "Finalizar compra".
 */
.purchase-guide__step-text strong {
    font-weight: 800;

    color: var(--color-text);
}


/* ============================================================
   3.4 IMÁGENES DE LOS PASOS
   ============================================================ */

/*
 * Contenedor de imagen.
 */
.purchase-guide__step-image {
    width: 100%;
    height: 230px;

    overflow: hidden;

    border-radius: 22px;

    background-color: var(--color-secondary);
}


/*
 * Imagen.
 */
.purchase-guide__step-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   3.5 ORDEN ESPECIAL DEL PASO 2
   ============================================================ */

/*
 * En desktop, el paso 2 muestra la imagen a la izquierda
 * y el contenido a la derecha.
 *
 * Como el HTML tiene:
 *
 * imagen → número → icono → contenido
 *
 * usamos grid para organizarlo.
 */
.purchase-guide__step--two .purchase-guide__step-inner {
    grid-template-columns:
        minmax(300px, 420px) 80px 52px minmax(280px, 1fr);
}


/*
 * En el paso 2 el icono queda alineado
 * verticalmente con el contenido.
 */
.purchase-guide__step--two .purchase-guide__step-icon {
    margin-bottom: 0;
}


/* ============================================================
   4. BLOQUE DE AYUDA
   ============================================================ */

/*
 * Sección que aparece después de los tres pasos.
 */
.purchase-guide__help {
    position: relative;

    display: flex;
    align-items: center;

    gap: 25px;

    margin: 75px 0 45px;

    padding: 35px 45px;

    overflow: hidden;

    border-radius: 25px;

    background-color: var(--lila);
}


/*
 * Círculo con signo de pregunta.
 */
.purchase-guide__help-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: #FFFFFF;

    color: var(--violeta);

    font-size: 25px;
    font-weight: 800;

    flex-shrink: 0;
}


/*
 * Contenido del bloque de ayuda.
 */
.purchase-guide__help-content {
    position: relative;
    z-index: 2;
}


/*
 * Título de ayuda.
 */
.purchase-guide__help-title {
    margin: 0 0 7px;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 800;

    color: var(--color-product-title);
}


/*
 * Texto de ayuda.
 */
.purchase-guide__help-text {
    margin: 0;

    font-size: 16px;
    line-height: 1.6;

    color: var(--color-text-long);
}


/*
 * Link de WhatsApp dentro del bloque de ayuda.
 */
.purchase-guide__help-text a {
    color: var(--rosa-fucsia);

    font-weight: 800;

    text-decoration: none;
}


.purchase-guide__help-text a:hover {
    color: var(--color-regular-price);
}


/*
 * Decoración de nube.
 */
.purchase-guide__help-decoration {
    position: absolute;

    right: 35px;
    bottom: -18px;

    font-size: 90px;

    line-height: 1;

    color: rgba(255, 255, 255, 0.65);

    pointer-events: none;
}


/* ============================================================
   5. CTA - CONOCÉ NUESTROS PRODUCTOS
   ============================================================ */

/*
 * Contenedor del botón.
 */
.purchase-guide__cta {
    display: flex;
    justify-content: center;

    padding: 10px 0 80px;
}


/*
 * Botón principal.
 */
.purchase-guide__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 52px;

    padding: 14px 28px;

    border: 2px solid var(--button-border);
    border-radius: 30px;

    background-color: var(--button-bg);

    color: var(--button-text);

    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/*
 * Flecha.
 */
.purchase-guide__cta-button span {
    font-size: 20px;
    line-height: 1;
}


/*
 * Hover.
 */
.purchase-guide__cta-button:hover {
    background-color: var(--button-bg-hover);
    border-color: var(--button-bg-hover);

    color: #FFFFFF;

    transform: translateY(-2px);
}


/* ============================================================
   6. TABLET
   ============================================================ */

@media (max-width: 900px) {


    .purchase-guide__title {
        font-size: 40px;
    }

    .purchase-guide__step-inner {
        gap: 25px;
        /* padding: 30px; */
    }

    .purchase-guide__step-title {
        font-size: 22px;
    }

    .purchase-guide__step-text {
        font-size: 16px;
    }

}


/* ============================================================
   7. MOBILE
   ============================================================ */

@media (max-width: 700px) {

    /*
     * Contenedor general.
     */


    /* --------------------------------------------------------
       HERO MOBILE
       -------------------------------------------------------- */

    .purchase-guide__hero {
        padding: 0px;
    }


    /*
     * En mobile el hero pasa a ser vertical.
     */
    .purchase-guide__hero-content {
        display: flex;
        flex-direction: column;

        min-height: auto;

        border-radius: 22px;
    }


    .purchase-guide__hero-text {
        width: 100%;

        text-align: center;
    }


    .purchase-guide__title {
        font-size: 34px;
    }


    .purchase-guide__intro {
        font-size: 18px;
    }


    /*
     * Centramos el separador.
     */
    .purchase-guide__divider {
        margin: 20px auto 14px;
    }




    /*
     * Ocultamos las decoraciones laterales
     * para mantener el hero limpio.
     */
    .purchase-guide__hero-decoration {
        font-size: 22px;
    }


    .purchase-guide__hero-decoration--left {
        top: 15px;
        left: 15px;
    }


    .purchase-guide__hero-decoration--right {
        right: 15px;
        bottom: 15px;
    }


    /* --------------------------------------------------------
       PASOS MOBILE
       -------------------------------------------------------- */

    .purchase-guide__step {
        margin-bottom: 35px;
    }


    /*
     * Cada paso pasa a una sola columna.
     */
    .purchase-guide__step-inner,
    .purchase-guide__step--two .purchase-guide__step-inner {
        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 18px;

        padding: 30px 22px;

        min-height: auto;

        text-align: center;
    }


    /*
     * El número siempre aparece primero.
     */
    .purchase-guide__step-number {
        width: 65px;
        height: 65px;

        font-size: 21px;
    }


    /*
     * Icono.
     */
    .purchase-guide__step-icon,
    .purchase-guide__step--two .purchase-guide__step-icon {
        margin-bottom: 0;
    }


    /*
     * Texto ocupa todo el ancho disponible.
     */
    .purchase-guide__step-content {
        width: 100%;
        max-width: 100%;
    }


    .purchase-guide__step-title {
        font-size: 21px;
    }


    .purchase-guide__step-text {
        font-size: 15px;
        line-height: 1.65;
    }


    /*
     * Imagen de cada paso.
     */
    .purchase-guide__step-image {
        width: 100%;
        height: 210px;

        border-radius: 18px;
    }


    /*
     * En el paso 2 queremos mantener el orden:
     *
     * número
     * icono
     * contenido
     * imagen
     *
     * aunque en desktop la imagen aparece primero.
     */
    .purchase-guide__step--two .purchase-guide__step-image {
        order: 4;
    }


    /* --------------------------------------------------------
       BLOQUE DE AYUDA MOBILE
       -------------------------------------------------------- */

    .purchase-guide__help {
        flex-direction: column;

        align-items: center;

        gap: 15px;

        margin: 50px 0 35px;

        padding: 30px 22px;

        text-align: center;
    }


    .purchase-guide__help-icon {
        width: 52px;
        height: 52px;
    }


    .purchase-guide__help-title {
        font-size: 19px;
    }


    .purchase-guide__help-text {
        font-size: 15px;
    }


    /*
     * La nube decorativa se mantiene pero
     * se hace más pequeña.
     */
    .purchase-guide__help-decoration {
        right: 10px;
        bottom: -10px;

        font-size: 65px;
    }


    /* --------------------------------------------------------
       CTA MOBILE
       -------------------------------------------------------- */

    .purchase-guide__cta {
        padding-bottom: 50px;
    }


    .purchase-guide__cta-button {
        width: 100%;

        max-width: 330px;

        padding: 13px 20px;

        font-size: 15px;
    }

}


/* ============================================================
   8. MOBILE PEQUEÑO
   ============================================================ */

@media (max-width: 400px) {

    .purchase-guide__title {
        font-size: 30px;
    }


    .purchase-guide__hero-image {
        height: 210px;
    }


    .purchase-guide__step-inner,
    .purchase-guide__step--two .purchase-guide__step-inner {
        padding: 25px 18px;
    }


    .purchase-guide__step-image {
        height: 190px;
    }

}