/* ==========================================================================
   Que hacemos (archive-servicio.php) - ajuste fino contra el PSD 03-Vinson-HACEMOS.
   Todo va acotado a las secciones propias de la pagina:
   .hacemos-intro, .industry-selector, .impact-carousel.
   ========================================================================== */

/* Titulares compartidos de la pagina (54/60 light + enfasis serif italica). */
.hacemos-intro__title,
.industry-selector__title,
.impact-carousel__title {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(2.35rem, 2.95vw, 3.375rem);
    font-weight: 300;
    line-height: 1.11;
    letter-spacing: -0.01em;
}

.hacemos-intro__title {
    max-width: 10.5em;
}

.hacemos-intro__title em,
.industry-selector__title em,
.impact-carousel__title em {
    color: var(--color-blue);
    font-family: var(--font-serif);
    font-size: 1.185em;
    font-style: italic;
    font-weight: 400;
    line-height: 0;
    letter-spacing: -0.025em;
}

.hacemos-intro__subtitle,
.industry-selector__kicker,
.impact-carousel__kicker {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.4rem, 1.62vw, 1.875rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   1. Intro + mosaico
   -------------------------------------------------------------------------- */
.hacemos-intro {
    padding: clamp(4.5rem, 9.2vw, 10.6rem) 0 clamp(4rem, 8vw, 9.375rem);
}

.hacemos-intro__header {
    display: grid;
    grid-template-columns: minmax(0, 777fr) minmax(0, 557fr);
    gap: 0;
    align-items: start;
    margin-bottom: clamp(3rem, 3.95vw, 4.59rem);
}

.hacemos-intro__copy {
    padding-top: clamp(1rem, 7.6vw, 8.8rem);
}

.hacemos-intro__text {
    margin: 0.8rem 0 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.hacemos-intro__text strong {
    color: var(--color-text);
    font-weight: 700;
}

.hacemos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 460px;
    gap: 30px;
}

/* Tarjeta de servicio */
.hacemos-intro .service-tile {
    position: relative;
    display: flex;
    min-height: 0;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 0;
    background: #20262c;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: box-shadow 200ms ease, color 200ms ease;
}

.hacemos-intro .service-tile__media {
    position: absolute;
    inset: 0;
}

.hacemos-intro .service-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

/* Degradado inferior del PSD (rgb 32,38,44 de 0 a 1 en 179px) + capa de hover. */
.hacemos-intro .service-tile__media::before,
.hacemos-intro .service-tile__media::after {
    position: absolute;
    right: 0;
    left: 0;
    content: "";
    pointer-events: none;
}

.hacemos-intro .service-tile__media::before {
    top: 0;
    bottom: 0;
    background: rgba(32, 38, 44, 0.5);
    opacity: 0;
    transition: opacity 200ms ease;
}

.hacemos-intro .service-tile__media::after {
    top: auto;
    bottom: 0;
    height: 179px;
    background: linear-gradient(180deg, rgba(32, 38, 44, 0) 0%, rgba(32, 38, 44, 0.98) 100%);
}

.hacemos-intro .service-tile__arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    display: block;
    width: 16px;
    height: 16px;
    color: var(--color-paper);
    font-size: 16px;
    line-height: 1;
}

.hacemos-intro .service-tile__arrow svg {
    display: block;
    width: 16px;
    height: 16px;
}

.hacemos-intro .service-tile__body {
    position: relative;
    z-index: 1;
    padding: 0 21px 26px;
}

.hacemos-intro .service-tile__title {
    max-width: 180px;
    margin: 0;
    padding: 0;
    text-wrap: balance;
    color: inherit;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.hacemos-intro .service-tile__description {
    display: block;
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.25;
}

.hacemos-intro .service-tile:hover,
.hacemos-intro .service-tile:focus-visible {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    color: var(--color-paper);
}

.hacemos-intro .service-tile:hover .service-tile__media::before,
.hacemos-intro .service-tile:focus-visible .service-tile__media::before {
    opacity: 1;
}

.hacemos-intro .service-tile:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-blue) 60%, transparent);
    outline-offset: 3px;
}

