/* The Communications Lab — editorial */
:root {
  --ivory: #F5F1EA;
  --paper: #FBF9F5;
  --ink: #141414;
  --ink-soft: #3A3835;
  --muted: #7A736A;
  --gold: #A5824C;
  --line: rgba(20, 20, 20, .14);
  --line-inv: rgba(245, 241, 234, .18);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--ivory); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Tipografía ---------- */
.eyebrow {
  font: 500 11px/1 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.eyebrow.plain::before { display: none; }

.display {
  font: 300 clamp(56px, 11vw, 176px)/.92 var(--serif);
  letter-spacing: -.02em;
  margin: 0;
}
.display em, .h1 em, .h2 em, .quote em { font-style: italic; color: var(--gold); }
.h1 { font: 300 clamp(44px, 7vw, 104px)/1 var(--serif); letter-spacing: -.015em; margin: 0; }
.h2 { font: 300 clamp(34px, 4.6vw, 64px)/1.06 var(--serif); letter-spacing: -.01em; margin: 0; }
.h3 { font: 400 clamp(26px, 2.6vw, 36px)/1.15 var(--serif); margin: 0; }
.lead { font: 300 clamp(22px, 2.2vw, 30px)/1.4 var(--serif); color: var(--ink-soft); margin: 0; }
p { margin: 0 0 1.1em; color: var(--ink-soft); }
.num { font: italic 300 18px/1 var(--serif); color: var(--gold); }

/* ---------- Cabecera ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
  padding: 22px 0;
}
.site-header.scrolled {
  background: rgba(245, 241, 234, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: var(--line);
  padding: 12px 0;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { height: 44px; width: auto; transition: height .4s var(--ease); }
.site-header.scrolled .brand img { height: 36px; }

.nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.nav a {
  font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ink);
  transition: right .5s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.lang { display: flex; gap: 10px; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.lang a { color: var(--muted); }
.lang a[aria-current="true"] { color: var(--ink); }
.lang a::after { display: none; }

.menu-btn {
  display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--ink);
}
.menu-btn span { display: block; width: 26px; height: 1px; background: currentColor; transition: transform .4s var(--ease); }
.menu-btn span + span { margin-top: 7px; }
.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 860px) {
  .menu-btn { display: block; position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0; background: var(--ivory);
    flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 var(--gutter); gap: 26px;
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  }
  .menu-open .nav { opacity: 1; visibility: visible; }
  .nav a { font: 300 44px/1 var(--serif); letter-spacing: 0; text-transform: none; }
  .lang { border: 0; padding: 20px 0 0; }
  .lang a { font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
  .brand { position: relative; z-index: 2; }
  .brand img { height: 36px; }
}

/* ---------- Secciones ---------- */
section { position: relative; }
.pad { padding: clamp(80px, 12vw, 180px) 0; }
.pad-sm { padding: clamp(56px, 8vw, 110px) 0; }
.rule { border-top: 1px solid var(--line); }
.dark { background: var(--ink); color: var(--ivory); }
.dark p, .dark .lead { color: rgba(245, 241, 234, .72); }
.dark .eyebrow { color: rgba(245, 241, 234, .55); }
.dark .rule, .dark.rule { border-color: var(--line-inv); }
.paper { background: var(--paper); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.c-3 { grid-column-end: span 3; } .c-4 { grid-column-end: span 4; } .c-5 { grid-column-end: span 5; } .c-6 { grid-column-end: span 6; }
.c-7 { grid-column-end: span 7; } .c-8 { grid-column-end: span 8; } .c-12 { grid-column: 1 / -1; }
.s-2 { grid-column-start: 2; } .s-6 { grid-column-start: 6; } .s-7 { grid-column-start: 7; } .s-8 { grid-column-start: 8; } .s-9 { grid-column-start: 9; }
@media (max-width: 860px) {
  .grid > * { grid-column: 1 / -1 !important; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 140px 0 clamp(40px, 6vw, 72px);
}
.hero .display span { display: block; }
.hero .display .indent { padding-left: clamp(0px, 14vw, 240px); }
.hero-foot {
  margin-top: clamp(48px, 8vw, 110px);
  padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;
}
.hero-foot p { max-width: 460px; margin: 0; font-size: 15px; }
.scroll-cue { font: 500 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 14px; }
.scroll-cue::after { content: ""; width: 1px; height: 44px; background: var(--ink); transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.page-hero { padding: clamp(160px, 20vw, 240px) 0 clamp(56px, 8vw, 100px); }
.page-hero .eyebrow { margin-bottom: 32px; }
.page-hero .lead { margin-top: 36px; max-width: 760px; }

/* ---------- Manifiesto ---------- */
.manifesto .h2 { margin-top: 28px; }
.manifesto .cols { columns: 2 280px; column-gap: clamp(24px, 4vw, 56px); }
.manifesto .cols p { break-inside: avoid; }
.dropcap::first-letter { float: left; font: 300 88px/.8 var(--serif); padding: 8px 12px 0 0; color: var(--gold); }

/* ---------- Servicios (lista editorial) ---------- */
.svc-list { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid currentColor; }
.svc-list li { border-bottom: 1px solid var(--line); }
.dark .svc-list li { border-color: var(--line-inv); }
.svc-list a {
  display: grid; grid-template-columns: 80px 1fr auto; align-items: baseline; gap: 24px;
  padding: clamp(24px, 3vw, 40px) 0;
  transition: padding .5s var(--ease), color .3s;
}
.svc-list .h2 { transition: transform .5s var(--ease); }
.svc-list .arrow { font: 300 32px/1 var(--serif); transition: transform .5s var(--ease); }
.svc-list .desc { grid-column: 2; font-size: 15px; max-width: 520px; margin: 0; }
.svc-list a:hover .h2 { transform: translateX(14px); font-style: italic; }
.svc-list a:hover .arrow { transform: translate(6px, -6px); color: var(--gold); }
@media (max-width: 600px) {
  .svc-list a { grid-template-columns: 44px 1fr auto; gap: 12px; }
}

/* ---------- Logos ---------- */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height: 42px; width: 150px; object-fit: contain; margin: 0 clamp(28px, 4vw, 56px); }
@keyframes marquee { to { transform: translateX(-50%); } }

.logo-img { filter: brightness(0) invert(1); opacity: .62; transition: opacity .4s var(--ease); }
.logo-img:hover { opacity: 1; }

.logo-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  border-top: 1px solid var(--line-inv); border-left: 1px solid var(--line-inv);
  margin-top: 56px;
}
.logo-wall div {
  border-right: 1px solid var(--line-inv); border-bottom: 1px solid var(--line-inv);
  aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 28px;
}
.logo-wall img { max-height: 54px; width: 100%; object-fit: contain; }
@media (max-width: 480px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } .logo-wall div { padding: 18px; } }

/* ---------- Bloques / cifras ---------- */
.feature { padding-top: 28px; border-top: 1px solid var(--line); }
.feature .num { display: block; margin-bottom: 26px; }
.feature .h3 { margin-bottom: 18px; }

.stat { font: 300 clamp(96px, 16vw, 220px)/.85 var(--serif); letter-spacing: -.03em; }
.stat sup { font-size: .35em; vertical-align: top; color: var(--gold); margin-left: 4px; }

.checklist { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: c; }
.checklist li {
  counter-increment: c; display: grid; grid-template-columns: 56px 1fr; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  font: 400 clamp(20px, 2vw, 26px)/1.3 var(--serif);
}
.checklist li::before { content: counter(c, decimal-leading-zero); font: italic 300 16px/1.9 var(--serif); color: var(--gold); }

/* ---------- Servicios (detalle) ---------- */
.service { padding: clamp(64px, 9vw, 130px) 0; border-top: 1px solid var(--line); }
.service .big-num { font: 300 clamp(90px, 14vw, 200px)/.8 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--ink); }
.service .h1 { margin: 12px 0 28px; }
.service .lead { margin-bottom: 28px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.tags li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

.mue { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-inv); }
.mue div { padding: 40px 28px 0 0; }
.mue div + div { padding-left: 28px; border-left: 1px solid var(--line-inv); }
.mue b { display: block; font: 300 clamp(80px, 11vw, 160px)/.9 var(--serif); color: var(--gold); }
.mue span { font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
@media (max-width: 600px) {
  .mue { grid-template-columns: 1fr; }
  .mue div, .mue div + div { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line-inv); display: flex; align-items: baseline; gap: 20px; }
  .mue b { font-size: 72px; }
}
.quote { font: 300 clamp(30px, 4.2vw, 58px)/1.15 var(--serif); margin: 0; }

