/* =========================================================
   INDEX / HOME COEPRISO
========================================================= */

.in-shell {
    padding-top: 32px;
    padding-bottom: 52px;
}

/* =========================================================
   ELEMENTOS BASE DE SECCIÓN
========================================================= */

.in-kicker,
.in-section-kicker {
    color: var(--coepriso-verde);
    font-family: var(--font-base);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .28em;
    line-height: 1.4;
    text-transform: uppercase;
}

.in-section-head {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.in-section-title {
    color: var(--coepriso-guinda);
    font-family: var(--font-titulo);
    font-size: clamp(1.72rem, 3vw, 2.45rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.035em;
    margin-top: 0;
}

.in-section-title::after {
    content: "";
    display: block;
    width: 78px;
    height: 3px;
    margin-top: 12px;
    border-radius: var(--radius-pill, 999px);
    background: linear-gradient(90deg, var(--coepriso-naranja), var(--coepriso-dorado), transparent);
}

.tx-center .in-section-title::after,
.in-section-head .in-section-title::after {
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(90deg, transparent, var(--coepriso-naranja), var(--coepriso-dorado), transparent);
}

.in-section-subtitle {
    max-width: 780px;
    color: var(--coepriso-gray-700);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.72;
}

/* =========================================================
   HERO
========================================================= */

.in-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 4% 82%, rgba(242, 90, 29, .11), transparent 31%),
        radial-gradient(circle at 92% 18%, rgba(29, 53, 84, .10), transparent 33%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,242,232,.92));
    border: 1px solid rgba(29, 53, 84, .10);
    box-shadow: var(--shadow-coepriso-lg);
    isolation: isolate;
}

.in-hero::before {
    content: "";
    position: absolute;
    left: -82px;
    bottom: -92px;
    width: 350px;
    height: 350px;
    opacity: .12;
    background:
        linear-gradient(45deg, transparent 46%, var(--coepriso-azul) 47%, var(--coepriso-azul) 53%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, var(--coepriso-naranja) 47%, var(--coepriso-naranja) 53%, transparent 54%);
    background-size: 54px 54px;
    pointer-events: none;
}

.in-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.55) 48%,
            rgba(29,53,84,.04) 100%
        );
}

.in-hero__copy {
    position: relative;
    z-index: 2;
}

.in-title {
    color: var(--coepriso-guinda);
    font-family: var(--font-titulo);
    font-size: clamp(2.45rem, 5vw, 4.85rem);
    font-weight: 900;
    letter-spacing: -.058em;
    line-height: .96;
    margin: 0;
}

.in-title span {
    display: block;
    color: var(--coepriso-azul);
    text-shadow: 0 8px 22px rgba(29, 53, 84, .10);
}

.in-mini-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0 24px;
}

.in-mini-divider::before,
.in-mini-divider::after {
    content: "";
    width: 92px;
    height: 2px;
    border-radius: var(--radius-pill, 999px);
    background: linear-gradient(90deg, transparent, var(--coepriso-naranja), var(--coepriso-dorado), transparent);
}

.in-mini-divider span {
    width: 10px;
    height: 10px;
    border: 2px solid var(--coepriso-naranja);
    background: rgba(255,255,255,.72);
    transform: rotate(45deg);
}

.in-lead {
    max-width: 540px;
    color: var(--coepriso-texto);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.72;
}

.in-hero__signals {
    max-width: 590px;
}

.in-signal {
    min-height: 92px;
    padding: 13px 8px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(29,53,84,.12);
    text-align: center;
    box-shadow: 0 10px 28px rgba(29, 53, 84, .08);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.in-signal:hover {
    transform: translateY(-4px);
    border-color: rgba(242,90,29,.28);
    box-shadow: 0 16px 34px rgba(29, 53, 84, .13);
}

.in-signal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
    border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--coepriso-azul), var(--coepriso-naranja)) border-box;
    border: 2px solid transparent;
}

.in-signal__icon img {
    display: block;
    width: 74%;
    height: 74%;
    object-fit: contain;
}

.in-signal span:last-child {
    display: block;
    color: var(--coepriso-verde-700);
    font-size: .77rem;
    font-weight: 900;
    line-height: 1.2;
}

/* Fachada */

.in-door-scene {
    position: relative;
    overflow: hidden;
    margin: 0;
    min-height: 450px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--coepriso-azul-50), var(--coepriso-crema-2));
    box-shadow:
        0 20px 54px rgba(29, 53, 84, .18),
        inset 0 0 0 1px rgba(255,255,255,.52);
    isolation: isolate;
}

/* Imagen base y transición */
.in-door-scene__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition:
        opacity .75s ease,
        transform 1.1s ease,
        filter 1.1s ease;
}

/* fachada-a */
.in-door-scene__img--base {
    position: relative;
    z-index: 0;
}

