@charset "utf-8";

/*==================================================
ALINEACIÓN Y BALANCEO - MCTIRE
==================================================*/

.alignment-section
{
    position:relative;

    width:100%;

    margin:0;

    /* PADDING ÚNICO DE LA SECCIÓN */
    padding:
    12px 0 28px;

    background:#fff;

    overflow:hidden;

    isolation:isolate;

    scroll-margin-top:20px;
}


/*==================================================
DETALLE SUPERIOR
==================================================*/

.alignment-section::before
{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:90px;
    height:2px;

    transform:translateX(-50%);

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

    opacity:.75;

    pointer-events:none;
}


/*==================================================
BRILLO DECORATIVO
==================================================*/

.alignment-section::after
{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-250px;
    top:60px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.055),
        transparent 68%
    );

    pointer-events:none;

    z-index:-1;
}


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

.alignment-section .container
{
    position:relative;

    z-index:2;
}


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

.alignment-heading
{
    position:relative;

    max-width:760px;

    margin:
    0 auto 28px;

    padding:0;

    text-align:center;
}


/*==================================================
KICKER
==================================================*/

.alignment-kicker
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin:
    0 0 7px;

    color:var(--primary);

    font-size:.62rem;

    font-weight:800;

    letter-spacing:1.6px;

    line-height:1;

    text-transform:uppercase;
}


.alignment-kicker i
{
    font-size:.7rem;
}


/*==================================================
TÍTULO PRINCIPAL
==================================================*/

.alignment-heading h1
{
    margin:0;

    padding:0;

    color:#111;

    font-size:
    clamp(
        1.8rem,
        3.4vw,
        2.65rem
    );

    font-weight:850;

    line-height:1.05;

    letter-spacing:-1px;
}


.alignment-heading h1 span
{
    color:var(--primary);
}


/*==================================================
DESCRIPCIÓN
==================================================*/

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

    margin:
    10px auto 0;

    padding:0;

    color:#666;

    font-size:.8rem;

    line-height:1.6;

    text-align:justify;
}


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

.alignment-main
{
    position:relative;

    display:grid;

    grid-template-columns:
    .9fr
    1.1fr;

    align-items:center;

    gap:48px;

    max-width:1100px;

    margin:0 auto;

    padding:0;
}


/*==================================================
VISUAL
==================================================*/

.alignment-visual
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:315px;

    overflow:hidden;

    border-radius:22px;

    background:
    linear-gradient(
        145deg,
        #101010 0%,
        #181818 52%,
        #090909 100%
    );

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


/*==================================================
BRILLO
==================================================*/

.alignment-glow
{
    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.24),
        rgba(215,25,32,.055) 45%,
        transparent 70%
    );

    filter:blur(7px);

    animation:
    alignmentGlow 5s ease-in-out infinite;
}


/*==================================================
REJILLA
==================================================*/

.alignment-grid
{
    position:absolute;

    inset:0;

    opacity:.11;

    background-image:
    linear-gradient(
        rgba(255,255,255,.08) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.08) 1px,
        transparent 1px
    );

    background-size:
    34px 34px;

    -webkit-mask-image:
    radial-gradient(
        circle,
        #000 20%,
        transparent 75%
    );

    mask-image:
    radial-gradient(
        circle,
        #000 20%,
        transparent 75%
    );
}


/*==================================================
RUEDA CENTRAL
==================================================*/

.alignment-wheel
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:185px;
    height:185px;

    border-radius:50%;

    border:
    1px solid rgba(255,255,255,.13);

    box-shadow:
    0 0 0 15px rgba(255,255,255,.025),
    0 0 0 30px rgba(255,255,255,.012);

    transform:rotate(-8deg);
}


/*==================================================
ANILLO GIRATORIO
==================================================*/

.alignment-wheel-ring
{
    position:absolute;

    inset:14px;

    border-radius:50%;

    border:
    2px dashed rgba(215,25,32,.72);

    animation:
    alignmentRotate 16s linear infinite;

    transform-origin:center center;

    will-change:transform;
}


/*==================================================
CENTRO
==================================================*/