/* ---------- CTA ---------- */
.cta { text-align: center; }
.cta .display { font-size: clamp(52px, 9vw, 140px); margin: 28px 0 44px; }
.btn {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 20px 34px; border: 1px solid currentColor; border-radius: 999px;
  font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer; background: none; color: inherit;
  transition: color .45s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--ink); z-index: -1;
  transform: translateY(101%); transition: transform .45s var(--ease);
}
.btn:hover { color: var(--ivory); }
.btn:hover::before { transform: none; }
.dark .btn::before { background: var(--ivory); }
.dark .btn:hover { color: var(--ink); }
.btn .arr { transition: transform .45s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Contacto ---------- */
.contact-list { list-style: none; padding: 0; margin: 40px 0 0; }
.contact-list li { padding: 22px 0; border-top: 1px solid var(--line); }
.contact-list small { display: block; font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.contact-list a, .contact-list address { font: 400 clamp(22px, 2.2vw, 28px)/1.3 var(--serif); font-style: normal; }
.contact-list a:hover { color: var(--gold); }

.form { display: grid; gap: 34px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 26px 0 12px; font: 400 22px/1.4 var(--serif); color: var(--ink); border-radius: 0;
  outline: none; resize: vertical;
}
.field textarea { min-height: 140px; }
.field label {
  position: absolute; left: 0; top: 30px; pointer-events: none;
  font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  transition: top .3s var(--ease), color .3s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: 0; color: var(--gold); }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--ivory); padding: clamp(72px, 10vw, 120px) 0 36px; }