/* fachada-b */
.in-door-scene__img--hover {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

/* Cambio de fachada en hover, focus o estado abierto */
.in-door-scene:hover .in-door-scene__img--hover,
.in-door-scene:focus-within .in-door-scene__img--hover,
.in-door-scene.is-open .in-door-scene__img--hover,
.in-door-scene.is-door-open .in-door-scene__img--hover {
    opacity: 1;
}

.in-door-scene:hover .in-door-scene__img--base,
.in-door-scene:focus-within .in-door-scene__img--base,
.in-door-scene.is-open .in-door-scene__img--base,
.in-door-scene.is-door-open .in-door-scene__img--base {
    transform: scale(1.045);
    filter: saturate(1.06);
}

/* Estado abierto más marcado */
.in-door-scene.is-open .in-door-scene__img,
.in-door-scene.is-door-open .in-door-scene__img {
    transform: scale(1.065);
    filter: saturate(1.08);
}

.in-door-scene__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 51% 52%, rgba(255,255,255,.02), transparent 17%),
        linear-gradient(90deg, rgba(13,28,48,.18), transparent 30%, transparent 66%, rgba(29,53,84,.18)),
        linear-gradient(180deg, transparent 58%, rgba(13,28,48,.30));
    pointer-events: none;
    transition: opacity .6s ease;
}

.in-door-scene:hover .in-door-scene__veil,
.in-door-scene:focus-within .in-door-scene__veil,
.in-door-scene.is-open .in-door-scene__veil,
.in-door-scene.is-door-open .in-door-scene__veil {
    opacity: .82;
}

.in-open-btn {
    position: absolute;
    left: 30%;
    top: 51%;
    z-index: 4;
    transform: translate(-50%, -50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 154px;
    height: 154px;
    border: 8px solid rgba(255,255,255,.76);
    border-radius: 50%;
    color: var(--coepriso-blanco);
    background:
        radial-gradient(circle at 34% 20%, rgba(255,255,255,.22), transparent 27%),
        linear-gradient(145deg, var(--coepriso-naranja), var(--coepriso-guinda) 72%);
    box-shadow:
        0 20px 46px rgba(59, 6, 23, .32),
        0 0 0 13px rgba(242, 90, 29, .12),
        0 0 42px rgba(242, 90, 29, .28);
    cursor: pointer;
    font-family: var(--font-base);
    font-weight: 900;
    line-height: 1.06;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.in-open-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}

.in-open-btn__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.in-open-btn span:last-child {
    max-width: 92px;
    font-size: 1.02rem;
}

.in-open-btn:hover,
.in-open-btn:focus {
    transform: translate(-50%, -50%) scale(1.045);
    background:
        radial-gradient(circle at 34% 20%, rgba(255,255,255,.20), transparent 27%),
        linear-gradient(145deg, var(--coepriso-naranja-700), var(--coepriso-guinda-900) 72%);
    box-shadow:
        0 26px 58px rgba(59, 6, 23, .38),
        0 0 0 18px rgba(242, 90, 29, .14),
        0 0 52px rgba(242, 90, 29, .34);
    outline: none;
}

.in-door-hint {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 4;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    padding: 10px 18px;
    border-radius: var(--radius-pill, 999px);
    color: var(--coepriso-blanco);
    background: rgba(13,28,48,.78);
    box-shadow: 0 10px 28px rgba(13,28,48,.24);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 900;
    backdrop-filter: blur(6px);
}

.in-door-hint__arrow {
    color: var(--coepriso-naranja);
    font-size: 1.3rem;
    line-height: 1;
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .in-door-scene {
        min-height: 340px;
        border-radius: var(--radius-lg, 18px);
    }

    .in-door-scene__img {
        min-height: 340px;
    }

    .in-open-btn {
        left: 50%;
        top: 48%;
        width: 128px;
        height: 128px;
        border-width: 6px;
    }

    .in-open-btn span:last-child {
        font-size: .9rem;
    }

    .in-door-hint {
        bottom: 18px;
        max-width: calc(100% - 32px);
        white-space: normal;
        text-align: center;
        justify-content: center;
    }
}

/* =========================================================
   ¿QUÉ NECESITAS HACER?
========================================================= */

.in-action-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(29,53,84,.10);
    box-shadow: var(--shadow-coepriso);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.in-action-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--card-accent, linear-gradient(90deg, var(--coepriso-guinda), var(--coepriso-naranja)));
}

.in-action-card.is-blue {
    --card-accent: linear-gradient(90deg, var(--coepriso-azul), var(--coepriso-azul-500));
    --icon-color: var(--coepriso-azul);
}

.in-action-card.is-orange {
    --card-accent: linear-gradient(90deg, var(--coepriso-naranja), var(--coepriso-dorado));
    --icon-color: var(--coepriso-naranja);
}

