/* =========================================================
   LOGOS ACADEMY
   FORMACIÓN PARA EMPRESAS

   Archivo:
   /css/formacion-empresas.css

   Base visual:
   - Morado Logos:   #220E7A
   - Turquesa:       #13E8A5
   - Azul profundo:  #110F37
========================================================= */


/* =========================================================
   VARIABLES LOCALES
========================================================= */

.business-training-page {

    --bt-purple: #220E7A;
    --bt-purple-dark: #18095A;
    --bt-purple-soft: #F3F0FC;

    --bt-turquoise: #13E8A5;
    --bt-turquoise-soft: #E9FCF6;

    --bt-navy: #110F37;
    --bt-ink: #18172A;

    --bt-text: #4E4C60;
    --bt-muted: #777487;

    --bt-white: #FFFFFF;
    --bt-bg: #F8F8FB;
    --bt-line: #E7E5ED;

    --bt-radius-sm: 14px;
    --bt-radius-md: 22px;
    --bt-radius-lg: 32px;

    --bt-shadow:
        0 18px 50px rgba(17, 15, 55, 0.08);

    --bt-shadow-soft:
        0 10px 30px rgba(17, 15, 55, 0.05);
}


/* =========================================================
   BASE
========================================================= */

.business-training-page {

    background:
        var(--bt-white);

    color:
        var(--bt-ink);
}


.business-training-page *,
.business-training-page *::before,
.business-training-page *::after {

    box-sizing:
        border-box;
}


.business-training-page main {

    overflow:
        hidden;
}


.business-training-page a {

    text-decoration:
        none;
}


/* =========================================================
   HERO
========================================================= */

.bt-hero {

    position:
        relative;

    padding:
        85px 0 88px;

    background:
        linear-gradient(
            135deg,
            #F8F7FC 0%,
            #FFFFFF 54%,
            #F0FCF8 100%
        );

    overflow:
        hidden;
}


/* Decoración sutil */

.bt-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        460px;

    height:
        460px;

    top:
        -230px;

    right:
        -120px;

    border:
        1px solid rgba(34, 14, 122, 0.08);

    border-radius:
        50%;
}





.bt-hero .academy-container {

    position:
        relative;

    z-index:
        2;
}


.bt-hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(320px, 0.7fr);

    gap:
        76px;

    align-items:
        center;
}


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

.bt-hero-content {

    max-width:
        780px;
}


.bt-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        24px;

    color:
        var(--bt-purple);

    font-size:
        0.6rem;

    font-weight:
        800;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;
}




.bt-hero h1 {

    max-width:
        760px;

    margin:
        0;

    color:
        var(--bt-purple);

    font-size:
       4.6rem;

    line-height:
        0.98;

    letter-spacing:
        -0.055em;

    font-weight:
        800;
}


.bt-hero h1 strong {

    display:
        block;

    margin-top:
        8px;

    color:
        var(--bt-turquoise);

    font-weight:
        800;
}


.bt-hero-lead {

    max-width:
        650px;

    margin:
        34px 0 0;

    color:
        var(--bt-text);

    font-size:
        1.15rem;

    line-height:
        1.75;
}


/* =========================================================
   HERO ACCIONES
========================================================= */

.bt-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        38px;
}


.bt-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        52px;

    padding:
        13px 22px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        0.94rem;

    font-weight:
        800;

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


.bt-btn:hover {

    transform:
        translateY(-2px);
}


.bt-btn-primary {

    background:
        var(--bt-purple);

    color:
        var(--bt-white);

    box-shadow:
        0 12px 30px rgba(34, 14, 122, 0.16);
}


.bt-btn-primary:hover {

    background:
        var(--bt-purple-dark);

    color:
        var(--bt-white);

    box-shadow:
        0 16px 34px rgba(34, 14, 122, 0.22);
}


.bt-btn-secondary {

    border-color:
        var(--bt-line);

    background:
        rgba(255, 255, 255, 0.8);

    color:
        var(--bt-navy);
}


.bt-btn-secondary:hover {

    border-color:
        rgba(34, 14, 122, 0.25);

    background:
        var(--bt-white);

    color:
        var(--bt-purple);
}


/* =========================================================
   HERO NOTA
========================================================= */

.bt-hero-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    max-width:
        520px;

    margin-top:
        38px;
}


.bt-hero-note span {

    flex:
        0 0 auto;

    width:
        38px;

    height:
        2px;

    margin-top:
        11px;

    background:
        var(--bt-turquoise);
}


