/* v5 · pt · what only the Portuguese page has (everything else is v5/c/css).
   1. The three video testimonials under the audiences chart (js/pt.js).
   2. The price in reais: one currency, "R$" set small like the sign of the English page, no currency switch. */

/* ───────────────────────── 1 · testimonials ───────────────────────── */
.depo { position: relative; width: min(var(--max), 100%); margin: 44px auto 0; padding: 0 16px; }
.depo__head { max-width: 30em; }
.depo__h { font: 500 clamp(28px, 7.4vw, 52px)/1 var(--f-sans); letter-spacing: -.045em; color: var(--film); text-wrap: balance; }
.depo__h .focus { letter-spacing: -.03em; }
.depo__line { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--graphite); }

/* phone: a strip you drag sideways, one print at a time */
.depo__list { display: flex; gap: 20px; margin: 22px -16px 0; padding: 14px 16px 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.depo__list::-webkit-scrollbar { display: none; }
.depo__i { flex: 0 0 min(72vw, 290px); scroll-snap-align: start; }
.depo__i:first-child { margin-left: 2px; }
.depo__f { margin: 0; }
.depo__film { --ar: 9 / 16; rotate: var(--r, 0deg); transform-origin: 50% 0; transition: rotate .7s var(--ease-out); } /* the print is tilted, its caption is not */
.depo__film .film__code { color: color-mix(in srgb, var(--marker) 85%, var(--ember)); }
.depo__win { background: var(--film); }
.depo__v { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: var(--film); }
.depo__film.is-on .film__img::after { opacity: 0; } /* no grain over a face that is talking */

.depo__play { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px 8px 8px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 94%, transparent); color: var(--film); font: 500 15px/1 var(--f-sans); letter-spacing: -.01em; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--film) 80%, transparent); transition: transform .5s var(--ease-out), opacity .3s, background-color .2s; }
.depo__play:hover { background: var(--print); }
.depo__play:active { transform: scale(.97); }
.depo__play:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px; }
.depo__ico { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--marker); }
.depo__ico::before { content: ""; position: absolute; left: 13px; top: 9.5px; border-style: solid; border-width: 6.5px 0 6.5px 10px; border-color: transparent transparent transparent var(--film); }
.depo__s { margin-left: auto; white-space: nowrap; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--graphite); }
/* playing: the pill steps back to a small pause button, out of the way of the face and of the burned-in captions */
.depo__film.is-on .depo__play { right: auto; padding: 8px; min-height: 0; background: color-mix(in srgb, var(--film) 55%, transparent); box-shadow: none; }
.depo__film.is-on .depo__t, .depo__film.is-on .depo__s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.depo__film.is-on .depo__ico { width: 28px; height: 28px; background: var(--paper); }
.depo__film.is-on .depo__ico::before { left: 9px; top: 8px; width: 3.5px; height: 12px; border: 0; background: var(--film); box-shadow: 6.5px 0 0 var(--film); }

.depo__cap { margin-top: 16px; padding: 0 2px; }
/* the quote in the page's sans, upright and dark: the thin italic serif was hard to read at this size */
.depo__q { margin: 0; font: 500 19px/1.24 var(--f-sans); letter-spacing: -.024em; color: var(--film); text-wrap: pretty; }
/* who is talking: a print of the real Instagram profile (photo, handle, followers) instead of the same facts in words */
.depo__ig { display: block; width: 100%; max-width: 330px; height: auto; margin-top: 14px; border-radius: 10px; background: #fff; rotate: calc(var(--r, 0deg) * -.45); box-shadow: 0 0 0 1px var(--line-2), 0 12px 22px -16px color-mix(in srgb, var(--film) 70%, transparent); }

html:not(.js) .depo__play { display: none; } /* JS off: the native controls do the job */

@media (min-width: 768px) {
  .depo { margin-top: 64px; padding: 0 32px; }
  .depo__head { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 12px 40px; }
  .depo__line { margin: 0 0 6px; max-width: 30em; justify-self: end; }
  .depo__list { margin: 34px 0 0; padding: 0; overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .depo__i { flex: none; margin: 0 !important; }
  .depo__i:nth-child(2) { margin-top: 26px !important; }
  .depo__i:hover .depo__film, .depo__film.is-on { rotate: 0deg; }
  .depo__q { font-size: 20px; }
}
@media (min-width: 1000px) {
  .depo { padding: 0 48px; margin-top: 84px; }
  .depo__list { gap: 44px; padding: 0 4%; }
  .depo__q { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .depo__film, .depo__play { transition: none; } }

/* ───────────────────────── 2 · price in reais ───────────────────────── */
/* "R$" set small and raised, the way the "$" of the English page is; the space after it stays narrow */
.r4p__amt .odo__t[data-c="R"], .r4p__amt .odo__t[data-c="$"],
.r4p__sp > [data-amt] .odo__t[data-c="R"], .r4p__sp > [data-amt] .odo__t[data-c="$"] { font-size: .42em; vertical-align: .95em; letter-spacing: 0; }
.r4p__amt .odo__t[data-c="\00a0"], .r4p__sp > [data-amt] .odo__t[data-c="\00a0"], .r4p__hamt .odo__t[data-c="\00a0"] { display: inline-block; width: .12em; overflow: hidden; }
/* the row that held "or £700" and the currency switch is empty here */
.r4p__row:has(> .r4p__cur[hidden]:only-child) { display: none; }
.pt-from { flex-basis: 100%; font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }

/* ───────────────────────── 3 · longer words ───────────────────────── */
/* "R$ 2.000" is twice as long as "$900": the big figure steps down so it stays inside its column and its ring */
.r4p__price { font-size: min(20.5vw, 96px); }
@media (min-width: 768px) { .r4p__price { font-size: clamp(76px, 10.4vw, 124px); } }
@media (min-width: 1000px) { .r4p__price { font-size: clamp(94px, 8.2vw, 134px); } }
/* "Quero ver os 3 vazamentos" is 25 characters against the 19 of "Show me the 3 leaks" */
.r4f__big { font-size: clamp(23px, 6.5vw, 92px); }
.r4p__ring { padding-left: .07em; } /* room for the small "R$" inside the hand-drawn ring */
@media (max-width: 767px) { .e-tag__run span { font-size: 13.5px; } } /* "3 vazamentos, grátis" fits the stub on a phone */
/* tablet: the longer button label next to its arrow, in the narrow second column of the price print */
@media (min-width: 768px) and (max-width: 999px) { .r4p__btn.btn--marker { font-size: 15px; padding: 8px 58px 8px 18px; white-space: nowrap; } }
/* the Impacto Mobile frame in the mural: only the top of the page, standing still */
.bt__top { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; } /* the hero capture fills the frame; its sides, which are empty, are what gets cut */