/* MC Portfolio v1.2 — estilos de páginas de detalle de proyecto.
   Los widgets son Elementor estándar (Mark los edita); el estilo viene de clases
   asignadas en Advanced → CSS Classes. Funciona en horizontal (desktop, html.mc-hs-on)
   y en el fallback vertical (móvil). */

:root {
    --mc-gold: #d4bc8c;
    --mc-cream: #f0ead6;
    --mc-ink: #e6dfc9;
}

/* ── Tipografía base de los paneles ────────────────────────────────────── */

.elementor-widget.mc-pj-kicker .elementor-heading-title,
.elementor-widget.mc-pj-label .elementor-heading-title {
    font-family: "Non Bureau", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(240, 234, 214, .55);
}
.elementor-widget.mc-pj-label .elementor-heading-title { color: var(--mc-gold); }

.elementor-widget.mc-pj-title .elementor-heading-title {
    font-family: "Non Bureau", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mc-gold);
    -webkit-text-stroke: 0.03em var(--mc-gold);
    paint-order: stroke fill;
    letter-spacing: .06em;
    line-height: 1.04;
    font-size: clamp(44px, calc(2.9vw + 10px), 66px);
    text-shadow: 0 0 34px rgba(212, 188, 140, .28);
}

/* (CATEGORIA) bajo el titulo — peso light (Non Bureau Std 300) */
.elementor-widget.mc-pj-cat .elementor-heading-title {
    font-family: "Non Bureau Std", "Non Bureau", sans-serif;
    font-weight: 300;
    font-size: clamp(18px, calc(1vw + 6px), 24.5px);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mc-cream);
}
.elementor-widget.mc-pj-cat { margin-top: 8px; }

/* Miniatura del hero — siempre alineada a la izquierda */
.elementor-widget.mc-pj-thumb { margin: 3.5vh 0; text-align: left; }
.mc-pj-thumb img {
    width: clamp(180px, 17vw, 330px);
    height: auto;
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.elementor-widget.mc-pj-client .elementor-heading-title {
    font-family: "Non Bureau", sans-serif;
    font-weight: 700;
    font-size: clamp(20px, calc(.9vw + 8px), 25px);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mc-cream);
}
.elementor-widget.mc-pj-client-label .elementor-heading-title {
    font-family: "Non Bureau", sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mc-cream);
}

/* Sinopsis — statement grande (1a frase) */
.elementor-widget.mc-pj-state .elementor-heading-title {
    font-family: "Non Bureau", sans-serif;
    font-weight: 700;
    color: var(--mc-gold);
    font-size: clamp(38px, 2.8vw, 50px);
    line-height: 1.18;
    letter-spacing: .01em;
    max-width: 100%;
}
.elementor-widget.mc-pj-state { margin: 14px 0 4.5vh; }

/* Sinopsis — cuerpo */
.mc-pj-syn { max-width: 56ch; }
.mc-pj-syn p {
    color: var(--mc-ink);
    font-size: clamp(20px, calc(1.05vw + 5px), 23px);
    line-height: 1.65;
    margin: 0 0 1.15em;
}
.mc-pj-syn p:last-child { margin-bottom: 0; }

/* Cuerpo en columnas (bajo el statement) */
.mc-pj-syn.mc-pj-cols {
    columns: 2;
    column-gap: 3.5vw;
    max-width: 1100px;
}
.mc-pj-syn.mc-pj-cols p { font-size: clamp(19px, calc(.95vw + 5px), 21px); line-height: 1.62; }
.mc-pj-syn.mc-pj-syn-xl { columns: 3; max-width: 1620px; }
@media (max-width: 900px) {
    .mc-pj-syn.mc-pj-cols, .mc-pj-syn.mc-pj-syn-xl { columns: 1 !important; }
}

/* Créditos: <p class="mc-cr"><em>Rol</em>Nombre</p> */
.mc-pj-credits .mc-cr {
    margin: 0 0 14px;
    color: var(--mc-cream);
    font-size: clamp(24px, calc(1vw + 10px), 27px);
    line-height: 1.35;
}
.mc-pj-credits .mc-cr em {
    display: block;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(240, 234, 214, .48);
    margin-bottom: 2px;
}