.site-footer .foot-logo { height: 64px; width: auto; margin-bottom: 28px; }
.site-footer p { color: rgba(245, 241, 234, .6); font-size: 14px; max-width: 340px; }
.site-footer h4 { font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(245, 241, 234, .5); margin: 0 0 20px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; font: 400 20px/1.35 var(--serif); }
.site-footer address { font-style: normal; }
.site-footer a:hover { color: var(--gold); }
.foot-bottom {
  margin-top: clamp(56px, 8vw, 96px); padding-top: 24px; border-top: 1px solid var(--line-inv);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: rgba(245, 241, 234, .45); letter-spacing: .04em;
}

/* ---------- Animación de entrada ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .12s; } .js .reveal.d2 { transition-delay: .24s; } .js .reveal.d3 { transition-delay: .36s; }

.hero .display span { overflow: hidden; }
.js .hero .display .line-in { display: inline-block; transform: translateY(105%); animation: rise 1.3s var(--ease) forwards; }
.js .hero .display span:nth-child(2) .line-in { animation-delay: .14s; }
.js .hero .display span:nth-child(3) .line-in { animation-delay: .28s; }
@keyframes rise { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero .display .line-in { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Logo claro/oscuro ---------- */
.brand { display: block; position: relative; }
.brand .logo-light { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); }
.brand .logo-dark { transition: opacity .4s var(--ease); }

/* Cabecera sobre el vídeo del hero (hasta hacer scroll) */
.on-dark-hero .site-header:not(.scrolled) { color: var(--ivory); }
.on-dark-hero .site-header:not(.scrolled) .logo-dark { opacity: 0; }
.on-dark-hero .site-header:not(.scrolled) .logo-light { opacity: 1; }
.on-dark-hero .site-header:not(.scrolled) .nav a::after { background: var(--ivory); }
.on-dark-hero .site-header:not(.scrolled) .lang { border-color: var(--line-inv); }
.on-dark-hero .site-header:not(.scrolled) .lang a { color: rgba(245, 241, 234, .55); }
.on-dark-hero .site-header:not(.scrolled) .lang a[aria-current="true"] { color: var(--ivory); }
.on-dark-hero .site-header:not(.scrolled) .menu-btn { color: var(--ivory); }
@media (max-width: 860px) {
  /* Con el menú abierto el fondo es marfil: volver a colores oscuros */
  .on-dark-hero.menu-open .site-header { color: var(--ink); }
  .on-dark-hero.menu-open .site-header .logo-dark { opacity: 1; }
  .on-dark-hero.menu-open .site-header .logo-light { opacity: 0; }
  .on-dark-hero.menu-open .site-header .menu-btn { color: var(--ink); }
  .on-dark-hero.menu-open .site-header .lang a { color: var(--muted); }
  .on-dark-hero.menu-open .site-header .lang a[aria-current="true"] { color: var(--ink); }
}

/* ---------- Hero con vídeo ---------- */
.hero-video { color: var(--ivory); background: var(--ink); overflow: hidden; }
.hero-video .wrap { position: relative; z-index: 1; width: 100%; }
.hero-video .eyebrow { color: rgba(245, 241, 234, .75); }
.hero-video .hero-foot { border-color: var(--line-inv); }
.hero-video .hero-foot p { color: rgba(245, 241, 234, .82); }
.hero-video .scroll-cue { color: rgba(245, 241, 234, .7); }
.hero-video .scroll-cue::after { background: var(--ivory); }
.hero-video .display em { color: #D2B27F; }

.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.yt-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.yt-bg.ready { opacity: 1; }
.yt-bg iframe {
  position: absolute; top: 50%; left: 50%; border: 0;
  width: max(100%, 177.78vh); height: max(100%, 56.25vw);
  transform: translate(-50%, -50%) scale(1.15); /* recorta las bandas y el título de YouTube */
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.15) 35%, rgba(20,20,20,.35) 65%, rgba(20,20,20,.85) 100%),
    rgba(20, 20, 20, .18);
}

