@charset "utf-8";
/* CSS Document */

/*==================================================
TESTIMONIOS MCTIRE
==================================================*/

.testimonials-mctire
{
    position:relative;

    padding:20px 0;

    background:
    linear-gradient(
        135deg,
        #f8f8f8 0%,
        #ffffff 50%,
        #f2f2f2 100%
    );

    overflow:hidden;
}


/*==================================================
DECORACIÓN
==================================================*/

.testimonials-mctire::before
{
    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    border:
    65px solid rgba(215,25,32,.035);

    pointer-events:none;
}


.testimonials-mctire::after
{
    content:"";

    position:absolute;

    right:-120px;

    bottom:-150px;

    width:380px;

    height:380px;

    border-radius:50%;

    background:
    rgba(0,0,0,.025);

    pointer-events:none;
}


/*==================================================
CONTENEDOR
==================================================*/

.testimonials-mctire .container
{
    position:relative;

    z-index:2;
}


/*==================================================
ENCABEZADO
==================================================*/

.testimonials-heading
{
    max-width:720px;

    margin:
    0 auto 30px;

    text-align:center;
}


.testimonials-heading .section-label
{
    display:inline-block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:.66rem;

    font-weight:800;

    letter-spacing:1.6px;

    text-transform:uppercase;
}


.testimonials-heading h2
{
    margin:0;

    color:#111;

    font-size:
    clamp(1.8rem,3.5vw,2.7rem);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-.8px;
}


.testimonials-heading h2 span
{
    color:var(--primary);
}


.testimonials-heading p
{
    max-width:650px;

    margin:
    11px auto 0;

    color:#707070;

    font-size:.78rem;

    line-height:1.6;
}


/*==================================================
GRID
==================================================*/

.testimonials-grid
{
    display:grid;

    grid-template-columns:
    repeat(3,minmax(0,1fr));

    gap:16px;

    max-width:1120px;

    margin:0 auto;
}


/*==================================================
TARJETA
==================================================*/

.testimonial-card
{
    position:relative;

    display:flex;

    flex-direction:column;

    min-height:275px;

    padding:21px;

    background:
    rgba(255,255,255,.96);

    border:
    1px solid rgba(0,0,0,.07);

    border-radius:16px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.055);

    overflow:hidden;

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


.testimonial-card::before
{
    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:
    linear-gradient(
        90deg,
        var(--primary),
        #ff4b4b,
        transparent
    );

    opacity:.8;
}


.testimonial-card:hover
{
    transform:
    translateY(-5px);

    border-color:
    rgba(215,25,32,.16);

    box-shadow:
    0 18px 40px rgba(0,0,0,.09);
}


/*==================================================
PARTE SUPERIOR
==================================================*/

.testimonial-top
{
    display:flex;

    align-items:center;

    justify-content:space-between;
}


/*==================================================
ESTRELLAS
==================================================*/

.testimonial-stars
{
    display:flex;

    gap:3px;
}


.testimonial-stars i
{
    color:#f5b301;

    font-size:.74rem;
}


/*==================================================
ICONO COMILLA
==================================================*/

.testimonial-quote
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    color:var(--primary);

    background:
    rgba(215,25,32,.07);

    border-radius:50%;

    font-size:.86rem;
}


/*==================================================
CONTENIDO
==================================================*/

.testimonial-content
{
    flex:1;

    padding:
    18px 0 17px;
}


.testimonial-content p
{
    margin:0;

    color:#444;

    font-size:.78rem;

    line-height:1.65;

    font-weight:500;
}


.testimonial-content p::before
{
    content:"“";

    color:var(--primary);

    font-size:1.4rem;

    font-weight:900;

    line-height:0;

    margin-right:3px;
}


/*==================================================
CLIENTE
==================================================*/

.testimonial-client
{
    display:flex;

    align-items:center;

    gap:10px;

    padding-top:14px;

    border-top:
    1px solid #eeeeee;
}


.client-avatar
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    flex-shrink:0;

    color:#fff;

    background:
    linear-gradient(
        145deg,
        var(--primary),
        var(--primary-hover)
    );

    border-radius:50%;

    font-size:.65rem;

    font-weight:800;

    box-shadow:
    0 6px 15px rgba(215,25,32,.20);
}


.client-info strong
{
    display:block;

    color:#161616;

    font-size:.75rem;

    font-weight:800;
}


.client-info span
{
    display:block;

    margin-top:2px;

    color:#8a8a8a;

    font-size:.62rem;
}


/*==================================================
SERVICIO
==================================================*/

.testimonial-service
{
    display:inline-flex;

    align-items:center;

    gap:6px;

    width:max-content;

    margin-top:12px;

    padding:
    5px 9px;

    color:#666;

    background:#f5f5f5;

    border-radius:30px;

    font-size:.59rem;

    font-weight:700;
}


.testimonial-service i
{
    color:#20a35a;

    font-size:.63rem;
}


/*==================================================
BLOQUE CONFIANZA
==================================================*/

.testimonials-trust
{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    align-items:center;

    max-width:1050px;

    margin:
    25px auto 0;

    padding:
    17px 22px;

    background:#111;

    border-radius:15px;

    box-shadow:
    0 13px 32px rgba(0,0,0,.09);
}


.trust-item
{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;
}


.trust-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    flex-shrink:0;

    color:#fff;

    background:
    rgba(215,25,32,.90);

    border-radius:9px;

    font-size:.76rem;
}


.trust-item strong
{
    display:block;

    color:#fff;

    font-size:.68rem;

    font-weight:800;
}


.trust-item span
{
    color:#888;

    font-size:.59rem;

    line-height:1.35;
}