.bt-hero-note p {

    margin:
        0;

    color:
        var(--bt-muted);

    font-size:
        0.9rem;

    line-height:
        1.6;
}


/* =========================================================
   HERO LATERAL
========================================================= */

.bt-hero-side {

    position:
        relative;

    padding:
        36px;

    border:
        1px solid rgba(34, 14, 122, 0.08);

    border-radius:
        var(--bt-radius-lg);

    background:
        rgba(255, 255, 255, 0.82);

    box-shadow:
        var(--bt-shadow);

    backdrop-filter:
        blur(10px);
}


.bt-side-label {

    display:
        block;

    margin-bottom:
        26px;

    color:
        var(--bt-purple);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.bt-hero-side > p {

    margin:
        0 0 15px;

    color:
        var(--bt-text);

    font-size:
        1rem;

    line-height:
        1.7;
}


.bt-hero-side > p:first-of-type {

    color:
        var(--bt-navy);

    font-size:
        1.16rem;

    font-weight:
        800;
}


/* =========================================================
   HERO RUTA
========================================================= */

.bt-side-path {

    margin-top:
        30px;

    padding-top:
        25px;

    border-top:
        1px solid var(--bt-line);
}


.bt-side-path > div {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        34px 1fr;

    gap:
        14px;

    align-items:
        center;

    min-height:
        52px;
}


.bt-side-path > div:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    left:
        16px;

    top:
        38px;

    width:
        1px;

    height:
        28px;

    background:
        var(--bt-line);
}


.bt-side-path span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border-radius:
        50%;

    background:
        var(--bt-turquoise-soft);

    color:
        var(--bt-purple);

    font-size:
        0.7rem;

    font-weight:
        900;
}


.bt-side-path p {

    margin:
        0;

    color:
        var(--bt-ink);

    font-size:
        0.9rem;

    font-weight:
        700;
}


/* =========================================================
   ÍNDICE DE SECCIÓN
========================================================= */

