/* ===== FIXES GLOBALES ===== */
html, body { overflow-x: hidden; }                  /* evita scroll horiz. por el full-bleed */
section, .container-models, .media { overflow: visible; } /* no recortar la banda */

/* ====== DESKTOP (>= 950px) ====== */
@media (min-width: 950px) {
  body {
    background-color: #181515;
    margin-top: 16rem;
    margin-bottom: 1rem;
    color: #fff;
  }

  .section-intro { display: flex; justify-content: center; }
  .div-intro { width: 75%; text-align: center; }
  .div-intro h1 { font-size: 4.6rem; }
  .div-intro p { font-size: 1.4rem; margin: 1.3rem; padding-top: 1rem; }

  .container-models {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 2rem;
    z-index: 10;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    border-radius: 2rem;
    color: #fff;
    background: transparent;
    transform: translateY(50px);
    opacity: 0;
    transition: transform .5s ease-out, opacity .5s ease-out;
  }
  .box.right { flex-direction: row-reverse; }

  .media {
    position: relative;
    display: inline-block;
    overflow: visible;
    isolation: isolate;
    --ribbon-gap: 22px;
    margin-top: clamp(24px, 3vw, 40px);
  }

  .div-image1 {
    border-radius: 1.6rem;
    object-fit: cover;
    display: block;
    background: url('../assets/images/pibaextra4.jpg') no-repeat center center/cover;
    width: clamp(28rem, 34vw, 40rem);
    height: clamp(28rem, 45vw, 42rem);
    outline: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 28px rgba(255,255,255,0.08), inset 0 0 40px rgba(255,255,255,0.03);
  }
  .div-image2 {
    border-radius: 1.6rem;
    object-fit: cover;
    display: block;
    background: url('../assets/images/pibaextra2.jpg') no-repeat center center/cover;
    width: clamp(28rem, 34vw, 40rem);
    height: clamp(28rem, 45vw, 42rem);
    outline: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 28px rgba(255,255,255,0.08), inset 0 0 40px rgba(255,255,255,0.03);
  }
  .div-image3 {
    border-radius: 1.6rem;
    object-fit: cover;
    display: block;
    background: url('../assets/images/pibaservices3.png') no-repeat center center/cover;
    width: clamp(28rem, 34vw, 40rem);
    height: clamp(28rem, 45vw, 42rem);
    outline: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 28px rgba(255,255,255,0.08), inset 0 0 40px rgba(255,255,255,0.03);
  }
  .div-image4 {
    border-radius: 1.6rem;
    object-fit: cover;
    display: block;
    background: url('../assets/images/pibaextra1.jpg') no-repeat center center/cover;
    width: clamp(28rem, 34vw, 40rem);
    height: clamp(28rem, 45vw, 42rem);
    outline: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 28px rgba(255,255,255,0.08), inset 0 0 40px rgba(255,255,255,0.03);
  }

  /* ===== BANDA FULL-BLEED ===== */
  .partner-ribbon {
    position: absolute;
    /* Truco para ocupar todo el viewport desde dentro de un contenedor estrecho */
    left: calc(50% - 50vw);   /* alinea el borde izq. de la banda con el borde izq. del viewport */
    width: 100vw;             /* ancho completo de la ventana */
    bottom: calc(100% + var(--ribbon-gap));
    z-index: 2;
    pointer-events: none;
    padding-block: .15rem;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.45));
    background: transparent;
    text-align: center;
    opacity: 1;
    transform: none;          /* importante: NO centrar respecto al contenedor */
  }

  .partner-ribbon-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, white 7%, white 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, white 7%, white 93%, transparent 100%);
  }

  .ribbon-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: ribbon-marquee 26s linear infinite;
    padding-inline: 4vw;
  }

  .ribbon-track span {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-right: 2rem;
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 3.2vw, 3.2rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(180deg, #2b2b2b 0%, #0e0e0e 45%, #2a2a2a 55%, #0f0f0f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.25),
      0 -1px 0 rgba(0,0,0,0.6),
      0 0 12px rgba(255,255,255,0.10),
      0 0 28px rgba(255,255,255,0.06);
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.10);
    text-stroke: 0.5px rgba(255,255,255,0.10);
  }
  .ribbon-track span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
                transparent 0%,
                rgba(255,255,255,0.10) 45%,
                rgba(255,255,255,0.30) 50%,
                rgba(255,255,255,0.10) 55%,
                transparent 100%);
    mix-blend-mode: screen;
    transform: translateX(-120%);
    animation: ribbon-specular 9s linear infinite;
    pointer-events: none;
  }

  @keyframes ribbon-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes ribbon-specular {
    0%   { transform: translateX(-120%); }
    50%  { transform: translateX(0%); }
    100% { transform: translateX(120%); }
  }

  .info {
    position: relative;
    text-align: left;
    color: #fff;
    background-color: transparent;
    padding: 1.4rem 1.8rem;
    border-radius: .6rem;
    max-width: min(36rem, 42vw);
  }
  .info .name {
    font-size: 1.65rem;
    margin-bottom: .5rem;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity .5s ease-out, transform .5s ease-out;
  }
  .info .description {
    font-size: 1.2rem;
    opacity: 0;
    transform: translate(-50px, 50px);
    transition: all .6s ease-out;
  }

  .box.in-view { transform: translateY(0); opacity: 1; }
  .box.in-view .name { transform: translateX(0); opacity: 1; }
  .info.in-view { opacity: 1; transform: translate(0,0); }
  .description { opacity: 0; transform: translate(-50px,-50px); transition: all .6s ease-out; }
  .description.in-view { opacity: 1; transform: translate(0,0); }

  .name span, .description span { display: inline-block; opacity: 0; transform: translate(-50px,-20px); transition: all .4s ease-out; }
  .name.in-view span, .description.in-view span { opacity: 1; transform: translate(0,0); }
}

