/* =========================================================
   HOME.CSS — Paleta aprobada por cliente
   Proyecto: Coaching / Terapia + Enseñanza de Alemán
   ========================================================= */

/* ── Reset contenedor Quark ── */
section.container.grid-lg {
    max-width: 100%;
    padding: 0;
}

* { box-sizing: border-box; }

/* ── Fondo split que llega hasta abajo del viewport ── */
body.home-theme {
    background: linear-gradient(90deg, #2F5D50 0%, #2F5D50 50%, #F7F5F9 50%, #F7F5F9 100%);
}
body.home-theme #body-wrapper {
    background: transparent;
    padding: 0;
}

/* =========================================================
   HERO (cabecera compartida)
   ========================================================= */
.home-hero {
    text-align: center;
    padding: 0.5rem 1rem;
    position: relative;
}
/* Overlay sutil para garantizar legibilidad del texto sobre cualquier banner */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(47, 93, 80, 0.25) 0%, rgba(96, 68, 116, 0.35) 100%);
    pointer-events: none;
}
.home-hero > * {
    position: relative;
    z-index: 1;
}
.home-hero h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.home-hero p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   SPLIT — las dos mitades
   ========================================================= */
.home-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
}

/* =========================================================
   MITAD COACHING / TERAPIA
   Marca: morado #604474
   Paleta: lavanda #C8B6E2, salvia #A3BFA8,
           blanco roto #F7F5F9, gris cálido #6E6A73,
           acento #7A5C9E
   ========================================================= */
.half-coaching {
    background: #F7F5F9;     /* blanco roto */
    color: #2E2E2E;
    padding: 1.5rem 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-right: 1px solid #C8B6E2;
}

.half-coaching h2 {
    font-size: 1.5rem;
    color: #604474;          /* morado marca */
    margin-top: 0;
    margin-bottom: 0.2rem;
}

.half-coaching p {
    color: #6E6A73;          /* gris cálido */
    line-height: 1.6;
}

.badge-coaching {
    display: inline-block;
    background: #C8B6E2;     /* lavanda suave */
    color: #604474;          /* morado marca */
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    width: fit-content;
}

.half-coaching .servicios-lista li::before {
    content: "▸ ";
    color: #A3BFA8;          /* verde salvia */
}

.btn-coaching,
.btn-coaching:visited {
    background: #7A5C9E;     /* acento morado */
    color: #fff;
}
.btn-coaching:hover {
    background: #604474;     /* morado marca al hover */
    color: #fff;
}

/* =========================================================
   MITAD ENSEÑANZA DE ALEMÁN
   Marca: lavanda #B9A7D6
   Paleta: verde profundo #2F5D50, verde medio #4C8C7A,
           blanco #FFFFFF, gris oscuro #2E2E2E,
           lavanda conexión #B9A7D6
   ========================================================= */
.half-idiomas {
    background: #2F5D50;     /* verde profundo */
    color: #FFFFFF;
    padding: 1.5rem 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.half-idiomas h2 {
    font-size: 1.5rem;
    color: #FFFFFF;
    margin-top: 0;
    margin-bottom: 0.2rem;
}

.half-idiomas p {
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.6;
}

.badge-idiomas {
    display: inline-block;
    background: #B9A7D6;     /* lavanda — conexión de marca */
    color: #2F5D50;          /* verde profundo para contraste */
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    width: fit-content;
}

.half-idiomas .servicios-lista li::before {
    content: "▸ ";
    color: #B9A7D6;          /* lavanda conexión */
}

.btn-idiomas,
.btn-idiomas:visited {
    background: #B9A7D6;     /* lavanda marca */
    color: #2F5D50;          /* verde profundo para contraste */
}
.btn-idiomas:hover {
    background: #C8B6E2;     /* lavanda más clara al hover */
    color: #2F5D50;
}

/* =========================================================
   ELEMENTOS COMUNES A AMBAS MITADES
   ========================================================= */
.servicios-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* ── Enlaces legales al fondo de cada mitad ── */
.half-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    font-size: 0.72rem;
    margin-top: 1.6rem;
    line-height: 1.4;
}
.half-legal a,
.half-legal a:visited {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s, opacity 0.15s;
}
/* separador tipo bullet entre enlaces */
.half-legal a + a::before {
    content: "·";
    margin-right: 0.9rem;
    margin-left: -0.9rem;
    opacity: 0.5;
    text-decoration: none;
    display: inline-block;
    transform: translateX(-0.45rem);
}
/* Idiomas — verde profundo: uso lavanda de marca */
.half-idiomas .half-legal a,
.half-idiomas .half-legal a:visited {
    color: #C8B6E2;
}
.half-idiomas .half-legal a:hover {
    color: #FFFFFF;
}
/* Coaching — blanco roto: uso morado de marca */
.half-coaching .half-legal a,
.half-coaching .half-legal a:visited {
    color: #7A5C9E;
}
.half-coaching .half-legal a:hover {
    color: #604474;
}

.home-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    margin-top: auto;
    transition: background 0.2s;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    /* En móvil el split es vertical (green → cream apilados), así que el gradiente
       lateral del body ya no tiene sentido: dejaría bandas fantasma abajo. Fondo sólido
       cream (el color del último card = coaching) para que el hueco de abajo mimetice. */
    body.home-theme {
        background: #F7F5F9;
    }

    .home-split {
        grid-template-columns: 1fr;
    }
    .half-idiomas,
    .half-coaching {
        padding: 2.5rem 1.5rem;
        border-right: none;
    }
    /* Reajustar los negativos de las tiras de imagen (patrón sandwich) al padding móvil */
    .half-idiomas::before {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        margin-top: -2.5rem !important;
    }
    .half-coaching::after {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        margin-bottom: -2.5rem !important;
    }
    .home-hero h1 {
        font-size: 1.5rem;
    }
}