/* Contenedor principal de la sección */
.ta-hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rem 4rem;
    max-width: 1200px;
    margin: auto;
    gap: 40px;
    flex-wrap: wrap;
}

/* Contenido de texto a la izquierda */
.ta-hero-content {
    flex: 1;
    max-width: 500px;
}

/* Título principal */
.ta-title {
    font-size: 3.7em;
    color: #2C6CF5;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Subtítulo */
.ta-subtitle {
    font-size: 1.1em;
    color: #000;
    margin-bottom: 30px;
}

/* Lista de pasos */
.ta-steps {
    list-style-type: none;
    padding-left: 0;
    counter-reset: step-counter;
    margin-top: 20px;
}

/* Elemento de la lista de pasos */
.ta-step-item {
    font-size: 1em;
    color: #555;
    position: relative;
    padding-left: 35px;
}

    /* Pseudoelemento para el número personalizado */
    .ta-step-item::before {
        counter-increment: step-counter;
        content: counter(step-counter) ".";
        font-weight: bold;
        color: #005ce6;
        position: absolute;
        left: 0;
        font-size: 1.2em;
    }

    /* Enlace dentro de la lista */
    .ta-step-item .ta-link {
        color: #005ce6;
        text-decoration: none;
        font-weight: bold;
    }

        .ta-step-item .ta-link:hover {
            text-decoration: underline;
        }

/* Contenedor de la imagen a la derecha */
.ta-hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
}

/* Imagen de las tarjetas */
.ta-card-image {
    max-width: 100%;
    height: auto;
    transform: rotate(10deg);
}

/* Media Query para pantallas más pequeñas (responsivo) */
@media (max-width: 769px) {
    .ta-hero-section {
        flex-direction: column;
        padding: 120px 20px;
    }

    .ta-title {
        font-size: 3em;
    }

    .ta-step-item {
        text-align: left;
    }

    .ta-hero-image {
        margin-top: -20px;
    }

    .ta-card-image {
        max-width: 80%;
        height: auto;
        transform: rotate(10deg);
    }
}

@media (max-width: 426px) {
    .ta-hero-section {
        padding: 120px 20px;
    }

    .ta-title {
        font-size: 2em;
    }

    .ta-subtitle {
        font-size: 0.9em;
    }

    .ta-step-item {
        text-align: left;
    }

    .ta-hero-image {
        margin-top: -20px;
    }

    .ta-card-image {
        max-width: 100%;
    }
}

@media (max-width: 330px) {
    .ta-hero-section {
        text-align: left;
        padding: 120px 0;
    }

    .ta-hero-content {
        max-width: 270px;
    }
}

/* Sección 2  */

/* Sección principal con fondo azul */
.ta-2-glory-section {
    background-color: #1a3a8a;
    padding: 2rem 0;
}

/* Contenedor principal con ancho máximo y contexto de posición */
.ta-2-container {
    max-width: 1200px;
    width: 92%;
    margin: 0 auto;
    position: relative;
    min-height: 40rem;
    display: flex;
    align-items: flex-start;
    padding-top: 2rem;
}

