/* Мобильная версия следует типографической системе оригинала, которая целиком
   лежит в бандле:
       --p1 17vw   большие заголовки
       --p2 5.9vw  подзаголовки
       --p4 12px   основной текст и подписи
       --p5 2vw    микротекст этикеток
   плюс единая сетка: контент 96vw, отступ от борта 2vw, интерлиньяж 0.9 для
   дисплейного текста и 1.0 для основного.

   Раньше этот файл переопределял почти каждое из этих значений собственными
   clamp(), подобранными поштучно под длину русских фраз. Ступени шкалы от этого
   разъезжались, и композиция теряла ритм. Теперь здесь остаётся только то, без
   чего кириллица ломается, и один фикс высоты вьюпорта для Safari. */

@media screen and (max-width:1024px) and (orientation:portrait){

/* Кириллица: не переносить по слогам и не рвать слова посреди строки.
   Русские слова длиннее испанских, и браузер охотно делает и то, и другое. */
.text,.titulos2,.titulos3,.experiment,#clientstit,#tercera h2,#final h2,
.ingredients,.date,.prods{hyphens:none;overflow-wrap:normal;word-break:normal}

/* В семействе только Thin и Roman. Синтетическое начертание на кириллице
   выглядит грязно, поэтому запрещаем его явно. */
h1,h2,h3,.titulos2,.titulos3,.experiment,#clientstit,#final h2,#final2 button{font-synthesis:none}

/* При интерлиньяже 0.9 надстрочный элемент «Й» срезается верхней границей
   строки. Возвращаем ему запас, не трогая сам интерлиньяж. */
.titulos2,.titulos3,#clientstit,#tercera h2,#final h2{overflow:visible;padding-top:.14em}

/* Разделитель между повторами в бегущей строке «ГОТОВЫЙ САЙТ». На десктопе это
   картинка, в мобильном бандле фона нет — без явного правила слова слипаются. */
#motioninner .imginside5{background:none;display:inline-block;height:1px;margin:0 3vw;width:8vw}

/* Подзаголовок первого экрана в оригинале — одна короткая строка, и бокс высотой 8vw.
   Русская фраза встаёт в две строки, поэтому боксу разрешена своя высота:
   блок становится выше, кегль остаётся на ступени --p2. */
#segundo{height:auto}

/* Подпись под заголовком приходилась ровно на печать 3D-банки и не читалась.
   Опускаем на 40 px от исходной позиции бандла (70.5vh). */
#landing h4{top:calc(70.5vh + 40px)}

/* Здесь стояла цепочка с dvh против прыжков высоты в Safari. Убрана: dvh
   пересчитывается по мере сворачивания адресной строки, то есть заставляет
   браузер перекладывать полноэкранную секцию прямо во время скролла, когда
   рядом считается 3D-сцена. В оригинале обычный 100vh из бандла, и он остаётся
   без переопределения. */

/* Убирает резиновый отскок страницы при скролле до края. */
html,body{overscroll-behavior-y:none}

/* Боковые подписи на карточках. В бандле они повёрнуты через rotate, а их
   left/top подобраны под длину испанской фразы: чем длиннее текст, тем дальше
   уезжает блок. Русская подпись длиннее, и правая уходила на 98vw вместо 58vw —
   за край экрана. Через writing-mode ширина блока равна высоте строки и не
   зависит от текста, поэтому подписи можно прижать к краям карточки. */
.etiqueta .lat{bottom:32vw;height:auto;left:0!important;right:auto;top:auto!important;transform:rotate(180deg);transform-origin:center;white-space:nowrap;width:auto;writing-mode:vertical-rl;z-index:5}
.etiqueta .lat2{height:auto;left:auto;right:0;top:2vw;transform:none;white-space:nowrap;width:auto;writing-mode:vertical-rl;z-index:5}

/* Пломба у подзаголовка первого продукта стоит абсолютом и вылезала за правый
   край. Левую оставляем в потоке, правую на мобильном не показываем. */
#tercera h3>img:not(.right){height:auto;left:auto;position:relative;top:auto;width:13vw}
#tercera img.right{display:none}

/* Многострочный дисплейный текст: при интерлиньяже 0.9 «Й» следующей строки
   упирается в предыдущую. Для подзаголовков даём минимальный запас. */
.titulos3,.experiment{line-height:.98}

/* Три места, где одно русское слово шире строки в 17vw и обрезается краем:
   «СЛЕДУЮЩИМ», «НА ВСТРЕЧЕ», «ОБСУДИТЬ УЧАСТИЕ». Сокращать эти фразы вы пока
   не просили, поэтому конкретно эти блоки опускаются на ступень ниже.
   Остальные заголовки остаются на --p1. */
#aesthetics h2{font-size:15vw}
#final h2{font-size:13.5vw}

/* «ОБСУДИТЬ» — восемь букв, на полном --p1 (17vw) строка не помещается:
   381 px при доступных 338. Ставим наибольший кегль, при котором слово
   остаётся в одну строку. */
#final2 button{font-size:14.5vw;white-space:nowrap}

/* «ДЛЯ ТЕХ, КТО ХОЧЕТ РАБОТАТЬ НА СЕБЯ» — четыре строки, и на 0.9 они садились
   друг на друга. */
#clientstit{line-height:1}

/* Три подписи по краям блока «Кому подойдёт» съедали место над заголовком. */
#clients .brave,#clients .unique,#clients .noboring{display:none}

/* Служебный режим ?qa=1: разворачивает страницу для проверки вёрстки.
   Интро при этом не запускается, поэтому элементы, ждущие анимации GSAP,
   остаются в стартовых позициях — это нормально, а не дефект. */
html.mobile-qa #content,html.mobile-qa #wrapper #content{height:auto!important}
html.mobile-qa #landing{opacity:1!important}
html.mobile-qa #preloader,html.mobile-qa #aceptar,html.mobile-qa #ticket{display:none!important}

}

/* Десктоп: выравнивание пломбы «330 ml» по оптическому центру. */
@media screen and (min-width:1025px){
#tercera h3{align-items:center;display:grid;gap:1.3vw;grid-template-columns:3.2vw minmax(0,1fr) 7vw;margin-top:2vw;width:52vw}
#tercera h3>img{left:auto;position:relative;right:auto;top:auto}
#tercera h3>img:not(.right){grid-column:1;width:3vw}
#tercera h3>.titulos3{grid-column:2;text-align:center}
#tercera h3>img.right{grid-column:3;transform:none;width:7vw}
}