.social-page{background:#050505;color:#fff}.social-page footer{background:#050505}.social-hero{min-height:96vh;position:relative;display:flex;align-items:flex-end;overflow:hidden;padding:155px 5vw 78px;background:#050505}.social-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}.social-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.74) 38%,rgba(0,0,0,.18) 75%),linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.82))}.social-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 92%)}.social-hero__inner{position:relative;z-index:2;max-width:var(--max);width:100%;margin:auto}.social-hero h1{font:400 clamp(58px,8.3vw,132px)/.88 'Archivo Black';letter-spacing:-.065em;text-transform:none;max-width:950px}.social-hero h1 span{color:var(--lime)}.social-hero p{max-width:660px;margin-top:30px;color:rgba(255,255,255,.72);font-size:19px;line-height:1.65}.social-hero__actions{justify-content:flex-start;margin-top:30px}.social-showcase{padding:95px 4vw 80px;background:#070707}.social-showcase__head{max-width:var(--max);margin:0 auto 40px;display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}.social-showcase__head h2,.social-capabilities h2,.social-video-wall h2{font:400 clamp(44px,6.4vw,90px)/.92 'Archivo Black';letter-spacing:-.055em}.social-showcase__head h2 span,.social-capabilities h2 span{color:var(--lime)}.social-showcase__head p{color:#999;line-height:1.7;font-size:17px}.filters{max-width:var(--max);margin:0 auto 28px;display:flex;gap:10px;flex-wrap:wrap}.filter-btn{appearance:none;border:1px solid rgba(255,255,255,.16);background:transparent;color:#aaa;border-radius:999px;padding:10px 16px;font:700 11px 'Space Mono';text-transform:uppercase;cursor:pointer;transition:.25s}.filter-btn:hover,.filter-btn.is-active{background:var(--lime);color:#000;border-color:var(--lime)}.social-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:115px;gap:14px}.media-card{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:#111;grid-column:span 3;grid-row:span 3;transition:.45s}.media-card--wide{grid-column:span 4;grid-row:span 4}.media-card--phone{grid-column:span 2;grid-row:span 4}.media-card--double{grid-column:span 4;grid-row:span 4}.media-card--laptop{grid-column:span 5;grid-row:span 3}.media-card--story{grid-column:span 2;grid-row:span 3}.media-card img,.media-card video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,filter .4s ease}.media-card:hover{transform:translateY(-4px);border-color:rgba(199,255,0,.55)}.media-card:hover img,.media-card:hover video{transform:scale(1.035);filter:brightness(.74)}.media-card__meta{position:absolute;inset:auto 0 0;padding:58px 18px 17px;background:linear-gradient(transparent,rgba(0,0,0,.9));opacity:0;transform:translateY(10px);transition:.35s}.media-card:hover .media-card__meta{opacity:1;transform:none}.media-card__meta span{display:block;color:var(--lime);font:700 10px 'Space Mono';text-transform:uppercase;margin-bottom:5px}.media-card__meta strong{font-size:14px}.media-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.52);color:#fff;cursor:pointer;font-size:16px;backdrop-filter:blur(8px);transition:.25s}.media-card.is-playing .media-play{opacity:0}.media-card.is-playing:hover .media-play{opacity:1}.media-card.is-hidden{display:none}.social-capabilities{padding:105px 5vw;background:#0a0a0a}.social-capabilities__intro{max-width:var(--max);margin:auto}.capability-grid{max-width:var(--max);margin:60px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.capability-card{min-height:260px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.025);display:flex;flex-direction:column}.capability-card>span{color:var(--lime);font:700 11px 'Space Mono'}.capability-card h3{font:400 24px/1.05 'Archivo Black';letter-spacing:-.035em;margin-top:auto}.capability-card p{color:#929292;line-height:1.55;font-size:14px;margin-top:13px}.social-video-wall{padding:105px 5vw;background:#f5f3ed;color:#0a0a0a}.social-video-wall__head{max-width:var(--max);margin:0 auto 50px}.video-wall{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.video-tile{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#111}.video-tile video{width:100%;height:100%;object-fit:cover}.video-tile span{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.7);color:#fff;border-radius:999px;padding:8px 11px;font:700 10px 'Space Mono';text-transform:uppercase}.social-cta{margin:0;background:var(--lime);color:#000;padding:58px 5vw;display:flex;align-items:end;justify-content:space-between;gap:40px}.social-cta__copy{max-width:950px}.social-cta h2{font:400 clamp(43px,6.2vw,86px)/.9 'Archivo Black';letter-spacing:-.055em}.btn-dark{background:#050505;color:#fff}.social-page .reveal{transition:.75s}
@media(max-width:1050px){.social-grid{grid-auto-rows:105px}.media-card,.media-card--wide,.media-card--phone,.media-card--double,.media-card--laptop,.media-card--story{grid-column:span 6;grid-row:span 4}.capability-grid{grid-template-columns:repeat(2,1fr)}.video-wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.social-hero{min-height:85vh;padding:130px 5vw 60px}.social-hero h1{font-size:clamp(54px,17vw,88px)}.social-showcase{padding-inline:5vw}.social-showcase__head{grid-template-columns:1fr;gap:25px}.social-grid{grid-template-columns:1fr;grid-auto-rows:auto}.media-card,.media-card--wide,.media-card--phone,.media-card--double,.media-card--laptop,.media-card--story{grid-column:auto;grid-row:auto;aspect-ratio:4/5}.media-card--double,.media-card--laptop{aspect-ratio:16/10}.media-card__meta{opacity:1;transform:none}.capability-grid,.video-wall{grid-template-columns:1fr}.video-tile{aspect-ratio:4/5}.social-cta{align-items:flex-start;flex-direction:column}.social-cta .btn{width:100%;justify-content:center}}
<link rel="stylesheet" href="../assets/css/site.css">
<link rel="stylesheet" href="../assets/css/social.css">
.media-card--phone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #050505;
}
.media-card--contain {
  background: #111;
}