.bt-section-index {

    color:
        var(--bt-purple);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


/* =========================================================
   CONTEXTO / PROBLEMA
========================================================= */

.bt-context {

    padding:
        108px 0;

    background:
        var(--bt-white);
}


.bt-context-grid {

    display:
        grid;

    grid-template-columns:
        minmax(180px, 0.32fr)
        minmax(0, 1fr);

    gap:
        70px;
}


.bt-context-content {

    max-width:
        830px;
}


.bt-context-content h2 {

    margin:
        0 0 34px;

    color:
        var(--bt-navy);

    font-size:
        clamp(
            2.2rem,
            4vw,
            4.2rem
        );

    line-height:
        1.06;

    letter-spacing:
        -0.045em;

    font-weight:
        500;
}


.bt-context-content h2 strong {

    color:
        var(--bt-purple);

    font-weight:
        800;
}


.bt-context-content > p {

    max-width:
        700px;

    margin:
        0 0 20px;

    color:
        var(--bt-text);

    font-size:
        1.05rem;

    line-height:
        1.8;
}


.bt-context-content .bt-context-strong {

    position:
        relative;

    margin-top:
        38px;

    padding:
        24px 28px 24px 32px;

    border-left:
        4px solid var(--bt-turquoise);

    background:
        var(--bt-bg);

    color:
        var(--bt-navy);

    font-size:
        1.08rem;

    font-weight:
        800;
}


/* =========================================================
   ENCABEZADOS GENERALES
========================================================= */

.bt-section-heading {

    max-width:
        850px;

    margin-bottom:
        56px;
}


.bt-section-heading > span {

    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--bt-purple);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.bt-section-heading h2 {

    margin:
        0;

    color:
        var(--bt-navy);

    font-size:
        clamp(
            2.3rem,
            4vw,
            4.3rem
        );

    line-height:
        1.04;

    letter-spacing:
        -0.045em;

    font-weight:
        500;
}


.bt-section-heading h2 strong {

    color:
        var(--bt-purple);

    font-weight:
        800;
}


.bt-section-heading > p {

    max-width:
        650px;

    margin:
        25px 0 0;

    color:
        var(--bt-text);

    font-size:
        1.02rem;

    line-height:
        1.75;
}


/* =========================================================
   PROCESO
========================================================= */

.bt-process {

    padding:
        108px 0;

    background:
        var(--bt-bg);
}


.bt-process-grid {

    display:
        grid;

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

    border-top:
        1px solid var(--bt-line);

    border-left:
        1px solid var(--bt-line);
}


.bt-process-item {

    display:
        grid;

    grid-template-columns:
        54px 1fr;

    gap:
        22px;

    min-height:
        230px;

    padding:
        38px;

    border-right:
        1px solid var(--bt-line);

    border-bottom:
        1px solid var(--bt-line);

    background:
        var(--bt-white);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.bt-process-item:hover {

    position:
        relative;

    z-index:
        2;

    transform:
        translateY(-3px);

    box-shadow:
        var(--bt-shadow-soft);
}


.bt-process-number {

    color:
        var(--bt-purple);

    font-size:
        0.78rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.bt-process-item h3 {

    margin:
        0 0 15px;

    color:
        var(--bt-navy);

    font-size:
        1.35rem;

    font-weight:
        800;
}


.bt-process-item p {

    margin:
        0;

    color:
        var(--bt-text);

    font-size:
        0.96rem;

    line-height:
        1.72;
}


/* =========================================================
   ÁREAS
========================================================= */

.bt-areas {

    position:
        relative;

    padding:
        112px 0;

    background:
        var(--bt-navy);

    color:
        var(--bt-white);

    overflow:
        hidden;
}


.bt-areas::after {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -190px;

    bottom:
        -240px;

    border:
        1px solid rgba(19, 232, 165, 0.2);

    border-radius:
        50%;
}


.bt-section-heading-light {

    position:
        relative;

    z-index:
        2;
}


.bt-section-heading-light > span {

    color:
        var(--bt-turquoise);
}


.bt-section-heading-light h2 {

    color:
        var(--bt-white);
}


.bt-section-heading-light h2 strong {

    color:
        var(--bt-turquoise);
}


.bt-section-heading-light > p {

    color:
        rgba(255, 255, 255, 0.7);
}


.bt-areas-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        1px;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid rgba(255, 255, 255, 0.12);
}


.bt-area-card {

    min-height:
        285px;

    padding:
        34px;

    background:
        var(--bt-navy);

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


.bt-area-card:hover {

    position:
        relative;

    z-index:
        2;

    background:
        #171445;

    transform:
        translateY(-2px);
}


.bt-area-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        52px;
}


.bt-area-number {

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

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;
}


.bt-area-top i {

    color:
        var(--bt-turquoise);

    font-size:
        1.45rem;
}


.bt-area-card h3 {

    margin:
        0 0 14px;

    color:
        var(--bt-white);

    font-size:
        1.3rem;

    font-weight:
        800;
}


.bt-area-card p {

    margin:
        0;

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

    font-size:
        0.92rem;

    line-height:
        1.7;
}


/* =========================================================
   ÁREAS CTA
========================================================= */

.bt-areas-action {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        42px;

    padding-top:
        34px;

    border-top:
        1px solid rgba(255, 255, 255, 0.14);
}


.bt-areas-action p {

    margin:
        0;

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

    font-size:
        0.98rem;
}


.bt-areas-action a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--bt-turquoise);

    font-size:
        0.92rem;

    font-weight:
        800;
}


.bt-areas-action a:hover {

    color:
        var(--bt-white);
}


/* =========================================================
   DIFERENCIA
========================================================= */

.bt-difference {

    padding:
        112px 0;

    background:
        var(--bt-white);
}


.bt-difference-grid {

    display:
        grid;

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

    gap:
        90px;
}


.bt-difference h2 {

    max-width:
        540px;

    margin:
        24px 0 0;

    color:
        var(--bt-navy);

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.5rem
        );

    line-height:
        1.04;

    letter-spacing:
        -0.045em;

    font-weight:
        700;
}


.bt-difference-lead {

    max-width:
        620px;

    margin:
        0 0 40px;

    color:
        var(--bt-purple);

    font-size:
        1.4rem;

    line-height:
        1.55;

    font-weight:
        800;
}


.bt-difference-list {

    border-top:
        1px solid var(--bt-line);
}


.bt-difference-list > div {

    display:
        grid;

    grid-template-columns:
        50px 1fr;

    gap:
        20px;

    padding:
        22px 0;

    border-bottom:
        1px solid var(--bt-line);
}


.bt-difference-list span {

    color:
        var(--bt-purple);

    font-size:
        0.72rem;

    font-weight:
        900;
}


.bt-difference-list p {

    margin:
        0;

    color:
        var(--bt-text);

    line-height:
        1.65;
}


/* =========================================================
   OPCIONES
========================================================= */