/* ====== MOBILE (<= 949px) ====== */
@media (max-width: 950px) {
  body {
    background-color: #181515;
    margin-top: 14rem;
    margin-bottom: 1rem;
    color: #fff;
    justify-content: center;
  }

  .section-intro { display: flex; justify-content: center; }
  .div-intro { width: 85%; text-align: center; }
  .div-intro h1 { font-size: 3rem; }
  .div-intro p { font-size: 1rem; }

  .container-models {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    z-index: 10;
  }

  .box {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
    padding: 1.2rem;
    border-radius: 1.4rem;
    color: #fff;
    background: transparent;
    transform: translateY(50px);
    opacity: 0;
    transition: transform .5s ease-out, opacity .5s ease-out;
  }

  .media {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: visible;
    --ribbon-gap: 28px;
    margin-top: clamp(28px, 6vw, 56px);
  }
  .container-models .box:first-child .media { --ribbon-gap: 32px; margin-top: clamp(36px, 7vw, 64px); }

  .div-image1 {
    width: min(92vw, 36rem);
    height: min(120vw, 56rem);
    border-radius: 1.2rem;
    object-fit: cover;
    display: block;
    background: url('../assets/images/pibaextra4.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-inline: auto;
    outline: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 22px rgba(255,255,255,0.08), inset 0 0 30px rgba(255,255,255,0.03);
  }
  .div-image2 {
    width: min(92vw, 36rem);
    height: min(120vw, 56rem);
    border-radius: 1.2rem;
    object-fit: cover;
    display: block;
    background: url('../assets/images/pibaextra2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-inline: auto;
    outline: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 22px rgba(255,255,255,0.08), inset 0 0 30px rgba(255,255,255,0.03);
  }
  .div-image3 {
    width: min(92vw, 36rem);
    height: min(120vw, 56rem);
    border-radius: 1.2rem;
    object-fit: cover;
    display: block;
    background: url('../assets/images/pibaservices3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-inline: auto;
    outline: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 22px rgba(255,255,255,0.08), inset 0 0 30px rgba(255,255,255,0.03);
  }
  .div-image4 {
    width: min(92vw, 36rem);
    height: min(120vw, 56rem);
    border-radius: 1.2rem;
    object-fit: cover;
    display: block;
    background: url('../assets/images/pibaextra1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-inline: auto;
    outline: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 22px rgba(255,255,255,0.08), inset 0 0 30px rgba(255,255,255,0.03);
  }

  /* FULL-BLEED en móvil */
  .partner-ribbon {
    position: absolute;
    left: calc(50% - 50vw);  /* truco full-bleed en móvil también */
    width: 100vw;
    bottom: calc(100% + var(--ribbon-gap));
    z-index: 2;
    pointer-events: none;
    padding-block: .1rem;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
    background: transparent;
    text-align: center;
    opacity: 1;
    transform: none;
  }

  .partner-ribbon-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, white 8%, white 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, white 8%, white 92%, transparent 100%);
  }

  .ribbon-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: ribbon-marquee 22s linear infinite;
    padding-inline: 4vw;
  }

  .ribbon-track span {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-right: 1.2rem;
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(180deg, #2b2b2b 0%, #0e0e0e 45%, #2a2a2a 55%, #0f0f0f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.25),
      0 -1px 0 rgba(0,0,0,0.6),
      0 0 10px rgba(255,255,255,0.10),
      0 0 24px rgba(255,255,255,0.06);
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.10);
    text-stroke: 0.5px rgba(255,255,255,0.10);
  }
  .ribbon-track span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
                transparent 0%,
                rgba(255,255,255,0.10) 45%,
                rgba(255,255,255,0.30) 50%,
                rgba(255,255,255,0.10) 55%,
                transparent 100%);
    mix-blend-mode: screen;
    transform: translateX(-120%);
    animation: ribbon-specular 9s linear infinite;
    pointer-events: none;
  }

  @keyframes ribbon-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes ribbon-specular {
    0%   { transform: translateX(-120%); }
    50%  { transform: translateX(0%); }
    100% { transform: translateX(120%); }
  }

  .info { position: relative; text-align: left; padding: 1rem 1.2rem; border-radius: .4rem; width: 90%; }
  .info .name {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    opacity: 0; transform: translateX(-30px);
    transition: opacity .5s ease-out, transform .5s ease-out;
  }
  .info .description {
    font-size: 1rem; width: 100%;
    opacity: 0; transform: translate(-50px, 50px);
    transition: all .6s ease-out;
  }
  .box.in-view { transform: translateY(0); opacity: 1; }
  .box.in-view .name { transform: translateX(0); opacity: 1; }
  .info.in-view { opacity: 1; transform: translate(0,0); }
  .description { opacity: 0; transform: translate(-50px,-50px); transition: all .6s ease-out; }
  .description.in-view { opacity: 1; transform: translate(0,0); }

  .name span, .description span { display: inline-block; opacity: 0; transform: translate(-50px,-20px); transition: all .4s ease-out; }
  .name.in-view span, .description.in-view span { opacity: 1; transform: translate(0,0); }

}

/* Utilidad ya usada por el form */
.hidden { display: none !important; }