/* [XP V3 2026-08-26] xpherosplit — hero a dos columnas de la maqueta V3.
   Medidas tomadas del documento aprobado (canvas de 1040 px, 40 px de margen).
   Los anchos de linea se fijan en pixeles para conservar los cortes de la
   maqueta aunque el contenedor del sitio sea mas ancho.
   La figura admite tres formas: arco, circulo y retrato. */

.iaLayer-xpherosplit {
    background: var(--xphs-bg, #FBF7EF);
    padding: 34px 15px 50px;
}

.iaLayer-xpherosplit .xphs-inner {
    max-width: var(--xphs-max, 1400px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--xphs-col-text, 1.12fr) var(--xphs-col-fig, 0.88fr);
    gap: 44px;
    align-items: center;
}

.iaLayer-xpherosplit.xphs--sin-figura .xphs-inner { grid-template-columns: 1fr; }

/* Figura a la izquierda: se reordena sin tocar el orden del marcado, para que
   el lector de pantalla siga encontrando primero el titular. */
.iaLayer-xpherosplit.xphs--figura-izquierda .xphs-inner {
    grid-template-columns: var(--xphs-col-fig, 0.88fr) var(--xphs-col-text, 1.12fr);
}
.iaLayer-xpherosplit.xphs--figura-izquierda .xphs-text   { grid-column: 2; grid-row: 1; }
.iaLayer-xpherosplit.xphs--figura-izquierda .xphs-figure { grid-column: 1; grid-row: 1; margin: 0 auto 0 0; }

/* --- Columna de texto ------------------------------------------------- */
.iaLayer-xpherosplit .xphs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    background: var(--xphs-eyebrow-bg, #EAF3DC);
    color: var(--xphs-eyebrow-color, #4E7F2A);
    font-family: var(--xp-font-body, "Work Sans", sans-serif);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    line-height: 1;
}

.iaLayer-xpherosplit .xphs-eyebrow .xp-ico { font-size: 13px; flex: none; }

.iaLayer-xpherosplit .xphs-title {
    font-family: var(--xp-font-heading, "Outfit", sans-serif);
    font-size: var(--xphs-title-size, 48px);
    font-weight: 600;
    color: var(--xphs-title, #14372B);
    line-height: 1.07;
    letter-spacing: -0.02em;
    margin: 20px 0 0;
    max-width: 620px;
    text-wrap: balance;
}

.iaLayer-xpherosplit .xphs-body {
    margin-top: 18px;
    max-width: 540px;
    color: var(--xphs-text, #55635A);
    font-family: var(--xp-font-body, "Work Sans", sans-serif);
    font-size: 15px;
    line-height: 1.75;
    text-wrap: pretty;
}

/* El tema declara `main p { font-family; font-size; font-weight }`, asi que los
   parrafos que salen del texto enriquecido ignoran lo puesto en el contenedor.
   Hay que repetir la tipografia sobre el propio <p>. */
.iaLayer-xpherosplit .xphs-body > p {
    margin: 0;
    font-family: var(--xp-font-body, "Work Sans", sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--xphs-text, #55635A);
    letter-spacing: normal;
}
.iaLayer-xpherosplit .xphs-body > p + p { margin-top: 12px; }

.iaLayer-xpherosplit .xphs-actions { margin-top: 28px; }

/* El tema declara `.btn:not(.no-style-btn *):not(.no-style-btn)`, que suma tres
   clases de especificidad. Para que manden los colores del bloque hay que
   igualar o superar esa cuenta: de ahi el selector de tres clases mas etiqueta. */
.iaLayer-xpherosplit .xphs-actions a.xphs-cta,
.iaLayer-xpherosplit .xphs-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--xphs-cta-bg, #14372B);
    color: var(--xphs-cta-color, #FBF7EF);
    font-family: var(--xp-font-heading, "Outfit", sans-serif);
    font-size: 14px;
    font-weight: 600;
    padding: 15px 26px;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 20px -6px rgba(20, 55, 43, 0.45);
    text-decoration: none;
    transition: transform var(--xp-dur-1, 160ms) var(--xp-ease, ease),
                box-shadow var(--xp-dur-1, 160ms) var(--xp-ease, ease);
}

.iaLayer-xpherosplit .xphs-cta .xp-ico { font-size: 15px; flex: none; }

.iaLayer-xpherosplit .xphs-actions a.xphs-cta:hover,
.iaLayer-xpherosplit .xphs-actions a.xphs-cta:focus-visible {
    background: var(--xphs-cta-bg, #14372B);
    color: var(--xphs-cta-color, #FBF7EF);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(20, 55, 43, 0.5);
}

/* --- Columna de la figura --------------------------------------------- */
.iaLayer-xpherosplit .xphs-figure {
    position: relative;
    max-width: var(--xphs-fig-max, 460px);
    width: 100%;
    margin-left: auto;
}

.iaLayer-xpherosplit .xphs-arch {
    height: var(--xphs-arch-h, 340px);
    border-radius: 999px 999px 26px 26px;
    background: radial-gradient(130% 85% at 50% 10%,
        var(--xphs-arch-1, #FFD693) 0%,
        var(--xphs-arch-2, #F2A840) 24%,
        var(--xphs-arch-3, #8CC63F) 60%,
        var(--xphs-arch-4, #1F7A52) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 26px;
    overflow: hidden;
}

.iaLayer-xpherosplit .xphs-arch--circulo {
    height: auto;
    aspect-ratio: 1;
    border-radius: 999px;
    align-items: center;
    padding-bottom: 0;
}

/* Hoja (Servicios) y forma en D (Proyectos): mismas piezas que la maqueta,
   resueltas con radios asimetricos y un degradado lineal. */
.iaLayer-xpherosplit .xphs-arch--hoja,
.iaLayer-xpherosplit .xphs-arch--de {
    align-items: center;
    padding-bottom: 0;
    background: linear-gradient(135deg,
        var(--xphs-arch-1, #A9D857) 0%,
        var(--xphs-arch-3, #6FA32E) 55%,
        var(--xphs-arch-4, #1F7A52) 100%);
}

.iaLayer-xpherosplit .xphs-arch--hoja { border-radius: 999px 12px 999px 12px; }
.iaLayer-xpherosplit .xphs-arch--de   { border-radius: 12px 999px 999px 12px; }

.iaLayer-xpherosplit .xphs-arch .xp-ico {
    font-size: 56px;
    color: rgba(251, 247, 239, 0.55);
}

/* Retrato: circulo recortado. El modulo antiguo trataba la imagen como fondo a
   sangre y dejaba el texto encima de la cara; aqui va en su propia columna. */
.iaLayer-xpherosplit .xphs-retrato {
    margin: 0;
    display: block;
}

.iaLayer-xpherosplit .xphs-retrato img,
.iaLayer-xpherosplit .xphs-retrato-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 999px;
    box-shadow: var(--xp-shadow-2, 0 6px 20px rgba(20, 55, 43, 0.08));
}

.iaLayer-xpherosplit .xphs-figure-caption {
    margin: 12px 0 0;
    text-align: center;
    font-family: var(--xp-font-body, "Work Sans", sans-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--xphs-badge-caption, #8A9689);
}

.iaLayer-xpherosplit .xphs-badge {
    position: absolute;
    bottom: 22px;
    left: -24px;
    display: flex;
    flex-direction: column;
    background: var(--xphs-badge-bg, #FBF7EF);
    border: 1px solid rgba(20, 55, 43, 0.06);
    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: 0 12px 30px -8px rgba(20, 55, 43, 0.28);
}

.iaLayer-xpherosplit .xphs-badge-value {
    font-family: var(--xp-font-heading, "Outfit", sans-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--xphs-badge-value, #1F7A52);
    line-height: 1.2;
}

.iaLayer-xpherosplit .xphs-badge-caption {
    font-family: var(--xp-font-body, "Work Sans", sans-serif);
    font-size: 11.5px;
    color: var(--xphs-badge-caption, #7A857C);
    line-height: 1.3;
}

/* --- Adaptacion ------------------------------------------------------- */
@media (max-width: 1199px) {
    .iaLayer-xpherosplit { --xphs-title-size: 40px; }
}

@media (max-width: 991px) {
    .iaLayer-xpherosplit {
        padding: 28px 15px 44px;
        --xphs-title-size: 36px;
    }
    .iaLayer-xpherosplit .xphs-inner,
    .iaLayer-xpherosplit.xphs--figura-izquierda .xphs-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .iaLayer-xpherosplit.xphs--figura-izquierda .xphs-text   { grid-column: 1; grid-row: 2; }
    .iaLayer-xpherosplit.xphs--figura-izquierda .xphs-figure { grid-column: 1; grid-row: 1; margin: 0 auto; }
    .iaLayer-xpherosplit .xphs-title { max-width: none; }
    .iaLayer-xpherosplit .xphs-body { max-width: none; }
    .iaLayer-xpherosplit .xphs-figure { margin: 0 auto; max-width: 420px; }
    .iaLayer-xpherosplit .xphs-arch { height: 260px; }
    .iaLayer-xpherosplit .xphs-arch--circulo { height: auto; }
    .iaLayer-xpherosplit .xphs-badge { left: 0; bottom: 16px; }
}

@media (max-width: 575px) {
    .iaLayer-xpherosplit { --xphs-title-size: 30px; }
    .iaLayer-xpherosplit .xphs-arch { height: 220px; }
    .iaLayer-xpherosplit .xphs-cta { width: 100%; justify-content: center; }
}