/* Imagen de fondo con posicionamiento absoluto */
.ta-2-background-image {
    position: absolute;
    width: 80%;
    height: 80%;
    object-fit: contain;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Contenido del texto superpuesto */
.ta-2-text-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

/* Título principal */
.ta-2-title {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Subtítulo */
.ta-2-subtitle {
    font-size: 1.8rem;
    line-height: 1.5;
    margin-top: 1rem;
    font-weight: 400;
}

.ta-2-highlight {
    font-weight: 500;
}

/* Span para controlar saltos de línea (por defecto no hace nada) */
.ta-2-linebreak {
    display: inline-block;
}

/* --- Media Queries para pantallas más grandes (Responsivo) --- */
@media (max-width: 768px) {
    .ta-2-container {
        min-height: auto;
        padding-bottom: 2rem;
        flex-direction: column;
        align-items: center;
        padding-top: 2rem;
    }

    .ta-2-text-content {
        position: static;
        text-align: center;
        width: 100%;
        margin-bottom: 2rem;
    }

    .ta-2-background-image {
        width: 70%;
        height: auto;
        position: static;
        transform: none;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .ta-2-linebreak {
        display: block;
    }
}

/* Sección 3 */

/* -- Contenedores Principales -- */
.ta-3-steps-section {
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.ta-3-container {
    max-width: 1200px;
    width: 92%;
    margin: 4rem 0;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.ta-3-top-button-wrapper {
    display: flex;
    justify-content: center;
}

/* -- Contenido y Layout de Columnas -- */
.ta-3-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.ta-3-text-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* -- Estilos de Texto -- */
.ta-3-main-title {
    color: #2C6CF5;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.ta-3-description {
    color: var(--ta-3-gray-text);
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0;
}

/* -- Botones (Estilo unificado) -- */
.ta-3-button {
    border-radius: 9999px;
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
}

.ta-3-button-primary {
    background-color: #2C6CF5;
    color: white;
    font-weight: 400;
}

    .ta-3-button-primary:hover {
        background-color: #1d4ed8;
    }

/* -- Grid de Pasos -- */
.ta-3-grid-column {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

.ta-3-step-card {
    background-color: #ececec;
    padding: 2rem 2rem;
    border-radius: 1.6rem;
    transition: all 0.3s ease;
}

    .ta-3-step-card:hover {
        background-color: #ffffff;
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }

.ta-3-step-number {
    color: #2C6CF5;
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
}

.ta-3-step-title {
    color: #111827;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1.2rem 0 0 0;
}

.ta-3-step-description {
    color: #4C5267;
    font-size: 1.2rem;
    margin: 2rem 0 0 0;
}

/* -- Media Queries para Responsividad -- */
@media (min-width: 768px) {
    .ta-3-container {
        margin: 5.2rem 0;
        gap: 4.2rem;
    }

    .ta-3-button {
        font-size: 1.1rem;
    }

    .ta-3-main-title {
        font-size: 4rem;
    }

    .ta-3-grid-column {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.8rem;
    }
}

@media (min-width: 1024px) {
    .ta-3-content-wrapper {
        flex-direction: row;
        gap: 3rem;
        align-items: flex-start;
    }

    /* Anchos de columna ajustados */
    .ta-3-text-column {
        flex: 0 1 42%;
    }

    .ta-3-grid-column {
        flex: 1;
    }
}

/* Sección 4 */

/* -- Contenedores Principales -- */
.ta-4-benefits-section {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    display: flex;
    justify-content: center;
    padding: 6rem 0;
}

.ta-4-container {
    max-width: 1200px;
    width: 92%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* -- Encabezado -- */
.ta-4-header {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ta-4-main-title {
    color: #2C6CF5;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.ta-4-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
}

.ta-4-linebreak {
    display: inline-block;
}

/* -- Contenido y Layout de 3 Columnas -- */
.ta-4-content-wrapper {
    display: flex;
    flex-direction: column;
}

.ta-4-column {
    width: 100%;
}

.ta-4-column-left,
.ta-4-column-right .ta-4-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ta-4-column-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* -- Imagen Central (Comportamiento Especial) -- */
.ta-4-column-center {
    position: relative;
    height: 100vw;
    margin: 2rem 0;
}

.ta-4-center-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* -- Elementos de Beneficios -- */
.ta-4-benefit-item {
    display: flex;
    flex-direction: column;
}

.ta-4-benefit-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.ta-4-benefit-description {
    font-size: 1rem;
    color: #737476;
    line-height: 1.6;
    margin: 0.5rem 0 0 0;
}

.ta-4-italic-subtitle {
    font-size: 1.5rem;
    font-style: italic;
    margin: 0;
}

/* -- Media Queries para Responsividad -- */
@media (min-width: 768px) {
    .ta-4-main-title {
        font-size: 4rem;
    }

    .ta-4-subtitle {
        font-size: 1.3rem;
    }

    .ta-4-linebreak {
        display: block;
    }

    .ta-4-benefit-title {
        font-size: 1.8rem;
    }

    .ta-4-benefit-description {
        font-size: 1.2rem;
    }

    .ta-4-italic-subtitle {
        font-size: 1.6rem;
    }
}

@media (min-width: 1024px) {

    .ta-4-benefits-section {
        padding: 8rem 0;
    }

    .ta-4-container {
        gap: 6rem;
    }

    .ta-4-content-wrapper {
        flex-direction: row;
        justify-content: space-between;
    }

    .ta-4-column-left {
        width: 34%;
        order: 1;
    }

    .ta-4-column-center {
        width: 32%;
        order: 2;
        height: auto;
        margin: 0;
    }

    .ta-4-column-left,
    .ta-4-column-right .ta-4-benefits-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .ta-4-center-image {
        padding: 20px;
        object-fit: cover;
    }

    .ta-4-column-right {
        width: 34%;
        order: 3;
        gap: 4rem;
    }

    .ta-4-benefit-title {
        font-size: 1.3rem;
    }

    .ta-4-benefit-description {
        font-size: 1rem;
    }

    .ta-4-italic-subtitle {
        font-size: 1.5rem;
    }
}

@media (min-width: 1440px) {

    .ta-4-benefit-title {
        font-size: 1.8rem;
    }

    .ta-4-benefit-description {
        font-size: 1.3rem;
    }

    .ta-4-italic-subtitle {
        font-size: 2rem;
    }

    .ta-4-column-left,
    .ta-4-column-right .ta-4-benefits-list {
        gap: 0;
    }
}

@media (max-width: 2560px) {

    .ta-4-benefit-title {
        font-size: 1.4rem;
    }

    .ta-4-benefit-description {
        font-size: 1rem;
    }

    .ta-4-italic-subtitle {
        font-size: 1.5rem;
    }

    .ta-4-column-left,
    .ta-4-column-right .ta-4-benefits-list {
        gap: 0;
    }
}

/* Sección 5 */

/* -- Contenedores Principales -- */
.ta-5-app-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ta-5-container {
    max-width: 1200px;
    width: 92%;
    margin: 6rem auto;
    position: relative; /* CLAVE: Contexto para la imagen absoluta */
}

/* -- Imagen Flotante -- */
.ta-5-floating-image {
    display: none;
    position: absolute;
    z-index: 2; /* Se asegura que la imagen esté sobre la caja azul */
    /* Posición en móvil */
    left: -2rem;
    top: -4rem;
}

    .ta-5-floating-image img {
        height: 40rem;
        width: auto;
    }

/* -- Caja de Contenido -- */
.ta-5-content-box {
    background-color: #1e4495;
    color: #ffffff;
    border-radius: 2.4rem;
    position: relative;
    z-index: 1; /* La caja está debajo de la imagen */

    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Estilos para móvil */
    align-items: flex-start; /* Alinea a la izquierda */
    padding: 3rem 1.5rem;
}

    .ta-5-content-box svg {
        display: none;
    }

    .ta-5-content-box a {
        display: inline-block; /* O 'block' si quieres que ocupe todo el ancho */
    }

.ta-5-title {
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    width: 100%; /* Asegura que ocupe el espacio para alinear el texto */
    /* Tamaño de fuente en móvil */
    font-size: 2.5rem;
    text-align: left;
}

.ta-5-linebreak {
    display: inline-block;
}


/* -- Media Queries para Responsividad -- */

@media (min-width: 768px) { /* md: */
    .ta-5-container {
        margin: 10rem auto;
    }

    .ta-5-content-box {
        align-items: flex-end; /* Alinea a la derecha */
        gap: 2rem;
        padding: 6rem 5.4rem;
    }
        .ta-5-content-box a {
            display: none;
        }

        .ta-5-content-box svg {
            display: block;
        }

    .ta-5-title {
        font-size: 2.8rem;
        text-align: right;
    }

    .ta-5-floating-image {
        /* Nueva posición en escritorio */
        display: block;
        top: 0;
        left: 0;
    }

        .ta-5-floating-image img {
            height: 25rem; /* Imagen más grande */
        }

    .ta-5-linebreak {
        display: block; /* Salto de línea */
    }
}

@media (min-width: 1024px) { /* lg: */
    .ta-5-container {
        margin: 20rem auto;
    }

    .ta-5-floating-image {
        /* Nueva posición en escritorio */
        top: -5rem;
        left: -4rem;
    }

        .ta-5-floating-image img {
            height: 40rem; /* Imagen más grande */
        }

    .ta-5-content-box {
        padding: 3rem 7rem 7rem 7rem;
    }

    .ta-5-title {
        font-size: 3.8rem;
    }
}