.alignment-wheel-inner
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:68px;
    height:68px;

    border-radius:50%;

    color:#fff;

    background:
    radial-gradient(
        circle at 35% 30%,
        #333,
        #090909
    );

    border:
    2px solid var(--primary);

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


.alignment-wheel-inner i
{
    color:#e31b23;

    font-size:1.75rem;
}


/*==================================================
PUNTOS
==================================================*/

.alignment-point
{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#e31b23;

    box-shadow:
    0 0 0 5px rgba(215,25,32,.12),
    0 0 15px rgba(215,25,32,.45);

    animation:
    alignmentPulse 2.5s ease-in-out infinite;
}


.point-one
{
    top:27%;
    left:24%;
}


.point-two
{
    top:24%;
    right:22%;

    animation-delay:.5s;
}


.point-three
{
    bottom:25%;
    left:20%;

    animation-delay:1s;
}


.point-four
{
    bottom:27%;
    right:24%;

    animation-delay:1.5s;
}


/*==================================================
ETIQUETAS VISUALES
==================================================*/

.alignment-label
{
    position:absolute;

    display:flex;

    flex-direction:column;

    gap:2px;

    color:#fff;

    font-size:.54rem;

    letter-spacing:1px;

    text-transform:uppercase;
}


.alignment-label strong
{
    color:#fff;

    font-size:.61rem;
}


.alignment-label span
{
    color:#888;

    font-size:.49rem;
}


.label-top
{
    top:27px;
    left:29px;
}


.label-bottom
{
    right:29px;
    bottom:27px;

    text-align:right;
}


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

.alignment-content
{
    position:relative;

    width:100%;
}


/*==================================================
PREGUNTAS
==================================================*/

.alignment-question
{
    display:grid;

    grid-template-columns:
    38px
    1fr;

    gap:14px;

    margin:
    0 0 18px;

    padding:
    0 0 18px;

    border-bottom:
    1px solid #eeeeee;
}


.alignment-question:last-of-type
{
    margin-bottom:0;
}


/*==================================================
NÚMERO
==================================================*/

.alignment-number
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;
    height:34px;

    border-radius:9px;

    color:var(--primary);

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

    font-size:.63rem;

    font-weight:800;
}


/*==================================================
TÍTULOS SECUNDARIOS
==================================================*/

.alignment-question h2,
.alignment-question h3
{
    margin:0;

    padding:0;

    color:#151515;

    font-size:1.02rem;

    font-weight:800;

    line-height:1.3;
}


/*==================================================
TEXTOS
==================================================*/

.alignment-question p
{
    max-width:620px;

    margin:
    7px 0 0;

    padding:0;

    color:#707070;

    font-size:.75rem;

    line-height:1.62;

    text-align:justify;
}


/*==================================================
CTA
==================================================*/

.alignment-cta
{
    display:flex;

    align-items:center;

    gap:10px;

    width:max-content;

    max-width:100%;

    margin:
    20px 0 0;

    padding:
    8px 13px 8px 8px;

    color:#fff;

    background:#111;

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

    border-radius:12px;

    text-decoration:none;

    box-shadow:
    0 9px 23px rgba(0,0,0,.10);

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


.alignment-cta:hover
{
    color:#fff;

    transform:
    translateY(-3px);

    background:#181818;

    box-shadow:
    0 14px 28px rgba(0,0,0,.15);
}


/*==================================================
ICONO CTA
==================================================*/

.alignment-cta-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;
    height:34px;

    flex-shrink:0;

    border-radius:9px;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #25d366,
        #159447
    );
}


.alignment-cta-icon i
{
    font-size:.9rem;
}


.alignment-cta strong,
.alignment-cta small
{
    display:block;
}


.alignment-cta strong
{
    font-size:.67rem;

    font-weight:800;
}


.alignment-cta small
{
    margin-top:2px;

    color:#999;

    font-size:.54rem;
}


.alignment-cta > i
{
    margin-left:6px;

    color:#e31b23;

    font-size:.63rem;

    transition:
    transform .3s ease;
}


.alignment-cta:hover > i
{
    transform:
    translateX(4px);
}


/*==================================================
BENEFICIOS
==================================================*/