.media-card--contain img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}
/* ==========================================
   PORTFOLIO REDES — EDITORIAL
========================================== */

.social-portfolio{
  padding:120px 5vw;
  background:#29282d;
  color:#fff;
}

.social-portfolio__intro{
  max-width:1400px;
  margin:0 auto 110px;

  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:90px;
  align-items:end;
}

.social-portfolio__label,
.social-project__header span{
  display:block;

  font:700 11px 'Space Mono',monospace;

  letter-spacing:.14em;
  text-transform:uppercase;

  margin-bottom:18px;
}

.social-portfolio__intro h2{
  max-width:850px;

  font:400 clamp(55px,7vw,105px)/.9
  'Archivo Black',sans-serif;

  letter-spacing:-.055em;
}

.social-portfolio__intro h2 span{
  color:#c7ff00;
}

.social-portfolio__copy{
  padding-bottom:8px;
}

.social-portfolio__copy p{
  max-width:580px;

  font-size:18px;
  line-height:1.65;

  color:#c4c4c4;
}

.social-portfolio__services{
  margin-top:24px;

  color:#fff;

  font-size:14px;
  line-height:1.7;
}


/* ==========================================
   PROYECTO
========================================== */

.social-project{
  max-width:1400px;

  margin:0 auto 130px;
}

.social-project__header{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  margin-bottom:34px;

  align-items:end;
}

.social-project__header h3{
  margin-top:10px;

  font:400 clamp(40px,5vw,72px)/.95
  'Archivo Black',sans-serif;

  letter-spacing:-.045em;
}

.social-project__header p{
  max-width:520px;

  color:#bbb;

  font-size:17px;
  line-height:1.7;
}


/* IMAGEN GRANDE */

.social-project__image{
  width:100%;

  overflow:hidden;

  background:#fff;
}

.social-project__image img{
  display:block;

  width:100%;
  height:auto;

  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}

.social-project:hover .social-project__image img{
  transform:scale(1.018);
}


/* MOBILE */

@media(max-width:900px){

  .social-portfolio{
    padding:90px 22px;
  }

  .social-portfolio__intro,
  .social-project__header{
    grid-template-columns:1fr;
    gap:30px;
  }

  .social-portfolio__intro{
    margin-bottom:80px;
  }

  .social-project{
    margin-bottom:90px;
  }

}
.social-portfolio-simple{
  padding:120px 5vw;
  background:#29282d;
  color:#fff;
}

.social-portfolio-simple__head{
  max-width:1400px;
  margin:0 auto 55px;
}

.social-portfolio-simple__head span{
  display:block;
  margin-bottom:16px;

  font:700 11px 'Space Mono',monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.social-portfolio-simple__head h2{
  max-width:900px;

  font:400 clamp(52px,7vw,100px)/.9
  'Archivo Black',sans-serif;

  letter-spacing:-.055em;
}

.social-portfolio-simple__head h2 em{
  font-style:normal;
  color:#c7ff00;
}

.social-portfolio-simple__head p{
  max-width:620px;
  margin-top:24px;

  color:#bbb;
  font-size:18px;
  line-height:1.7;
}

.social-portfolio-simple__visual{
  width:100%;
  max-width:1500px;

  margin:0 auto;

  overflow:hidden;
  border-radius:24px;
}

.social-portfolio-simple__visual img{
  display:block;

  width:100%;
  height:auto;

  transition:transform .8s ease;
}

.social-portfolio-simple__visual:hover img{
  transform:scale(1.015);
}
/* ==========================================
   PORTFOLIO REDES — TEMA CLARO
========================================== */

.social-portfolio-simple{
    background:#ffffff;
    color:#111;
}

.social-portfolio-simple__head span{
    color:#6f6a63;
}

.social-portfolio-simple__head h2{
    color:#111;
}

.social-portfolio-simple__head h2 em{
    color:#111;
    background:transparent;
    padding:0;
    font-style:normal;
}

.social-portfolio-simple__head p{
    color:#6f6a63;
}

.social-project-simple__head span{
    color:#8a857e;
}

.social-project-simple__head h3{
    color:#111;
}

.social-portfolio-simple__visual{
    background:#fff;
    border-radius:28px;
    overflow:hidden;

    box-shadow:
        0 24px 70px rgba(0,0,0,.08);
}

.social-portfolio-simple__visual img{
    display:block;
    width:100%;
    height:auto;
}
.social-project-simple{
    margin-top:80px;
}

.social-project-simple:first-of-type{
    margin-top:50px;
}