/* Tarjeta de cita */
.hacemos-intro .quote-tile {
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 32px 38px 29px 31px;
    border-radius: 0;
    background: #f2f3f4;
    color: var(--color-muted);
}

.hacemos-intro .quote-tile__mark {
    display: block;
    flex: 0 0 auto;
    width: 31px;
    height: 23px;
    background: var(--color-blue);
    -webkit-mask: url("../../images/que-hacemos-quote-mark.png") center / contain no-repeat;
    mask: url("../../images/que-hacemos-quote-mark.png") center / contain no-repeat;
}

.hacemos-intro .quote-tile__text {
    margin: 19px 0 0;
    padding: 0;
}

.hacemos-intro .quote-tile__text p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.hacemos-intro .quote-tile__text strong {
    color: var(--color-text);
    font-weight: 700;
}

.hacemos-intro .quote-tile__person {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    margin-right: -10px;
    padding-top: 1.25rem;
}

.hacemos-intro .quote-tile__avatar {
    display: flex;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-blue);
    box-shadow: 0 0 0 1.5px #fff;
    color: var(--color-paper);
    object-fit: cover;
}

.hacemos-intro .quote-tile__meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.hacemos-intro .quote-tile__name {
    margin-bottom: 3px;
    color: var(--color-blue);
    font-size: 1rem;
    line-height: 1.25;
}

.hacemos-intro .quote-tile__role,
.hacemos-intro .quote-tile__company {
    color: var(--color-text);
    font-size: 0.75rem;
    line-height: 1.25;
}

.hacemos-intro .quote-tile__company {
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. Selector de industrias
   -------------------------------------------------------------------------- */
.industry-selector {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4rem, 6.3vw, 7.3rem) 0 clamp(4rem, 7.5vw, 8.75rem);
    background: var(--color-ink);
    color: var(--color-paper);
}

/* Isologo Vinson del PSD (1538x1447, relleno #1e2a38). */
.industry-selector__shape {
    position: absolute;
    top: -207px;
    right: auto;
    bottom: auto;
    left: calc(50% - 27px);
    z-index: -1;
    width: 1538px;
    height: 1447px;
    background: none;
    clip-path: none;
    fill: #1e2a38;
}

.industry-selector__header {
    max-width: var(--shell);
    margin-bottom: clamp(2.5rem, 3.6vw, 4.2rem);
    text-align: center;
}

.industry-selector__kicker,
.industry-selector__title {
    color: var(--color-paper);
}

.industry-selector__title {
    max-width: 1030px;
    margin: 0.84rem auto 0;
}

.industry-selector__title em {
    color: var(--color-blue);
}

.industry-selector .industry-picker {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 357fr) minmax(0, 849fr);
    column-gap: clamp(2rem, 6.9vw, 8rem);
    border-top: 0;
    align-items: start;
}

.industry-selector .industry-picker__list {
    max-height: none;
    overflow: visible;
    border-right: 0;
}

.industry-selector .industry-picker__trigger {
    position: relative;
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #4a5056;
    background: transparent;
    color: #7a7e81;
    font-family: var(--font-sans);
    font-weight: 400;
}

.industry-selector .industry-picker__trigger::before {
    position: absolute;
    top: 1px;
    right: -2px;
    bottom: 1px;
    left: 0;
    z-index: -1;
    background: #242d34;
    content: "";
    opacity: 0;
    transition: opacity 180ms ease;
}

.industry-selector .industry-picker__trigger:hover {
    color: var(--color-paper);
}

.industry-selector .industry-picker__trigger.is-active {
    padding-left: 20px;
    background: transparent;
    color: var(--color-paper);
    font-weight: 400;
}

