/* ── SERVICIOS SECTION ──────────────────────────────────────── */
#servicios {
    position: relative;
    z-index: 10;
}

/* ── SERVICE CARDS ──────────────────────────────────────────── */
.cr-service-card {
    border-left: 1px solid rgba(25, 27, 29, 0.1);
    padding-left: 28px !important;
    height: 100%;
}

.cr-service-n {
    font-size: 10px;
    letter-spacing: 0.15em;
    color: rgba(25, 27, 29, 0.3);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

/* ── SERVICE / PROJECT META ROWS ────────────────────────────── */
.cr-meta-row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 6px;
}

.cr-meta-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(25, 27, 29, 0.3);
    min-width: 80px;
    flex-shrink: 0;
}

.cr-meta-value {
    font-size: 12px;
    color: rgba(25, 27, 29, 0.5);
    font-weight: 400;
    line-height: 1.5;
}


/* ── V&A & NIKE PROJECT HEADER ADJUSTMENTS (va-header & nike-header) ────────────────── */
.project-page-header.style_1.va-header .project-title,
.project-page-header.style_1.nike-header .project-title {
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    margin-top: 40px;
}

.project-page-header.style_1.va-header .project-metas,
.project-page-header.style_1.nike-header .project-metas {
    margin-top: 30px !important;
}

@media only screen and (min-width: 992px) {

    .project-page-header.style_1.va-header .project-title h1.big-title,
    .project-page-header.style_1.nike-header .project-title h1.big-title {
        font-size: 75px !important;
        line-height: 1.1 !important;
    }
}

/* ── RESERVE HOME "PROYECTOS" CARD HEIGHT BEFORE IMAGES LOAD ────── */
/* .ar-work-image has no height of its own on desktop (only the two mobile
   breakpoints set one) — it's 100% of a parent whose height in turn comes
   from the image's natural size. Before each thumbnail finishes loading,
   the whole row collapses to near-0 height, then jumps to full height as
   images arrive, shifting the page under the visitor mid-scroll (this is
   what feeds the "Proyectos" scroll-pin jump in home). Reserving the ratio
   up front removes the layout shift entirely. */
@media only screen and (min-width: 993px) {
    .ar-work-image {
        aspect-ratio: 4 / 3;
    }
}

/* Same CLS problem, different cause: the Vimeo/Plyr embed just above
   "Proyectos" (home) has no height until Plyr initializes and swaps it
   for its own `.plyr` wrapper, so the page grows under the section right
   as that finishes — that resize was pushing "Proyectos" down mid-scroll.
   Full column width, at the source video's real 966x1080 ratio (both here
   and on the real Plyr wrapper below), keeps both states identical, so
   there's nothing to shift and nothing gets cropped. */
.showcase-video {
    aspect-ratio: 966 / 1080;
}

.cr-showcase-video-col .plyr {
    aspect-ratio: 966 / 1080;
}

/* ── LATERAL CAROUSEL ARROWS + SNAP-SCROLL (drag sliders) ───────── */
.cr-carousel-wrap {
    position: relative;
}

.cr-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(25, 27, 29, .15);
    color: #191b1d;
    cursor: pointer;
    opacity: .85;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.cr-carousel-arrow:hover {
    background: #191b1d;
    color: #fff;
    opacity: 1;
}

.cr-carousel-arrow.cr-prev {
    left: 20px;
}

.cr-carousel-arrow.cr-next {
    right: 20px;
}

.cr-carousel-arrow i {
    font-size: 18px;
}

