:root {
  --black: #000;
  --ink: #222;
  --grey: #525252;
  --red: #a02538;
  --red-hover: #832626;
  --brown: #321a1a;
  --brown-hover: #712e2e;
  /* 1 «пиксель макета». До 1440 точек это обычный пиксель,
     на экранах шире вся страница пропорционально увеличивается */
  --u: 1px;
  --radius: calc(15 * var(--u));
  --gutter: calc(24 * var(--u));
}
@media (min-width: 1441px) {
  :root { --u: calc(100vw / 1440); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(60 * var(--u)); }
body {
  font-family: 'Unbounded', system-ui, sans-serif;
  color: var(--black);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; cursor: pointer; }

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

/* Анимация при наведении, как на старом сайте: +1% за 0,3 с */
.hover { transition: transform .3s ease-in-out, background-color .2s ease-in-out, color .2s ease-in-out; }
@media (hover: hover) {
  .hover:hover { transform: scale(1.01); }
}

/* Шапка */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: calc(50 * var(--u)); padding: 0 calc(40 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
}
.header__logo img { width: calc(200 * var(--u)); height: auto; }
.header__nav { display: flex; gap: calc(30 * var(--u)); }
.header__nav a { font-size: calc(11 * var(--u)); text-transform: uppercase; color: var(--ink); }
.header__nav a:hover { color: var(--red); }

/* Первый экран */
.hero {
  padding-top: calc(53 * var(--u)); padding-bottom: calc(24 * var(--u));
  display: flex; justify-content: space-between; gap: calc(40 * var(--u));
  margin-top: calc(50 * var(--u));
}
.hero__title {
  font-size: clamp(30px, 3.2vw, calc(46 * var(--u))); font-weight: 500; line-height: 1.2;
  text-transform: uppercase; max-width: calc(700 * var(--u)); padding-left: calc(14 * var(--u));
}
.hero__side {
  max-width: calc(490 * var(--u)); text-align: right; color: var(--grey);
  font-size: clamp(15px, 1.4vw, calc(20 * var(--u))); line-height: 1.2;
  display: flex; flex-direction: column; gap: calc(24 * var(--u));
}
.hero__side p:first-child { max-width: calc(390 * var(--u)); margin-left: auto; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(65 * var(--u)); padding: 0 calc(32 * var(--u));
  font-size: calc(14 * var(--u)); text-transform: uppercase; color: #fff; text-align: center;
  border-radius: var(--radius);
}
.btn--wide { display: flex; width: 100%; }
.btn--red { background: var(--red); }
.btn--red:hover { background: var(--red-hover); }
.btn--black { background: #000; border-radius: calc(30 * var(--u)); width: calc(238 * var(--u)); }
.btn--black:hover { background: var(--brown-hover); }
.btn--brown { background: var(--brown); border-radius: calc(30 * var(--u)); height: calc(57 * var(--u)); font-weight: 500; }
.btn--glass {
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .35);
}
.btn--glass:hover { background: #fff; color: #000; }

/* Галерея: на компьютере раскладка как на старом сайте */
.gallery { position: relative; margin-top: calc(18 * var(--u)); }
.gallery::before { content: ''; display: block; padding-top: calc(1072 / 1379 * 100%); }
.g { position: absolute; object-fit: cover; border-radius: var(--radius); background: #f0f0f0; }
.g--dog       { left: 0;      top: 0;      width: 49.38%; height: 57.18%; }
.g--barcelona { left: 50.54%; top: 0;      width: 24%;    height: 19.59%; }
.g--farm      { left: 76%;    top: 0;      width: 24%;    height: 35.91%; }
.g--center    { left: 50.62%; top: 21.27%; width: 24%;    height: 19.59%; }
.g--running   { left: 76%;    top: 37.59%; width: 24%;    height: 19.59%; }
.g--shadows   { left: 0;      top: 58.77%; width: 24%;    height: 19.87%; }
.g--airport   { left: 25.31%; top: 58.86%; width: 24%;    height: 41.14%; }
.g--friends   { left: 50.54%; top: 58.77%; width: 24%;    height: 41.14%; }
.g--sagrada   { left: 75.85%; top: 58.77%; width: 24%;    height: 19.59%; }
.g--street    { left: 0;      top: 80.13%; width: 24%;    height: 19.87%; }
.g--placeholder, .g--real {
  background: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.g--placeholder { left: 50.54%; top: 42.54%; width: 24%; height: 14.65%; font-size: clamp(12px, 1.1vw, calc(16 * var(--u))); font-weight: 500; line-height: 1.55; }
.g--real { left: 76%; top: 80.2%; width: 24%; height: 19.8%; gap: calc(22 * var(--u)); }
.g--real p { font-size: clamp(14px, 1.4vw, calc(20 * var(--u))); font-weight: 600; text-transform: uppercase; }
.g--real img { width: calc(42 * var(--u)); height: auto; }

/* Разделитель */
.divider { border: 0; border-top: 1px solid #000; width: min(calc(1080 * var(--u)), calc(100% - 48px)); margin: calc(36 * var(--u)) auto; }

/* Вступление */
.intro { text-align: center; padding-top: calc(8 * var(--u)); }
.h2 { font-size: clamp(26px, 3.35vw, calc(48 * var(--u))); font-weight: 500; line-height: 1.2; text-transform: uppercase; }
.h2--big { font-size: clamp(28px, 4.3vw, calc(62 * var(--u))); }
.intro .h2 { max-width: calc(1100 * var(--u)); margin: 0 auto; }
.lead { max-width: calc(966 * var(--u)); margin: calc(24 * var(--u)) auto 0; font-size: clamp(14px, 1.25vw, calc(18 * var(--u))); line-height: 1.22; color: var(--grey); }

/* Карточки услуг */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--u)); margin-top: calc(44 * var(--u)); }
.card {
  position: relative; aspect-ratio: 448 / 487; border-radius: var(--radius);
  background: #f0f0f0 var(--bg) center / cover no-repeat;
  padding: calc(13 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; justify-content: space-between;
}
.card h3 { font-size: clamp(18px, 1.67vw, calc(24 * var(--u))); font-weight: 400; line-height: 1.25; color: #fff; text-transform: uppercase; max-width: calc(360 * var(--u)); }
.card .btn { margin: 0 calc(-13 * var(--u)); }

/* Больше об Испании */
.spain__head { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); padding-top: calc(20 * var(--u)); }
.videos { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); margin-top: calc(36 * var(--u)); }
.video {
  position: relative; aspect-ratio: 682 / 403; border-radius: var(--radius); overflow: hidden;
  background: #111 var(--bg) center / cover no-repeat; width: 100%;
}
.video__play {
  position: absolute; left: 50%; top: 50%; width: calc(68 * var(--u)); height: calc(48 * var(--u)); transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.video--playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Подвал */
.footer { padding-bottom: calc(8 * var(--u)); }
.footer__banner {
  position: relative; aspect-ratio: 1379 / 331; border-radius: var(--radius); overflow: hidden;
  background: #f0f0f0 url(/img/footer-barcelona.jpg) center / cover no-repeat;
}
.footer__logo { position: absolute; left: .6%; top: 2.4%; width: 77.4%; }
.footer__social a { position: absolute; opacity: .8; }
.footer__social a:nth-child(1) { left: 79.95%; top: 8.2%;  width: 5.87%; }
.footer__social a:nth-child(2) { left: 87.2%;  top: 26.6%; width: 4.64%; }
.footer__social a:nth-child(3) { left: 92.6%;  top: 2.4%;  width: 5.87%; }
.footer__social img { width: 100%; }
.footer__chat { position: absolute; right: calc(7 * var(--u)); bottom: calc(7 * var(--u)); width: calc(238 * var(--u)); padding: 0 calc(12 * var(--u)); white-space: nowrap; }
.footer__copy { font-size: calc(20 * var(--u)); line-height: 1.55; margin-top: 2px; padding-left: calc(8 * var(--u)); }

/* Телефон */
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .header { padding: 0 16px; }
  .header__logo img { width: 130px; }
  .header__nav { gap: 14px; }
  .header__nav a { font-size: 9px; }
  .header__nav a:first-child { display: none; }

  .hero { flex-direction: column; gap: 20px; padding-top: 28px; }
  .hero__title { padding-left: 0; font-size: 7vw; }
  .hero__side { text-align: left; gap: 12px; }
  .hero__side p:first-child { margin-left: 0; }

  .btn { height: 56px; font-size: 12px; padding: 0 16px; }

  .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery::before { display: none; }
  .g { position: static; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; }
  .g--dog { grid-column: 1 / -1; aspect-ratio: 681 / 613; }
  .g--placeholder { display: none; }
  .g--real { aspect-ratio: auto; grid-column: 1 / -1; padding: 16px 0; flex-direction: row; }
  .g--real img { width: 24px; }

  .divider { margin: 28px auto; }
  .cards { grid-template-columns: 1fr; margin-top: 28px; }
  .card { aspect-ratio: 4 / 4.3; padding: 16px; }
  .card .btn { margin: 0; }

  .spain__head { flex-direction: column; align-items: flex-start; }
  .btn--black { width: 100%; }
  .videos { grid-template-columns: 1fr; margin-top: 20px; }

  .footer__banner { aspect-ratio: 16 / 9; }
  .footer__logo { width: 70%; left: 4%; top: 6%; }
  .footer__social a:nth-child(1) { left: 58%; top: 36%; width: 12%; }
  .footer__social a:nth-child(2) { left: 72%; top: 38%; width: 10%; }
  .footer__social a:nth-child(3) { left: 84%; top: 36%; width: 12%; }
  .footer__chat { width: auto; height: 44px; font-size: 11px; }
  .footer__copy { font-size: 14px; }
}