/* ==========================================================================
   Mariona Agency 2028 · Inteligencia artificial: ejemplos en pila (mp-)
   Una tarjeta por proyecto. El proceso manda (escuchar, idear, visualizar o
   producir, presentar o editar) y la IA ocupa un solo paso. En escritorio las
   tarjetas se apilan al bajar; una tarjeta alta recorre su contenido entero
   antes de que la siguiente la cubra. En móvil van seguidas.
   ========================================================================== */
.mp{--mp-gap:clamp(24px,3vw,48px);--mp-pad:clamp(26px,3.4vw,56px);--mp-r:clamp(16px,1.5vw,24px);--mp-ri:clamp(8px,.8vw,12px);
  --mp-ease:cubic-bezier(.16,1,.3,1);
  --mp-fl:var(--fl,'nh-light','Helvetica Neue',Helvetica,Arial,sans-serif);
  --mp-fm:var(--fm,'nh-medium','Helvetica Neue',Helvetica,Arial,sans-serif);
  --mp-or:var(--orange,#FF4D00);
  padding-top:var(--sec,clamp(96px,12vw,184px))}

/* Entrada */
.mp-hd{text-align:center;max-width:46em;margin:0 auto clamp(48px,6vw,88px)}
.mp-hd .sx-h2{margin:14px auto 0;max-width:14ch}
.mp-lead{margin:clamp(18px,2vw,26px) auto 0;color:var(--t2,rgba(246,245,243,.76));font-size:clamp(17px,1.3vw,20px);line-height:1.6;text-wrap:pretty}

/* Pila */
.mp-pila{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px)}
.mp-c{--c1:var(--t1,#F6F5F3);--c2:var(--t2,rgba(246,245,243,.76));--c3:var(--t3,rgba(246,245,243,.58));--cl:var(--line,rgba(246,245,243,.14));
  position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--mp-gap);
  padding:var(--mp-pad);border-radius:var(--mp-r);background:var(--ink2,#262B29);color:var(--c1);text-align:left;transform-origin:50% 0}
.mp-c.lt{--c1:#1F2322;--c2:rgba(31,35,34,.76);--c3:rgba(31,35,34,.58);--cl:rgba(31,35,34,.15);background:var(--bone,#F6F5F3)}
.mp-c::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(110% 80% at 0% 100%,rgba(255,77,0,.09),transparent 55%)}
.mp-c.lt::before{background:radial-gradient(110% 80% at 100% 0%,rgba(255,77,0,.06),transparent 55%)}

/* Texto: arriba la marca y el titular; abajo el proceso. Cuadra con los medios. */
.mp-tx{grid-column:1/6;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.mp-lock{display:flex;align-items:center;gap:14px;height:40px;color:var(--c2);font-size:14px;line-height:1}
.mp-logo{display:block;flex:none;width:var(--w);height:var(--h);background:var(--c1);-webkit-mask:var(--m) left center/contain no-repeat;mask:var(--m) left center/contain no-repeat}
.mp-lock b{font-family:var(--mp-fm);font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--c1)}
.mp-lock i{font-style:normal;padding-left:14px;border-left:1px solid var(--cl);line-height:20px}
.mp-c h3{margin:22px 0 0;font-family:var(--mp-fl);font-weight:300;font-size:clamp(30px,2.9vw,46px);line-height:1.05;letter-spacing:-.035em;color:var(--c1);text-wrap:balance}
.mp-c p{margin:16px 0 0;color:var(--c2);font-size:clamp(15.5px,1.08vw,17px);line-height:1.6;max-width:36em;text-wrap:pretty}
.mp-c p+p{margin-top:10px}
.mp-steps{list-style:none;margin:0;padding:0}
.mp-steps li{position:relative;display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:14px;align-items:baseline;padding:12px 0 12px 22px;border-top:1px solid var(--cl);font-size:15px;line-height:1.45}
.mp-steps li:last-child{border-bottom:1px solid var(--cl)}
.mp-steps li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:50%;border:1px solid var(--c3)}
.mp-steps li.ia::before{background:var(--mp-or);border-color:var(--mp-or)}
.mp-steps b{font-family:var(--mp-fm);font-weight:500;font-size:14px;color:var(--c1)}
.mp-steps span{color:var(--c2)}
.mp-steps em{font-style:normal;color:var(--mp-or);margin-right:.45em}
.mp-go{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:var(--c1);font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.mp-go::after{content:"→";transition:transform .4s var(--mp-ease)}
.mp-go:hover::after{transform:translateX(4px)}

/* Medios: pieza grande que ocupa el alto restante y fila de cuatro debajo */
.mp-md{grid-column:6/13;min-width:0;display:flex;flex-direction:column;gap:10px}
.mp-big{position:relative;flex:1 1 auto;min-height:300px;border-radius:var(--mp-ri);overflow:hidden;background:rgba(0,0,0,.22);padding:0;border:0;cursor:zoom-in;display:block;width:100%}
.mp-big.vid{cursor:default}
.mp-big>img,.mp-big>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-th{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mp-th button{display:block;padding:0;border:0;margin:0;aspect-ratio:16/9;border-radius:var(--mp-ri);overflow:hidden;background:rgba(0,0,0,.22);cursor:zoom-in}
.mp-th img,.mp-row img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--mp-ease)}
.mp-th button:hover img,.mp-row button:hover img{transform:scale(1.04)}

/* Banda extendida (caso principal) */
.mp-ext{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--mp-gap);margin-top:clamp(40px,4vw,56px);padding-top:clamp(36px,3.6vw,52px);border-top:1px solid var(--cl)}
.mp-ext h4{margin:0;font-family:var(--mp-fl);font-weight:300;font-size:clamp(24px,2vw,32px);line-height:1.1;letter-spacing:-.025em;color:var(--c1);text-wrap:balance}
.mp-ext .mp-tx{gap:22px}
.mp-tabs{display:flex;flex-wrap:wrap;gap:8px}
.mp-tabs button{font:inherit;font-size:13.5px;padding:8px 15px;border-radius:999px;border:1px solid var(--cl);background:transparent;color:var(--c2);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.mp-tabs button[aria-selected="true"]{background:var(--c1);border-color:var(--c1);color:var(--ink2,#262B29)}
.mp-cmp{grid-column:6/13;position:relative;aspect-ratio:16/9;border-radius:var(--mp-ri);overflow:hidden;background:rgba(0,0,0,.22);--p:80%;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.mp-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mp-cmp .a{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.mp-cmp .h{position:absolute;top:0;bottom:0;left:var(--p);width:1px;background:#F6F5F3;pointer-events:none}
.mp-cmp .h::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(246,245,243,.75);background:rgba(246,245,243,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mp-cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.mp-cmp .tag{position:absolute;bottom:12px;font-size:12.5px;padding:5px 11px;border-radius:999px;background:rgba(13,15,14,.6);color:#F6F5F3;pointer-events:none}
.mp-cmp .tl{left:12px}.mp-cmp .tr{right:12px}
.mp-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:clamp(28px,3vw,40px) 0}
.mp-row button{display:block;padding:0;border:0;margin:0;aspect-ratio:16/9;border-radius:var(--mp-ri);overflow:hidden;background:rgba(0,0,0,.22);cursor:zoom-in}
.mp-film{grid-column:6/13;position:relative;aspect-ratio:16/9;border-radius:var(--mp-ri);overflow:hidden;background:#0d0f0e}
.mp-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:rgba(13,15,14,.18);color:#F6F5F3;font:inherit;cursor:pointer;transition:opacity .4s}
.mp-play span{display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;border-radius:999px;border:1px solid rgba(246,245,243,.3);background:rgba(13,15,14,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14.5px}
.mp-play span::before{content:"";border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.mp-film.on .mp-play{opacity:0;pointer-events:none}

.mp-note{margin:clamp(28px,3vw,40px) auto 0;max-width:44em;text-align:center;color:var(--t3,rgba(246,245,243,.58));font-size:14px;line-height:1.55}

/* Visor */
dialog.mp-lb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:transparent;color:#F6F5F3}
dialog.mp-lb::backdrop{background:rgba(13,15,14,.95)}
.mp-lb .st{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:56px 16px 72px}
.mp-lb img{max-width:min(1600px,100%);max-height:100%;object-fit:contain;border-radius:4px}
.mp-lb .cap{position:absolute;left:0;right:0;bottom:24px;margin:0;text-align:center;font-size:14px;color:rgba(246,245,243,.7)}
.mp-lb button{position:absolute;width:44px;height:44px;border-radius:999px;border:1px solid rgba(246,245,243,.28);background:rgba(13,15,14,.6);color:#F6F5F3;font-size:18px;line-height:1;cursor:pointer}
.mp-lb .x{top:14px;right:14px}.mp-lb .pv{left:14px;top:50%;transform:translateY(-50%)}.mp-lb .nx{right:14px;top:50%;transform:translateY(-50%)}

/* Pila en escritorio */
@media (min-width:1000px) and (min-height:700px){
  .mp-c{min-height:min(calc(100svh - var(--mp-top,24px) - 24px),660px)}
  .mp-pila.on .mp-c{position:sticky;top:var(--top,24px);transform:scale(calc(1 - var(--cover,0)*.05))}
  .mp-pila.on .mp-c::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;background:#0d0f0e;opacity:calc(var(--cover,0)*.55);pointer-events:none}
}
@media (max-width:999px){
  .mp-tx,.mp-md,.mp-cmp,.mp-film{grid-column:1/-1}
  .mp-md{margin-top:28px}
  .mp-big{flex:none;aspect-ratio:16/10;min-height:0}
  .mp-big.sq{aspect-ratio:1}
  .mp-ext .mp-tx{margin-bottom:22px}
  .mp-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .mp-th{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-steps li{grid-template-columns:6.4em minmax(0,1fr);gap:10px}
  .mp-lb .pv,.mp-lb .nx{top:auto;bottom:14px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mp-pila.on .mp-c{transform:none}.mp-pila.on .mp-c::after{display:none}
  .mp-th img,.mp-row img{transition:none}
}
.mp-cmpw{display:contents}
.mp-c p.mp-cred{margin:0;font-size:13px;color:var(--c3)}