.alignment-benefits
{
    position:relative;

    width:100%;

    max-width:1100px;

    margin:
    42px auto 0;

    padding:0;
}


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

.alignment-benefits-heading
{
    position:relative;

    max-width:650px;

    margin:
    0 auto 25px;

    text-align:center;
}


.alignment-benefits-heading .alignment-kicker
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-bottom:8px;

    color:var(--primary);

    font-size:.62rem;

    font-weight:800;

    letter-spacing:1.6px;

    text-transform:uppercase;
}


.alignment-benefits-heading .alignment-kicker i
{
    font-size:.68rem;
}


/*==================================================
TÍTULO BENEFICIOS
==================================================*/

.alignment-benefits-heading h2
{
    margin:0;

    color:#151515;

    font-size:
    clamp(
        1.45rem,
        2.5vw,
        1.9rem
    );

    font-weight:850;

    line-height:1.15;

    letter-spacing:-.5px;
}


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

.alignment-benefits-grid
{
    display:grid;

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

    width:100%;

    border-top:
    1px solid #e9e9e9;

    border-bottom:
    1px solid #e9e9e9;
}


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

.alignment-benefit
{
    position:relative;

    display:flex;

    align-items:flex-start;

    gap:15px;

    min-width:0;

    padding:
    23px 25px;
}


.alignment-benefit:not(:last-child)
{
    border-right:
    1px solid #e9e9e9;
}


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

.alignment-benefit .benefit-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:43px;
    height:43px;

    min-width:43px;

    flex-shrink:0;

    margin-top:1px;

    border-radius:12px;

    color:var(--primary);

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

    border:
    1px solid rgba(215,25,32,.08);

    box-shadow:
    0 7px 18px rgba(215,25,32,.06);

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


.alignment-benefit .benefit-icon i
{
    font-size:.9rem;
}


/*==================================================
TÍTULO BENEFICIO
==================================================*/

.alignment-benefit h3
{
    margin:0;

    color:#171717;

    font-size:.82rem;

    font-weight:800;

    line-height:1.3;
}


/*==================================================
DESCRIPCIÓN
==================================================*/

.alignment-benefit p
{
    margin:
    6px 0 0;

    color:#747474;

    font-size:.67rem;

    line-height:1.55;

    text-align:justify;
}


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

.alignment-benefit:hover .benefit-icon
{
    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        #a90008
    );

    box-shadow:
    0 10px 24px rgba(215,25,32,.16);

    transform:
    translateY(-3px);
}


/*==================================================
ANIMACIONES
==================================================*/

@keyframes alignmentRotate
{
    from
    {
        transform:
        rotate(0deg);
    }

    to
    {
        transform:
        rotate(360deg);
    }
}


@keyframes alignmentGlow
{
    0%,
    100%
    {
        opacity:.65;

        transform:
        scale(.94);
    }

    50%
    {
        opacity:1;

        transform:
        scale(1.06);
    }
}


@keyframes alignmentPulse
{
    0%,
    100%
    {
        opacity:.55;

        transform:
        scale(.85);
    }

    50%
    {
        opacity:1;

        transform:
        scale(1.15);
    }
}


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

@media(max-width:900px)
{
    .alignment-main
    {
        grid-template-columns:
        1fr;

        gap:30px;
    }


    .alignment-visual
    {
        min-height:300px;
    }


    .alignment-benefits
    {
        max-width:720px;

        margin-top:35px;
    }


    .alignment-benefits-grid
    {
        grid-template-columns:
        1fr;
    }


    .alignment-benefit
    {
        padding:
        20px 22px;
    }


    .alignment-benefit:not(:last-child)
    {
        border-right:0;

        border-bottom:
        1px solid #e9e9e9;
    }
}


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