.bt-options {

    padding:
        108px 0;

    background:
        var(--bt-bg);
}


.bt-options-grid {

    display:
        grid;

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

    gap:
        24px;
}


.bt-option {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        350px;

    padding:
        42px;

    border:
        1px solid var(--bt-line);

    border-radius:
        var(--bt-radius-md);

    background:
        var(--bt-white);

    box-shadow:
        var(--bt-shadow-soft);
}


.bt-option > span {

    margin-bottom:
        44px;

    color:
        var(--bt-purple);

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.bt-option h3 {

    margin:
        0 0 18px;

    color:
        var(--bt-navy);

    font-size:
        1.8rem;

    font-weight:
        800;

    letter-spacing:
        -0.025em;
}


.bt-option p {

    max-width:
        520px;

    margin:
        0 0 30px;

    color:
        var(--bt-text);

    line-height:
        1.75;
}


.bt-option a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        auto;

    color:
        var(--bt-purple);

    font-weight:
        800;
}


.bt-option a:hover {

    color:
        var(--bt-navy);
}


.bt-option-featured {

    border-color:
        var(--bt-purple);

    background:
        var(--bt-purple);

    box-shadow:
        0 20px 50px rgba(34, 14, 122, 0.18);
}


.bt-option-featured > span {

    color:
        var(--bt-turquoise);
}


.bt-option-featured h3 {

    color:
        var(--bt-white);
}


.bt-option-featured p {

    color:
        rgba(255, 255, 255, 0.72);
}


.bt-option-featured a {

    color:
        var(--bt-turquoise);
}


.bt-option-featured a:hover {

    color:
        var(--bt-white);
}


/* =========================================================
   EXPERIENCIA
========================================================= */

.bt-experience {

    padding:
        110px 0;

    background:
        var(--bt-purple);

    color:
        var(--bt-white);
}


.bt-experience-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        90px;
}


.bt-experience-title > span {

    display:
        block;

    margin-bottom:
        24px;

    color:
        var(--bt-turquoise);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.bt-experience-title h2 {

    max-width:
        560px;

    margin:
        0;

    color:
        var(--bt-white);

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.4rem
        );

    line-height:
        1.04;

    letter-spacing:
        -0.045em;

    font-weight:
        500;
}


.bt-experience-title h2 strong {

    display:
        block;

    color:
        var(--bt-turquoise);

    font-weight:
        800;
}


.bt-experience-content > p {

    max-width:
        650px;

    margin:
        0;

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

    font-size:
        1.05rem;

    line-height:
        1.8;
}


/* =========================================================
   EXPERIENCIA RECORRIDO
========================================================= */

.bt-experience-path {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        44px;

    padding:
        25px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.16);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16);
}


.bt-experience-path span {

    color:
        var(--bt-white);

    font-size:
        0.9rem;

    font-weight:
        800;
}


.bt-experience-path i {

    color:
        var(--bt-turquoise);

    font-size:
        0.8rem;
}


.bt-experience-result {

    display:
        block;

    max-width:
        600px;

    margin-top:
        32px;

    color:
        var(--bt-turquoise);

    font-size:
        1.22rem;

    line-height:
        1.5;
}


/* =========================================================
   PARA QUIÉN
========================================================= */

.bt-fit {

    padding:
        112px 0;

    background:
        var(--bt-white);
}


.bt-fit-heading {

    display:
        grid;

    grid-template-columns:
        minmax(180px, 0.32fr)
        minmax(0, 1fr);

    gap:
        70px;

    margin-bottom:
        62px;
}