.cr-drag-slider {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cr-drag-slider::-webkit-scrollbar {
    display: none;
}

.cr-drag-slider img,
.cr-scroll-carousel img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.cr-scroll-carousel .ar-work a {
    -webkit-user-drag: none;
    user-drag: none;
}

.cr-drag-slider .ai-image,
.cr-drag-slider .ar-work {
    scroll-snap-align: start;
}

.cr-scroll-carousel {
    overflow: visible;
}

.cr-scroll-carousel .recent-works-wrapper {
    user-select: none;
    will-change: transform;
}

@media only screen and (max-width: 767px) {
    .cr-carousel-arrow {
        width: 36px;
        height: 36px;
    }

    .cr-carousel-arrow i {
        font-size: 14px;
    }

    .cr-carousel-arrow.cr-prev {
        left: 8px;
    }

    .cr-carousel-arrow.cr-next {
        right: 8px;
    }
}

/* ── HIDE PLYR & THEME PLAY BUTTON IN WORKS GRID & CAROUSELS ──── */
.cr-thumb-video .plyr__controls,
.cr-thumb-video .plyr__control--overlaid,
.cr-thumb-video .video-overlay,
.cr-thumb-video .play-button,
.ar-work-image .plyr__controls,
.ar-work-image .plyr__control--overlaid,
.aw-project-image .plyr__control--overlaid,
.aw-project-image .plyr__controls,
.alioth-embed-video.no-interaction .plyr__controls,
.alioth-embed-video.no-interaction .plyr__control--overlaid,
.alioth-embed-video .video-overlay,
.alioth-embed-video .play-button,
.video-overlay,
.play-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── VIDEO THUMBNAILS (home "Proyectos" + works.html grid) ──────── */
/* Replaces the static <img> with a silent looping Vimeo embed. Source
   clips vary in aspect ratio (some 16:9, some 1:1) while the cards are
   wider than tall, so the embed box is set to the real per-video ratio
   via the --cr-video-ratio custom property (set inline per instance)
   and force-filled/centered to crop like object-fit:cover instead of
   letterboxing or stretching. */
.ar-work-image,
.aw-project-image {
    position: relative;
    overflow: hidden;
}

.cr-thumb-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* .plyr__video-embed is switched to position:absolute below (to center +
   crop it), which takes it out of flow and stops it contributing height
   to its ancestors — without an explicit height here, .plyr and
   .plyr__video-wrapper (which has overflow:hidden) collapse to 0 and
   clip the video away entirely. Anchoring their height to this element's
   own definite size (from the absolutely-positioned .cr-thumb-video)
   breaks that collapse. */
.cr-thumb-video .plyr,
.cr-thumb-video .plyr__video-wrapper {
    width: 100%;
    height: 100%;
}

.cr-thumb-video .plyr__video-embed {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    aspect-ratio: var(--cr-video-ratio, 16 / 9) !important;
    transform: translate(-50%, -50%) !important;
    padding-bottom: 0 !important;
}

/* Plyr's own "hide native Vimeo chrome" hack (240% padding-bottom +
   -38% translateY on this container, theme-wide) fights our aspect-ratio
   crop above, so it's neutralized here — the iframe fill below achieves
   the same crop, calibrated per real video ratio instead of a fixed 240%. */
.cr-thumb-video .plyr__video-embed__container {
    position: static !important;
    padding-bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
}

.cr-thumb-video .plyr__video-embed iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Prevenir desborde del email gigante en móviles y pantallas medianas */
.footer-widget .big-button a,
.big-button a {
    font-size: clamp(20px, 3.8vw, 47px) !important;
    letter-spacing: -1.5px !important;
    word-break: break-all;
    max-width: 100%;
    display: inline-block;
}

/* ── MENU OVERLAY VISIBILITY ──────────────────────────────────── */
.site-header .menu-widget-right .git-button a {
    color: rgba(25, 27, 29, 0.35) !important;
    transition: color 0.3s ease;
}

.site-header .menu-widget-right .git-button a:hover {
    color: #191b1d !important;
}

/* ── WORKS GRID: CONTRASTE Y LEGIBILIDAD EN TARJETAS DE PROYECTOS ── */
.aw-project a {
    display: block;
    position: relative;
    height: 100%;
}

.aw-project-meta {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 65px 35px 25px 35px !important;
    background: linear-gradient(to top,
            rgba(255, 255, 255, 0.70) 0%,
            rgba(255, 255, 255, 0.45) 35%,
            rgba(255, 255, 255, 0.18) 70%,
            rgba(255, 255, 255, 0) 100%) !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.aw-project-title {
    color: #111111 !important;
    font-size: clamp(20px, 1.8vw, 28px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.05em !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
}

.aw-project-cat {
    color: rgba(25, 27, 29, 0.72) !important;
    font-size: clamp(14px, 1.1vw, 17px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
}

@media (max-width: 768px) {
    .aw-project-meta {
        padding: 50px 20px 18px 20px !important;
    }
}