/* ==========================================================================
   proyecto.css — Detalle de un proyecto corporativo
   ========================================================================== */

   .page-proyecto-detalle {
    --proy-det-dark: #101109;
    /* Marco amplio, igual que el resto del sitio (banner del home) — casi todo el ancho. */
    --proy-frame-max: var(--frame-max);
    --proy-frame-gutter: var(--frame-gutter);
    /* Marco angosto de lectura, solo para "El reto / La solución". */
    --proy-narrow-max: min(1040px, var(--maxw));
    --proy-radius: var(--frame-radius);
  }

  /* Ojo: acotado a <main class="proy-det-main"> — el header y el footer también usan
     .wrap y no deben heredar el marco de esta página. */
  .page-proyecto-detalle main.proy-det-main .wrap {
    max-width: var(--proy-frame-max);
    margin-inline: auto;
  }

  .page-proyecto-detalle .proy-det-main > .wrap,
  .page-proyecto-detalle .proy-det-lines > .wrap,
  .page-proyecto-detalle .proy-det-quote > .wrap,
  .page-proyecto-detalle .proy-det-related > .wrap,
  .page-proyecto-detalle .contact > .wrap {
    width: min(var(--proy-frame-max), calc(100% - (var(--proy-frame-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
  }

  /* "El reto" / "La solución": se queda en el ancho angosto de lectura, no en el
     marco amplio del resto de la página. */
  .page-proyecto-detalle .proy-det-sec > .wrap {
    width: min(var(--proy-narrow-max), calc(100% - (var(--proy-frame-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
  }

  .page-proyecto-detalle .proy-det-main {
    max-width: 100%;
    overflow-x: clip;
  }
  
  .page-proyecto-detalle .proy-det-pe {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--brand);
  }
  
  .page-proyecto-detalle .proy-det-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px;
    font-size: .72rem;
    font-style: italic;
    color: rgba(255, 255, 255, .45);
    pointer-events: none;
    z-index: 2;
  }
  
  .page-proyecto-detalle .proy-det-ph.dark {
    color: rgba(0, 0, 0, .3);
  }
  
  .page-proyecto-detalle .proy-det-media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  
  .page-proyecto-detalle .proy-det-media img,
  .page-proyecto-detalle .proy-det-media video {
    position: absolute;
    inset: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 1;
  }
  
  .page-proyecto-detalle .proy-det-hero-bg .proy-det-media img,
  .page-proyecto-detalle .proy-det-hero-bg .proy-det-media video {
    object-position: var(--proy-hero-position, center 42%);
  }
  
  .page-proyecto-detalle .proy-det-media img.is-error {
    display: none;
  }
  
  .page-proyecto-detalle .proy-det-media:has(img:not(.is-error)) .proy-det-ph,
  .page-proyecto-detalle .proy-det-media:has(video) .proy-det-ph {
    display: none;
  }
  
  /* HERO */
  .page-proyecto-detalle .proy-det-hero {
    position: relative;
    width: min(var(--proy-frame-max), calc(100% - (var(--proy-frame-gutter) * 2)));
    margin: clamp(12px, 1.8vw, 28px) auto 0;
    min-height: clamp(700px, 85vh, 900px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--proy-radius);
    background: var(--proy-det-dark);
  }
  
  .page-proyecto-detalle .proy-det-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  
  .page-proyecto-detalle .proy-det-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .08) 38%, rgba(0, 0, 0, .52) 72%, rgba(0, 0, 0, .88) 100%);
    pointer-events: none;
  }
  
  .page-proyecto-detalle .proy-det-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: clamp(28px, 4vw, 40px);
  }
  
  .page-proyecto-detalle .proy-det-crumbs {
    font-size: .84rem;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 14px;
  }
  
  .page-proyecto-detalle .proy-det-crumbs a:hover {
    color: #fff;
  }
  
  .page-proyecto-detalle .proy-det-hero h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-display);
    letter-spacing: var(--track-display);
    line-height: var(--lh-display);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    color: #fff;
  }
  
  .page-proyecto-detalle .proy-det-tagline {
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    color: rgba(255, 255, 255, .88);
    margin-top: 10px;
    max-width: 42ch;
    line-height: 1.35;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
  }
  
  /* META BAR (dentro del hero) */
  .page-proyecto-detalle .proy-det-metabar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 2.4vw, 22px);
    margin-top: clamp(22px, 3.5vw, 32px);
    padding-top: clamp(18px, 2.8vw, 24px);
    border-top: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
  }
  
  .page-proyecto-detalle .proy-det-meta-item b {
    display: block;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 6px;
  }
  
  .page-proyecto-detalle .proy-det-meta-item span {
    font-size: clamp(.92rem, 1.6vw, 1.02rem);
    font-weight: 500;
    line-height: 1.35;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
  }
  
  /* INTRO / NARRATIVE */
  .page-proyecto-detalle .proy-det-sec {
    padding: 96px 0;
  }
  
  .page-proyecto-detalle .proy-det-narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 40px;
  }

  .page-proyecto-detalle .proy-det-lead {
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.35;
    color: var(--ink);
    margin-top: 14px;
  }

  .page-proyecto-detalle .proy-det-body {
    font-size: 1.12rem;
    color: var(--ink-soft);
    margin-top: 22px;
  }
  
  .page-proyecto-detalle .proy-det-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 10px;
  }
  
  .page-proyecto-detalle .proy-det-split h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
  }
  
  .page-proyecto-detalle .proy-det-split p {
    color: var(--ink-soft);
    font-size: 1.05rem;
  }
  
  /* GALLERY */
  .page-proyecto-detalle .proy-det-wide {
    position: relative;
    width: min(var(--proy-frame-max), calc(100% - (var(--proy-frame-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
    /* aspect-ratio (no vh) para que el alto siga al ancho del marco y la foto quede
       rectangular como el banner del home, en vez de recortarse casi cuadrada. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--proy-radius);
  }
  
  .page-proyecto-detalle .proy-det-wide-a {
    background: linear-gradient(150deg, #43473a, #6d7159);
  }
  
  .page-proyecto-detalle .proy-det-wide-b {
    background: linear-gradient(150deg, #2b3a42, #4d6a74);
  }

  .page-proyecto-detalle .proy-det-quote {
    padding: 120px 0;
    text-align: center;
  }

  .page-proyecto-detalle .proy-det-quote .proy-det-narrow {
    max-width: min(1200px, calc(100% - 64px));
    margin-inline: auto;
  }
  
  .page-proyecto-detalle .proy-det-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.4vw, 18px);
    width: min(var(--proy-frame-max), calc(100% - (var(--proy-frame-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
    padding: clamp(12px, 1.4vw, 18px) 0;
    padding-inline: 0;
  }
  
  .page-proyecto-detalle .proy-det-duo-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--proy-radius) - 4px);
    overflow: hidden;
    background: linear-gradient(150deg, #dcdcd4, #c0c0b4);
  }
  
  /* LINES USED */
  .page-proyecto-detalle .proy-det-lines {
    background: var(--paper);
    padding: 90px 0;
  }
  
  .page-proyecto-detalle .proy-det-lines h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -.03em;
    margin-bottom: 8px;
  }
  
  .page-proyecto-detalle .proy-det-lines-sub {
    color: var(--ink-soft);
    margin-bottom: 40px;
  }
  
  .page-proyecto-detalle .proy-det-lcards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  
  .page-proyecto-detalle .proy-det-lcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
  }
  
  .page-proyecto-detalle .proy-det-lcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .35);
  }
  
  .page-proyecto-detalle .proy-det-lcard-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(150deg, #d8d8d0, #bcbcb0);
  }
  
  .page-proyecto-detalle .proy-det-lcard-body {
    padding: 18px 20px 20px;
  }
  
  .page-proyecto-detalle .proy-det-lcard-body b {
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  .page-proyecto-detalle .proy-det-lcard-body p {
    font-size: .9rem;
    color: var(--ink-soft);
    margin-top: 3px;
  }
  
  /* QUOTE */
  .page-proyecto-detalle .proy-det-quote {
    padding: 100px 0;
    text-align: center;
  }
  
  .page-proyecto-detalle .proy-det-quote blockquote {
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.25;
    /* Antes 20ch: cualquier cita se apilaba muy alta. Con más ancho, el texto largo
       se reparte a lo ancho en vez de forzar muchas líneas hacia abajo. */
    max-width: 42ch;
    margin: 0 auto;
    color: var(--ink);
  }
  
  .page-proyecto-detalle .proy-det-quote-who {
    margin-top: 24px;
    color: var(--ink-soft);
    font-size: .95rem;
  }
  
  /* RELATED */
  .page-proyecto-detalle .proy-det-related {
    padding: 90px 0 36px;
    border-top: 1px solid var(--line);
  }

  /* Sin sección de opinión antes: la última imagen (.proy-det-wide, sin margen propio)
     quedaría pegada al border-top de esta sección sin este respiro. */
  .page-proyecto-detalle .proy-det-related--no-quote {
    margin-top: 100px;
  }

  .page-proyecto-detalle .contact {
    padding: 24px 0 60px;
  }
  
  .page-proyecto-detalle .proy-det-related h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 26px;
  }
  
  .page-proyecto-detalle .proy-det-rgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  
  .page-proyecto-detalle .proy-det-rcard {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    color: #fff;
  }
  
  .page-proyecto-detalle .proy-det-rcard-bg {
    position: absolute;
    inset: 0;
    transition: transform .6s;
  }
  
  .page-proyecto-detalle .proy-det-rcard:hover .proy-det-rcard-bg {
    transform: scale(1.06);
  }
  
  .page-proyecto-detalle .proy-det-rcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .6));
    z-index: 1;
    pointer-events: none;
  }
  
  .page-proyecto-detalle .proy-det-rcard-inner {
    position: absolute;
    bottom: 0;
    padding: 18px;
    z-index: 2;
  }
  
  .page-proyecto-detalle .proy-det-rcard-inner h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
  }
  
  .page-proyecto-detalle .proy-det-rcard-inner span {
    font-size: .84rem;
    color: rgba(255, 255, 255, .8);
  }
  
  /* Gradient tones (fallback sin imagen) — reutiliza los del listado */
  .page-proyecto-detalle .proy-b-feat { background: linear-gradient(130deg, #1f231a, #3f4632 55%, #5e6647); }
  .page-proyecto-detalle .proy-b0 { background: linear-gradient(150deg, #2b3a42, #4d6a74); }
  .page-proyecto-detalle .proy-b1 { background: linear-gradient(150deg, #43473a, #6d7159); }
  .page-proyecto-detalle .proy-b2 { background: linear-gradient(150deg, #574f3f, #8a7449); }
  .page-proyecto-detalle .proy-b3 { background: linear-gradient(150deg, #3a3f33, #5c684f); }
  .page-proyecto-detalle .proy-b4 { background: linear-gradient(150deg, #34323a, #5a5560); }
  .page-proyecto-detalle .proy-b5 { background: linear-gradient(150deg, #233028, #46604c); }
  .page-proyecto-detalle .proy-b6 { background: linear-gradient(150deg, #3f3a2e, #6b6147); }
  .page-proyecto-detalle .proy-b7 { background: linear-gradient(150deg, #2f3a3a, #52685f); }
  .page-proyecto-detalle .proy-b8 { background: linear-gradient(150deg, #3a2f3a, #685260); }
  .page-proyecto-detalle .proy-b9 { background: linear-gradient(150deg, #3a3625, #6a5f3f); }
  
  /* 404 */
  .page-proyecto-404 .proy-det-404 {
    padding: clamp(80px, 14vw, 140px) 0;
    text-align: center;
  }
  
  .page-proyecto-404 .proy-det-404 h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    margin: 16px 0;
  }
  
  .page-proyecto-404 .proy-det-404 p {
    color: var(--ink-soft);
    margin-bottom: 28px;
  }
  
  @media (max-width: 1024px) {
    .page-proyecto-detalle {
      --proy-frame-max: min(920px, var(--maxw));
      --proy-frame-gutter: clamp(18px, 4vw, 32px);
    }

    .page-proyecto-detalle .proy-det-hero {
      min-height: clamp(420px, 68vh, 620px);
    }
  
    .page-proyecto-detalle .proy-det-metabar {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .page-proyecto-detalle .proy-det-split,
    .page-proyecto-detalle .proy-det-duo,
    .page-proyecto-detalle .proy-det-lcards,
    .page-proyecto-detalle .proy-det-rgrid {
      grid-template-columns: 1fr;
    }

    .page-proyecto-detalle .proy-det-narrow {
      padding: 0 24px;
    }

    .page-proyecto-detalle .proy-det-hero-inner.wrap {
      padding-inline: clamp(18px, 4vw, 28px);
    }
  }
  
  @media (max-width: 760px) {
    .page-proyecto-detalle {
      --proy-frame-max: min(720px, var(--maxw));
      --proy-frame-gutter: clamp(16px, 4vw, 24px);
    }

    .page-proyecto-detalle .proy-det-hero {
      min-height: auto;
    }
  
    .page-proyecto-detalle .proy-det-hero-inner {
      padding-top: clamp(72px, 18vw, 96px);
    }
  
    .page-proyecto-detalle .proy-det-metabar {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  
    .page-proyecto-detalle .proy-det-sec {
      padding: 72px 0;
    }
  
    .page-proyecto-detalle .proy-det-wide {
      height: min(56vh, 420px);
      min-height: 280px;
    }
  }