/* Boton pill para creditos-enlace (mismo lenguaje que VIEW/BACK) */
.mc-pj-credits .mc-cr-link { break-inside: avoid; margin-top: 8px; }
a.mc-pj-link {
    display: inline-block;
    border: 1px solid #d4bc8c;
    color: #d4bc8c;
    padding: 6px 20px;
    border-radius: 26px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
a.mc-pj-link:hover { background: #d4bc8c; color: #111; }

/* Festivales (laurels) */
.mc-pj-fest p {
    color: rgba(212, 188, 140, .8);
    font-size: clamp(12px, .85vw, 14px);
    letter-spacing: .08em;
    line-height: 1.5;
    margin: 0 0 8px;
    text-transform: uppercase;
}

/* Next project */
.elementor-widget.mc-pj-next-label .elementor-heading-title {
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(240, 234, 214, .5);
    font-weight: 400;
}
.elementor-widget.mc-pj-next-title .elementor-heading-title,
.elementor-widget.mc-pj-next-title .elementor-heading-title a {
    font-family: "Non Bureau", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mc-gold);
    -webkit-text-stroke: 0.03em var(--mc-gold);
    paint-order: stroke fill;
    letter-spacing: .06em;
    font-size: clamp(1.9rem, 4.6vw, 4.6rem);
    line-height: 1.05;
    transition: letter-spacing .45s ease, text-shadow .45s ease;
}
.elementor-widget.mc-pj-next-title .elementor-heading-title a:hover {
    letter-spacing: .1em;
    text-shadow: 0 0 38px rgba(212, 188, 140, .5);
}
.elementor-widget.mc-pj-back .elementor-heading-title,
.elementor-widget.mc-pj-back .elementor-heading-title a {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(240, 234, 214, .6);
    font-weight: 400;
    transition: color .3s;
}
.elementor-widget.mc-pj-back .elementor-heading-title a:hover { color: var(--mc-gold); }

/* Video: la caja del elemento = la caja visible (sin letterbox), centrada.
   !important: Elementor/tema fuerzan su propio sizing sobre .elementor-video.
   filter: saca al video del hardware overlay de Windows (MPO) — sin esto,
   Chromium/Brave pinta el video ENCIMA de sus hermanos (el toggle desaparece
   hasta el siguiente recomposite, p.ej. F11/DevTools). */
.mc-pan-video video {
    width: auto !important;
    height: auto !important;
    max-width: 86vw !important;
    max-height: 76vh !important;
    display: block;
    background: #000;
    filter: brightness(1.001);
    transform: translateZ(0);
}

/* Centrado vertical + horizontal del video dentro del panel */
html.mc-hs-on .mc-slide.mc-pan-video .elementor-column > .elementor-widget-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 0; /* el video llena el alto completo del panel */
}
html.mc-hs-on .mc-pan-video .elementor-widget-video { width: auto; max-width: 100%; }

/* Video a alto de pantalla completa (aspecto intacto: width auto) */
html.mc-hs-on .mc-pan-video video {
    height: calc(100vh - var(--mc-hdr-h, 72px)) !important;
    width: auto !important;
    max-width: 98vw !important;
    max-height: none !important;
    object-fit: contain;
}
.mc-pan-video .elementor-widget-container,
.mc-pan-video .elementor-widget-video { text-align: center; }
/* Wrapper que abraza exactamente al video (lo crea el JS) — ancla del toggle */
.mc-vid-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.elementor-section.mc-pan-video { position: relative; }

/* Video como media del hero (proyectos sin fotos): llena la mitad derecha
   full-bleed como las fotos (cover, recorte mínimo en 16:9) */
html.mc-hs-on .mc-hero-right .elementor-widget.mc-pj-hero-vid,
html.mc-hs-on .mc-hero-right .mc-pj-hero-vid > .elementor-widget-container,
html.mc-hs-on .mc-hero-right .mc-pj-hero-vid .e-hosted-video,
html.mc-hs-on .mc-hero-right .mc-pj-hero-vid .mc-vid-wrap {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin: 0;
    max-width: none !important;
}
html.mc-hs-on .mc-hero-right .mc-pj-hero-vid video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
    background: #000;
    filter: brightness(1.001);
    transform: translateZ(0);
}

/* Label CLIENT en flujo (hero sin media): pequeño respiro sobre el nombre */
.mc-hero-left .elementor-widget.mc-pj-client-label { margin-top: 4vh; }

/* Toggle de sonido (SOUND OFF + ecualizador) — siempre DENTRO del video.
   translateZ: lo promueve a su propia capa compositada; sin esto, la capa de
   hardware del <video> lo tapa hasta el siguiente repaint (bug Chromium/Brave) */