.trust-divider
{
    width:1px;

    height:36px;

    background:
    rgba(255,255,255,.10);
}


/*==================================================
TABLET
==================================================*/

@media(min-width:601px) and (max-width:900px)
{
    .testimonials-mctire
    {
        padding:25px 0;
    }


    .testimonials-heading
    {
        margin-bottom:25px;
    }


    .testimonials-grid
    {
        grid-template-columns:
        repeat(2,minmax(0,1fr));

        gap:14px;
    }


    .testimonials-grid
    .testimonial-card:last-child
    {
        grid-column:
        1 / -1;

        max-width:
        calc(50% - 7px);

        width:100%;

        justify-self:center;
    }


    .testimonials-trust
    {
        grid-template-columns:
        1fr;

        gap:14px;

        margin-top:22px;
    }


    .trust-divider
    {
        width:100%;

        height:1px;
    }
}


/*==================================================
MOBILE
==================================================*/

@media(max-width:600px)
{
    .testimonials-mctire
    {
        padding:8px 0 10px;
    }


    /*==================================================
    ENCABEZADO
    ==================================================*/

    .testimonials-heading
    {
        margin:
        0 auto 18px;
    }


    .testimonials-heading .section-label
    {
        margin-bottom:6px;

        font-size:.57rem;

        letter-spacing:1.3px;
    }


    .testimonials-heading h2
    {
        font-size:
        clamp(1.65rem,8vw,2.1rem);

        line-height:1.05;

        letter-spacing:-.6px;
    }


    .testimonials-heading p
    {
        margin-top:8px;

        padding:
        0 8px;

        font-size:.69rem;

        line-height:1.5;
    }


    /*==================================================
    GRID
    ==================================================*/

    .testimonials-grid
    {
        grid-template-columns:1fr;

        gap:9px;
    }


    .testimonials-grid
    .testimonial-card:last-child
    {
        grid-column:auto;

        max-width:none;
    }


    /*==================================================
    TARJETA
    ==================================================*/

    .testimonial-card
    {
        min-height:auto;

        padding:16px;

        border-radius:12px;

        box-shadow:
        0 7px 20px rgba(0,0,0,.05);
    }


    /*==================================================
    TOP
    ==================================================*/

    .testimonial-stars
    {
        gap:2px;
    }


    .testimonial-stars i
    {
        font-size:.68rem;
    }


    .testimonial-quote
    {
        width:32px;

        height:32px;

        font-size:.76rem;
    }


    /*==================================================
    CONTENIDO
    ==================================================*/

    .testimonial-content
    {
        padding:
        14px 0 13px;
    }


    .testimonial-content p
    {
        font-size:.71rem;

        line-height:1.55;
    }


    .testimonial-content p::before
    {
        font-size:1.2rem;
    }


    /*==================================================
    CLIENTE
    ==================================================*/

    .testimonial-client
    {
        gap:9px;

        padding-top:11px;
    }


    .client-avatar
    {
        width:35px;

        height:35px;

        font-size:.59rem;
    }


    .client-info strong
    {
        font-size:.68rem;
    }


    .client-info span
    {
        font-size:.57rem;
    }


    /*==================================================
    SERVICIO
    ==================================================*/

    .testimonial-service
    {
        margin-top:9px;

        padding:
        4px 8px;

        font-size:.54rem;
    }


    .testimonial-service i
    {
        font-size:.57rem;
    }


    /*==================================================
    CONFIANZA
    ==================================================*/

    .testimonials-trust
    {
        grid-template-columns:1fr;

        gap:10px;

        margin-top:15px;

        padding:
        13px 14px;

        border-radius:11px;
    }


    .trust-item
    {
        justify-content:flex-start;

        gap:9px;
    }


    .trust-icon
    {
        width:32px;

        height:32px;

        border-radius:8px;

        font-size:.68rem;
    }


    .trust-item strong
    {
        font-size:.62rem;
    }


    .trust-item span
    {
        font-size:.53rem;
    }


    .trust-divider
    {
        width:100%;

        height:1px;
    }


    /*==================================================
    HOVER TOUCH
    ==================================================*/

    .testimonial-card:hover
    {
        transform:none;

        box-shadow:
        0 7px 20px rgba(0,0,0,.05);
    }
}


/*==================================================
MOBILE PEQUEÑO
==================================================*/

@media(max-width:400px)
{
    .testimonials-mctire
    {
        padding:6px 0 8px;
    }


    .testimonials-heading
    {
        margin-bottom:15px;
    }


    .testimonials-heading h2
    {
        font-size:1.55rem;
    }


    .testimonials-heading p
    {
        font-size:.66rem;

        line-height:1.45;
    }


    .testimonials-grid
    {
        gap:8px;
    }


    .testimonial-card
    {
        padding:14px;

        border-radius:11px;
    }


    .testimonial-content
    {
        padding:
        12px 0;
    }


    .testimonial-content p
    {
        font-size:.68rem;

        line-height:1.5;
    }


    .client-avatar
    {
        width:33px;

        height:33px;
    }


    .client-info strong
    {
        font-size:.65rem;
    }


    .client-info span
    {
        font-size:.54rem;
    }


    .testimonials-trust
    {
        margin-top:12px;

        padding:
        11px 12px;
    }


    .trust-item strong
    {
        font-size:.59rem;
    }


    .trust-item span
    {
        font-size:.51rem;
    }
}


/*==================================================
ACCESIBILIDAD
==================================================*/

@media(prefers-reduced-motion:reduce)
{
    .testimonial-card
    {
        transition:none;
    }
}