.in-action-card.is-green {
    --card-accent: linear-gradient(90deg, var(--coepriso-verde), var(--coepriso-verde-200));
    --icon-color: var(--coepriso-verde);
}

.in-action-card.is-guinda {
    --card-accent: linear-gradient(90deg, var(--coepriso-guinda), var(--coepriso-guinda-300));
    --icon-color: var(--coepriso-guinda);
}

.in-action-card:hover {
    transform: translateY(-7px);
    border-color: rgba(242,90,29,.24);
    box-shadow: var(--shadow-coepriso-lg);
}

.in-action-card__icon,
.in-objective__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--icon-color, var(--coepriso-azul)), var(--coepriso-naranja)) border-box;
    border: 3px solid transparent;
    box-shadow:
        0 10px 24px rgba(29,53,84,.12),
        inset 0 0 0 7px rgba(238,244,250,.72);
    transform-style: preserve-3d;
    will-change: transform;
}

.in-action-card__icon img,
.in-objective__icon img {
    display: block;
    width: 96%;
    height: 96%;
    border-radius: 50%;
    object-fit: contain;
    backface-visibility: hidden;
}

.in-action-card__icon i,
.in-objective__icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96%;
    height: 96%;
    color: var(--icon-color, var(--coepriso-azul));
    font-size: 2rem;
    line-height: 1;
    backface-visibility: hidden;
}

.in-action-card__icon i {
    font-size: 2.15rem;
}

.in-objective__icon i {
    font-size: 2.4rem;
}

/* Giro tipo moneda en hover de tarjetas de ¿Qué necesitas hacer? */
.in-action-card:hover .in-action-card__icon,
.in-action-card:focus-within .in-action-card__icon {
    animation: arx-coin-spin .82s ease-in-out both;
}

.in-action-card__title,
.in-news-card__title,
.in-feature-card__title {
    font-family: var(--font-titulo);
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.in-action-card__title {
    color: var(--coepriso-azul);
    font-size: 1.22rem;
}

.in-card-divider {
    width: 54px;
    height: 3px;
    margin: 13px 0 16px;
    border-radius: var(--radius-pill, 999px);
    background: linear-gradient(90deg, var(--coepriso-naranja), var(--coepriso-dorado));
}

.in-action-card__text,
.in-news-card__text,
.in-feature-card__text {
    color: var(--coepriso-gray-800);
    font-size: .91rem;
    font-weight: 500;
    line-height: 1.66;
    height: 4.98em;
}

.in-card-btn,
.in-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        background .24s ease,
        color .24s ease;
}

.in-card-btn {
    color: var(--coepriso-blanco);
    background: linear-gradient(180deg, var(--coepriso-azul), var(--coepriso-azul-700));
    box-shadow: 0 10px 22px rgba(29,53,84,.22);
}

.in-action-card.is-orange .in-card-btn,
.in-action-card.is-guinda .in-card-btn {
    background: linear-gradient(180deg, var(--coepriso-guinda), var(--coepriso-guinda-700));
    box-shadow: 0 10px 22px rgba(141,21,59,.22);
}

.in-card-btn:hover,
.in-card-btn:focus {
    color: var(--coepriso-blanco);
    background: linear-gradient(180deg, var(--coepriso-naranja), var(--coepriso-naranja-700));
    transform: translateY(-2px);
    outline: none;
}

/* =========================================================
   NOTICIAS Y AVISOS
========================================================= */

.in-news,
.in-about,
.in-objective {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(29,53,84,.10);
    box-shadow: var(--shadow-coepriso);
}

.in-news {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 94% 11%, rgba(242,90,29,.11), transparent 28%),
        radial-gradient(circle at 4% 89%, rgba(29,53,84,.09), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,242,232,.88));
}

.in-news::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(180deg, var(--coepriso-guinda), var(--coepriso-naranja), var(--coepriso-azul));
}

.in-link-more,
.in-news-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--coepriso-guinda);
    font-weight: 900;
    text-decoration: none;
}

.in-link-more:hover,
.in-link-more:focus,
.in-news-link:hover,
.in-news-link:focus {
    color: var(--coepriso-naranja-700);
    text-decoration: underline;
    outline: none;
}