.mc-vid-sound {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 6;
    transform: translateZ(0);
    will-change: transform;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px 2px;
}
.mc-vid-sound .lbl {
    font-family: "Non Bureau", sans-serif;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(240, 234, 214, .85);
    transition: color .25s;
}
.mc-vid-sound:hover .lbl { color: var(--mc-gold); }
.mc-vid-sound .eq { display: flex; align-items: center; gap: 3px; height: 14px; }
.mc-vid-sound .eq i {
    width: 2px;
    height: 4px;
    background: var(--mc-gold);
    display: block;
    transition: height .3s;
}
.mc-vid-sound.is-on .eq i { animation: mcEq 1s ease-in-out infinite; }
.mc-vid-sound.is-on .eq i:nth-child(1) { animation-delay: 0s; }
.mc-vid-sound.is-on .eq i:nth-child(2) { animation-delay: .18s; }
.mc-vid-sound.is-on .eq i:nth-child(3) { animation-delay: .36s; }
.mc-vid-sound.is-on .eq i:nth-child(4) { animation-delay: .09s; }
.mc-vid-sound.is-on .eq i:nth-child(5) { animation-delay: .27s; }
@keyframes mcEq {
    0%, 100% { height: 4px; }
    50%      { height: 14px; }
}

/* ── Modo horizontal (desktop, el motor añade html.mc-hs-on) ───────────── */

html.mc-hs-on .mc-slide > .elementor-section > .elementor-container,
html.mc-hs-on .mc-slide .elementor-column,
html.mc-hs-on .mc-slide .elementor-column > .elementor-widget-wrap {
    height: 100%;
}
html.mc-hs-on .mc-slide .elementor-column > .elementor-widget-wrap {
    align-content: center;
    padding: 4vh 5vw;
    box-sizing: border-box;
}

/* Panel imagen (mc-pan-fit): la foto llena todo el panel, sin padding */
html.mc-hs-on .mc-slide.mc-pan-fit .elementor-column > .elementor-widget-wrap { padding: 0; }
html.mc-hs-on .mc-slide.mc-pan-fit .elementor-widget-image,
html.mc-hs-on .mc-slide.mc-pan-fit .elementor-widget-image > .elementor-widget-container,
html.mc-hs-on .mc-slide.mc-pan-fit .elementor-widget-image figure {
    height: 100%;
    width: 100%;
    margin: 0;
}
html.mc-hs-on .mc-slide.mc-pan-fit .elementor-widget-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hero: mitad izquierda respira; creditos compactos en columnas */
html.mc-hs-on .mc-slide.mc-pan-hero .mc-hero-left > .elementor-widget-wrap { padding-left: 6vw; padding-right: 3vw; }
.mc-hero-left .mc-pj-credits { columns: 2 230px; column-gap: 2.5vw; }
.mc-hero-left .mc-pj-credits .mc-cr { margin-bottom: 10px; font-size: clamp(22px, calc(.85vw + 10px), 25px); break-inside: avoid; }
.elementor-widget.mc-pj-label { margin-bottom: 10px; }

/* Hero ancho (con foto): la imagen ocupa ~85vw y se sale del viewport inicial,
   hay que scrollear para terminar de verla (como la maqueta) */
html.mc-hs-on #mc-horiz-track > .mc-slide.mc-pan-hero.mc-hero-wide { width: 135vw; }
html.mc-hs-on .mc-pan-hero.mc-hero-wide .elementor-container { flex-wrap: nowrap; }
html.mc-hs-on .mc-pan-hero.mc-hero-wide .mc-hero-left {
    width: 50vw !important;
    flex: 0 0 50vw !important;
    max-width: none !important;
}
html.mc-hs-on .mc-pan-hero.mc-hero-wide .mc-hero-right {
    width: 85vw !important;
    flex: 0 0 85vw !important;
    max-width: none !important;
}

/* Hero: mitad derecha = foto full-bleed con CLIENT superpuesto.
   Selector con .mc-slide y .elementor-column para ganarle a la regla general de padding */
