* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #EFEEEC;
    --primary-text: #002D54;
    --secondary-text: #D2AB66;
    --text-white: #FFFFFF;
    --how-works: #002D54D9;
    --button1: #002748;
    --gold-nomina: #b5965e;
    --dark-blue-nomina: #162c44;
    --overlay-nomina: rgb(22 44 68);
    --card-bg-nomina: rgba(255, 255, 255, 0.1);
    --card-gray: #6b778d; /* Color de las tarjetas de la derecha */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    padding: 24px 80px;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 96px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

}

nav {
    width: 100%;
    height: 48px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.logo-nav {
    display: flex;
    justify-content: start;
    height: 35px;
    width: 245px;
}

.nav-links {
    display: flex;
    height: 48px;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--primary-text);
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s;
}

.btn-contacto {
    border: 2px solid #1e3a5f;
    padding: 10px 25px;
    border-radius: 5px;
    transition: all 0.3s;
}

.btn-contacto:hover {
    background-color: #1e3a5f;
    color: white;
}

.hero {
    text-align: center;
}

.container-01 {
    width: 100%;
    background-color: rgba(239, 238, 236, 1);
    background: linear-gradient(to bottom, rgba(239, 238, 236, 1), rgba(204, 229, 254, 1), rgba(233, 233, 229, 1));
    padding: 60px 0 10px 0;
}

h1 {
    font-size: 3.5em;
    color: #1e3a5f;
    margin-bottom: 20px;
    font-weight: 700;
}

.subtitle {
    color: #4a5f7f;
    font-size: 1.3em;
    margin-bottom: 10px;
    font-weight: 500;
}

