/*
 * Home (front page) — ajustes al PSD 01-Vinson-HOME.
 * Todas las reglas van bajo .home-page para no afectar otras páginas.
 * Medidas de escritorio tomadas del PSD a 1857px (contenedor 1334px).
 */

/* ------------------------------------------------------------------ */
/* Controles compartidos: botones y flechas de carrusel                */
/* ------------------------------------------------------------------ */

.home-page .button {
    gap: 9px;
    padding: 0 18px;
}

.home-page .button > .icon-arrow {
    width: 13px;
    height: 13px;
    font-size: 13px;
}

.home-page .home-arrows {
    display: flex;
    gap: 16px;
}

.home-page .home-arrows__button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-blue);
    cursor: pointer;
    transition: color 180ms ease, transform 180ms ease;
}

.home-page .home-arrows__button svg {
    width: 34px;
    height: 34px;
}

.home-page .home-arrows__button--prev svg {
    transform: scaleX(-1);
}

.home-page .home-arrows__button:disabled {
    color: #cdcdcd;
    cursor: default;
}

.home-page .home-arrows__button:not(:disabled):hover {
    transform: translateX(2px);
}

.home-page .home-arrows__button--prev:not(:disabled):hover {
    transform: translateX(-2px);
}

.home-page .home-arrows__button:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

/*
 * Indicador de posicion (Servicios, Insights y Testimonios, carousel-arrows.php
 * con progress): contador "01 / 07" (o "01–02 / 07" si se ven dos tarjetas
 * enteras), barra fina que avanza con cada paso y flechas en la misma linea.
 * Lo actualiza assets/js/pages/home.js. Si todo cabe (.is-fit) solo quedan las
 * flechas (rotacion).
 */
.home-page .home-arrows--progress {
    align-items: center;
    gap: 24px;
}

.home-page .home-arrows__count {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 20px;
}

.home-page .home-arrows__of,
.home-page .home-arrows__total {
    color: var(--color-muted);
}