.industry-selector .industry-picker__trigger.is-active::before {
    opacity: 1;
}

.industry-selector .industry-picker__number {
    flex: 0 0 26px;
    color: var(--color-blue);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
}

.industry-selector .industry-picker__label {
    flex: 1 1 auto;
    font-size: 1.125rem;
    line-height: 1.3;
}

.industry-selector .industry-picker__trigger.is-active .industry-picker__label {
    font-weight: 700;
}

.industry-selector .industry-picker__arrow {
    display: none;
    flex: 0 0 auto;
    margin-right: 22px;
    color: var(--color-paper);
    font-size: 18px;
}

.industry-selector .industry-picker__arrow svg {
    display: block;
    width: 18px;
    height: 18px;
}

.industry-selector .industry-picker__trigger.is-active .industry-picker__arrow {
    display: block;
}

.industry-selector .industry-picker__panels {
    margin-top: 21px;
}

.industry-selector .industry-picker__panel {
    height: auto;
    /* Sin el fundido del panel entero: ver .industry-picker__content y __ghost. */
    animation: none;
}

.industry-selector .industry-picker__media {
    position: relative;
    aspect-ratio: 849 / 360;
    overflow: hidden;
    background: #20262c;
}

.industry-selector .industry-picker__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/*
 * Al cambiar de industria el panel ya no se funde entero desde el fondo de la seccion:
 * el texto entra con el mismo fundido y la foto anterior se desvanece sobre la nueva
 * (assets/js/main.js); si la nueva aun carga, queda el marcador y entra al llegar.
 */
.industry-selector .industry-picker__content {
    animation: industry-panel-reveal 300ms ease;
}

.industry-selector .industry-picker__ghost {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    pointer-events: none;
    animation: industry-picker-ghost 0.32s ease-out forwards;
}

@keyframes industry-picker-ghost {
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industry-selector .industry-picker__content {
        animation: none;
    }

    .industry-selector .industry-picker__ghost {
        display: none;
    }
}

.industry-selector .industry-picker__media::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64%;
    background: linear-gradient(180deg, rgba(32, 38, 44, 0) 0%, rgba(32, 38, 44, 0.94) 100%);
    content: "";
    pointer-events: none;
}

/* ".03" gigante del PSD: azul, anclado al borde inferior y cortado por la tarjeta. */
.industry-selector .industry-picker__media-number {
    position: absolute;
    bottom: -0.3em;
    left: 38px;
    z-index: 1;
    color: var(--color-blue);
    font-family: var(--font-sans);
    font-size: clamp(5rem, 8.35vw, 9.7rem);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1;
}

.industry-selector .industry-picker__media-dot {
    display: inline-block;
    transform: translateY(-0.1em);
}

.industry-selector .industry-picker__media-name {
    position: absolute;
    right: 22px;
    bottom: 16px;
    z-index: 1;
    color: #7a7e81;
    font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
}

.industry-selector .industry-picker__content {
    display: block;
    padding: 55px 40px 61px;
    background: #f2f3f4;
    color: var(--color-text);
}

.industry-selector .industry-picker__summary {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.25rem, 1.52vw, 1.75rem);
    font-weight: 400;
    line-height: 1.285;
    letter-spacing: -0.005em;
}

.industry-selector .industry-picker__excerpt {
    margin: 28px 0 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.25;
}

.industry-selector .industry-picker__cta {
    min-height: 50px;
    margin-top: 76px;
    padding: 0 20px;
    border: 1px solid var(--color-line);
    background: var(--color-paper);
    color: var(--color-text);
    font-weight: 400;
}

.industry-selector .industry-picker__cta > span[aria-hidden="true"] {
    color: var(--color-blue);
}

/* Industria sin imagen destacada: fondo de marca con el numero y el nombre. */
.industry-selector .industry-picker__media--empty::after {
    display: none;
}