/* ---------- Vídeo destacado ---------- */
.yt-facade {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  background: var(--ink); cursor: pointer; overflow: hidden;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s; opacity: .88; }
.yt-facade:hover img { transform: scale(1.03); opacity: 1; }
.yt-facade .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(72px, 9vw, 112px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(245, 241, 234, .8); color: var(--ivory);
  display: grid; place-items: center;
  background: rgba(20, 20, 20, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .4s var(--ease), color .4s var(--ease), transform .6s var(--ease);
}
.yt-facade .play svg { width: 30%; fill: currentColor; margin-left: 6%; }
.yt-facade:hover .play { background: var(--ivory); color: var(--ink); transform: translate(-50%, -50%) scale(1.06); }
.yt-facade:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   Tema MONOCROMO — blanco y negro puros, didona de alto contraste en
   mayúsculas, monograma gigante, menú a pantalla completa y paneles a sangre
   ===================================================================== */
:root {
  --ivory: #fff;
  --paper: #fff;
  --ink: #000;
  --ink-soft: #111;
  --muted: #555;
  --gold: #000;
  --line: #000;
  --line-inv: rgba(255, 255, 255, .5);
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.65, 0, .35, 1);
}
body { background: #fff; color: #000; font-size: 14px; }
::selection { background: #000; color: #fff; }
p { color: #111; }

/* Tipografía: didona en mayúsculas, fina y muy grande */
.display, .h1, .h2, .h3, .quote, .stat, .mue b, .service .big-num {
  font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em;
  font-variation-settings: "opsz" 96;
}
.display { font-size: clamp(52px, 9vw, 150px); line-height: .9; }
.h1 { font-size: clamp(44px, 7vw, 116px); line-height: .92; }
.h2 { font-size: clamp(28px, 3.4vw, 50px); line-height: 1.02; }
.h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.05; }
.lead { font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--sans); color: #111; }
.quote { font-size: clamp(34px, 5vw, 80px); line-height: .95; }
.display em, .h1 em, .h2 em, .quote em { font-style: italic; color: inherit; text-transform: none; }
.num { font: 500 11px/1 var(--sans); letter-spacing: .12em; color: #000; font-style: normal; }
.eyebrow { font: 600 11px/1 var(--sans); letter-spacing: .16em; color: #000; }
.eyebrow::before { width: 9px; height: 9px; border-radius: 50%; background: #000; }
.dropcap::first-letter { font: 400 84px/.8 var(--serif); color: #000; }
.small-caps { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Cabecera: logo pequeño a la izquierda y "● MENÚ" a la derecha ---------- */
.site-header, .site-header.scrolled { background: transparent; border: 0; padding: 18px 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header .wrap { max-width: none; }
.brand img, .site-header.scrolled .brand img { height: 38px; }
.brand .logo-light { opacity: 0; }
.mono-home .brand { opacity: 0; transition: opacity .5s; }
.mono-home .site-header.scrolled .brand { opacity: 1; }
.menu-btn { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0; position: relative; z-index: 2; color: #000; }
.menu-btn span { display: none; }
.menu-btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transition: transform .4s var(--ease); }
.menu-btn::after { content: "MENÚ"; font: 600 11px/1 var(--sans); letter-spacing: .14em; }
:lang(en) .menu-btn::after { content: "MENU"; }
.menu-open .menu-btn { color: #fff; }
.menu-open .menu-btn::before { transform: scale(1.4); }
.menu-open .menu-btn::after { content: "CERRAR"; }
:lang(en) .menu-open .menu-btn::after { content: "CLOSE"; }

/* Menú a pantalla completa en todos los tamaños */
.nav {
  position: fixed; inset: 0; background: #000; color: #fff;
  flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 var(--gutter); gap: 6px;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.menu-open .nav { opacity: 1; visibility: visible; }
.nav a { font: 400 clamp(44px, 8vw, 120px)/1 var(--serif); letter-spacing: -.01em; text-transform: uppercase; padding: 4px 0; color: #fff; }
.nav a::after { display: none; }
.nav a:hover, .nav a[aria-current="page"] { font-style: italic; }
.lang { border: 0; padding: 30px 0 0; gap: 16px; }
.lang a { font: 600 12px/1 var(--sans); letter-spacing: .14em; color: rgba(255, 255, 255, .5); }
.lang a[aria-current="true"] { color: #fff; }
.menu-open .brand { opacity: 1; filter: invert(1); position: relative; z-index: 2; }
.menu-open .brand .logo-dark { opacity: 1; }

/* ---------- Monograma del hero (portada) ---------- */
.mono-hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 18px var(--gutter) clamp(24px, 3vw, 40px); }
.monogram { font-family: var(--serif); text-transform: uppercase; color: #000; line-height: .78; font-variation-settings: "opsz" 96; user-select: none; }
.monogram .m-row { display: flex; align-items: flex-end; }
.monogram .m-big { font-size: min(40vw, 40vh); font-weight: 400; letter-spacing: -.06em; }
.monogram .m-row + .m-row { margin-top: -.02em; }
.monogram .m-l { font-size: min(40vw, 40vh); margin-left: .9em; font-style: italic; font-weight: 400; }
.monogram .m-name { display: block; margin-top: .3em; font-size: clamp(22px, min(4vw, 6vh), 60px); letter-spacing: -.02em; line-height: 1; }
.mono-hero .aside { margin-left: auto; align-self: flex-end; max-width: 300px; text-align: right; }
.mono-hero .aside p { margin: 0 0 10px; font-size: 13px; }
@media (max-width: 860px) {
  .mono-hero { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .mono-hero .aside { margin: 32px 0 0; text-align: left; }
}

/* ---------- Paneles a sangre ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 44px); min-height: 100vh; }
.panel > img, .panel .yt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel .yt-bg iframe { width: max(100%, 177.78vh); height: max(100%, 56.25vw); }
.panel-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); }
.panel > *:not(img):not(.yt-bg):not(.panel-shade) { position: relative; z-index: 1; }
.panel-video { color: #fff; background: #000; }
.panel-video .display { color: #fff; }
.panel-video .small-caps { color: #fff; }
.panel-dark { background: #000; color: #fff; justify-content: center; align-items: center; text-align: center; }
.panel-dark p { color: rgba(255, 255, 255, .85); max-width: 400px; margin: 0 auto 26px; }
.panel-dark .mini-mono { font: 400 clamp(90px, 11vw, 170px)/.8 var(--serif); text-transform: uppercase; letter-spacing: -.06em; margin-bottom: 18px; font-variation-settings: "opsz" 96; }
.panel-dark .mini-mono i { font-style: italic; }
.panel-dark .mini-name { font: 400 16px/1 var(--serif); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 30px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .panel { min-height: 80vh; }
}

/* ---------- Servicios en columnas con filetes ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #000; }
.cols3 > a { display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 34px 0; border-bottom: 1px solid #000; }
.cols3 > a + a { padding-left: 28px; border-left: 1px solid #000; }
.cols3 .h2 { transition: font-style .2s; }
.cols3 > a:hover .h2 { font-style: italic; }
.cols3 p { margin: 0; }
.cols3 .more { margin-top: auto; }
@media (max-width: 860px) {
  .cols3 { grid-template-columns: 1fr; }
  .cols3 > a + a { padding-left: 0; border-left: 0; }
}
.more { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; display: inline-flex; gap: 8px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* ---------- Secciones y bloques del resto de páginas ---------- */
.rule { border-top: 1px solid #000; }
.dark { background: #000; color: #fff; }
.dark p, .dark .lead { color: rgba(255, 255, 255, .85); }
.dark .eyebrow { color: #fff; }
.dark .eyebrow::before { background: #fff; }
.paper { background: #fff; }
.page-hero { padding-top: clamp(130px, 16vw, 200px); }
.svc-list { border-top: 1px solid currentColor; }
.svc-list li { border-color: var(--line-inv); }
.svc-list a:hover .h2 { transform: translateX(10px); font-style: italic; }
.feature { border-top: 1px solid #000; }
.feature .num { margin-bottom: 20px; }
.stat { font-size: clamp(120px, 20vw, 300px); line-height: .8; color: #000; }
.stat sup { color: #000; font-size: .3em; }
.checklist li { border-bottom: 1px solid #000; font: 400 clamp(18px, 1.8vw, 24px)/1.25 var(--serif); text-transform: uppercase; }
.checklist li::before { font: 600 11px/2 var(--sans); color: #000; letter-spacing: .1em; }
.service { border-top: 1px solid #000; }
.service .big-num { font-size: clamp(110px, 15vw, 230px); line-height: .8; color: #000; -webkit-text-stroke: 0; font-style: italic; }
.tags li { border: 1px solid #000; border-radius: 0; font-weight: 600; }
.mue { border-top: 1px solid rgba(255, 255, 255, .5); }
.mue div + div { border-left: 1px solid rgba(255, 255, 255, .5); }
.mue b { color: #fff; font-size: clamp(100px, 13vw, 200px); }

/* Logos en negro sobre blanco */
.logo-img { filter: brightness(0); opacity: .9; }
.logo-img:hover { opacity: 1; }
.logo-wall { border-color: #000; border-top: 1px solid #000; border-left: 1px solid #000; }
.logo-wall div { border-right: 1px solid #000; border-bottom: 1px solid #000; }
.dark .logo-img { filter: brightness(0) invert(1); }

/* Botones rectos */
.btn { border-radius: 0; border: 1px solid currentColor; padding: 17px 30px; font: 600 11px/1 var(--sans); letter-spacing: .14em; }
.btn::before { background: #000; }
.btn:hover { color: #fff; }
.dark .btn::before { background: #fff; }
.dark .btn:hover { color: #000; }
.btn-solid { background: #000; color: #fff; }
.btn-solid::before { background: #fff; }
.btn-solid:hover { color: #000; }

/* Llamada final estrecha y centrada (como un formulario de suscripción) */
.cta { text-align: center; }
.cta .wrap { max-width: 560px; }
.cta .display { font-size: clamp(34px, 4vw, 54px); margin: 18px 0 18px; }
.cta p { margin: 0 auto 30px; }

/* Formulario */
.field input, .field textarea { border-bottom: 1px solid #000; font: 400 16px/1.4 var(--sans); padding: 22px 0 10px; }
.field label { font-weight: 600; color: #000; top: 24px; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { color: #000; }
.field input:focus, .field textarea:focus { border-color: #000; border-bottom-width: 2px; }
.contact-list li { border-top: 1px solid #000; }
.contact-list a, .contact-list address { font: 400 clamp(20px, 2vw, 28px)/1.2 var(--serif); text-transform: uppercase; }
.contact-list a:hover { font-style: italic; }

/* Vídeo destacado a sangre */
.showreel .yt-facade, .showreel .yt-facade.yt-gated { width: 100%; aspect-ratio: 16 / 9; max-height: 100vh; }
.yt-facade { background: #000; }
.yt-facade img { opacity: 1; filter: grayscale(1); }
.yt-facade:hover img { filter: none; transform: none; }
.yt-facade .play { border-radius: 0; width: auto; aspect-ratio: auto; padding: 16px 26px; border: 1px solid #fff; background: transparent; backdrop-filter: none; font: 600 11px/1 var(--sans); letter-spacing: .14em; gap: 10px; display: flex; align-items: center; }
.yt-facade .play svg { width: 12px; margin: 0; }
.yt-facade .play::after { content: "PLAY"; }
.yt-facade:hover .play { background: #fff; color: #000; transform: translate(-50%, -50%); }

/* ---------- Pie en una línea ---------- */
.site-footer { background: #fff; color: #000; padding: 60px 0 22px; border-top: 1px solid #000; }
.site-footer .wrap { max-width: none; }
.site-footer .foot-logo { filter: invert(1); height: 46px; }
.site-footer p { color: #111; font-size: 13px; }
.site-footer h4 { color: #000; font: 600 11px/1 var(--sans); letter-spacing: .14em; }
.site-footer li, .site-footer address { font: 400 13px/1.6 var(--sans); }
.site-footer a:hover { text-decoration: underline; color: #000; }
.foot-bottom { border-top: 0; margin-top: 40px; padding-top: 0; color: #000; font: 600 10.5px/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 40px; font: 600 10.5px/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.foot-legal a, .foot-legal button { color: #000; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.foot-legal a:hover, .foot-legal button:hover { text-decoration: underline; }

/* ---------- Aviso de cookies (caja rectangular abajo a la derecha) ---------- */
.cc {
  position: fixed; z-index: 60; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  width: min(420px, calc(100vw - 24px)); padding: 20px 20px 16px;
  background: #fff; color: #000; border: 1px solid #000;
  font: 400 12.5px/1.5 var(--sans);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s var(--ease), visibility .5s;
}
.cc.cc-in { opacity: 1; visibility: visible; transform: none; }
.cc-title { margin: 0 0 8px; font: 400 22px/1.05 var(--serif); text-transform: uppercase; }
.cc-title span { display: none; }
.cc-text { margin: 0 0 16px; color: #000; }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-btn { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 13px 8px; border-radius: 0; cursor: pointer; border: 1px solid #000; background: #fff; color: #000; transition: background .25s, color .25s; }
.cc-accept { background: #000; color: #fff; }
.cc-btn:hover, .cc-btn:focus-visible { background: #000; color: #fff; }
.cc-accept:hover, .cc-accept:focus-visible { background: #fff; color: #000; }
.cc-btn:focus-visible, .cc-link:focus-visible, .cc-opt input:focus-visible + i { outline: 2px solid #000; outline-offset: 3px; }
.cc-links { margin: 12px 0 0; display: flex; gap: 10px; justify-content: flex-start; font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cc-links span { color: #000; }
.cc-link { background: none; border: 0; padding: 2px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: #000; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cc-prefs { margin: 0 0 14px; border-top: 1px solid #000; }
.cc-prefs[hidden] { display: none; }
.cc-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #000; cursor: pointer; }
.cc-opt b { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.cc-opt small { display: block; font-size: 12px; color: #444; }
.cc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cc-opt i { flex: none; position: relative; width: 38px; height: 20px; border: 1px solid #000; background: #fff; transition: background .25s; }
.cc-opt i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: #000; transition: transform .25s, background .25s; }
.cc-opt input:checked + i { background: #000; }
.cc-opt input:checked + i::after { transform: translateX(18px); background: #fff; }
.cc-opt input:disabled + i { opacity: .45; }
.cc-save { width: 100%; margin-top: 12px; }
@media (max-width: 600px) { .cc { left: 12px; right: 12px; width: auto; } }

/* Aviso sobre el vídeo si no se ha aceptado YouTube */
.yt-gated { cursor: default; }
.yt-gated img { filter: grayscale(1) brightness(.35); }
.yt-gate { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
.yt-gate p { margin: 0; max-width: 460px; font: 400 clamp(18px, 2vw, 26px)/1.15 var(--serif); text-transform: uppercase; color: #fff; }
.yt-gate-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; }
.yt-gate .btn { color: #fff; border-color: #fff; }
.yt-gate .btn::before { background: #fff; }
.yt-gate .btn:hover { color: #000; }
.yt-gate-more { background: none; border: 0; color: #fff; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Página de política */
.legal { max-width: 820px; }
.legal h2 { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--serif); text-transform: uppercase; margin: 52px 0 14px; }
.legal a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.legal .table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid #000; }
.legal table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.legal th, .legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #000; vertical-align: top; }
.legal th { font: 600 10.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: #000; color: #fff; }
.legal tr:last-child td { border-bottom: 0; }
.legal .note { margin-top: 44px; font-size: 12px; color: #444; }

/* Animación de entrada más seca */
.js .reveal { transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .mono-hero .monogram { opacity: 0; transform: translateY(24px); animation: monoIn 1.4s var(--ease) .1s forwards; }
@keyframes monoIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .mono-hero .monogram { opacity: 1; transform: none; animation: none; } }

/* =====================================================================
   Legibilidad
   - La didona usa su tamaño óptico automático: en tamaños medianos y pequeños
     los trazos finos son más gruesos (antes se forzaba el de cartel, "opsz" 96).
   - La didona solo en títulos grandes; los títulos medianos, un poco más gruesos.
   - Texto corrido, etiquetas y avisos más grandes y con más contraste.
   ===================================================================== */
.display, .h1, .h2, .h3, .quote, .stat, .mue b, .service .big-num,
.nav a, .panel-dark .mini-mono, .cc-title, .legal h2, .contact-list a, .contact-list address, .checklist li {
  font-optical-sizing: auto; font-variation-settings: normal;
}
.monogram { font-variation-settings: "opsz" 96; }          /* el monograma sí mantiene el contraste máximo */
.display, .h1 { font-weight: 500; letter-spacing: 0; }
.h2, .h3 { font-weight: 500; letter-spacing: .01em; line-height: 1.08; }
.h2 { font-size: clamp(28px, 3vw, 44px); }

body { font-size: 16px; line-height: 1.7; }
p { color: #111; }
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; color: #000; }
.panel-dark p, .dark p, .dark .lead { color: #fff; }
.panel-dark p { font-size: 16px; max-width: 440px; }
.mono-hero .aside p { font-size: 15px; }

/* Etiquetas y enlaces pequeños: más tamaño, menos espaciado */
.eyebrow, .small-caps, .num, .more, .btn, .menu-btn::after, .tags li,
.foot-legal, .foot-bottom, .site-footer h4 { font-size: 12.5px; letter-spacing: .08em; }
.cols3 p { font-size: 15.5px; line-height: 1.65; }

/* Listas y datos de contacto en sans, más legibles a ese tamaño */
.checklist li { font: 500 clamp(17px, 1.5vw, 20px)/1.45 var(--sans); text-transform: none; }
.contact-list a, .contact-list address { font: 500 clamp(18px, 1.6vw, 22px)/1.4 var(--sans); text-transform: none; }
.field label { font-size: 12.5px; letter-spacing: .08em; }
.field input, .field textarea { font-size: 17px; }

/* Pie */
.site-footer p, .site-footer li, .site-footer address { font-size: 15px; line-height: 1.6; color: #000; }

/* Menú: didona más gruesa */
.nav a { font-weight: 500; }

/* Aviso de cookies y aviso del vídeo */
.cc { font-size: 14px; line-height: 1.55; }
.cc-title { font-weight: 500; font-size: 22px; }
.cc-btn, .cc-links { font-size: 12px; letter-spacing: .08em; }
.cc-opt b { font-size: 12.5px; letter-spacing: .06em; }
.cc-opt small { font-size: 13px; color: #222; }
.yt-gate p { font-weight: 500; }

/* Política de cookies */
.legal h2 { font-weight: 500; }
.legal table { font-size: 14.5px; }
.legal th { font-size: 12px; letter-spacing: .08em; }
.legal .note { font-size: 14px; color: #222; }
/* Tamaño óptico: cuanto más bajo, más gruesos los trazos finos de la didona */
.display, .h1, .quote, .stat, .mue b, .service .big-num, .panel-dark .mini-mono { font-variation-settings: "opsz" 40; }
.h2, .h3, .nav a { font-variation-settings: "opsz" 16; font-weight: 500; }
.cc-title, .legal h2, .yt-gate p { font-variation-settings: "opsz" 12; }
/* El claim del panel ocupa media pantalla: se dimensiona a ese ancho */
.panel-video .display { font-size: clamp(40px, 6.6vw, 110px); }
@media (max-width: 860px) { .panel-video .display { font-size: clamp(40px, 12vw, 90px); } }
@media (max-width: 600px) { .h1 { font-size: clamp(30px, 8.8vw, 60px); } }
/* Trazo fino (barra de la H, diagonal de la N, lado fino de la A…) al doble de grosor.
   En Bodoni Moda el trazo fino solo depende del tamaño óptico ("opsz"); valores medidos sobre la fuente. */
.monogram { font-variation-settings: "opsz" 43.2; }                                                        /* 2,0 → 4,0 */
.display, .h1, .quote, .stat, .mue b, .service .big-num, .panel-dark .mini-mono { font-variation-settings: "opsz" 25.7; } /* 4,2 → 8,5 */
.h2, .h3, .nav a { font-variation-settings: "opsz" 8.8; }                                                 /* 13,7 → 27,3 */
.cc-title, .legal h2, .yt-gate p, .panel-dark .mini-name { font-variation-settings: "opsz" 6; }          /* 18,6 → 36,9 (máximo de la fuente) */
/* Monograma TCL en una sola línea: tan grande como quepa a lo ancho y a lo alto */
.monogram .m-big { font-size: min(36vw, 62vh); white-space: nowrap; letter-spacing: -.05em; }
.monogram .m-big i { font-style: italic; letter-spacing: 0; }

/* ---------- Vídeo a pantalla completa al principio de la portada ---------- */
.video-hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.video-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-hero .yt-bg iframe { width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%) scale(1.12); }
.scroll-down {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(18px, 3vh, 32px); transform: translateX(-50%);
  color: #fff; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; gap: 8px; align-items: center; padding: 8px 4px;
}
.scroll-down span { display: inline-block; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* En la portada la cabecera va siempre visible y se invierte sola:
   blanca sobre el vídeo y negra sobre el fondo blanco */
.mono-home .brand, .mono-home .site-header.scrolled .brand { opacity: 1; }
.mono-home:not(.menu-open) .site-header { mix-blend-mode: difference; }
.mono-home:not(.menu-open) .site-header .menu-btn { color: #fff; }
.mono-home:not(.menu-open) .site-header .logo-dark { opacity: 0; }
.mono-home:not(.menu-open) .site-header .logo-light { opacity: 1; }
.mono-home.menu-open .site-header .logo-light { opacity: 0; }

/* El monograma ya no es lo primero: su bloque no necesita ocupar toda la pantalla */
.mono-hero { min-height: 92vh; min-height: 92svh; }
@media (prefers-reduced-motion: reduce) { .scroll-down span { animation: none; } }

/* ---------- Monograma y texto de la agencia encima del vídeo de fondo ---------- */
.video-hero.mono-hero {
  height: auto; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; padding: 90px var(--gutter) clamp(56px, 8vh, 84px);
}
.video-hero .vh-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.6) 100%);
}
.video-hero .monogram, .video-hero .aside { position: relative; z-index: 1; color: #fff; }
.video-hero .aside p, .video-hero .aside .small-caps { color: #fff; }
.video-hero .monogram { text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
/* deja sitio a la indicación "Scroll" de abajo */
.video-hero .monogram .m-big { font-size: min(36vw, 56vh); }
@media (max-width: 860px) {
  .video-hero.mono-hero { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
}
@media (max-width: 860px) { .video-hero.mono-hero { padding-bottom: 84px; } }