.in-feature-card,
.in-news-card {
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(29,53,84,.10);
    box-shadow: 0 12px 30px rgba(29, 53, 84, .09);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.in-feature-card:hover,
.in-news-card:hover {
    transform: translateY(-5px);
    border-color: rgba(242,90,29,.20);
    box-shadow: 0 20px 46px rgba(29, 53, 84, .15);
}

.in-feature-card__media {
    min-height: 260px;
    background: linear-gradient(135deg, rgba(29,53,84,.92), rgba(141,21,59,.72));
}

.in-feature-card__media img,
.in-news-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.in-feature-card__media img {
    min-height: 260px;
}

.in-news-card__media {
    overflow: hidden;
    min-height: 150px;
    border-radius: var(--radius-md);
    background: var(--coepriso-azul-50);
}

.in-news-card__media img {
    min-height: 150px;
}

.in-news-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: var(--radius-pill, 999px);
    color: var(--coepriso-azul);
    background: var(--coepriso-azul-50);
    border: 1px solid rgba(29,53,84,.10);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.in-feature-card__title {
    margin-top: 13px;
    margin-bottom: 10px;
    color: var(--coepriso-guinda);
    font-size: 1.58rem;
}

.in-news-card__title {
    margin-top: 8px;
    margin-bottom: 8px;
    color: var(--coepriso-azul);
    font-size: 1.18rem;
}

/* =========================================================
   MENSAJE INSTITUCIONAL
========================================================= */

.in-about {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 12%, rgba(13,90,58,.08), transparent 32%),
        radial-gradient(circle at 18% 90%, rgba(242,90,29,.08), transparent 26%),
        rgba(255,255,255,.94);
}

.in-about::after,
.in-objective::after {
    content: "";
    position: absolute;
    right: -44px;
    bottom: -60px;
    width: 230px;
    height: 230px;
    opacity: .08;
    background:
        linear-gradient(45deg, transparent 46%, var(--coepriso-azul) 47%, var(--coepriso-azul) 53%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, var(--coepriso-naranja) 47%, var(--coepriso-naranja) 53%, transparent 54%);
    background-size: 46px 46px;
    pointer-events: none;
}

.in-editorial-text p {
    color: var(--coepriso-gray-800);
    font-size: .96rem;
    font-weight: 500;
    line-height: 1.78;
    margin: 0 0 14px;
}

.in-outline-btn {
    color: var(--coepriso-azul);
    border: 1px solid rgba(29,53,84,.24);
    background: rgba(255,255,255,.78);
}

.in-outline-btn:hover,
.in-outline-btn:focus {
    color: var(--coepriso-blanco);
    background: var(--coepriso-azul);
    transform: translateY(-2px);
    outline: none;
}

.in-about-illustration {
    max-width: 800px;
    margin: 0;
    padding: 8px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background:
        radial-gradient(circle at 48% 50%, rgba(242,90,29,.13), transparent 54%),
        radial-gradient(circle at 58% 45%, rgba(29,53,84,.10), transparent 60%),
        rgba(248,242,232,.74);
    border: 1px solid rgba(199,154,69,.18);
}

.in-about-illustration img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* =========================================================
   OBJETIVO
========================================================= */

.in-objective {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(238,244,250,.72), rgba(255,255,255,.94) 42%, rgba(255,243,236,.72));
}

.in-objective__icon {
    width: 98px;
    height: 98px;
    --icon-color: var(--coepriso-naranja);
    margin-top: 4em;
}

.in-objective__title {
    color: var(--coepriso-guinda);
    font-family: var(--font-titulo);
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.15;
}

.in-objective__text {
    color: var(--coepriso-texto);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.78;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {
    .in-shell {
        padding-top: 22px;
    }

    .in-door-scene,
    .in-door-scene__img {
        min-height: 385px;
    }

    .in-open-btn {
        width: 132px;
        height: 132px;
    }

    .in-feature-card__media,
    .in-feature-card__media img {
        min-height: 220px;
    }
}

@media (max-width: 576px) {
    .in-shell {
        padding-top: 16px;
        padding-bottom: 34px;
    }

    .in-hero,
    .in-news,
    .in-about,
    .in-objective {
        border-radius: var(--radius-lg);
    }

    .in-kicker,
    .in-section-kicker {
        letter-spacing: .19em;
        font-size: .72rem;
    }

    .in-title {
        font-size: clamp(2.15rem, 14vw, 3.2rem);
    }

    .in-lead {
        font-size: .98rem;
    }

    .in-door-scene,
    .in-door-scene__img {
        min-height: 310px;
    }

    .in-open-btn {
        width: 112px;
        height: 112px;
        border-width: 6px;
    }

    .in-open-btn__icon {
        width: 30px;
        height: 30px;
    }

    .in-open-btn span:last-child {
        font-size: .86rem;
    }

    .in-door-hint {
        bottom: 14px;
        max-width: calc(100% - 30px);
        min-width: 0;
        white-space: normal;
        text-align: center;
        font-size: .76rem;
    }

    .in-signal {
        min-height: 82px;
    }

    .in-action-card__icon {
        width: 72px;
        height: 72px;
    }

    .in-feature-card__media,
    .in-feature-card__media img,
    .in-news-card__media,
    .in-news-card__media img {
        min-height: 190px;
    }

    .in-objective__icon {
        width: 82px;
        height: 82px;
    }
}