/* Industria sin textos: solo nombre + boton, sin el aire pensado para el parrafo. */
.industry-selector .industry-picker__content--brief {
    padding-top: 40px;
    padding-bottom: 44px;
}

.industry-selector .industry-picker__content--brief .industry-picker__cta {
    margin-top: 28px;
}

/* --------------------------------------------------------------------------
   3. Carrusel de impacto + logos
   -------------------------------------------------------------------------- */
.impact-carousel {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 7.7vw, 8.9rem) 0 clamp(3.5rem, 6vw, 7rem);
    background: var(--color-paper);
}

.impact-carousel__header {
    margin-bottom: 50px;
    text-align: center;
}

.impact-carousel__title {
    margin-top: 1.14rem;
}

.impact-carousel__viewport {
    position: relative;
}

.impact-carousel .impact-card {
    display: grid;
    min-height: 552px;
    grid-template-columns: minmax(0, 890fr) minmax(0, 438fr);
    column-gap: 9px;
    margin: 0;
    background: transparent;
}

.impact-carousel .impact-card[hidden] {
    display: none;
}

.impact-card__content {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 49px 30px 28px;
    background: var(--color-ink);
    color: var(--color-paper);
}

.impact-card__shape {
    position: absolute;
    top: -224px;
    left: -116px;
    z-index: -1;
    width: 1064px;
    height: 1001px;
    fill: #1e2a38;
}

.impact-card__quote {
    margin: 0;
    padding: 0 20px 0 11px;
}

.impact-card__quote p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.impact-card__metrics {
    display: flex;
    gap: 0;
    margin: 42px 0 0;
    padding-left: 10px;
}

.impact-card__metrics div {
    display: flex;
    min-width: 292px;
    flex-direction: column-reverse;
    /* En column-reverse flex-end es arriba: las cifras quedan alineadas aunque
       una etiqueta ocupe 2 lineas. */
    justify-content: flex-end;
}

.impact-card__metrics dd {
    margin: 0;
    color: var(--color-blue);
    font-size: 4.625rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
}

.impact-card__metrics dd small {
    font-size: 0.62em;
    letter-spacing: 0;
}

.impact-card__metrics dt {
    margin-top: 3px;
    color: var(--color-paper);
    font-size: 1rem;
    line-height: 1.25;
}

.impact-card__person {
    display: flex;
    flex-direction: column;
    margin: auto 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #4a5056;
}

.impact-card__person strong {
    color: var(--color-paper);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}

.impact-card__person span {
    margin-top: 2px;
    color: #8e8e8e;
    font-size: 0.875rem;
    line-height: 1.3;
}

.impact-card__portrait {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #20262c;
}

.impact-card__portrait img,
.impact-card__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 901px) {
    /* Encuadre del PSD: foto a escala 1:1 desplazada (-28px, -164px). */
    .impact-card__portrait img {
        top: -29.7%;
        left: -6.4%;
        width: 112.6%;
        max-width: none;
        height: auto;
        object-fit: initial;
    }
}

.impact-card__placeholder {
    background: #263746;
}

.impact-card__mark {
    position: absolute;
    top: 21px;
    right: 23px;
    width: 83px;
    height: 61px;
    background: var(--color-paper);
    -webkit-mask: url("../../images/que-hacemos-quote-mark.png") center / contain no-repeat;
    mask: url("../../images/que-hacemos-quote-mark.png") center / contain no-repeat;
}

/* Flechas y contador (global/slide-nav.php) dentro de la tarjeta, abajo a la derecha del bloque de texto. */
.impact-carousel .impact-carousel__nav {
    position: absolute;
    right: calc((100% - 9px) * 438 / 1328 + 9px + 22px);
    bottom: 20px;
    z-index: 2;
}

/* El cargo de la persona no pasa por debajo de la navegacion. */
.impact-carousel .impact-card__person {
    padding-right: 130px;
}