html.mc-hs-on .mc-slide .elementor-column.mc-hero-right > .elementor-widget-wrap {
    padding: 0;
    position: relative;
}
html.mc-hs-on .mc-hero-right .elementor-widget-image.mc-pj-hero-img,
html.mc-hs-on .mc-hero-right .mc-pj-hero-img > .elementor-widget-container,
html.mc-hs-on .mc-hero-right .mc-pj-hero-img figure {
    height: 100%;
    width: 100%;
    margin: 0;
}
html.mc-hs-on .mc-hero-right .mc-pj-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
html.mc-hs-on .mc-hero-right .elementor-widget.mc-pj-client-label,
html.mc-hs-on .mc-hero-right .elementor-widget.mc-pj-client {
    position: absolute;
    left: 100px;
    z-index: 2;
    width: auto;
}
html.mc-hs-on .mc-hero-right .elementor-widget.mc-pj-client-label { bottom: calc(100px + 22px); }
html.mc-hs-on .mc-hero-right .elementor-widget.mc-pj-client { bottom: 100px; }

/* Last One Laughing (page 1586): sus fotos traen la marca de agua "prime video"
   abajo-izquierda justo donde va CLIENT — aqui el bottom baja a 30px */
html.mc-hs-on body.page-id-1586 .mc-hero-right .elementor-widget.mc-pj-client-label { bottom: calc(10px + 22px); }
html.mc-hs-on body.page-id-1586 .mc-hero-right .elementor-widget.mc-pj-client { bottom: 10px; }
.mc-hero-right .elementor-widget.mc-pj-client-label .elementor-heading-title,
.mc-hero-right .elementor-widget.mc-pj-client .elementor-heading-title {
    text-shadow: 0 1px 16px rgba(0, 0, 0, .6);
}

/* ── Fallback vertical (móvil / editor) ────────────────────────────────── */

@media (max-width: 900px) {
    .mc-pan-hero .elementor-widget-wrap,
    .mc-pan-syn .elementor-widget-wrap,
    .mc-pan-credits .elementor-widget-wrap,
    .mc-pan-video .elementor-widget-wrap,
    .mc-pan-next .elementor-widget-wrap {
        padding: 9vh 7vw 4vh;
    }
    .mc-pan-fit .elementor-widget-wrap { padding: 2vh 0; }
    .elementor-widget.mc-pj-title .elementor-heading-title { font-size: clamp(2.2rem, 11vw, 3.4rem); }
    .elementor-widget.mc-pj-next-title .elementor-heading-title { font-size: clamp(1.7rem, 8vw, 2.6rem); }
}

/* ── Pantallas BAJAS (laptops de Mark & cia.): compactar para que los paneles
   de texto nunca se corten. El centrado 'safe' evita recortar el inicio. ── */
html.mc-hs-on .mc-slide .elementor-column > .elementor-widget-wrap { align-content: safe center; }

@media (min-width: 901px) and (max-height: 899px) {
    /* sinopsis: 3 columnas a panel completo + tipografia compacta */
    html.mc-hs-on #mc-horiz-track > .mc-slide.mc-pan-syn.mc-pan-75 { width: 100vw; }
    .mc-pj-syn.mc-pj-cols { columns: 3; max-width: 1560px; }
    .mc-pj-syn.mc-pj-cols p { font-size: 17px; line-height: 1.55; }
    .elementor-widget.mc-pj-state .elementor-heading-title { font-size: clamp(28px, 2.3vw, 40px); }
    .elementor-widget.mc-pj-state { margin: 10px 0 3vh; }
    /* hero izquierdo compacto */
    .elementor-widget.mc-pj-title .elementor-heading-title { font-size: clamp(36px, calc(2.3vw + 8px), 52px); }
    .elementor-widget.mc-pj-cat .elementor-heading-title { font-size: 17px; }
    .elementor-widget.mc-pj-thumb { margin: 2vh 0; }
    .mc-pj-thumb img { width: clamp(130px, 11vw, 210px); }
    .mc-pj-credits .mc-cr { font-size: 17px; margin-bottom: 8px; }
    .mc-hero-left .mc-pj-credits .mc-cr { font-size: 15px; }
}
@media (min-width: 901px) and (max-height: 749px) {
    .mc-pj-syn.mc-pj-cols p { font-size: 15px; line-height: 1.5; }
    .elementor-widget.mc-pj-state .elementor-heading-title { font-size: clamp(24px, 2.1vw, 32px); }
    .mc-hero-left .mc-pj-credits .mc-cr { font-size: 13px; }
    .mc-pj-thumb img { width: clamp(110px, 9vw, 170px); }
}

/* Movil: el toggle de sonido mas orillado a la esquina del video */
@media (max-width: 900px) {
    .mc-vid-sound { top: 10px; right: 10px; padding: 4px 2px; }
}