.bt-fit-heading h2 {

    max-width:
        760px;

    margin:
        0;

    color:
        var(--bt-navy);

    font-size:
        clamp(
            2.3rem,
            4vw,
            4.2rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.045em;

    font-weight:
        500;
}


.bt-fit-heading h2 strong {

    color:
        var(--bt-purple);

    font-weight:
        800;
}


.bt-fit-list {

    display:
        grid;

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

    border-top:
        1px solid var(--bt-line);

    border-left:
        1px solid var(--bt-line);
}


.bt-fit-list article {

    display:
        grid;

    grid-template-columns:
        48px 1fr;

    gap:
        20px;

    min-height:
        150px;

    padding:
        30px;

    border-right:
        1px solid var(--bt-line);

    border-bottom:
        1px solid var(--bt-line);
}


.bt-fit-list span {

    color:
        var(--bt-purple);

    font-size:
        0.72rem;

    font-weight:
        900;
}


.bt-fit-list p {

    max-width:
        470px;

    margin:
        0;

    color:
        var(--bt-text);

    line-height:
        1.7;
}


/* =========================================================
   FAQ
========================================================= */

.bt-faq {

    padding:
        110px 0;

    background:
        var(--bt-bg);
}


.bt-faq-list {

    max-width:
        900px;

    border-top:
        1px solid var(--bt-line);
}


.bt-faq-item {

    border-bottom:
        1px solid var(--bt-line);
}


.bt-faq-item summary {

    display:
        grid;

    grid-template-columns:
        46px 1fr 30px;

    gap:
        18px;

    align-items:
        center;

    padding:
        25px 0;

    cursor:
        pointer;

    list-style:
        none;
}


.bt-faq-item summary::-webkit-details-marker {

    display:
        none;
}


.bt-faq-item summary > span {

    color:
        var(--bt-purple);

    font-size:
        0.72rem;

    font-weight:
        900;
}


.bt-faq-item summary strong {

    color:
        var(--bt-navy);

    font-size:
        1rem;

    line-height:
        1.45;
}


.bt-faq-item summary i {

    color:
        var(--bt-purple);

    font-size:
        1rem;

    transition:
        transform 0.2s ease;
}


.bt-faq-item[open] summary i {

    transform:
        rotate(45deg);
}


.bt-faq-answer {

    padding:
        0 48px 28px 64px;
}


.bt-faq-answer p {

    max-width:
        700px;

    margin:
        0;

    color:
        var(--bt-text);

    line-height:
        1.75;
}


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

.bt-final {

    position:
        relative;

    padding:
        108px 0;

    background:
        var(--bt-white);

    color:
        var(--bt-navy);

    overflow:
        hidden;
}


.bt-final::after {

    content:
        "";

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    right:
        -180px;

    top:
        -190px;

    border:
        1px solid rgba(19, 232, 165, 0.18);

    border-radius:
        50%;
}


.bt-final-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.65fr);

    gap:
        90px;

    align-items:
        center;
}


.bt-final-eyebrow {

    display:
        block;

    margin-bottom:
        22px;

    color:
        var(--bt-navy);

    font-size:
        0.6rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.bt-final h2 {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--bt-purple);

    font-size:
    4.2rem;
       

    line-height:
        1;

    letter-spacing:
        -0.05em;

    font-weight:
        800;
}


.bt-final h2 strong {

    display:
        block;

    color:
        var(--bt-turquoise);

    font-weight:
        800;
}


.bt-final-content p {

    max-width:
        520px;

    margin:
        0 0 30px;

    color:
       var(--bt-navy);

    font-size:
        1rem;

    line-height:
        1.8;
}


.bt-final-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    min-height:
        54px;

    padding:
        14px 24px;

    border-radius:
        999px;

    background:
        var(--bt-turquoise);

    color:
        var(--bt-navy);

    font-weight:
        900;

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


.bt-final-btn:hover {

    transform:
        translateY(-2px);

    background:
        var(--bt-white);

    color:
        var(--bt-navy);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.14);
}


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

.bt-btn:focus-visible,
.bt-option a:focus-visible,
.bt-areas-action a:focus-visible,
.bt-final-btn:focus-visible,
.bt-faq-item summary:focus-visible {

    outline:
        3px solid var(--bt-turquoise);

    outline-offset:
        4px;
}


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