/*
 * Franja de logos a todo el ancho: componente global (.logo-strip en main.css,
 * template-parts/global/client-logos.php). Aqui solo el margen y el tono propios.
 */
.impact-logos {
    margin-top: 103px;
}

.impact-logos .logo-strip__img {
    filter: grayscale(1) brightness(0.6);
    opacity: 0.3;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .hacemos-intro__header {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hacemos-intro__copy {
        max-width: 36rem;
        padding-top: 0;
    }

    .hacemos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(380px, auto);
        gap: 20px;
    }

    .hacemos-grid__empty {
        display: none;
    }

    /* A 2 columnas, la ultima tarjeta que queda sola ocupa la fila completa. */
    .hacemos-grid > :last-child:nth-child(odd of :not(.hacemos-grid__empty)) {
        grid-column: 1 / -1;
    }

    .impact-carousel .impact-card {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }

    .impact-carousel .impact-carousel__nav {
        right: calc((100% - 9px) / 2.6 + 9px + 22px);
    }

    .impact-card__metrics div {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* Tablet horizontal: 3 columnas (a 2 las tarjetas median ~455px de ancho). */
@media (min-width: 901px) and (max-width: 1100px) {
    .hacemos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(340px, auto);
    }

    .hacemos-grid > :last-child:nth-child(odd of :not(.hacemos-grid__empty)) {
        grid-column: auto;
    }

    /* La ultima fila incompleta se completa estirando la ultima tarjeta. */
    .hacemos-grid > :last-child:nth-child(3n + 2 of :not(.hacemos-grid__empty)) {
        grid-column: span 2;
    }

    .hacemos-grid > :last-child:nth-child(3n + 1 of :not(.hacemos-grid__empty)) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .industry-selector .industry-picker {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }

    .industry-selector .industry-picker__list {
        flex-direction: row;
        overflow-x: auto;
        border-bottom: 1px solid #4a5056;
    }

    .industry-selector .industry-picker__trigger {
        flex: 0 0 auto;
        padding: 0 18px 0 0;
        border-bottom: 0;
        white-space: nowrap;
    }

    .industry-selector .industry-picker__trigger.is-active {
        padding: 0 18px;
    }

    .industry-selector .industry-picker__arrow {
        margin: 0 0 0 12px;
    }

    .industry-selector .industry-picker__panels {
        margin-top: 0;
    }

    .industry-selector__shape {
        left: 30%;
    }

    .impact-carousel .impact-card {
        grid-template-columns: 1fr;
        row-gap: 9px;
    }

    .impact-card__portrait {
        order: -1;
        height: 420px;
    }

    .impact-carousel .impact-carousel__nav {
        right: 22px;
    }

    /* La navegacion (flechas de 40px en tactil) va en su propia linea bajo la persona. */
    .impact-card__content {
        padding-bottom: 72px;
    }

    .impact-carousel .impact-card__person {
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    .hacemos-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .hacemos-intro .service-tile {
        min-height: 380px;
    }

    .industry-selector .industry-picker__content {
        padding: 32px 24px 36px;
    }

    .industry-selector .industry-picker__media-number {
        left: 24px;
    }

    .industry-selector .industry-picker__cta {
        margin-top: 36px;
    }

    .industry-selector .industry-picker__content--brief {
        padding: 28px 24px 32px;
    }

    .industry-selector .industry-picker__content--brief .industry-picker__cta {
        margin-top: 24px;
    }

    .impact-card__content {
        padding: 32px 20px 68px;
    }

    .impact-card__quote,
    .impact-card__metrics {
        padding-left: 0;
        padding-right: 0;
    }

    .impact-card__metrics {
        gap: 1.5rem;
    }

    .impact-card__metrics dd {
        font-size: 3.25rem;
    }

    .impact-card__portrait {
        height: 360px;
    }

    .impact-carousel .impact-carousel__nav {
        right: 12px;
        bottom: 14px;
    }

    .impact-logos {
        margin-top: 64px;
    }
}