.home-page .home-arrows__bar {
    position: relative;
    flex: 1 1 auto;
    min-width: 48px;
    height: 1px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.home-page .home-arrows__fill {
    position: absolute;
    inset: 0;
    background: var(--color-blue);
    transform-origin: 0 50%;
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Autoplay (data-carousel-autoplay): la barra es un temporizador que pinta el JS cuadro a cuadro. */
.home-page .home-arrows--progress.is-timer .home-arrows__fill {
    transition: none;
}

.home-page .home-arrows--progress .home-arrows__button--next {
    margin-left: -8px;
}

.home-page .home-arrows--progress.is-fit .home-arrows__count,
.home-page .home-arrows--progress.is-fit .home-arrows__bar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-page .home-arrows__fill {
        transition: none;
    }
}

.home-page [data-carousel-track] {
    transition: transform 450ms ease;
    will-change: transform;
}

/* Arrastre / swipe (assets/js/pages/home.js + motion.js). */
.home-page [data-carousel-viewport],
.home-page [data-testimonial-viewport] {
    touch-action: pan-y;
}

.home-page [data-carousel-viewport].is-draggable,
.home-page [data-testimonial-viewport].is-draggable {
    cursor: grab;
}

.home-page [data-carousel-viewport].is-dragging,
.home-page [data-testimonial-viewport].is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* Las tarjetas no imponen su cursor (puntero de texto/enlace) sobre el de arrastre. */
.home-page [data-carousel-viewport].is-draggable .service-card,
.home-page [data-carousel-viewport].is-draggable .insight-card {
    cursor: inherit;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.home-page .home-hero {
    min-height: 750px;
    align-items: start;
    background-color: var(--color-ink);
    background-image: none;
}

/* El fondo vive en ::before (ver animations.css) para animarlo sin reemplazarlo. */
.home-page .home-hero::before {
    background-image:
        linear-gradient(90deg, rgba(23, 33, 40, 0.97) 0%, rgba(23, 33, 40, 0.92) 10.8%, rgba(23, 33, 40, 0.85) 21.5%, rgba(23, 33, 40, 0.76) 30%, rgba(23, 33, 40, 0.64) 37.7%, rgba(23, 33, 40, 0.53) 45%, rgba(23, 33, 40, 0.44) 55%, rgba(23, 33, 40, 0.35) 64.6%, rgba(23, 33, 40, 0.25) 74%, rgba(23, 33, 40, 0.18) 84%, rgba(23, 33, 40, 0.16) 100%),
        var(--home-hero-image, linear-gradient(125deg, #162531 0%, #334b59 55%, var(--color-ink) 100%));
    background-position: 0 0, 0 82.3%;
    background-size: auto, max(calc(100% * 1926 / 1857), 1336px) auto;
    background-repeat: no-repeat;
}

/* Fondo en video: ::before queda solo con el degradado, el video va debajo. */
.home-page .home-hero.has-video::before {
    background-image: linear-gradient(90deg, rgba(23, 33, 40, 0.97) 0%, rgba(23, 33, 40, 0.92) 10.8%, rgba(23, 33, 40, 0.85) 21.5%, rgba(23, 33, 40, 0.76) 30%, rgba(23, 33, 40, 0.64) 37.7%, rgba(23, 33, 40, 0.53) 45%, rgba(23, 33, 40, 0.44) 55%, rgba(23, 33, 40, 0.35) 64.6%, rgba(23, 33, 40, 0.25) 74%, rgba(23, 33, 40, 0.18) 84%, rgba(23, 33, 40, 0.16) 100%);
    background-size: auto;
}

.home-page .home-hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 82%;
    pointer-events: none;
    /* Invisible hasta que se reproduce de verdad ("playing", animations/home.js):
       aparece con un fundido corto sobre el poster o el color de fondo. */
    opacity: 0;
    transition: opacity 0.6s ease;
}

.home-page .home-hero.is-video-playing .home-hero__video {
    opacity: 1;
}

/* Poster (primer cuadro del video) y foto sin JS: mismo encuadre que el video. */
.home-page .home-hero__poster,
.home-page .home-hero__still {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.home-page .home-hero__poster {
    background: var(--home-hero-poster) 50% 82% / cover no-repeat;
}

.home-page .home-hero__still {
    max-width: none;
    object-fit: cover;
    object-position: 50% 82.3%;
}

/* Sin video (reducir movimiento, ahorro de datos, red lenta o error): la Imagen del hero. */
.home-page .home-hero.has-video.is-video-off::before {
    background-image:
        linear-gradient(90deg, rgba(23, 33, 40, 0.97) 0%, rgba(23, 33, 40, 0.92) 10.8%, rgba(23, 33, 40, 0.85) 21.5%, rgba(23, 33, 40, 0.76) 30%, rgba(23, 33, 40, 0.64) 37.7%, rgba(23, 33, 40, 0.53) 45%, rgba(23, 33, 40, 0.44) 55%, rgba(23, 33, 40, 0.35) 64.6%, rgba(23, 33, 40, 0.25) 74%, rgba(23, 33, 40, 0.18) 84%, rgba(23, 33, 40, 0.16) 100%),
        var(--home-hero-image, linear-gradient(125deg, #162531 0%, #334b59 55%, var(--color-ink) 100%));
    background-size: auto, max(calc(100% * 1926 / 1857), 1336px) auto;
}

.home-page .home-hero.is-video-off .home-hero__video,
.home-page .home-hero.is-video-off .home-hero__poster {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-page .home-hero__video {
        transition: none;
    }
}

.home-page .home-hero::after {
    display: none;
}

.home-page .home-hero__inner {
    padding-top: 147px;
    padding-bottom: 60px;
}

.home-page .home-hero__title {
    max-width: 480px;
    font-size: 72px;
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 82px;
}

.home-page .home-hero__emphasis {
    margin-top: -3px;
    font-size: 82px;
    font-style: italic;
    letter-spacing: -0.025em;
    line-height: 82px;
}

.home-page .home-hero__cta {
    min-width: 272px;
    margin-top: 64px;
}

/* ------------------------------------------------------------------ */
/* Intro                                                               */
/* ------------------------------------------------------------------ */

.home-page .home-intro {
    padding-top: 145px;
    padding-bottom: 0;
}

.home-page .home-intro__grid {
    grid-template-columns: 490px minmax(0, 1fr);
    gap: 40px;
}

.home-page .home-intro__summary {
    max-width: none;
    color: var(--color-muted);
    font-size: 16px;
    line-height: 24px;
}

.home-page .home-intro__summary .eyebrow {
    margin: 0 0 9px;
    color: var(--color-text);
}

.home-page .home-intro__summary p:not(.eyebrow) {
    max-width: 490px;
    letter-spacing: 0.01em;
}

.home-page .home-intro__button {
    min-width: 167px;
    margin-top: 24px;
}

.home-page .home-intro__title {
    max-width: 660px;
    margin-top: 5px;
    justify-self: end;
    color: var(--color-text);
    font-size: 54px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 60px;
    text-align: right;
}

.home-page .home-intro__title em {
    position: relative;
    top: -4px;
    font-size: 64px;
    font-style: italic;
    letter-spacing: 0;
    line-height: 60px;
}

/* ------------------------------------------------------------------ */
/* Servicios (carrusel)                                                */
/* ------------------------------------------------------------------ */

.home-page .home-services {
    overflow: hidden;
    padding-top: 26px;
    padding-bottom: 0;
}

/* Sobre las tarjetas, del ancho de la columna izquierda de la intro (.home-intro__grid):
   terminan antes del titulo. */
.home-page .home-services__arrows {
    max-width: 490px;
    margin-bottom: 32px;
}

.home-page .home-services__viewport {
    clip-path: inset(-40px -100vw -40px -1px);
}

.home-page .home-services__grid {
    display: flex;
    gap: 51px;
    grid-auto-columns: unset;
}

.home-page .service-card {
    display: grid;
    flex: 0 0 600px;
    min-height: 340px;
    height: 340px;
    grid-template-columns: 300px 300px;
    border: 0;
    background: #f2f3f4;
    color: var(--color-text);
}

.home-page .service-card + .service-card {
    border-left: 0;
}

/* En el PSD la tarjeta azul/oscura ilustra el hover: el estado se activa con hover o foco. */
.home-page .service-card,
.home-page .service-card .service-card__copy,
.home-page .service-card .service-card__link,
.home-page .insight-card,
.home-page .insight-card__body,
.home-page .insight-card__body p,
.home-page .insight-card__arrow {
    transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .home-page .service-card,
    .home-page .service-card .service-card__copy,
    .home-page .service-card .service-card__link,
    .home-page .insight-card,
    .home-page .insight-card__body,
    .home-page .insight-card__body p,
    .home-page .insight-card__arrow {
        transition: none;
    }
}

.home-page .service-card:is(:hover, :focus-within) {
    background: var(--color-blue);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    color: var(--color-paper);
}

.home-page .service-card__body {
    display: block;
    height: 340px;
    padding: 0 20px 0 28px;
}

.home-page .service-card__title {
    max-width: 230px;
    margin: 85px 0 0;
    color: inherit;
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
}

.home-page .service-card .service-card__copy {
    max-width: 245px;
    margin: 21px 0 0;
    color: var(--color-muted);
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 20px;
    opacity: 1;
}

.home-page .service-card.service-card:is(:hover, :focus-within) .service-card__copy {
    color: var(--color-paper);
}

.home-page .service-card .service-card__link {
    position: absolute;
    bottom: 20px;
    left: 28px;
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    color: var(--color-blue);
    font-size: 16px;
    line-height: 0;
}

.home-page .service-card__link::after {
    position: absolute;
    inset: -20px;
    content: "";
}

.home-page .service-card.service-card:is(:hover, :focus-within) .service-card__link {
    bottom: 20px;
    width: 24px;
    height: 24px;
    color: var(--color-paper);
    font-size: 24px;
}

.home-page .service-card__link .icon-arrow {
    display: block;
    width: 100%;
    height: 100%;
}

.home-page .service-card__link:hover,
.home-page .service-card__link:focus-visible {
    background: transparent;
    color: var(--color-ink);
}

.home-page .service-card:is(:hover, :focus-within) .service-card__link:hover {
    color: var(--color-paper);
    opacity: 0.8;
}

.home-page .service-card__media {
    position: relative;
    overflow: hidden;
    background: var(--color-ink);
}

.home-page .service-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0.8;
}

.home-page .service-card--1 .service-card__image {
    opacity: 0.6;
}

/* Video de hover (home_services_videos): aparece sobre la imagen cuando ya esta
   reproduciendo (.is-playing la pone assets/js/pages/home.js). */
.home-page .service-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.home-page .service-card:is(:hover, :focus-within) .service-card__video.is-playing {
    opacity: 0.85;
    transform: scale(1);
}

@media (hover: none), (prefers-reduced-motion: reduce) {
    .home-page .service-card__video {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Indicadores                                                         */
/* ------------------------------------------------------------------ */

.home-page .home-stats {
    padding-top: 121px;
    padding-bottom: 113px;
}

.home-page .home-stats__grid {
    display: flex;
    justify-content: space-between;
    padding: 0 28px 0 28px;
}

.home-page .stat-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0;
}

.home-page .stat-item__icon {
    width: 75px;
    height: 75px;
    margin: 0 0 25px;
    opacity: 1;
}

.home-page .home-stats__grid .stat-item:nth-child(3) .stat-item__icon {
    width: 90px;
    height: 78px;
    margin-bottom: 22px;
}

.home-page .home-stats__grid .stat-item:nth-child(4) .stat-item__icon {
    width: 77px;
}

.home-page .stat-item__value {
    color: var(--color-blue);
    font-size: 72px;
    font-weight: 300;
    line-height: 72px;
}

.home-page .stat-item__label {
    margin-top: -1px;
    color: var(--color-text);
    font-size: 24px;
    letter-spacing: 0.01em;
    line-height: 30px;
}

/* ------------------------------------------------------------------ */
/* El Sello Vinson (metodología)                                       */
/* ------------------------------------------------------------------ */

.home-page .home-methodology {
    padding-top: 118px;
    padding-bottom: 0;
}

.home-page .home-methodology__isologo {
    position: absolute;
    top: -207px;
    left: -271px;
    z-index: -1;
    width: 1538px;
    height: 1447px;
    background: url("../../images/home-03-porque-isologo.webp") 0 0 / 100% 100% no-repeat;
    opacity: 0.149;
    pointer-events: none;
}

.home-page .home-methodology__header {
    max-width: none;
    margin-bottom: 0;
}

.home-page .home-methodology__header {
    margin-left: -3px;
}

.home-page .home-methodology__header .eyebrow {
    margin-bottom: 12px;
    color: var(--color-paper);
}

.home-page .home-methodology__title {
    max-width: 660px;
    font-size: 54px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 60px;
}

.home-page .home-methodology__title em {
    line-height: 0;
    font-size: 64px;
    font-style: italic;
    letter-spacing: 0;
}

.home-page .methodology {
    min-height: 0;
    height: 753px;
    margin-top: 101px;
    margin-right: 2px;
}

.home-page .methodology__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-left: 0;
}

.home-page .methodology__item.is-active {
    flex: 0 0 800px;
}

.home-page .methodology__item:first-child.is-active + .methodology__item {
    flex: 0 0 172px;
}

.home-page .methodology__panel {
    display: block;
    flex: 0 0 682px;
    min-height: 0;
    height: 100%;
}

.home-page .methodology__media {
    position: absolute;
    top: 178px;
    left: 319px;
    width: 360px;
    height: 510px;
    min-height: 0;
    background: var(--color-ink);
}

.home-page .methodology__image {
    position: absolute;
    top: -3px;
    left: -63.9%;
    width: 218%;
    max-width: none;
    height: auto;
    min-height: calc(100% + 6px);
    object-fit: cover;
    opacity: 0.8;
}

/* El panel arranca justo en la linea divisoria: el icono y el texto se separan
   de ella para no quedar pegados al borde. */
.home-page .methodology__detail-icon {
    top: 389px;
    bottom: auto;
    left: 27px;
    width: 101px;
    height: 101px;
    object-fit: fill;
}

.home-page .methodology__copy {
    top: 513px;
    right: auto;
    bottom: auto;
    left: 32px;
    width: 262px;
    color: #babcbd;
}

.home-page .methodology__copy h3 {
    margin: 0 0 21px;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 30px;
}

.home-page .methodology__copy p {
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 20px;
}

.home-page .methodology__trigger {
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
}

.home-page .methodology__trigger[aria-expanded="true"] {
    border-right-color: rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--color-paper);
}

.home-page .methodology__arrow {
    position: absolute;
    top: 3px;
    right: 29px;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 28px;
    line-height: 0;
}

.home-page .methodology__arrow .icon-arrow {
    display: block;
    width: 100%;
    height: 100%;
}

.home-page .methodology__trigger[aria-expanded="true"] .methodology__arrow {
    top: 0;
    right: 28px;
    width: 43px;
    height: 43px;
    color: var(--color-paper);
    transform: rotate(180deg);
}

.home-page .methodology__label {
    position: absolute;
    right: 37px;
    bottom: 263px;
    margin: 0;
    font-size: 30px;
    letter-spacing: 0.01em;
    line-height: 30px;
    white-space: nowrap;
}

.home-page .methodology__number {
    position: absolute;
    bottom: 52px;
    left: calc(100% - 92px);
    margin: 0;
    color: rgba(255, 255, 255, 0.0588);
    font-family: var(--font-sans);
    font-size: 140px;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 140px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.home-page .methodology__trigger[aria-expanded="true"] .methodology__label {
    right: 35px;
}

.home-page .methodology__trigger[aria-expanded="true"] .methodology__number {
    color: var(--color-blue);
}

/*
 * Ajuste a la altura de pantalla (laptops). El PSD mide el acordeon en 753px de
 * alto a 1920px; aqui su alto (--m-h) sigue al viewport para que titulo +
 * acordeon quepan a primera vista, y las posiciones internas escalan en
 * proporcion (valor PSD / 753).
 */
@media (min-width: 1101px) {
    .home-page .home-methodology {
        --m-h: clamp(520px, calc(100svh - var(--header-height) - 290px), 753px);
        --m-icon: calc(var(--m-h) * 0.1341);
        padding-top: clamp(72px, 9vh, 118px);
    }

    .home-page .home-methodology__title {
        font-size: clamp(42px, 5.6vh, 54px);
        line-height: 1.12;
    }

    .home-page .home-methodology__title em {
        font-size: clamp(50px, 6.6vh, 64px);
    }

    .home-page .methodology {
        height: var(--m-h);
        margin-top: calc(var(--m-h) * 0.07);
    }

    .home-page .methodology__media {
        top: calc(var(--m-h) * 0.2364);
        width: calc(var(--m-h) * 0.4781);
        height: calc(var(--m-h) * 0.6773);
    }

    /* El texto mas largo mide ~211px: se reserva desde abajo para que siempre quepa,
       y el icono queda 23px sobre el texto como en el PSD. */
    .home-page .methodology__detail-icon {
        top: calc(var(--m-h) * 0.95 - 215px - 23px - var(--m-icon));
        width: var(--m-icon);
        height: var(--m-icon);
    }

    .home-page .methodology__copy {
        top: calc(var(--m-h) * 0.95 - 215px);
    }

    /* A 753px de alto: bottom 263px y 30px (PSD). Con menos alto la etiqueta
       mas larga debe caber entre el numero y la flecha. */
    .home-page .methodology__label {
        /* Numero grande ~31% del alto; etiqueta mas larga ~15.25x su font-size. */
        bottom: calc(var(--m-h) * 0.31 + 10px);
        font-size: clamp(17px, calc(var(--m-h) * 0.0452 - 4.3px), 30px);
        line-height: 1;
    }

    .home-page .methodology__number {
        bottom: calc(var(--m-h) * 0.0691);
        font-size: calc(var(--m-h) * 0.1859);
        line-height: 1;
    }
}

/* ------------------------------------------------------------------ */
/* Palabra VINSON                                                      */
/* ------------------------------------------------------------------ */

.home-page .home-brand {
    padding-top: 147px;
    padding-bottom: 150px;
}

.home-page .home-brand__word {
    position: relative;
    width: calc(100% + 4px);
    margin: 0 0 0 -3.5px;
    overflow: hidden;
    aspect-ratio: 1338 / 192;
    background: #000;
    color: transparent;
    font-size: 0;
    line-height: 0;
    -webkit-mask: url("../../images/home-vinson-letters.webp") 0 0 / 100% 100% no-repeat;
    mask: url("../../images/home-vinson-letters.webp") 0 0 / 100% 100% no-repeat;
}

.home-page .home-brand__word::before {
    position: absolute;
    top: -32.29%;
    left: -4.858%;
    width: 111.28%;
    height: 258.33%;
    background: var(--brand-image, var(--color-ink)) center / cover no-repeat;
    content: "";
    opacity: 0.85;
}

/*
 * Con video (home_brand_video): el escenario (fondo negro + video) lleva como
 * mascara las letras (SVG); fuera de ellas se ve el fondo de la seccion.
 * home.js activa .is-video-ready y fija la geometria (--brand-mask-*); en
 * .is-zooming la seccion ocupa la ventana y las letras crecen con el scroll.
 * Mascara y recorte de entrada (clip-path, home.js) van en el mismo elemento y
 * no hay otra capa encima ni debajo del video: ningun borde depende de
 * coincidir al pixel con otro (con un velo encima del video, las escalas
 * fraccionarias, 125 %/150 %, dejaban asomar una linea vertical de 1px).
 * Sin JS se queda la palabra con la imagen.
 */
.home-page .home-brand--video {
    position: relative;
}

.home-page .home-brand__stage {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    background: #000;
    pointer-events: none;
    -webkit-mask: url("../../images/home-vinson-letters.svg") var(--brand-mask-x, 0) var(--brand-mask-y, 0) / var(--brand-mask-w, 0) var(--brand-mask-h, 0) no-repeat;
    mask: url("../../images/home-vinson-letters.svg") var(--brand-mask-x, 0) var(--brand-mask-y, 0) / var(--brand-mask-w, 0) var(--brand-mask-h, 0) no-repeat;
}

.home-page .home-brand__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.home-page .home-brand.is-video-ready .home-brand__stage {
    display: block;
}

.home-page .home-brand.is-video-ready .home-brand__word {
    background: none;
}

.home-page .home-brand.is-video-ready .home-brand__word::before {
    content: none;
}

.home-page .home-brand.is-zooming {
    display: grid;
    align-content: center;
    min-height: 100vh;
    min-height: 100svh;
}

/* ------------------------------------------------------------------ */
/* Equipo (mosaico)                                                    */
/* ------------------------------------------------------------------ */

.home-page .home-team__title em,
.home-page .home-testimonial__header h2 em,
.home-page .home-case .section-heading h2 em,
.home-page .home-insights .section-heading h2 em {
    line-height: 0;
}

.home-page .home-team__title,
.home-page .home-team__title em,
.home-page .home-case .section-heading h2,
.home-page .home-case .section-heading h2 em,
.home-page .home-insights .section-heading h2,
.home-page .home-insights .section-heading h2 em,
.home-page .home-methodology__title {
    letter-spacing: 0;
}

.home-page .home-team {
    padding-top: 144px;
    padding-bottom: 147px;
}

.home-page .home-team__header {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 40px;
    margin-bottom: 63px;
}

.home-page .home-team__header > div {
    margin-left: -3px;
}

.home-page .home-team__header .eyebrow {
    margin-bottom: 13px;
}

.home-page .home-team__title {
    max-width: 580px;
    margin-top: 3px;
    font-size: 54px;
    line-height: 60px;
}

.home-page .home-team__header > p {
    max-width: 460px;
    margin: 66px 0 0;
    color: #a7aaab;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 24px;
}

.home-page .home-team__mosaic {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.home-page .home-team__column {
    display: flex;
    width: 310px;
    flex-direction: column;
    gap: 31px;
}

.home-page .home-team__column--1 .home-team-card:first-child {
    margin-bottom: 10px;
}

.home-page .home-team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 36px 30px 9px;
    background: #323940;
    color: var(--color-paper);
}

.home-page .home-team-card--quote,
.home-page .home-team-card--quote-light {
    height: 225px;
}

.home-page .home-team-card--quote-light {
    background: var(--color-paper);
    color: var(--color-text);
}

.home-page .home-team-card--photo-quote {
    height: 485px;
    padding-top: 20px;
    padding-inline: 20px;
}

.home-page .home-team-card--photo {
    height: 565px;
    justify-content: flex-end;
    padding: 0 18px 13px 22px;
    background: var(--color-ink);
}

.home-page .home-team-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.85;
}

.home-page .home-team-card--photo::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 188px;
    background: url("../../images/home-04-equipo-02.webp") center bottom / 100% 100% no-repeat;
    content: "";
}

.home-page .home-team-card__thumb {
    height: 207px;
    flex: 0 0 auto;
    margin-bottom: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.home-page .home-team-card__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    opacity: 0.85;
}

.home-page .home-team-card__quote {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.025em;
    line-height: 24px;
}

.home-page .home-team-card--photo-quote .home-team-card__quote {
    padding-inline: 10px;
}

.home-page .home-team-card__copy {
    margin: 17px 0 0;
    color: var(--color-muted);
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 18px;
}

.home-page .home-team-card__person {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-right: 30px;
}

.home-page .home-team-card--photo-quote .home-team-card__person {
    padding-inline: 10px 30px;
}

.home-page .home-team-card__name {
    margin: 0;
    color: var(--color-blue);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 20px;
}

.home-page .home-team-card__name a::after {
    position: absolute;
    inset: -2000px -100px -100px -100px;
    content: "";
}

.home-page .home-team-card {
    isolation: isolate;
}

.home-page .home-team-card__name a:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

.home-page .home-team-card--photo .home-team-card__name {
    color: var(--color-paper);
}

.home-page .home-team-card__role {
    margin: 3px 0 0;
    color: inherit;
    font-size: 12px;
    letter-spacing: 0.01em;
    line-height: 20px;
}

.home-page .home-team-card--photo .home-team-card__role {
    color: rgba(255, 255, 255, 0.5);
}

.home-page .home-team-card__arrow {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 18px;
    line-height: 0;
}

.home-page .home-team-card__arrow .icon-arrow {
    display: block;
    width: 100%;
    height: 100%;
}

.home-page .home-team-card--quote-light .home-team-card__arrow {
    color: var(--color-blue);
}

.home-page .home-team-card--photo .home-team-card__arrow {
    bottom: 20px;
    color: rgba(255, 255, 255, 0.4);
}

.home-page .home-team-card:hover .home-team-card__arrow {
    color: var(--color-blue);
}

/*
 * Hover del mosaico, mismo lenguaje que las fichas del listado Equipo:
 * la foto hace el zoom lento global (experience.css), el retrato gana un bano
 * azul sutil, una linea azul barre la base y, en fotos con cita, la capa
 * .team-reveal sube con un barrido (solo cursor fino o foco de teclado).
 */
.home-page .home-team-card--quote,
.home-page .home-team-card--photo-quote {
    transition: background-color 450ms ease;
}

.home-page .home-team-card--quote:is(:hover, :has(:focus-visible)),
.home-page .home-team-card--photo-quote:is(:hover, :has(:focus-visible)) {
    background-color: #39414a;
}

.home-page .home-team-card__arrow {
    transition: color 300ms ease;
}

.home-page .home-team-card::after {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--color-blue);
    content: "";
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 480ms cubic-bezier(0.33, 1, 0.68, 1);
}

.home-page .home-team-card:is(:hover, :has(:focus-visible))::after {
    transform: scaleX(1);
}

.home-page .home-team-card__tint {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(200deg, rgba(47, 127, 211, 0.28), rgba(23, 33, 40, 0) 62%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}

.home-page .home-team-card--photo:is(:hover, :has(:focus-visible)) .home-team-card__tint {
    opacity: 1;
}

/* Capa de cita: no captura clics, el enlace del nombre sigue cubriendo la tarjeta. */
.home-page .home-team-card .team-reveal {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 36px 30px 22px;
    background: var(--color-surface);
    color: var(--color-text);
    clip-path: inset(100% 0 0 0);
    pointer-events: none;
    transition: clip-path 620ms cubic-bezier(0.33, 1, 0.68, 1);
}

.home-page .home-team-card .team-reveal > * {
    margin: 0;
    opacity: 0;
    translate: 0 18px;
    transition: opacity 380ms ease, translate 520ms cubic-bezier(0.33, 1, 0.68, 1);
}

.home-page .home-team-card .team-reveal__icon {
    flex-shrink: 0;
    color: var(--color-blue);
    transition-delay: 100ms;
}

.home-page .home-team-card .team-reveal__quote {
    margin-top: 22px;
    transition-delay: 160ms;
}

.home-page .home-team-card .team-reveal__quote p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    font-size: 18px;
    letter-spacing: -0.025em;
    line-height: 24px;
}

.home-page .home-team-card .team-reveal__summary {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 17px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: var(--color-muted);
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 18px;
    transition-delay: 210ms;
}

.home-page .home-team-card .team-reveal__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-right: 24px;
    transition-delay: 250ms;
}

.home-page .home-team-card .team-reveal__avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.home-page .home-team-card .team-reveal__author-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.home-page .home-team-card .team-reveal__author strong {
    color: var(--color-blue);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 20px;
}

.home-page .home-team-card .team-reveal__author span {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 12px;
    letter-spacing: 0.01em;
    line-height: 16px;
}

/* La flecha queda sobre la capa para seguir indicando el enlace. */
.home-page .home-team-card.has-team-reveal .home-team-card__arrow {
    z-index: 4;
}

/* Solo con cursor real; en tactil la tarjeta navega directo al perfil. */
@media (hover: hover) and (pointer: fine) {
    .home-page .home-team-card.has-team-reveal:hover .team-reveal {
        clip-path: inset(0 0 0 0);
    }

    .home-page .home-team-card.has-team-reveal:hover .team-reveal > * {
        opacity: 1;
        translate: 0 0;
    }

    /* Con la cita desplegada, el bano azul del retrato no aporta. */
    .home-page .home-team-card.has-team-reveal:hover .home-team-card__tint {
        opacity: 0;
    }
}

/* Foco de teclado (:focus-visible): el toque en tactil no abre la cita. */
.home-page .home-team-card.has-team-reveal:has(:focus-visible) .team-reveal {
    clip-path: inset(0 0 0 0);
}

.home-page .home-team-card.has-team-reveal:has(:focus-visible) .team-reveal > * {
    opacity: 1;
    translate: 0 0;
}

.home-page .home-team-card.has-team-reveal:has(:focus-visible) .home-team-card__tint {
    opacity: 0;
}

/* La capa tapa el anillo de foco del nombre: el foco se marca en la tarjeta. */
@media (min-width: 641px) {
    .home-page .home-team-card.has-team-reveal:has(:focus-visible) {
        outline: 2px solid var(--color-blue);
        outline-offset: 3px;
    }
}

.home-page .home-team-card.has-team-reveal:has(:focus-visible) .home-team-card__arrow {
    color: var(--color-blue);
}

@media (prefers-reduced-motion: reduce) {
    .home-page .home-team-card::after {
        transition: none;
    }

    .home-page .home-team-card .team-reveal {
        clip-path: none;
        opacity: 0;
        transition: opacity 200ms ease;
    }

    .home-page .home-team-card.has-team-reveal:has(:focus-visible) .team-reveal {
        opacity: 1;
    }

    @media (hover: hover) and (pointer: fine) {
        .home-page .home-team-card.has-team-reveal:hover .team-reveal {
            opacity: 1;
        }
    }

    .home-page .home-team-card .team-reveal > * {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* Foto con cita: la capa muestra la foto completa con nombre y cargo sobre un degradado. */
.home-page .home-team-card .team-reveal--photo {
    display: block;
    padding: 0;
    background: var(--color-ink);
    color: var(--color-paper);
}

.home-page .home-team-card .team-reveal--photo > * {
    transition-delay: 60ms;
}

.home-page .home-team-card .team-reveal__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* La foto no se desplaza al entrar: solo el pie con nombre y cargo. */
    opacity: 1;
    translate: none;
}

.home-page .home-team-card .team-reveal__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 90px 50px 22px 30px;
    background: linear-gradient(180deg, rgba(23, 33, 40, 0) 0%, rgba(23, 33, 40, 0.55) 45%, rgba(23, 33, 40, 0.85) 100%);
    font-size: 12px;
    line-height: 18px;
}

.home-page .home-team-card .team-reveal__caption strong {
    color: var(--color-paper);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.home-page .home-team-card .team-reveal__caption span {
    color: #cdcdcd;
}

/* Sobre la foto, la flecha va en blanco (como en las tarjetas de foto). */
.home-page .home-team-card--photo-quote.has-team-reveal:is(:hover, :has(:focus-visible)) .home-team-card__arrow {
    color: var(--color-paper);
}

/* Modo aleatorio: las citas del perfil pueden ser largas para casillas fijas. */
.home-page .home-team__mosaic--random .home-team-card--quote .home-team-card__quote,
.home-page .home-team__mosaic--random .home-team-card--quote-light .home-team-card__quote {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.home-page .home-team__mosaic--random .home-team-card--photo-quote .home-team-card__quote {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

/* Fichas compactas en movil: sin capa de cita (ni siquiera con foco). */
@media (max-width: 640px) {
    .home-page .home-team-card .team-reveal {
        display: none;
    }
}

.home-page .home-team__action {
    display: flex;
    justify-content: center;
    margin-top: 53px;
}

.home-page .home-team__cta {
    min-width: 256px;
    margin: 0;
    border-color: var(--color-paper);
    color: var(--color-paper);
}

/* ------------------------------------------------------------------ */
/* Testimonio y clientes                                               */
/* ------------------------------------------------------------------ */

.home-page .home-testimonial {
    padding-top: 113px;
    padding-bottom: 0;
    background: var(--color-surface);
}

.home-page .home-testimonial__header {
    margin-bottom: 48px;
}

.home-page .home-testimonial__header .eyebrow {
    margin-bottom: 17px;
    color: var(--color-text);
}

.home-page .home-testimonial__header h2 {
    color: var(--color-text);
    font-size: 54px;
    letter-spacing: -0.01em;
    line-height: 60px;
}

.home-page .home-testimonial__header h2 em {
    font-size: 64px;
    letter-spacing: -0.01em;
}

.home-page .testimonial-card {
    display: grid;
    grid-template-columns: 887px 434px;
    gap: 13px;
    min-height: 0;
    height: 550px;
    background: transparent;
}

.home-page .testimonial-card__content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 42px 0 42px;
    background: var(--color-ink);
    color: var(--color-paper);
}

.home-page .testimonial-card__isologo {
    position: absolute;
    top: -224px;
    left: -115px;
    z-index: -1;
    width: 1064px;
    height: 1001px;
    color: rgba(96, 120, 186, 0.102);
}

.home-page .testimonial-card__quote {
    display: none;
}

.home-page .testimonial-card blockquote {
    max-width: 800px;
    margin: 0;
    padding-right: 0;
}

.home-page .testimonial-card blockquote p {
    margin: 0;
    color: #a9acaf;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
}

.home-page .testimonial-card__metrics {
    display: flex;
    gap: 0;
    margin: 41px 0 0 -2px;
}

.home-page .testimonial-card__metrics div {
    display: flex;
    width: 292px;
    flex-direction: column-reverse;
    gap: 0;
}

.home-page .testimonial-card__metrics dd {
    margin: 0;
    color: var(--color-blue);
    font-size: 72px;
    font-weight: 300;
    line-height: 72px;
}

.home-page .testimonial-card__metric-unit {
    font-size: 48px;
}

.home-page .testimonial-card__metrics dt {
    margin: 0 0 0 2px;
    color: var(--color-paper);
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 20px;
}

.home-page .testimonial-card__person {
    position: absolute;
    right: 27px;
    bottom: 26px;
    left: 31px;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.home-page .testimonial-card__person strong {
    color: var(--color-paper);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.025em;
    line-height: 28px;
}

.home-page .testimonial-card__person span {
    margin-top: 0;
    color: var(--color-muted);
    font-size: 14px;
    letter-spacing: 0.025em;
    line-height: 18px;
}

.home-page .testimonial-card__portrait {
    position: relative;
    min-height: 0;
    height: 550px;
    overflow: hidden;
    background: var(--color-ink);
}

.home-page .testimonial-card__image {
    position: absolute;
    top: -164px;
    left: -6.2%;
    width: 113.4%;
    max-width: none;
    height: auto;
    min-height: 0;
    opacity: 0.8;
}

.home-page .testimonial-card__mark {
    position: absolute;
    top: 21px;
    right: 23px;
    width: 83px;
    height: 61px;
    color: var(--color-paper);
}

/*
 * Carrusel de testimonios (testimonial.php + pages/home.js): las diapositivas
 * cambian en el lugar con un fundido. Solo la activa ocupa espacio; las demas se
 * superponen arriba (absolutas). En escritorio todas miden 550px; en tablet y
 * movil el alto pasa con una transicion al de la activa (sin bloques vacios en
 * los testimonios sin foto). Flechas y contador dentro del bloque oscuro, abajo
 * a la derecha, como en Que hacemos (global/slide-nav.php).
 */
.home-page .home-testimonial__slider {
    display: flex;
    flex-direction: column;
}

.home-page .home-testimonial__slides {
    position: relative;
}

.home-page .home-testimonial__slides.is-animating {
    overflow: clip;
}

.home-page .home-testimonial__slider.is-carousel .testimonial-card:not(.is-active) {
    position: absolute;
    inset: 0 0 auto;
}

.home-page .home-testimonial__slider.is-carousel .testimonial-card:not(.is-active, .is-leaving) {
    visibility: hidden;
}

.home-page .home-testimonial__slider .testimonial-card.is-leaving {
    z-index: 1;
}

.home-page .home-testimonial__slider .testimonial-card.is-active {
    position: relative;
    z-index: 2;
}

/* Flechas y contador (global/slide-nav.php): abajo a la derecha del bloque oscuro. */
.home-page .testimonial-card__nav {
    position: absolute;
    right: 19px;
    bottom: 19px;
    z-index: 2;
}

/* El cargo de la persona no pasa por debajo de la navegacion. */
.home-page .home-testimonial__slider.is-carousel .testimonial-card__person {
    padding-right: 140px;
}

/* Sin foto: el bloque oscuro ocupa todo el ancho y lleva las comillas. */
.home-page .testimonial-card--no-photo {
    grid-template-columns: minmax(0, 1fr);
}

/* Mismo lugar que sobre la foto: no se mueve al pasar de un testimonio a otro. */
.home-page .testimonial-card--no-photo .testimonial-card__mark {
    top: 21px;
    right: 23px;
}

/* ------------------------------------------------------------------ */
/* Casos (carrusel)                                                    */
/* ------------------------------------------------------------------ */

.home-page .home-case {
    padding-top: 64px;
    padding-bottom: 120px;
    background: var(--color-surface);
}

.home-page .home-case .section-heading {
    max-width: none;
    margin-bottom: 49px;
}

.home-page .home-case .section-heading .eyebrow {
    margin-bottom: 12px;
}

.home-page .home-case .section-heading .eyebrow,
.home-page .home-insights .section-heading .eyebrow {
    color: var(--color-text);
}

.home-page .home-insights .section-heading .eyebrow {
    margin-bottom: 12px;
}

.home-page .home-case .section-heading h2,
.home-page .home-insights .section-heading h2 {
    color: var(--color-text);
    line-height: 60px;
}

.home-page .home-case .section-heading h2 {
    max-width: 860px;
    margin-inline: auto;
}

.home-page .home-case__slider {
    position: relative;
}

.home-page .home-case__viewport {
    overflow: hidden;
}

.home-page .home-case__track {
    display: flex;
}

.home-page .featured-case {
    display: grid;
    flex: 0 0 100%;
    min-height: 0;
    grid-template-columns: 600px minmax(0, 1fr);
    gap: 79px;
}

.home-page .featured-case__media {
    position: relative;
    width: 600px;
    height: 540px;
    min-height: 0;
    overflow: hidden;
    background: var(--color-ink);
}

.home-page .featured-case__image {
    position: absolute;
    top: -6px;
    left: -30.5%;
    width: 161.8%;
    max-width: none;
    height: auto;
    min-height: calc(100% + 12px);
    object-fit: cover;
    opacity: 0.8;
}

.home-page .featured-case__content {
    display: block;
    padding: 4px 0 0;
    background: transparent;
}

.home-page .featured-case__content .featured-case__number {
    margin: 0 0 16px;
    color: var(--color-blue);
    font-size: 15px;
    line-height: 16px;
}

.home-page .featured-case__content h3 {
    max-width: 600px;
    margin: 0 0 30px;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
}

.home-page .featured-case__copy {
    max-width: 655px;
    color: var(--color-muted);
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 24px;
}

.home-page .featured-case__copy p {
    margin: 0 0 24px;
}

.home-page .featured-case__link {
    display: inline-block;
    margin-top: 10px;
    color: var(--color-blue);
    font-size: 16px;
    line-height: 20px;
}

.home-page .featured-case__link span {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* Con JS (home.js): diapositivas apiladas en la misma celda; la mas alta
   fija la altura (sin saltos) y solo la activa queda visible. */
.home-page .home-case__slider.is-stacked .home-case__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    isolation: isolate;
}

.home-page .home-case__slider.is-stacked .featured-case {
    grid-area: 1 / 1;
}

.home-page .home-case__slider.is-stacked .featured-case.is-off {
    visibility: hidden;
}

/* Transicion de imagen via variables (home.js): `transform` se compone con
   el translate/scale del parallax del core sin pisarlo. */
.home-page .home-case__slider.is-stacked .featured-case__image {
    transform: translateX(var(--case-x, 0%)) scale(var(--case-s, 1));
}

/* El numero hace de mascara para su roll vertical. */
.home-page .featured-case__content .featured-case__number {
    overflow: hidden;
}

.home-page .featured-case__number-roll {
    display: inline-block;
}

.home-page .home-case__controls {
    position: absolute;
    right: 1px;
    bottom: 0;
    left: 678px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 48px;
    border-top: 1px solid #e5e5e5;
}

.home-page .home-case__controls .button {
    min-width: 277px;
}

/* ------------------------------------------------------------------ */
/* Insights (carrusel)                                                 */
/* ------------------------------------------------------------------ */

.home-page .home-insights {
    padding-top: 113px;
    padding-bottom: 110px;
    background: var(--color-paper);
}

.home-page .home-insights .section-heading {
    max-width: none;
    margin-bottom: 50px;
}

.home-page .home-insights__viewport {
    overflow: hidden;
    margin: -30px;
    padding: 30px;
}

.home-page .insights-grid {
    display: flex;
    gap: 15px;
}

.home-page .insight-card {
    position: relative;
    display: block;
    flex: 0 0 435px;
    min-height: 0;
    height: 500px;
    border: 0;
    background: #f2f3f4;
    color: var(--color-text);
}

.home-page .insight-card:is(:hover, :focus-within) {
    background: var(--color-ink);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    color: var(--color-paper);
}

.home-page .insight-card__visual {
    position: absolute;
    top: 0;
    left: 33px;
    display: flex;
    height: 247px;
    min-height: 0;
    align-items: center;
    border: 0;
}

.home-page .insight-card__visual img,
.home-page .insight-card__visual .insight-card__image {
    width: auto;
    max-width: none;
    height: auto;
    object-fit: none;
    filter: none;
}

.home-page .insight-card--3 .insight-card__visual img {
    mix-blend-mode: darken;
}

.home-page .insight-card--2 .insight-card__visual img {
    filter: brightness(0);
}

/* Hover (fondo oscuro): el icono pasa a blanco. El 3 trae fondo blanco opaco:
   se invierte y se funde con lighten para que su fondo (ahora negro) desaparezca. */
.home-page .insight-card .insight-card__visual img {
    transition: filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page .insight-card:is(:hover, :focus-within) .insight-card__visual img {
    filter: brightness(0) invert(1);
}

.home-page .insight-card--3:is(:hover, :focus-within) .insight-card__visual img {
    filter: invert(1);
    mix-blend-mode: lighten;
}

.home-page .insight-card__body {
    position: absolute;
    top: 233px;
    left: 20px;
    display: flex;
    width: 395px;
    height: 248px;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: 0 14px 30px 32px;
    background: var(--color-paper);
    color: var(--color-text);
}

.home-page .insight-card:is(:hover, :focus-within) .insight-card__body {
    background: var(--color-blue);
    color: var(--color-paper);
}

.home-page .insight-card__body h3 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
}

.home-page .insight-card__body h3 a::after {
    position: absolute;
    inset: 0;
    content: "";
}

.home-page .insight-card__body h3 a:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

.home-page .insight-card__body p,
.home-page .insight-card:is(:hover, :focus-within) .insight-card__body p {
    margin: 0;
    padding-right: 10px;
    text-wrap: balance;
    color: inherit;
    font-size: 14px;
    line-height: 16px;
}

.home-page .insight-card__arrow {
    position: absolute;
    top: 21px;
    right: 21px;
    width: 16px;
    height: 16px;
    color: var(--color-blue);
    line-height: 0;
}

.home-page .insight-card:is(:hover, :focus-within) .insight-card__arrow {
    width: 24px;
    height: 24px;
    color: var(--color-paper);
}

.home-page .insight-card__arrow .icon-arrow {
    display: block;
    width: 100%;
    height: 100%;
}

.home-page .home-insights__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 41px;
}

.home-page .home-insights__controls .button {
    min-width: 272px;
}

/* ------------------------------------------------------------------ */
/* Tablet y móvil                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 1400px) {
    .home-page .home-methodology__isologo {
        left: -24vw;
    }
}

@media (max-width: 1100px) {
    .home-page .home-hero {
        min-height: 36rem;
    }

    .home-page .home-hero::before {
        background-size: auto, cover;
        background-position: 0 0, 60% center;
    }

    .home-page .home-hero__video,
    .home-page .home-hero__still {
        object-position: 60% center;
    }

    .home-page .home-hero__poster {
        background-position: 60% center;
    }

    .home-page .home-hero.has-video.is-video-off::before {
        background-size: auto, cover;
    }

    .home-page .home-hero__inner {
        padding-top: 7rem;
    }

    .home-page .home-intro__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .home-page .home-intro__title {
        justify-self: start;
        text-align: left;
    }

    .home-page .home-stats__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem 1rem;
        padding: 0;
    }

    /* Area tactil de 42px; el margen negativo conserva la posicion visual. */
    .home-page .home-arrows__button {
        width: 42px;
        height: 42px;
        margin: -4px;
    }

    /* Area tactil de 40px sin mover el texto (padding compensado con margen). */
    .home-page .featured-case__link {
        margin-block: 0 -10px;
        padding-block: 10px;
    }

    .home-page .methodology {
        display: block;
        height: auto;
        margin-top: 3rem;
        padding-bottom: 5rem;
    }

    .home-page .methodology__item,
    .home-page .methodology__item.is-active {
        display: flex;
        flex-direction: column;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .home-page .methodology__trigger {
        display: flex;
        height: auto;
        min-height: 4.5rem;
        align-items: center;
        gap: 1rem;
        justify-content: flex-start;
        order: 1;
        padding: 1rem 3rem 1rem 0;
        border-right: 0;
        text-align: left;
    }

    .home-page .methodology__number,
    .home-page .methodology__label {
        position: static;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .home-page .methodology__number {
        font-size: 3rem;
        line-height: 1;
        color: rgba(255, 255, 255, 0.3);
    }

    .home-page .methodology__label {
        font-size: 1.25rem;
        line-height: 1.3;
        white-space: normal;
    }

    .home-page .methodology__arrow,
    .home-page .methodology__trigger[aria-expanded="true"] .methodology__arrow {
        top: 50%;
        right: 0;
        width: 22px;
        height: 22px;
        margin-top: -11px;
    }

    .home-page .methodology__panel {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        order: 2;
        height: auto;
        padding-bottom: 2rem;
    }

    .home-page .methodology__media {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 36 / 51;
        max-height: 26rem;
        order: 3;
    }

    .home-page .methodology__image {
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .home-page .methodology__detail-icon,
    .home-page .methodology__copy {
        position: static;
    }

    .home-page .methodology__copy {
        width: auto;
    }

    .home-page .home-brand {
        padding-block: 5rem;
    }

    .home-page .home-team__header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .home-page .home-team__header > p {
        margin: 0;
    }

    .home-page .home-team__mosaic {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .home-page .home-team__column {
        width: auto;
        gap: 1.25rem;
    }

    .home-page .home-team__column--1 .home-team-card:first-child {
        margin-bottom: 0;
    }

    .home-page .testimonial-card {
        grid-template-columns: 1fr;
        height: auto;
    }

    .home-page .testimonial-card__content {
        padding-bottom: 12rem;
    }

    .home-page .testimonial-card__metrics div {
        width: auto;
        flex: 1;
    }

    /* Alto por proporcion (main.css): 16:10 en tablet, cuadrado en movil. */
    .home-page .testimonial-card__portrait {
        height: auto;
    }

    .home-page .testimonial-card__image {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }

    /* Navegacion en su propia linea bajo la persona (como Que hacemos). */
    .home-page .testimonial-card__nav {
        right: calc(1.5rem - 8px);
    }

    .home-page .home-testimonial__slider.is-carousel .testimonial-card__content {
        padding-bottom: calc(12rem + 48px);
    }

    .home-page .home-testimonial__slider.is-carousel .testimonial-card__person {
        bottom: calc(26px + 48px);
        padding-right: 0;
    }

    /* Sin foto: las comillas van arriba, a la derecha, sin tapar la cita. */
    .home-page .testimonial-card--no-photo .testimonial-card__mark {
        position: static;
        order: -1;
        align-self: flex-end;
        width: 56px;
        height: 41px;
        margin-bottom: 1.25rem;
    }

    .home-page .featured-case {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .home-page .featured-case__media {
        width: 100%;
        height: auto;
        aspect-ratio: 600 / 540;
    }

    .home-page .featured-case__image {
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .home-page .home-case__controls {
        position: static;
        margin-top: 2.5rem;
        padding-top: 2rem;
    }

    .home-page .insight-card {
        flex-basis: min(435px, 80vw);
    }

    .home-page .insight-card__body {
        width: auto;
        right: 20px;
    }
}

/* Mosaico de 2 columnas: la tarjeta foto + cita se ensancha; la miniatura
   mantiene la proporcion del escritorio (no una franja que corte frente y
   menton) y la tarjeta crece con ella. */
@media (min-width: 641px) and (max-width: 1100px) {
    .home-page .home-team-card--photo-quote {
        height: auto;
        min-height: 485px;
    }

    .home-page .home-team-card--photo-quote .home-team-card__thumb {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .home-page .home-team-card--photo-quote .home-team-card__thumb-image {
        object-position: center 15%;
    }

    /* Con alto automatico el margen auto del autor puede quedar en 0. */
    .home-page .home-team-card--photo-quote .home-team-card__quote {
        margin-bottom: 24px;
    }
}

@media (max-width: 640px) {
    .home-page .home-hero__title {
        font-size: 2.75rem;
        line-height: 1.12;
    }

    .home-page .home-hero__emphasis {
        font-size: 3.1rem;
        line-height: 1.1;
    }

    .home-page .home-hero__cta {
        min-width: 0;
        margin-top: 2.5rem;
    }

    .home-page .home-intro {
        padding-top: 4.5rem;
    }

    .home-page .home-intro__title,
    .home-page .home-methodology__title,
    .home-page .home-team__title,
    .home-page .home-testimonial__header h2,
    .home-page .home-case .section-heading h2,
    .home-page .home-insights .section-heading h2 {
        font-size: 2.25rem;
        line-height: 1.15;
    }

    .home-page .home-intro__title em,
    .home-page .home-methodology__title em,
    .home-page .home-testimonial__header h2 em {
        font-size: 2.6rem;
        line-height: 1.1;
    }

    .home-page .eyebrow {
        font-size: 1.375rem;
    }

    .home-page .service-card {
        flex-basis: calc(100vw - 2rem);
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .home-page .service-card__body {
        height: auto;
        min-height: 18rem;
        padding-bottom: 4rem;
    }

    .home-page .service-card__title {
        margin-top: 2.5rem;
    }

    .home-page .service-card__media {
        height: 14rem;
    }

    .home-page .home-services__grid {
        gap: 1rem;
    }

    .home-page .home-stats {
        padding-block: 4.5rem;
    }

    .home-page .stat-item__icon {
        width: 56px;
        height: 56px;
        margin-bottom: 1rem;
    }

    .home-page .home-stats__grid .stat-item:nth-child(3) .stat-item__icon,
    .home-page .home-stats__grid .stat-item:nth-child(4) .stat-item__icon {
        width: 62px;
        height: 56px;
        margin-bottom: 1rem;
    }

    .home-page .stat-item__value {
        font-size: 3.25rem;
        line-height: 1;
    }

    .home-page .stat-item__label {
        font-size: 1.1rem;
    }

    .home-page .home-methodology {
        padding-top: 4.5rem;
    }

    .home-page .home-team {
        padding-block: 4.5rem;
    }

    /* Mosaico compacto: las columnas se disuelven en una grilla de 2; las
       fotos van en pares y las citas ocupan el ancho completo. */
    .home-page .home-team__mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense;
        gap: 12px;
    }

    .home-page .home-team__column {
        display: contents;
    }

    .home-page .home-team-card--quote,
    .home-page .home-team-card--quote-light,
    .home-page .home-team-card--photo-quote {
        grid-column: 1 / -1;
        height: auto;
        min-height: 0;
        padding: 20px 18px 14px;
    }

    .home-page .home-team-card__quote {
        font-size: 17px;
        line-height: 23px;
    }

    .home-page .home-team-card__person {
        margin-top: 12px;
    }

    .home-page .home-team-card--photo {
        height: 15rem;
        padding: 0 28px 12px 12px;
    }

    .home-page .home-team-card--photo::before {
        height: 130px;
    }

    /* El padding derecho de la tarjeta ya reserva la flecha: sin doble reserva
       los nombres no se parten en 3 lineas a 360px. */
    .home-page .home-team-card--photo .home-team-card__person {
        padding-right: 4px;
    }

    .home-page .home-team-card--photo .home-team-card__name {
        font-size: 15px;
        line-height: 19px;
    }

    .home-page .home-team-card--photo .home-team-card__role {
        line-height: 16px;
    }

    /* Flecha de 14px pegada al borde: deja 10px libres junto al cargo (2 lineas
       a 360px) sin quitarle ancho al texto. */
    .home-page .home-team-card--photo .home-team-card__arrow {
        right: 8px;
        bottom: 14px;
        width: 14px;
        height: 14px;
    }

    /* Foto con cita: retrato a la izquierda y texto a la derecha. */
    .home-page .home-team-card--photo-quote {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 16px;
    }

    .home-page .home-team-card--photo-quote .home-team-card__thumb {
        grid-row: 1 / span 2;
        height: 128px;
        margin: 0;
    }

    .home-page .home-team-card--photo-quote .home-team-card__quote,
    .home-page .home-team-card--photo-quote .home-team-card__person {
        padding-inline: 0 24px;
    }

    .home-page .home-team-card--photo-quote .home-team-card__quote {
        font-size: 16px;
        line-height: 22px;
    }

    .home-page .home-testimonial {
        padding-top: 4.5rem;
    }

    .home-page .testimonial-card__content {
        padding: 2.5rem 1.5rem 12rem;
    }

    .home-page .testimonial-card__metrics dd {
        font-size: 3.25rem;
        line-height: 1;
    }

    .home-page .testimonial-card__metric-unit {
        font-size: 2.25rem;
    }

    .home-page .testimonial-card__person {
        right: 1.5rem;
        left: 1.5rem;
    }

    .home-page .home-case {
        padding-bottom: 4.5rem;
    }

    .home-page .home-case__controls {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .home-page .home-case__controls .button,
    .home-page .home-insights__controls .button {
        min-width: 0;
    }

    .home-page .home-insights {
        padding-block: 4.5rem;
    }

    .home-page .home-insights__controls {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .home-page .insight-card {
        flex-basis: calc(100vw - 2rem);
    }

    .home-page .insight-card__body {
        padding-inline: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page [data-carousel-track] {
        transition: none;
    }
}

@media (max-width: 640px) {
    .home-page .testimonial-card__metrics {
        align-items: flex-start;
        gap: 1rem;
    }
}