@media (max-width: 1050px) {

    .bt-hero {

        padding:
            76px 0;
    }


    .bt-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .bt-hero-content {

        max-width:
            850px;
    }


    .bt-hero-side {

        max-width:
            680px;
    }


    .bt-context-grid,
    .bt-fit-heading {

        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .bt-difference-grid,
    .bt-experience-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .bt-areas-grid {

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


    .bt-final-grid {

        grid-template-columns:
            1fr;

        gap:
            48px;
    }


    .bt-final-content {

        max-width:
            650px;
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 780px) {

    .bt-context,
    .bt-process,
    .bt-areas,
    .bt-difference,
    .bt-options,
    .bt-experience,
    .bt-fit,
    .bt-faq,
    .bt-final {

        padding:
            82px 0;
    }


    .bt-process-grid,
    .bt-options-grid,
    .bt-fit-list {

        grid-template-columns:
            1fr;
    }


    .bt-process-item {

        min-height:
            auto;
    }


    .bt-areas-grid {

        grid-template-columns:
            1fr;
    }


    .bt-area-card {

        min-height:
            auto;
    }


    .bt-area-top {

        margin-bottom:
            34px;
    }


    .bt-areas-action {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


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

@media (max-width: 600px) {

    .bt-hero {

        padding:
            58px 0 64px;
    }


    .bt-hero-grid {

        gap:
            38px;
    }


    .bt-eyebrow {

        margin-bottom:
            18px;

        font-size:
            0.7rem;
    }


    .bt-hero h1 {

        font-size:
            clamp(
                2.65rem,
                13vw,
                4rem
            );

        line-height:
            1;
    }


    .bt-hero-lead {

        margin-top:
            25px;

        font-size:
            1rem;

        line-height:
            1.7;
    }


    .bt-hero-actions {

        align-items:
            stretch;

        flex-direction:
            column;

        margin-top:
            30px;
    }


    .bt-btn {

        width:
            100%;
    }


    .bt-hero-note {

        margin-top:
            28px;
    }


    .bt-hero-side {

        padding:
            28px 24px;

        border-radius:
            22px;
    }


    /* -----------------------------------------------------
       SECCIONES
    ----------------------------------------------------- */

    .bt-context,
    .bt-process,
    .bt-areas,
    .bt-difference,
    .bt-options,
    .bt-experience,
    .bt-fit,
    .bt-faq,
    .bt-final {

        padding:
            68px 0;
    }


    .bt-context-content h2,
    .bt-section-heading h2,
    .bt-difference h2,
    .bt-experience-title h2,
    .bt-fit-heading h2 {

        font-size:
            clamp(
                2.1rem,
                10vw,
                3rem
            );
    }


    .bt-section-heading {

        margin-bottom:
            40px;
    }


    /* -----------------------------------------------------
       PROCESO
    ----------------------------------------------------- */

    .bt-process-item {

        grid-template-columns:
            40px 1fr;

        gap:
            14px;

        padding:
            28px 22px;
    }


    /* -----------------------------------------------------
       ÁREAS
    ----------------------------------------------------- */

    .bt-area-card {

        padding:
            28px 24px;
    }


    /* -----------------------------------------------------
       DIFERENCIA
    ----------------------------------------------------- */

    .bt-difference-grid {

        gap:
            38px;
    }


    .bt-difference-lead {

        font-size:
            1.2rem;
    }


    .bt-difference-list > div {

        grid-template-columns:
            38px 1fr;

        gap:
            12px;
    }


    /* -----------------------------------------------------
       OPCIONES
    ----------------------------------------------------- */

    .bt-option {

        min-height:
            auto;

        padding:
            30px 24px;
    }


    .bt-option > span {

        margin-bottom:
            30px;
    }


    .bt-option h3 {

        font-size:
            1.55rem;
    }


    /* -----------------------------------------------------
       EXPERIENCIA
    ----------------------------------------------------- */

    .bt-experience-grid {

        gap:
            38px;
    }


    .bt-experience-path {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }


    .bt-experience-path i {

        transform:
            rotate(90deg);

        margin-left:
            4px;
    }


    /* -----------------------------------------------------
       FIT
    ----------------------------------------------------- */

    .bt-fit-list article {

        grid-template-columns:
            38px 1fr;

        gap:
            12px;

        min-height:
            auto;

        padding:
            26px 22px;
    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .bt-faq-item summary {

        grid-template-columns:
            32px 1fr 22px;

        gap:
            10px;

        padding:
            22px 0;
    }


    .bt-faq-answer {

        padding:
            0 28px 24px 42px;
    }


    /* -----------------------------------------------------
       FINAL
    ----------------------------------------------------- */

    .bt-final-grid {

        gap:
            36px;
    }


    .bt-final h2 {

        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }


    .bt-final-btn {

        width:
            100%;
    }

}


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

@media (max-width: 380px) {

    .bt-hero-side {

        padding:
            24px 20px;
    }


    .bt-process-item,
    .bt-area-card,
    .bt-option,
    .bt-fit-list article {

        padding-left:
            20px;

        padding-right:
            20px;
    }

}


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

@media (prefers-reduced-motion: reduce) {

    .bt-btn,
    .bt-process-item,
    .bt-area-card,
    .bt-final-btn,
    .bt-faq-item summary i {

        transition:
            none;
    }


    .bt-btn:hover,
    .bt-process-item:hover,
    .bt-area-card:hover,
    .bt-final-btn:hover {

        transform:
            none;
    }

}