.tagline {
    color: #5a6f8f;
    font-size: 1.1em;
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.btn {
    padding: 15px 35px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: #1e3a5f;
    color: var(--secondary-text);
}

.btn-secondary {
    background-color: transparent;
    color: #1e3a5f;
    border: 2px solid #1e3a5f;
}

.btn-tertiary {
    background-color: #3d4f6f;
    color: white;
}

.btn-tertiary:hover {
    background-color: #2c3a51;
}

.service-tags {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    height: 24px;
}

.tag {
    background-color: transparent;
    padding: 3px 6px;
    border-radius: 4px;
    border: 2px solid #1e3a5f;
    color: #1e3a5f;
    font-weight: 500;
    transition: all 0.3s;
}

.tag:hover {
    background-color: #1e3a5f;
    color: white;
}

.logo-container {
    position: relative;
    margin-top: 9px;
}

.logo-elephant {
    max-width: 666px;
    width: 100%;
    height: 315px;
    opacity: 0.9;
}

.about {
    display: flex;
    justify-content: center;
    background-color: var(--primary);
    padding: 80px 20px;
    text-align: center;
    height: 404px;
}

.container-02 {
    max-width: 1200px;
    width: 100%;
}

.about h2 {
    font-size: 2.5em;
    color: #1e3a5f;
    margin-bottom: 30px;
    font-weight: 700;
}

.about p {
    color: #4a5f7f;
    font-size: 1.1em;
    max-width: 1050px;
    margin: 0 auto 15px;
    line-height: 1.6;
}

.about-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.btn-about {
    background-color: var(--primary-text);
    color: var(--text-white);
}

.btn-outline {
    background-color: transparent;
    color: #1e3a5f;
    border: 2px solid #1e3a5f;
}

.btn-outline:hover {
    background-color: #1e3a5f;
    color: white;
}

.how-it-works {
    background-color: var(--how-works);
    padding: 80px 20px;
    text-align: center;
    height: 500px;
}

.how-it-works h2 {
    font-size: 2.5em;
    color: white;
    margin-bottom: 60px;
    font-weight: 700;
}

.btn-how {
    background-color: var(--primary-text);
    color: var(--text-white);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.steps-container {
    display: flex;
    justify-content: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto 50px;
    flex-wrap: wrap;
}

.step {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

.step-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.step-icon svg {
    width: 100%;
    height: 100%;
    fill: white;
}

.step h3 {
    color: white;
    font-size: 1.3em;
    margin-bottom: 15px;
    font-weight: 600;
}

.step p {
    color: #b8c5d0;
    font-size: 1em;
    line-height: 1.5;
}

.benefits-container {
    background-color: var(--primary);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    padding: 80px;
}

.container-03 {
    display: flex;
    flex-direction: column;
    width: 100%;

}

.container-03A {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.container-03 h2 {
    font-size: 2.5em;
    color: #1e3a5f;
    margin-bottom: 30px;
    font-weight: 700;
    width: 100%;
    text-align: start;
}

.benefits-list {
    list-style: none;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: #1e3a5f;
    font-size: 1.1em;
    line-height: 1.5;
    font-weight: 400;
    font-size: 18px;
}

.check-icon {
    width: 24px;
    height: 24px;
    fill: #1e3a5f;
    flex-shrink: 0;
    margin-top: 2px;
}

.benefits-list-02 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right: 100px;
}

.benefits-list-02A {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.benefits-list-02 .btn {
    width: 250px;
}

.btn-benefits {
    background-color: #002748;
    color: white;
}

.btn-outline-dark {
    display: flex;
    background-color: transparent;
    color: #1e3a5f;
    border: 2px solid #1e3a5f;
    padding: 16px 10px;
    justify-content: center;
    align-items: center;
    max-width: 160px;
}

.btn-outline-dark:hover {
    background-color: white;
    border-color: #2c5280;
    color: #2c5280;
}

.cta-text {
    color: #1e3a5f;
    font-size: 0.95em;
    margin-top: 10px;
    font-weight: 500;
}

@media (max-width: 968px) {
    .benefits-container {
        flex-direction: column;
        gap: 50px;
    }

    .benefits-content {
        text-align: center;
    }

    .benefits-list li {
        text-align: left;
    }

    .benefits-content h2 {
        font-size: 2em;
    }

    .benefits-cta .btn {
        width: 100%;
        max-width: 300px;
    }
}

.credit {
    padding: 80px 20px;
    background-image: url('background-office.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.credit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
}

.product-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(img/Credito.jpg) no-repeat center center;
    background-size: cover;
    height: 750px;
}

.product-header {
    padding: 80px 0 40px 0;
}

.product-header h2 {
    font-size: 3em;
    color: #1e3a5f;
    margin-bottom: 15px;
    font-weight: 700;
}

.product-header h3 {
    font-size: 1.8em;
    color: #1e3a5f;
    margin-bottom: 20px;
    font-weight: 600;
}

.product-header p {
    color: #1e3a5f;
    font-size: 1.1em;
    margin-bottom: 10px;
}


.product-ini {
    color: var(--primary-text);
    text-align: start;
    padding: 0 30px 20px 30px;
}

.product-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.product-info {
    flex: 1;
}

.product-info h4 {
    font-size: 1.8em;
    color: #1e3a5f;
    margin-bottom: 25px;
    font-weight: 600;
}

.info-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 40px;
    padding: 25px;
    border-radius: 10px;
}

.info-box p {
    color: #1e3a5f;
    font-size: 1.05em;
    line-height: 1.6;
}

.product-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.product-buttons .btn {
    min-width: 220px;
}

.product-benefits {
    flex: 1;
    max-width: 500px;
}

.product-benefits h4 {
    font-size: 1.8em;
    color: #1e3a5f;
    margin-bottom: 25px;
    font-weight: 600;
    text-align: right;
}

.benefit-card {
    background-color: #5a6f8f;
    color: white;
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s;
}

.benefit-card:hover {
    background-color: #4a5f7f;
    transform: translateX(-5px);
}

.benefit-card .check-icon {
    width: 24px;
    height: 24px;
    fill: white;
    flex-shrink: 0;
}

.benefit-card span {
    font-size: 1.05em;
    font-weight: 500;
}

@media (max-width: 968px) {
    .product-content {
        flex-direction: column;
    }

    .product-benefits {
        max-width: 100%;
    }

    .product-benefits h4 {
        text-align: left;
    }

    .product-header h2 {
        font-size: 2.2em;
    }

    .product-header h3 {
        font-size: 1.5em;
    }

    .product-buttons {
        flex-direction: column;
    }

    .product-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {

    .about-section h2,
    .how-it-works h2 {
        font-size: 2em;
    }

    .steps-container {
        gap: 40px;
    }

    .about-buttons {
        flex-direction: column;
        align-items: center;
    }

    .about-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

.chat-widget {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 60px;
    height: 60px;
    background-color: #1e3a5f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.chat-widget:hover {
    transform: scale(1.1);
    background-color: #2c5280;
}

.chat-icon {
    width: 30px;
    height: 30px;
    fill: white;
}

/* Nomina */
/* --- SECCIÓN PRINCIPAL --- */
.main-section-nomina {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(var(--overlay-nomina), var(--overlay-nomina)),
        url('/img/nomina.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 60px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    text-align: -webkit-auto;
}

.header-title-nomina {
    color: var(--gold-nomina);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 50px;
    text-align: center;
}

.content-grid-nomina {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    width: 100%;
}

/* --- COLUMNA IZQUIERDA --- */
.subtitle-nomina {
    font-weight: 300;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.main-h2-nomina {
    color: var(--gold-nomina);
    font-size: 2.3rem;
    margin-bottom: 25px;
}

.bullet-list-nomina {
    list-style: none;
    margin-bottom: 35px;
}

.bullet-list-nomina li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    font-size: 1rem;
}

.bullet-list-nomina li::before {
    content: '✓';
    color: white;
    margin-right: 15px;
    font-weight: bold;
}

.benefits-container-nomina {
    display: flex;
    flex-direction: column;
}

.benefit-card-nomina {
    background: var(--card-bg-nomina);
    padding: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    backdrop-filter: blur(5px);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.benefit-card-nomina img {
    width: 24px;
    height: auto;
    margin-right: 25px;
    flex-shrink: 0;
    filter: brightness(1.2);
}

.benefit-card-nomina h3 {
    font-size: 1.15rem;
    font-weight: 600;
}

.benefit-card-nomina p {
    font-size: 1rem;
    opacity: 0.85;
}

/* --- COLUMNA DERECHA (TIMELINE) --- */
.how-it-works-title-nomina {
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

.timeline-nomina {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.step-nomina {
    position: relative;
    display: flex;
    padding-bottom: 50px;
    width: 100%;
}

.step-nomina::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 46px;
    bottom: 0;
    width: 2px;
    background-color: var(--gold-nomina);
    z-index: 1;
}

.step-nomina:last-child::before {
    display: none;
}

.step-circle-nomina {
    width: 46px;
    height: 46px;
    background-color: var(--gold-nomina);
    border-radius: 50%;
    margin-right: 25px;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.step-content-nomina {
    padding-top: 5px;
    width: 100%;
}

.step-title-nomina {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.step-desc-nomina {
    font-size: 0.95rem;
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    /* Alineado a la derecha como en tu imagen */
}

/* --- BOTONES --- */
.button-group-nomina {
    display: flex;
    gap: 20px;
    margin-top: 60px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-nomina {
    padding: 15px 40px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
}

.btn-gold-nomina {
    background: var(--gold-nomina);
    color: white;
    border: none;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-outline-nomina {
    background: transparent;
    color: var(--gold-nomina);
    border: 2px solid var(--gold-nomina);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* Calculadora container */
/* Container and General Background */
.calculator-section-simple {
    background-color: #041d38; /* Navy Blue */
    background-image: radial-gradient(circle at center, #0a2e5a 0%, #041d38 100%);
    padding: 80px 5%;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    display: flex;
    justify-content: center;
    text-align: -webkit-auto;
}

.main-container-simple {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* --- CALCULATOR BOX (LEFT) --- */
.calculator-box-simple {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 40px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

/* Elephant Watermark Effect */
.calculator-box-simple::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 350px;
    background: url(/img/logo_main.png) no-repeat center;
    background-size: contain;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    left: 0;
}

.calculator-title-simple {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 35px;
    position: relative;
    z-index: 1;
}

.input-grid-simple {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.field-label-simple {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.9);
}

.display-value-simple {
    background: rgba(255, 255, 255, 0.15);
    padding: 18px 10px;
    border-radius: 6px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

}

.result-container-simple {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 25px;
    text-align: center;
    position: relative;
    z-index: 1;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

}

.result-label-simple {
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.final-amount-simple {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.disclaimer-simple {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* --- INFO COLUMN (RIGHT) --- */
.info-title-simple {
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: 25px;
    text-align: center;
}

.info-subtitle-simple {
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 35px;
    font-weight: 400;
}

.benefits-list-simple {
    list-style: none;
    padding: 0;
}

.benefit-item-simple {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 1rem;
    line-height: 1.4;
}

/* Custom Checkmark */
.benefit-item-simple::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: 1.2rem;
}


/* Contact */
/* --- SHARED STYLES --- */
.section-title-simple {
    color: #0d3b66;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
    font-family: 'Roboto', sans-serif;
}

/* --- STEPS SECTION --- */
.how-to-get-simple {
    padding: 60px 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.steps-grid-simple {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: center;
}

.step-card-simple {
    flex: 1;
}

.step-number-simple {
    width: 65px;
    height: 65px;
    background-color: #b5965e; /* Gold */
    color: #0d3b66;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 2px solid #0d3b66;
}

.step-text-simple {
    color: #0d3b66;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

/* --- TESTIMONIALS SECTION --- */
.testimonials-simple {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    text-align: -webkit-auto;
}

.testimonials-wrapper-simple {
    position: relative;
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* The beige background box that doesn't cover full width/height */
.beige-bg-decoration-simple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 100%;
    background-color: #f2e8d5;
    z-index: -1;
    border-radius: 4px;
    background: linear-gradient(90deg, #EFEEEC -0.55%, #DCBA7B 24.91%, #AD832F 48.44%, #DCBA7B 73.33%, #EFEEEC 99.34%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.testimonials-grid-simple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 40px;
}

.testimonial-card-simple {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.stars-simple {
    color: #f1c40f;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.quote-simple {
    color: #2c3e50;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
}

.user-profile-simple {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-simple {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.user-meta-simple {
    display: flex;
    flex-direction: column;
}

.user-name-simple {
    font-weight: 700;
    color: #0d3b66;
    font-size: 0.9rem;
}

.user-role-simple {
    color: #7f8c8d;
    font-size: 0.8rem;
}

/* --- CONTACT SECTION --- */
.contact-section-simple {
    padding: 60px 20px;
}

.contact-card-container-simple {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fdfdfd;
    /* Textured/Watermark background */
    background-image: url('img/logo-mgo.png');
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: center;
    /* Adding a light overlay to make the logo look like a watermark */
    background-blend-mode: soft-light;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.form-row-simple {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.input-field-simple, .textarea-field-simple {
    border: 1px solid #cedbe9;
    border-radius: 6px;
    padding: 18px;
    font-size: 1rem;
    color: #334e68;
    width: 100%;
    box-sizing: border-box;
    background: rgba(230, 240, 250, 1);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.textarea-field-simple {
    height: 120px;
    resize: none;
    margin-bottom: 30px;
}

.input-field-simple::placeholder, .textarea-field-simple::placeholder {
    color: #627d98;
}

.form-actions-simple {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-submit-simple {
    background-color: #002b49;
    color: #b5965e; /* Gold text in button */
    border: none;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-whatsapp-direct-simple {
    background-color: white;
    color: #0d3b66;
    border: 1.5px solid #0d3b66;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.25);
}

.contact-card-container-simple::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 350px;
    background: url(/img/logo_main.png) no-repeat center;
    background-size: contain;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    left: 0;
}

/* Salud */
/* --- MAIN STYLES --- */
.main-container-medical {
    background-image: linear-gradient(var(--overlay-nomina), var(--overlay-nomina)),                       url('img/salud.png'); /* Asegúrate de tener esta imagen */
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    padding: 60px 5%;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    text-align: -webkit-auto;
}

/* --- HEADERS --- */
.header-section-medical {
    text-align: center;
    margin-bottom: 50px;
}

.main-title-medical {
    color: #b5965e;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.sub-title-medical {
    color: #b5965e;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.intro-text-medical {
    font-size: 1.1rem;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.4;
}

/* --- GRID LAYOUT --- */
.content-grid-medical {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- LEFT COLUMN --- */
.list-intro-medical {
    font-size: 1rem;
    margin-bottom: 15px;
}

.check-list-medical {
    list-style: none;
    padding: 0;
    margin-bottom: 50px;
}

.check-list-medical li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 1.05rem;
    font-weight: 300;
}

.check-list-medical li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
}

.benefits-title-medical {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
}

.benefit-card-medical {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    transition: 0.3s;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.benefit-card-medical i {
    font-size: 2rem;
    margin-right: 25px;
    min-width: 40px;
    text-align: center;
}

.benefit-card-medical p {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.2;
}

.benefit-card-medical span {
    font-size: 1rem;
    font-weight: 300;
}

/* --- RIGHT COLUMN --- */
.info-block-medical {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.single-circle-medical {
    width: 55px;
    height: 55px;
    background-color: #b5965e;
    border-radius: 50%;
    flex-shrink: 0;
}

.question-title-medical {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.description-text-medical {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.3;
}

.process-header-medical {
    color: #b5965e;
    font-size: 2.1rem;
    text-align: center;
    max-width: 500px;
    margin: 0 auto 40px;
    line-height: 1.1;
}

.timeline-medical {
    position: relative;
    padding-left: 85px;
}

.timeline-step-medical {
    position: relative;
    margin-bottom: 40px;
    min-height: 60px;
}

/* Línea vertical conectora */
.timeline-step-medical::before {
    content: '';
    position: absolute;
    left: -58px; /* Centrado con el círculo de 55px */
    top: 55px;
    width: 2px;
    height: calc(100% - 15px);
    background-color: #b5965e;
}

.timeline-step-medical:last-child::before {
    display: none;
}

.step-circle-medical {
    position: absolute;
    left: -85px;
    top: 0;
    width: 55px;
    height: 55px;
    background-color: #b5965e;
    border-radius: 50%;
    z-index: 2;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.step-desc-medical {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
}

.final-result-medical {
    color: #b5965e;
    font-size: 1.1rem;
    text-align: right;
    margin-top: -10px;
    font-weight: 500;
}

/* --- CTA BUTTONS --- */
.cta-wrapper-medical {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 60px;
}

.btn-solid-medical {
    background-color: #b5965e;
    color: #ffffff;
    padding: 18px 45px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    transition: 0.3s;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-outline-medical {
    border: 2px solid #b5965e;
    background-color: transparent;
    color: #b5965e;
    padding: 16px 45px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    transition: 0.3s;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-solid-medical:hover, .btn-outline-medical:hover {
    opacity: 0.8;
}

/* Arrendamiento */
:root {
    /* Mantenemos tus variables */
    --primary: #EFEEEC;
    --primary-text: #002D54;
    --secondary-text: #D2AB66;
    --text-white: #FFFFFF;
    --how-works: #002D54D9;
    --button1: #002748;
    --gold-nomina: #b5965e;
    --dark-blue-nomina: #162c44;
    --overlay-nomina: rgb(0 23 47 / 80%);
    --card-bg-nomina: rgba(255, 255, 255, 0.1);
    
    /* Variable extra para los cuadros de la derecha */
    --card-gray-arrendamiento: #6b778d;
}

.mgo-section-arrendamiento {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--primary-text);
}

/* --- ESTILOS PARTE SUPERIOR --- */
.mgo-top-info-arrendamiento {
    background-color: var(--primary);
    /* Textura de papel sutil como en la imagen */
    background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png'); 
    padding: 50px 10%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.mgo-title-arrendamiento {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}

.mgo-list-arrendamiento {
    list-style: none;
    padding: 0;
}

.mgo-list-arrendamiento li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
    font-size: 15px;
}

.mgo-list-arrendamiento li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-text);
    font-weight: bold;
}

.mgo-disclaimer-arrendamiento {
    font-size: 11px;
    margin-top: 10px;
}

.mgo-contact-arrendamiento {
    text-align: center;
}

.mgo-phone-arrendamiento {
    margin-bottom: 20px;
    font-size: 17px;
}

.mgo-contact-buttons-arrendamiento {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 15px;
}

.btn-dark-arrendamiento {
    background: var(--button1);
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-outline-arrendamiento {
    background: white;
    color: var(--primary-text);
    border: 1px solid var(--primary-text);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.mgo-sub-contact-arrendamiento {
    font-size: 13px;
    max-width: 280px;
    margin: 0 auto;
}

/* --- ESTILOS PARTE INFERIOR (CONTENIDO PRINCIPAL) --- */
.mgo-main-content-arrendamiento {
    /* Cambia esta URL por tu imagen de los coches */
    background: url('img/arrendamiento.png') center/cover no-repeat;
    position: relative;
    padding: 80px 5%;
}

/* Capa blanca semi-transparente */
.mgo-main-content-arrendamiento::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.88);
    z-index: 1;
}

.mgo-content-overlay-arrendamiento {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}

.mgo-header-arrendamiento {
    text-align: center;
    margin-bottom: 60px;
}

.mgo-main-title-arrendamiento {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 10px;
}

.mgo-subtitle-arrendamiento {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
}

.mgo-intro-arrendamiento {
    font-size: 15px;
}

.mgo-quick-checks-arrendamiento {
    list-style: none;
    padding: 0;
    display: inline-block;
    text-align: left;
    margin-top: 20px;
}

.mgo-quick-checks-arrendamiento li {
    font-size: 15px;
    margin-bottom: 5px;
}

.mgo-quick-checks-arrendamiento li::before {
    content: '✓ ';
    font-weight: bold;
}

/* Grid de servicios */
.mgo-services-grid-arrendamiento {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
}

.mgo-services-text-arrendamiento {
    display: flex;
    gap: 20px;
}

.mgo-circle-icon-arrendamiento {
    width: 45px;
    height: 45px;
    background: var(--primary-text);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.mgo-service-title-arrendamiento {
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: bold;
}

.mgo-feature-cards-arrendamiento {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-item-arrendamiento {
    background: var(--card-gray-arrendamiento);
    color: white;
    padding: 18px 25px;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card-item-arrendamiento::before {
    content: '✓';
    margin-right: 15px;
}

/* Footer de botones finales */
.mgo-action-footer-arrendamiento {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.btn-primary-action-arrendamiento {
    background: var(--button1);
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-secondary-action-arrendamiento {
    background: transparent;
    color: var(--primary-text);
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    border: 1px solid var(--primary-text);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* USANDO TU ROOT */
.mgo-details-section-detalles-arrendamiento {
    position: relative;
    padding: 80px 10%;
    background-color: var(--primary);
    color: var(--primary-text);
    font-family: Arial, sans-serif;
    overflow: hidden;
    text-align: -webkit-auto;
}

/* Fondo con el logo MGO */
.mgo-bg-overlay-detalles-arrendamiento {
    position: absolute;
    width: 100%;
    height: 80%;
    /* Reemplaza 'logo_main.png' con tu ruta real */
    background-image: url('img/logo_main.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.15; /* Sutil como en la imagen */
    z-index: 0;
    pointer-events: none;
    bottom: 0%;
}

.mgo-container-detalles-arrendamiento {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* Estilos Columna Izquierda */
.mgo-group-detalles-arrendamiento {
    margin-bottom: 35px;
}

.mgo-title-detalles-arrendamiento {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
}

.mgo-list-detalles-arrendamiento {
    list-style: none;
    padding: 0;
}

.mgo-list-detalles-arrendamiento li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.mgo-list-detalles-arrendamiento li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-text);
    font-weight: bold;
    font-size: 14px;
}

/* Estilos Columna Derecha */
.mgo-center-title-detalles-arrendamiento {
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
}

/* Timeline (Pasos) */
.mgo-timeline-detalles-arrendamiento {
    position: relative;
    padding-left: 50px;
    margin-bottom: 50px;
}

.mgo-timeline-line-detalles-arrendamiento {
    position: absolute;
    left: 17px;
    top: 10px;
    bottom: 30px;
    width: 2px;
    background-color: var(--primary-text);
}

.mgo-step-detalles-arrendamiento {
    position: relative;
    margin-bottom: 25px;
    font-size: 15px;
}

.mgo-dot-detalles-arrendamiento {
    position: absolute;
    left: -50px;
    top: 0;
    width: 35px;
    height: 35px;
    background-color: var(--button1);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* Tarjetas de Beneficios */
.mgo-cards-grid-detalles-arrendamiento {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mgo-benefit-card-detalles-arrendamiento {
    color: var(--text-white);
    padding: 18px 25px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    background: rgba(0, 45, 84, 0.85);
}

/* Preguntas Frecuentes */
/* USANDO TU ROOT */
.mgo-final-section-info-arrendamiento {
    background-color: white; /* Fondo base blanco para el FAQ */
    color: var(--primary-text);
    font-family: Arial, sans-serif;
    text-align: -webkit-auto;
}

/* --- ESTILOS FAQ --- */
.mgo-faq-container-info-arrendamiento {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.mgo-faq-main-title-info-arrendamiento {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
}

.mgo-faq-item-info-arrendamiento {
    border-bottom: 1px solid #e0e6ed;
}

.mgo-faq-item-info-arrendamiento summary {
    list-style: none;
    padding: 20px 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
}

/* Flecha personalizada */
.mgo-arrow-info-arrendamiento::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--primary-text);
    border-bottom: 2px solid var(--primary-text);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.mgo-faq-item-info-arrendamiento[open] .mgo-arrow-info-arrendamiento::after {
    transform: rotate(-135deg);
}

.mgo-faq-content-info-arrendamiento {
    padding-bottom: 20px;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* --- ESTILOS CHECKLIST Y CONTACTO --- */
.mgo-footer-info-container-info-arrendamiento {
     /* Tu color #EFEEEC */
     /* Misma textura */
     padding: 60px 10%;
}

.mgo-footer-grid-info-arrendamiento {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.mgo-footer-title-info-arrendamiento {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

/* Estilos de la lista con checks */
.mgo-check-list-info-arrendamiento {
    list-style: none;
    padding: 0;
}

.mgo-check-list-info-arrendamiento li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 15px;
}

.mgo-check-list-info-arrendamiento li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-text);
    font-weight: bold;
}

/* Estilos de Contacto */
.mgo-contact-column-info-arrendamiento {
    text-align: center;
}

.mgo-company-name-info-arrendamiento {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.mgo-contact-card-info-arrendamiento p {
    margin: 8px 0;
    font-size: 16px;
}

.mgo-contact-card-info-arrendamiento a {
    color: var(--primary-text);
    text-decoration: underline;
}

.mgo-schedule-info-arrendamiento {
    font-size: 14px;
    margin-top: 20px !important;
    opacity: 0.9;
}

/* Fondeo Empresas */
/* --- CONTENEDOR PRINCIPAL --- */
.main-container-fondeo-empresas {
    background-image: linear-gradient(var(--overlay-nomina), var(--overlay-nomina)), 
                      url('img/fondeoempresa.png'); /* Cambia por tu imagen industrial */
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    padding: 80px 5%;
    font-family: 'Roboto', sans-serif;
    color: var(--text-white);
    text-align: -webkit-auto;
}

/* --- ENCABEZADOS --- */
.header-section-fondeo-empresas {
    text-align: center;
    margin-bottom: 60px;
}

.main-title-fondeo-empresas {
    color: var(--secondary-text);
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.sub-title-fondeo-empresas {
    color: var(--secondary-text);
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.intro-text-fondeo-empresas {
    font-size: 1.1rem;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.4;
    opacity: 0.9;
}

/* --- GRID LAYOUT --- */
.content-grid-fondeo-empresas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- COLUMNA IZQUIERDA (BENEFICIOS) --- */
.benefits-title-fondeo-empresas {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
}

.benefit-card-fondeo-empresas {
    background: var(--card-bg-nomina);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 15px;
    transition: 0.3s;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.benefit-card-fondeo-empresas p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.3;
}

/* --- COLUMNA DERECHA --- */
.info-block-fondeo-empresas {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

.single-circle-fondeo-empresas {
    width: 55px;
    height: 55px;
    background-color: var(--secondary-text);
    border-radius: 50%;
    flex-shrink: 0;
}

.question-title-fondeo-empresas {
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.description-text-fondeo-empresas {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.4;
}

.process-header-fondeo-empresas {
    color: var(--secondary-text);
    font-size: 2rem;
    text-align: center;
    margin: 0 auto 40px;
    font-weight: 600;
}

/* --- LÓGICA DE TIMELINE (BOLITAS Y LÍNEA) --- */
.timeline-fondeo-empresas {
    position: relative;
    padding-left: 85px;
}

.timeline-step-fondeo-empresas {
    position: relative;
    margin-bottom: 45px;
    min-height: 55px;
    display: flex;
    align-items: center;
}

/* Línea vertical conectora calcada de Salud */
.timeline-step-fondeo-empresas::before {
    content: '';
    position: absolute;
    left: -58px; /* Ajuste para centrar con el círculo de 55px */
    top: 55px;
    width: 2px;
    height: calc(100% - 10px);
    background-color: var(--secondary-text);
}

.timeline-step-fondeo-empresas:last-child::before {
    display: none;
}

.step-circle-fondeo-empresas {
    position: absolute;
    left: -85px;
    top: 0;
    width: 55px;
    height: 55px;
    background-color: var(--secondary-text);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.step-desc-fondeo-empresas {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
}

/* --- BOTONES CTA --- */
.cta-wrapper-fondeo-empresas {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 60px;
}

.btn-solid-fondeo-empresas {
    background-color: var(--secondary-text);
    color: var(--button1);
    padding: 18px 45px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    transition: 0.3s;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-outline-fondeo-empresas {
    border: 2px solid var(--secondary-text);
    background-color: transparent;
    color: var(--secondary-text);
    padding: 16px 45px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: 0.3s;
}

.btn-solid-fondeo-empresas:hover, .btn-outline-fondeo-empresas:hover {
    filter: brightness(1.1);
}

/* Proceso */
/* USANDO TU ROOT */
.mgo-section-completa-fondeo-final {
    position: relative;
    background-color: var(--primary);
    background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png'); /* Textura sutil */
    padding: 80px 5%;
    color: var(--primary-text);
    font-family: Arial, sans-serif;
    overflow: hidden;
    text-align: -webkit-auto;
}

/* Logo elefante de fondo */
.mgo-background-logo-fondeo-final {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 50%;
    height: 80%;
    background-image: url('logo_main.png'); /* Tu imagen del elefante */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

.mgo-container-fondeo-final {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- GRID SUPERIOR --- */
.mgo-top-grid-fondeo-final {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    position: relative;
}

.mgo-main-title-fondeo-final {
    font-size: 28px;
    margin-bottom: 25px;
}

.mgo-check-list-fondeo-final {
    list-style: none;
    padding: 0;
}

.mgo-check-list-fondeo-final li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 15px;
}

.mgo-check-list-fondeo-final li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: bold;
}

.mgo-disclaimer-fondeo-final {
    font-size: 12px;
    margin: 15px 0px 40px 100px;
    opacity: 0.7;
}

/* Bloque Resultados */
.mgo-results-block-fondeo-final {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: absolute;
    bottom: 0;
    max-width: 50%;
}

.mgo-result-icon-fondeo-final {
    width: 40px;
    height: 40px;
    background-color: var(--button1);
    border-radius: 50%;
    flex-shrink: 0;
}

.mgo-result-text-fondeo-final h4 {
    font-size: 22px;
    margin: 0 0 5px 0;
}

/* Proceso en 3 pasos */
.mgo-process-title-fondeo-final {
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 40px;
}

.mgo-step-item-fondeo-final {
    text-align: center;
    margin-bottom: 35px;
}

.mgo-number-circle-fondeo-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 3px solid var(--primary-text);
    border-radius: 50%;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
    background: var(--gold-nomina); /* Tono azulado muy claro */
}

/* --- FORMULARIO --- */
.mgo-form-card-fondeo-final {
    background-color: #e6edf4; /* Color azul claro del fondo del form */
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 60px;
    position: relative;
    background: rgba(230, 240, 250, 1);
}

.mgo-form-title-fondeo-final {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 40px;
}

.mgo-form-grid-fondeo-final {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mgo-contact-form-fondeo-final input, 
.mgo-contact-form-fondeo-final textarea {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    background: rgba(241, 245, 249, 1);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.mgo-contact-form-fondeo-final textarea {
    grid-column: span 2;
    margin-top: 20px;
    resize: none;
}

.mgo-form-buttons-fondeo-final {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.btn-send-fondeo-final {
    background-color: var(--button1);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-wa-fondeo-final {
    background-color: #dae4ef;
    color: var(--primary-text);
    border: 1px solid var(--primary-text);
    padding: 15px 40px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.25);
}

/* --- FOOTER FINAL --- */
.mgo-footer-contact-fondeo-final {
    text-align: center;
}

.mgo-alt-title-fondeo-final {
    font-size: 26px;
    margin-bottom: 25px;
}

.mgo-alt-info-fondeo-final p {
    margin: 8px 0;
    font-size: 17px;
}

.mgo-alt-info-fondeo-final a {
    color: var(--primary-text);
    font-weight: bold;
}

/* News */
/* --- SECCIÓN NOTICIAS --- */
.mgo-news-section-noticias {
    background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png'); /* Textura sutil */
    padding: 80px 5%;
    color: var(--primary-text);
    font-family: Arial, sans-serif;
    text-align: -webkit-auto;
}

.mgo-container-noticias {
    max-width: 1200px;
    margin: 0 auto;
}

.mgo-main-title-noticias {
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 50px;
}

/* Grid de noticias */
.mgo-news-grid-noticias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* Tarjeta individual */
.mgo-news-card-noticias {
    background: transparent;
    display: flex;
    flex-direction: column;
}

/* Imagen y Badges */
.mgo-image-wrapper-noticias {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mgo-image-wrapper-noticias img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mgo-news-card-noticias:hover img {
    transform: scale(1.05);
}

.mgo-badge-noticias {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

/* Colores de badges según imagen */
.mgo-badge-new-noticias {
    background-color: #C6EBC5; /* Verde suave noticia */
    color: #2F5D30;
}

.mgo-badge-soon-noticias {
    background-color: var(--secondary-text); /* Tu dorado root */
    color: white;
}

/* Contenido de la tarjeta */
.mgo-card-title-noticias {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
}

.mgo-card-text-noticias {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: var(--primary-text);
    opacity: 0.9;
}

/* Link Ver más a la derecha */
.mgo-card-footer-noticias {
    text-align: right;
    margin-top: auto;
}

.mgo-link-more-noticias {
    color: var(--primary-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}

.mgo-link-more-noticias:hover {
    text-decoration: underline;
}

/* Botón inferior Mostrar más */
.mgo-actions-noticias {
    text-align: center;
}

.mgo-btn-show-more-noticias {
    background-color: var(--button1);
    color: white;
    border: none;
    padding: 15px 45px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.mgo-btn-show-more-noticias:hover {
    opacity: 0.9;
}

/* footer */
/* --- FOOTER SECTION --- */
.mgo-footer-section-footer {
    background-color: var(--primary); /* #EFEEEC */
    /* Textura sutil para dar el acabado de la imagen */
    background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
    padding: 80px 5% 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--primary-text);
    text-align: -webkit-auto;
}

.mgo-footer-container-footer {
    max-width: 1400px;
    margin: 0 auto;
}

/* Grid de 6 columnas siguiendo la imagen */
.mgo-footer-grid-footer {
    display: grid;
    /* La primera columna es ligeramente más ancha para los textos largos */
    grid-template-columns: 1.5fr repeat(5, 1fr); 
    gap: 30px;
    margin-bottom: 60px;
}

/* Títulos de las columnas */
.mgo-footer-title-footer {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 25px;
    min-height: 40px; /* Alineación vertical de los títulos */
    display: flex;
    align-items: flex-end;
}

/* Estilos de las listas */
.mgo-footer-list-footer {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mgo-footer-list-footer li {
    margin-bottom: 12px;
}

.mgo-footer-list-footer a {
    text-decoration: none;
    color: var(--primary-text);
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.mgo-footer-list-footer a:hover {
    opacity: 0.7;
}

/* Columna de enlaces principales (Quienes somos, etc) */
.mgo-footer-main-links-footer {
    display: flex;
    align-items: end; /* Centrado para igualar altura de los títulos de las otras columnas */
}

.mgo-bold-link-footer {
    font-weight: 700;
    font-size: 15px !important;
}

/* --- COPYRIGHT Y LÍNEA --- */
.mgo-footer-bottom-footer {
    margin-top: 40px;
}

.mgo-footer-line-footer {
    border: 0;
    border-top: 1px solid rgba(0, 45, 84, 0.2); /* Tu color primary-text suavizado */
    margin-bottom: 25px;
}

.mgo-copyright-text-footer {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
    .mgo-footer-grid-footer {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    .mgo-footer-title-footer {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .mgo-footer-grid-footer {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mgo-footer-grid-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .mgo-footer-main-links-footer {
        justify-content: center;
        margin-bottom: 20px;
    }
}
/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .mgo-news-grid-noticias {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mgo-news-grid-noticias {
        grid-template-columns: 1fr;
    }
    .mgo-main-title-noticias {
        font-size: 32px;
    }
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .mgo-top-grid-fondeo-final, .mgo-form-grid-fondeo-final {
        grid-template-columns: 1fr;
    }
    .mgo-contact-form-fondeo-final textarea {
        grid-column: span 1;
    }
    .mgo-form-buttons-fondeo-final {
        flex-direction: column;
    }
    .mgo-form-card-fondeo-final {
        padding: 30px 20px;
    }
    .mgo-process-title-fondeo-final {
        font-size: 32px;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .content-grid-fondeo-empresas {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cta-wrapper-fondeo-empresas {
        flex-direction: column;
        align-items: center;
    }
    .main-title-fondeo-empresas {
        font-size: 2.5rem;
    }
}

/* RESPONSIVE */
@media (max-width: 850px) {
    .mgo-footer-grid-info-arrendamiento {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .mgo-check-list-info-arrendamiento {
        display: inline-block;
        text-align: left;
    }

    .mgo-faq-main-title-info-arrendamiento {
        font-size: 26px;
    }
}

/* Responsive para tablets y móviles */
@media (max-width: 900px) {
    .mgo-container-detalles-arrendamiento {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .mgo-details-section-detalles-arrendamiento {
        padding: 50px 5%;
    }

    .mgo-bg-overlay-detalles-arrendamiento {
        background-position: bottom right;
        opacity: 0.1;
    }
}

/* Adaptación para móviles */
@media (max-width: 850px) {
    .mgo-services-grid-arrendamiento {
        grid-template-columns: 1fr;
    }
    .mgo-top-info-arrendamiento {
        flex-direction: column;
        text-align: center;
        padding: 40px 5%;
    }
    .mgo-list-arrendamiento {
        display: inline-block;
        text-align: left;
    }
    .mgo-main-title-arrendamiento {
        font-size: 32px;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .content-grid-medical {
        grid-template-columns: 1fr;
    }
    .main-title-medical { font-size: 2.8rem; }
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 900px) {
    .steps-grid-simple, .testimonials-grid-simple, .form-row-simple {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }
    .beige-bg-decoration-simple {width: 100%;height: 100%;}
}

/* Responsiveness */
@media (max-width: 1024px) {
    .main-container-simple {
        grid-template-columns: 1fr;
    }
    .info-title-simple {
        font-size: 1.8rem;
    }
}

@media (max-width: 600px) {
    .input-grid-simple {
        grid-template-columns: 1fr;
    }
}
/* Responsive */
@media (max-width: 992px) {
    .content-grid-nomina {
        grid-template-columns: 1fr;
    }

    .timeline-nomina {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.5em;
    }

    .subtitle {
        font-size: 1.1em;
    }

    .nav-links {
        flex-wrap: wrap;
        gap: 15px;
        font-size: 0.9em;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Responsive Oficial */
/* =========================================
   SOLO RESPONSIVE (Header + Hero + About)
   Pegar al FINAL del style.css
========================================= */

@media (max-width: 900px){
  header nav{ padding-left: 18px; padding-right: 18px; }
  .nav-links{ gap: 12px; flex-wrap: wrap; }
}

@media (max-width: 768px){
  /* NAV */
  header nav{
    padding: 10px 14px;
  }

  .logo-nav{ width: 96px; }

  /* Solo mostrar "Contacto" (último li) */
  .nav-links li:not(:last-child){
    display: none;
  }
  .nav-links li:last-child{
    margin-left: auto;
  }

  /* Hero */
  #inicio .container-01{
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;
  }

  #inicio h1{
    font-size: 28px;
    line-height: 1.15;
  }

  #inicio .cta-buttons{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  #inicio .cta-buttons .btn{
    width: 100%;
    max-width: 240px;
  }

  #inicio .service-tags{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  #inicio .logo-elephant{
    width: 80vw;
    max-width: 360px;
  }

  /* About */
  #about-us .container-02{
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;
  }

  #about-us .about-buttons{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  #about-us .about-buttons .btn{
    width: 100%;
    max-width: 170px;
  }

  .container-03A {
    flex-direction: column;
}

.benefits-list-02 {
    margin-right: 0px;
}

button.btn.btn-outline-dark {
    max-width: 100px;
}

.container-03 h2 {
    font-size: 24px;
    text-align: center;
}


.product-container {
    height: auto;
}

.product-info h4 {
    font-size: 24px;
}

.product-ini {
    text-align: center;
}

.benefit-card {
    width: 100%;
}

.benefit-card:hover {
    transform: none;
}

.about, .how-it-works {
    height: auto;
}

.testimonials-wrapper-simple {
    margin: 0 60px;
    padding: 0;
}

.contact-card-container-simple {
    padding: 0;
}

h2.section-title-simple {
    margin: 0;
}

.testimonials-grid-simple {
    padding: 40px 0;
}

.form-actions-simple {padding-bottom: 10px;}
}






@media (max-width: 480px){
  /* Hero textos un poco más compactos */
  #inicio h1{ font-size: 26px; }
  #inicio .subtitle,
  #inicio .tagline{ font-size: 14px; }

  /* About botones en columna */
  #about-us .about-buttons{
    flex-direction: column;
    align-items: center;
  }
  #about-us .about-buttons .btn{
    max-width: 240px;
  }
}