/* Composición visual de la portada. Cada variante conserva sus colores y un
   carácter propio, sin reutilizar ni duplicar logotipos corporativos. */

/* Los contenedores comunes sirven para fichas y listados; la portada necesita
   ser un lienzo continuo entre cabecera, lateral y pie. */
.main-content .container:has(.home-identity) {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

.main-content main:has(.home-identity) {
    gap: 0;
    min-height: 100%;
    padding-bottom: 0 !important;
}

.home-identity {
    --home-base: #18213f;
    --home-base-deep: #10182f;
    --home-foreground: #fff;
    --home-muted: rgba(255, 255, 255, .78);
    --home-accent: #ff8c2c;
    --home-accent-rgb: 255, 140, 44;
    align-items: center;
    min-height: 100%;
    padding: clamp(2.5rem, 9vh, 7rem) clamp(2rem, 8vw, 9rem) clamp(5rem, 11vh, 8rem);
    overflow: hidden;
    color: var(--home-foreground);
    text-align: left;
    background:
        radial-gradient(ellipse at 88% 19%, rgba(var(--home-accent-rgb), .17), transparent 34%),
        radial-gradient(ellipse at 10% 0%, rgba(255, 255, 255, .055), transparent 32%),
        linear-gradient(125deg, var(--home-base-deep) 0%, var(--home-base) 56%, #131a2d 100%);
    isolation: isolate;
}

.home-identity--primor {
    --home-base: #242424;
    --home-base-deep: #111315;
    --home-accent: #ef3035;
    --home-accent-rgb: 239, 48, 53;
    --home-variant: #ff9a9d;
}

.home-identity--jdl {
    --home-base: #10264d;
    --home-base-deep: #07162e;
    --home-accent: #1970dc;
    --home-accent-rgb: 25, 112, 220;
    --home-variant: #82b5ff;
}

/* Cinta luminosa inferior, adaptable y creada con CSS. */
.home-identity::before {
    position: absolute;
    z-index: 0;
    right: -14%;
    bottom: -29%;
    left: -10%;
    height: 52%;
    content: "";
    background:
        repeating-linear-gradient(172deg, transparent 0 10px, rgba(var(--home-accent-rgb), .13) 11px 13px, transparent 14px 20px),
        linear-gradient(174deg, transparent 0 30%, rgba(var(--home-accent-rgb), .13) 31% 42%, rgba(var(--home-accent-rgb), .68) 43% 52%, rgba(var(--home-accent-rgb), .15) 53% 58%, transparent 59% 100%);
    border-radius: 50% 50% 0 0 / 46% 46% 0 0;
    filter: drop-shadow(0 -9px 15px rgba(var(--home-accent-rgb), .24));
    transform: rotate(-7deg);
}

/* Piezas translucidas que dan profundidad en el lado visual, sin competir con
   el bloque de lectura de la izquierda. */
.home-identity::after {
    position: absolute;
    z-index: 0;
    right: clamp(-10rem, -4vw, -3rem);
    bottom: 15%;
    width: min(41vw, 650px);
    height: min(26vw, 360px);
    content: "";
    opacity: .7;
    background:
        linear-gradient(140deg, transparent 0 12%, rgba(var(--home-accent-rgb), .92) 13% 38%, transparent 39% 52%, rgba(var(--home-accent-rgb), .45) 53% 76%, transparent 77%),
        linear-gradient(90deg, transparent 0 10%, rgba(255, 255, 255, .08) 11% 31%, transparent 32% 44%, rgba(var(--home-accent-rgb), .76) 45% 68%, transparent 69%);
    filter: drop-shadow(0 1rem 1.4rem rgba(0, 0, 0, .25));
    transform: skewY(-9deg);
}

.home-identity__content {
    position: relative;
    z-index: 1;
    max-width: min(960px, 100%);
}

.home-identity__eyebrow {
    margin-bottom: 1rem;
    color: var(--home-muted);
    font-size: clamp(.72rem, 1.15vw, .92rem);
    letter-spacing: .075em;
}

.home-identity__title {
    color: var(--home-foreground) !important;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: clamp(3.4rem, 8vw, 8rem);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: .93;
}

/* La línea principal define la anchura de marca. La coletilla se alinea con
   su extremo derecho para que Primor/JDL acompañe a «Pro» sin alargarlo. */
.home-identity__brand-line {
    display: block;
    white-space: nowrap;
}

.home-identity__product {
    color: var(--home-foreground);
}

/* "Pro" completa la marca principal y toma el color del tema. */
.home-identity__pro {
    color: var(--home-accent);
}

/* La variante se muestra debajo como coletilla, no concatenada al producto. */
.home-identity__variant {
    margin-top: -.04em;
    padding-right: .05em;
    color: var(--home-variant, var(--home-accent));
    font-size: .47em;
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: .9;
    text-align: right;
}

.home-identity__subtitle {
    margin-top: 1.45rem;
    color: var(--home-muted);
}

.home-identity__description {
    max-width: 590px;
    margin: 2.35rem 0 0;
    color: var(--home-foreground);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 1.65vw, 1.32rem);
    line-height: 1.55;
}

.home-identity__meta {
    z-index: 1;
    bottom: 1.4rem;
    left: clamp(2rem, 8vw, 9rem);
    color: var(--home-muted);
}

@media (max-width: 900px) {
    .home-identity {
        align-items: flex-start;
        padding-right: clamp(1.5rem, 6vw, 4rem);
        padding-left: clamp(1.5rem, 6vw, 4rem);
    }

    .home-identity::after {
        right: -12rem;
        bottom: 9%;
        width: 520px;
        height: 310px;
        opacity: .42;
    }

    .home-identity__meta {
        left: clamp(1.5rem, 6vw, 4rem);
    }
}

@media (max-width: 575.98px) {
    .home-identity {
        justify-content: center;
        min-height: 100%;
        padding: 3rem 1.35rem 5rem;
    }

    .home-identity::before {
        right: -45%;
        bottom: -15%;
        left: -45%;
        height: 39%;
    }

    .home-identity::after {
        display: none;
    }

    .home-identity__title {
        font-size: clamp(3rem, 15vw, 5.25rem);
    }

    .home-identity__brand-line {
        white-space: normal;
    }

    .home-identity__variant {
        font-size: .5em;
    }

    .home-identity__description {
        margin-top: 1.7rem;
        font-size: 1rem;
    }

    .home-identity__meta {
        right: 1.35rem;
        bottom: 1rem;
        left: 1.35rem;
        justify-content: center;
        font-size: .68rem;
    }
}