@media(max-width:576px)
{
    /*
    IMPORTANTE:
    No modificar padding de .alignment-section.
    La sección mantiene:
    padding:12px 0 28px;
    */


    .alignment-heading
    {
        margin:
        0 auto 22px;
    }


    .alignment-heading h1
    {
        font-size:
        clamp(
            1.65rem,
            8vw,
            2.2rem
        );

        letter-spacing:-.7px;
    }


    .alignment-heading p
    {
        margin-top:9px;

        padding:
        0 8px;

        font-size:.7rem;

        line-height:1.55;
    }


    .alignment-main
    {
        gap:20px;
    }


    .alignment-visual
    {
        min-height:260px;

        border-radius:17px;
    }


    .alignment-wheel
    {
        width:155px;
        height:155px;
    }


    .alignment-wheel-ring
    {
        inset:12px;
    }


    .alignment-wheel-inner
    {
        width:58px;
        height:58px;
    }


    .alignment-wheel-inner i
    {
        font-size:1.45rem;
    }


    .alignment-label
    {
        font-size:.48rem;
    }


    .alignment-label strong
    {
        font-size:.54rem;
    }


    .alignment-label span
    {
        font-size:.43rem;
    }


    .label-top
    {
        top:20px;
        left:20px;
    }


    .label-bottom
    {
        right:20px;
        bottom:20px;
    }


    .alignment-question
    {
        grid-template-columns:
        34px
        1fr;

        gap:10px;

        margin-bottom:15px;

        padding-bottom:15px;
    }


    .alignment-number
    {
        width:31px;
        height:31px;

        border-radius:8px;

        font-size:.58rem;
    }


    .alignment-question h2,
    .alignment-question h3
    {
        font-size:.86rem;
    }


    .alignment-question p
    {
        font-size:.66rem;

        line-height:1.55;
    }


    .alignment-cta
    {
        margin-top:16px;

        padding:
        7px 11px 7px 7px;

        border-radius:10px;
    }


    .alignment-cta-icon
    {
        width:31px;
        height:31px;

        border-radius:8px;
    }


    .alignment-cta strong
    {
        font-size:.61rem;
    }


    .alignment-cta small
    {
        font-size:.49rem;
    }


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

    .alignment-benefits
    {
        width:100%;

        margin-top:28px;
    }


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


    .alignment-benefits-heading .alignment-kicker
    {
        margin-bottom:6px;

        font-size:.56rem;

        letter-spacing:1.3px;
    }


    .alignment-benefits-heading .alignment-kicker i
    {
        font-size:.62rem;
    }


    .alignment-benefits-heading h2
    {
        font-size:
        clamp(
            1.25rem,
            6vw,
            1.55rem
        );

        line-height:1.18;

        letter-spacing:-.3px;
    }


    .alignment-benefits-grid
    {
        width:100%;
    }


    .alignment-benefit
    {
        align-items:flex-start;

        gap:12px;

        padding:
        16px 5px;
    }


    .alignment-benefit .benefit-icon
    {
        width:38px;
        height:38px;

        min-width:38px;

        border-radius:10px;
    }


    .alignment-benefit .benefit-icon i
    {
        font-size:.78rem;
    }


    .alignment-benefit h3
    {
        font-size:.76rem;

        line-height:1.3;
    }


    .alignment-benefit p
    {
        margin-top:5px;

        font-size:.63rem;

        line-height:1.5;
    }
}


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

@media(max-width:380px)
{
    /*
    IMPORTANTE:
    No modificar padding de .alignment-section.
    La sección mantiene:
    padding:12px 0 28px;
    */


    .alignment-benefits
    {
        margin-top:24px;
    }


    .alignment-benefits-heading
    {
        margin-bottom:15px;
    }


    .alignment-benefits-heading h2
    {
        font-size:1.18rem;
    }


    .alignment-benefit
    {
        gap:10px;

        padding:
        14px 3px;
    }


    .alignment-benefit .benefit-icon
    {
        width:35px;
        height:35px;

        min-width:35px;
    }


    .alignment-benefit h3
    {
        font-size:.72rem;
    }


    .alignment-benefit p
    {
        font-size:.60rem;

        line-height:1.45;
    }
}


/*==================================================
REDUCIR MOVIMIENTO
==================================================*/

@media(prefers-reduced-motion:reduce)
{
    .alignment-wheel-ring,
    .alignment-glow,
    .alignment-point
    {
        animation:none;
    }


    .alignment-benefit .benefit-icon,
    .alignment-cta,
    .alignment-cta > i
    {
        transition:none;
    }
}