@font-face {
  font-family: 'Avenue Mono';
  src: url('./fonts/Avenue_Mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('./fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('./fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('./fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('./fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('./fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  --break-tablet: 550px;
  --break-desktop: 800px;
  --bg: #F5F5F5;
  --surface: #ffffff;
  --divider: rgba(23, 23, 23, 0.15);
  --ink: #171717;
  --ink-soft: #414141;
  --dark: #363636;
  --accent: #f5a99e;
  --accent-deep: #f0998d;
  --hero-topbar: #363636;
  --hero-overlay: rgba(54, 54, 54, 0.11);
  --hero-bg-image: url('../imgs/pajaros.jpg');

  --font-spacegrotesk: 'Space Grotesk', Arial, Helvetica, sans-serif;

  --font-mono: 'Avenue Mono', 'Courier New', monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-xs: clamp(0.75rem, 0.72rem + 0.18vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.24vw, 1.125rem);
  --text-md: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-lg: clamp(1.5rem, 1.15rem + 1vw, 2.2rem);
  --text-xl: clamp(2.15rem, 1.45rem + 2.6vw, 4.85rem);
  --text-hero: clamp(2.35rem, 3.5rem + 2.76vw, 5.15rem);

  --lh-tight: 0.92;
  --lh-solid: 1;
  --lh-body: 1.35;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container: 80rem;
  --container-wide: 1280px;

  --hero-total-height: 550px;
  --hero-topbar-height: 72px;
  --hero-logo-left: 24px;
  --hero-logo-size: 2rem;
  --hero-logo-line-height: 1.09;
  --hero-logo-letter-spacing: -0.05em;

  --hero-copy-max: 15rem;
  --hero-copy-bottom: 18px;

  --stats-padding-inline: 1rem;
  --stats-padding-block: 2rem;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  min-width: 375px;
}

body,
h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-spacegrotesk);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

h1,
h2,
h3 {
  font-family: var(--font-spacegrotesk);
  font-weight: var(--weight-regular);
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--text-hero);
}

h2 {
  font-size: clamp(1.4rem, 1.12rem + 1vw, 2rem);
}

h3 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
}

p {
  max-width: 62ch;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

#contenido {
  max-width: 1400px;
  margin-inline: auto;
}

.section {
  margin-inline: auto;
}

section {
  max-width: 1400px;
  margin-inline: auto;
}

.divider {
  border: none;
  border-top: 1px solid #212121;
  margin-top: 40px;
  width: 100%;
}

#hero {
  position: relative;
  width: 100%;
  min-height: 550px;
  min-width: 375px;
  overflow: hidden;

  .img-hero {
    background-image: var(--hero-bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -292px 30px;
  }

  .hero__topbar {
    position: absolute;
    left: clamp(20px,
        calc(20px + (100vw - 375px) * 20 / 375),
        42px);
    top: clamp(20px,
        calc(20px + (100vw - 375px) * 20 / 375),
        42px);
    right: clamp(20px,
        calc(20px + (100vw - 375px) * 20 / 375),
        42px);

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .lang_menu {
      display: flex;
      align-items: center;
      width: fit-content;
      font-family: var(--font-mono);
      font-size:  clamp(18px, 4.8vw, 22px);
      line-height: 1.09;
      padding-bottom: 4px;
      mix-blend-mode: difference;

      span {
        color: rgba(255,255,255,.7);
      }

      a {

        color: #fff;
        text-decoration: underline;
      }

      a[aria-current="page"] {
        opacity: 0.55;
        pointer-events: none;
        text-decoration: none;
      }
    }

  }

  #hero-logo {
    display: inline-block;
    color: #fff;
    font-family: var(--font-mono);
    font-size: max(32px, 8.533333vw);
    /* 32 -> 36 -> 48 */
    line-height: 1.09;
    letter-spacing: -0.05em;
  }

  .hero-content {
    position: absolute;
    left: clamp(20px,
        calc(20px + (100vw - 375px) * 20 / 375),
        42px);
    bottom: 11.2vw;

  }

  h1 {
    color: #fff;
    font-family: var(--font-mono);
    font-size: max(64px, 17.066667vw);
    /* 64px / 375 */
    line-height: 0.9;
    letter-spacing: -0.03em;
  }

  @media (min-width: 550px) {
    min-height: 57.875vw;

    .img-hero {
      background-position: 0 20px;
    }

    .hero__topbar {
      left: clamp(50px,
          calc(60px + (100vw - 800px) * 60 / 800),
          72px);
      top: 20px;
    }

    #hero-logo {
      font-size: clamp(32px,
          calc(36px + (100vw - 550px) * 9 / 800),
          40px);

    }

    .hero-content {
      left: clamp(90px,
          calc(90px + (100vw - 800px) * 90 / 800),
          42px);
      bottom: min(10vw, 80px);
    }

    h1 {
      font-size: 12vw;
      /* 96px / 800, cap a 1400px */
    }
  }

  @media (min-width: 1280px) {
    min-height: 920px;

    .hero__topbar {
      left: clamp(100px,
          calc(100px + (100vw - 1280px) * 100 / 1280),
          120px);
      top: 30px;
    }


    #hero-logo {
      font-size: clamp(42px,
          calc(48px + (100vw - 1280px) * 12 / 1280),
          52px);
    }

    h1 {
      font-size: min(9.375vw, 132px);

    }

    .hero-content {
      bottom: 110px;
      left: clamp(100px,
          calc(100px + (100vw - 1280px) * 100 / 1280),
          120px);

    }
  }
}

/* STATS */



#stats {
  margin-inline: auto;
  background: var(--surface);
  width: 100%;

  padding-top: 46px;
  padding-bottom: 46px;
  padding-left: clamp(24px,
      min(calc(-11.29px + 9.41vw), calc(10.67px + 6.67vw)),
      96px);
  padding-right: clamp(24px,
      min(calc(-11.29px + 9.41vw), calc(10.67px + 6.67vw)),
      96px);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;


  .stats-box {
    flex-grow: 1;
  }

  .main {
    font-size: clamp(64px, min(calc(35.76px + 7.53vw), calc(42.67px + 6.67vw)), 128px);
    font-family: var(--font-mono);
    line-height: 0.85;
    font-weight: lighter;

  }

  .copy {
    padding: 20px 0;
    font-family: var(--font-spacegrotesk);
    font-weight: 300;

    font-size: clamp(22px, calc(13.18px + 2.35vw), 32px);
    line-height: 109%;
    letter-spacing: -5%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-wrap: wrap;
    border-top: 0.5px solid #363636;
    border-bottom: 0.5px solid #363636;
    margin-top: 6px;
    width: 100%;
  }

  .cita {
    font-size: var(--text-sm);
    line-height: 1.5rem;
    color: #363636;

  }

  @media (min-width: 550px) {
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: clamp(47px, 8.5vw, 96px);
    padding-right: clamp(47px, 8.5vw, 96px);
    gap: 100px;

    .main {}
  }

  @media (min-width: 1280px) {
    padding-top: 200px;
    padding-bottom: 200px;
    padding-left: clamp(47px, 8.5vw, 96px);
    padding-right: clamp(47px, 8.5vw, 96px);
    gap: 150px;

    .main {}

    .copy {
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;

      p.claim {
        max-width: 800px;
      }

      .cita {
        align-self: flex-end;
        text-align: right;
        flex-grow: 1;
      }
    }
  }
}

#impacto {
  width: 100%;
  display: flex;
  flex-wrap: wrap-reverse;

  .caja-split {
    flex: 0 0 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* zona 1: crece linealmente desde 24px@375px hacia 70px@800px */
    padding: 50px calc(24px + (100vw - 375px) * 46 / 425);

    p {
      font-family: var(--font-spacegrotesk);
      /* zona 1: crece linealmente desde 32px@375px hacia 40px@800px */
      font-size: calc(32px + (100vw - 375px) * 8 / 425);
      font-weight: 300;
      line-height: 95%;
      letter-spacing: -0.01em;
    }

    p:nth-of-type(1) {
      padding-bottom: 30px;
    }

    p.text-strong {
      font-weight: 500;
      text-decoration: underline;
    }
  }

  .caja-split:nth-of-type(2) {
    background-color: #FFAB97;
  }

  .caja-split:nth-of-type(1) {

    position: relative;
    overflow: hidden;
  }

  .img-salto {
    background-image: url('../imgs/nenes_saltando.jpg');

  }

  @media (min-width: 550px) {
    min-height: 550px;

    .caja-split {
      flex: 0 0 50%;
      min-width: 0;
      min-height: 550px;

      p {
        /* 5vw = proporcional a la columna (50vw) hasta 800px; recta lineal de 800→1280 por encima */
        font-size: clamp(27px, min(5vw, calc(40px + (100vw - 800px) * 8 / 480)), 50.67px);
        letter-spacing: -0.03em;
      }

      p.text-strong {
        font-weight: 500;
        text-decoration: underline;
      }
    }

    .caja-split:nth-of-type(1) {
      padding: 0;
    }

    .caja-split:nth-of-type(2) {
      /* anclado en 800px: exacto en 800px y 1280px */
      padding: 50px clamp(24px, calc(70px + (100vw - 800px) * 26 / 480), 104.67px);
    }
  }

  @media (min-width: 1280px) {
    min-height: 720px;

    .caja-split {
      min-height: 720px;
    }

    .caja-split:nth-of-type(2) {
      padding-block: 80px;
    }
  }
}


#tras20anyos {
  margin-inline: auto;

  padding: 64px;
  padding-left: 7.4667vw;
  /* 28 / 375 */
  padding-right: 7.4667vw;
  /* 28 / 375 */

  height: calc(694px - (100vw - 375px) * 66 / 425);
  background-color: var(--dark);
  color: white;


  font-family: var(--font-spacegrotesk);
  font-size: calc(36px + (100vw - 375px) * 12 / 425);
  font-weight: 300;
  line-height: 95%;


  .arrow-link {
    display: inline-block;
    width: fit-content;
  }

  .arrow-link img {
    display: block;
    margin-top: 46px;
    margin-left: 10px;
    width: 10.1333vw;
    /* 38 / 375  */
    height: 10.1333vw;
    /* 38 / 375  */
  }

  @media (min-width: 550px) {
    font-size: clamp(36px, calc(48px + (100vw - 800px) * 16 / 480), 69.33px);
    padding-inline: 95px;
    min-height: 720px;

    .arrow-link img {
      display: block;
      padding-left: 10px;
      margin-top: 68px;
      width: min(14.375vw, 155px);
      /* 72px / 800, cap a 1400px */
      height: min(14.375vw, 155px);
    }
  }

  @media (min-width: 1280px) {
    padding-top: 93px;
    padding-bottom: 126px;

  }
}


#edad_equipo {
  color: #212121;
  display: flex;
  flex-wrap: wrap-reverse;

  .caja-split {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 95px;
    padding-left: 82px;
    padding-right: 82px;


    p.title {
      font-family: var(--font-mono);
      font-size: calc(48px + (100vw - 375px) * 16 / 425);
      font-weight: 400;
      text-transform: uppercase;
      text-decoration: underline;
      text-decoration-thickness: 1px solid;

    }

    p {
      font-family: var(--font-spacegrotesk);
      font-size: min(5.96667vw, 32px);
      /* 22px a 375, cap a 32px a 549 */
      font-weight: 300;
      line-height: 109%;
      letter-spacing: -0.05em;
      padding-bottom: 10px;
    }
  }

  .caja-split:nth-of-type(1) {
    background-color: #FFAB97;
  }


  .caja-split:nth-of-type(2) {
    position: relative;
    overflow: hidden;
    height: 400px;
    padding: 0;
  }


  .img-arbol {
    background-image: url('../imgs/tronco_arbol.jpg');
  }

  @media (min-width: 550px) {

    min-height: 400px;

    .caja-split {
      flex: 0 0 50%;
      min-width: 0;

      padding-left: 8vw;
      padding-right: 8vw;


      p.title {
        font-size: clamp(48px, calc(64px + (100vw - 800px) * 32 / 480), 106.67px);
        line-height: 100%;
        letter-spacing: -0.03em;
      }

      p {
        font-size: clamp(18px, 4vw, 32px);
        /* 22px a 800, cap 32px a 1279 */

      }
    }


    .caja-split:nth-of-type(2) {
      height: auto;
      padding: 0;
    }
  }

  @media (min-width: 1280px) {

    min-height: 720px;

    .caja-split {
      padding-left: 132px;
      padding-right: 132px;


      p.title {
        line-height: 107%;
        letter-spacing: -0.03em;
      }


    }

    .caja-split:nth-of-type(2) {
      height: auto;
      padding: 0;
    }
  }
}


#nos-quedamos {
  background-color: var(--dark);

  padding: 64px;
  padding-bottom: 80px;
  padding-left: 7.466vw;
  /* 28px / 375 */


  p {
    font-family: var(--font-mono);
    font-size: 12.8vw;
    /* 48px / 375 */
    font-weight: 400;
    color: #FFAB97;
    line-height: 99%;
    letter-spacing: -0.01em;
    padding-bottom: 20px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2.5%;

  }

  @media (min-width: 550px) {
    padding-top: 116px;
    padding-bottom: 200px;
    padding-left: min(8vw, 112px);
    /* 64px / 800, cap a 1400px */
    padding-right: min(8vw, 112px);

    p {
      font-size: min(8vw, 112px);
      /* 64px / 800, cap a 1400px */
    }
  }
}

#nuestro-trabajo {
  background-color: #FFFDFA;
  padding: 64px 7.466vw 20px;

  .intro {
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid var(--dark);

    h2 {
      font-family: var(--font-mono);
      font-size: 6.4vw;
      /* 24px / 375 */
      line-height: 1.09;
      text-transform: uppercase;
      padding-bottom: 12px;
    }

    p {
      max-width: 28rem;
      font-family: var(--font-spacegrotesk);
      font-size: calc(22px + (100vw - 375px) * 10 / 425);
      font-weight: 300;
      line-height: 1.09;
    }
  }

  .carousel {
    position: relative;
    overflow: hidden;
    padding-top: 64px;

    .swiper-wrapper {
      display: grid;
      gap: 16px;
    }

    .swiper-slide {
      width: 100%;
      height: auto;
    }

    .slide {
      display: flex;
      flex-direction: column;
      min-height: 100%;

      padding-bottom: 30px;
    }

    .picture {
      display: block;
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
      filter: grayscale(100%);
    }

    h3 {
      font-family: var(--font-spacegrotesk);
      font-size: 1.375rem;
      font-weight: 500;
      line-height: 1.09;
      text-decoration: underline;
      text-underline-offset: 0.08em;
    }

    p {
      font-family: var(--font-spacegrotesk);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.29;
    }

    .desc {
      display: grid;
      gap: 12px;
      padding: 40px 0 20px;
    }

    b {
      font-weight: bold;
    }

    .meta {
      font-family: var(--font-spacegrotesk);
      font-size: 16px;
      line-height: 140%;
      padding-bottom: 20px;
      border-bottom: 0.5px solid var(--accent);
      text-decoration: underline;

      .metric {
        text-decoration: underline;
      }

      .big {
        font-weight: bold;
      }

      .medium {
        font-weight: bold;
      }


      u {
        font-weight: bold;
      }
    }

    .meta.anaya {
      .medium {
        font-weight: 300;
      }

      .big {
        font-weight: 300;
      }
    }

    .meta.adq {
      .medium {
        font-weight: 300;
      }
    }


    .meta.santader {}

    .swiper-button-prev,
    .swiper-button-next {
      display: none;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
      display: none;
    }

    .swiper-navigation-icon {
      display: none;
    }
  }

  @media (min-width: 550px) {
    padding-top: 114px;
    padding-left: clamp(28px, calc(64px + (100vw - 800px) * 26 / 480), 98.67px);
    padding-right: 0;
    padding-bottom: 80px;

    .intro {
      display: block;
      margin-bottom: 100px;
      padding-bottom: 10px;
      border-bottom: 0;

      h2 {
        margin-bottom: 30px;
        font-size: clamp(24px, calc(36px + (100vw - 800px) * 12 / 480), 52px);
      }

      p {
        max-width: 760px;
        font-size: 32px;
        line-height: 1.02;
        letter-spacing: -0.03em;
      }
    }

    .carousel {
      padding-top: 85px;
      overflow: hidden;
      margin-right: 0;

      .swiper-wrapper {
        display: flex;
        gap: 0;
        align-items: stretch;
        padding-top: 28px;
        border-top: 1px solid var(--dark);
      }

      .swiper-slide {
        width: 920px;

      }

      .slide {
        display: grid;
        grid-template-columns: 54.05% 1fr;
        grid-template-rows: 560px;
        gap: 0;
      }

      .picture {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
      }

      .desc {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        background-color: white;
        padding: 24px;
        padding-bottom: 40px;
        margin: auto;
        margin-top: 50px;
        z-index: 1;
        width: 80%;

        p {
          font-size: 24px;
          /* 24px / 800 */
          font-weight: 400;
          line-height: 105%;
        }
      }

      .meta {
        grid-column: 2;
        grid-row: 1;
        background-color: #FFAB97;
        padding: 32px;
        padding-left: 92px;
        padding-right: 92px;
        overflow: hidden;

        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: space-evenly;

        text-decoration: none;

        u {
          text-decoration: none;
          font-weight: 300;
        }

        .metric {
          width: 100%;
          padding-bottom: 8px;
          border-bottom: 1px solid var(--dark);
          text-decoration: none;
          text-align: right;

          span {
            display: block;
          }
        }

        .big {
          font-size: 48px;
          font-weight: 300;
          line-height: 95%;

        }

        .medium {
          font-size: 24px;
          font-weight: 300;
        }

        .small {
          font-size: 14px;
          font-weight: 300;
        }

      }

      .meta.santander {
        .metric {
          .medium {
            font-size: 24px;
            font-weight: 300;
          }

          .small.notsmallontablet {
            font-size: 24px;
            font-weight: 300;
          }
        }
      }

      .meta.anaya {
        .metric {

          .medium {
            font-size: 24px;
            font-weight: 300;

            b {
              font-weight: 300;
            }

            u {
              text-decoration: underline;
            }

          }

          .small.notsmallontablet {
            font-size: 24px;
            font-weight: 300;
          }

          .big {
            font-size: 24px;
            font-weight: 300;

            u {
              text-decoration: underline;
            }
          }
        }
      }

      .meta.adq {
        u {
          text-decoration: underline;
        }
      }


      .meta.fondo-blanco {
        background-color: #FFFDFA;
        border: 1px solid #363636;

      }





      .swiper-button-prev,
      .swiper-button-next {
        display: flex;
        border: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        z-index: 0;
        width: 52px !important;
        height: 52px !important;
        max-height: 52px;
        max-width: 52px;
        margin-top: 0;
        background-position: 0 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: white;

      }

      .swiper-button-prev {
        left: 0;
        right: auto;

        background-image: url('../imgs/left_on.png');
      }

      .swiper-button-next {
        left: 100px;
        right: auto;

        background-image: url('../imgs/right_on.png');
      }

      .swiper-button-prev.swiper-button-disabled {
        left: 0;
        right: auto;
        background-image: url('../imgs/left_off.png');

        opacity: 1;
        /* Swiper pone opacity: 0.35 por defecto, lo anulamos */
      }

      .swiper-button-next.swiper-button-disabled {
        left: 100px;
        right: auto;
        background-image: url('../imgs/right_off.png');
        opacity: 1;
        /* Swiper pone opacity: 0.35 por defecto, lo anulamos */
      }
    }
  }

  @media (min-width: 1280px) {


    .intro {
      margin-bottom: 44px;
    }

    .carousel {}
  }
}

#clientes {
  padding: 64px min(7.46667vw, 64px);
  background-color: #FFD5CB;
  color: #212121;

  .section-head {
    padding: 0 10px 38px 10px;

    h2 {
      font-family: var(--font-mono);
      font-weight: 400;
      font-size: 24px;
      line-height: 109%;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }
  }

  .logos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 16px;
    align-items: center;
  }

  .logo {
    display: block;
    width: auto;

    height: auto;
    max-height: 50px;
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
  }

  @media (min-width: 550px) {
    padding-top: 80px;
    padding-right: min(8vw, 90px);
    padding-bottom: 80px;
    padding-left: min(8vw, 90px);

    .divider {
      margin-top: 0px;
      margin-bottom: 40px;
    }

    .section-head {
      padding-bottom: 20px;


      h2 {
        font-size: min(4.5vw, 48px);
      }
    }

    .logos-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));

      img {
        max-height: 80px;
      }
    }


  }

  @media (min-width: 1280px) {

    margin-inline: auto;
    padding-top: 124px;
    padding-right: min(3.75vw, 98.4375px);
    padding-bottom: 80px;
    padding-left: min(3.75vw, 98.4375px);

    .divider {
      margin-top: 20px;
      ;
      margin-bottom: 100px;
    }

    .section-head {
      padding-bottom: 40px;

      h2 {
        max-width: 30ch;
        font-size: min(3.75vw, 52px);
      }
    }

    .logos-grid {
      grid-template-columns: repeat(7, minmax(0, 1fr));
      column-gap: 26px;
      row-gap: 24px;

      img {
        max-height: 96px;
      }
    }

    .logo {
      max-height: 100px;
      max-width: 100px;
    }
  }
}


#servicios {
  padding: 50px calc(28px + (100vw - 375px) * 36 / 425);
  padding-bottom: 0px;
  background-color: #F4EFEA;

  .head {
    padding-bottom: calc(30px + (100vw - 375px) * 30 / 425);
    border-bottom: 1px solid var(--dark);

    h2 {
      font-family: var(--font-mono);
      font-size: calc(24px + (100vw - 375px) * 12 / 425);
      font-weight: 400;
      line-height: 109%;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }
  }

  .claims {
    padding-bottom: 80px;
  }

  .claim {
    padding: 50px 0;
    border-bottom: 1px solid var(--dark);

    img {
      padding-bottom: 50px;
    }

    h2 {
      font-family: var(--font-spacegrotesk);
      font-size: calc(32px + (100vw - 375px) * 8 / 425);
      font-weight: 300;
      padding-bottom: 20px;
      line-height: 95%;
      letter-spacing: -0.01em;
    }

    p {
      font-family: var(--font-spacegrotesk);
      font-size: calc(24px - (100vw - 375px) * 4 / 425);
      font-weight: 400;
      line-height: 105%;
      letter-spacing: 0.01em;
    }
  }

  .claim:last-of-type {
    border-bottom: 0;
  }

  @media (min-width: 550px) {
    padding-bottom: 140px;
    padding-inline: clamp(28px, calc(64px + (100vw - 800px) * 31 / 480), 105.33px);

    .head {
      padding-bottom: 60px;
      padding-top: 70px;

      h2 {
        font-size: clamp(24px, calc(36px + (100vw - 800px) * 12 / 480), 52px);
      }
    }

    .claims {
      margin-top: 50px;
      border-bottom: 1px solid var(--dark);
    }

    .claim {
      h2 {
        font-size: clamp(32px, calc(40px + (100vw - 800px) * 8 / 480), 50.67px);
      }

      p {
        font-size: clamp(20px, calc(20px + (100vw - 800px) * 4 / 480), 25.33px);
      }
    }
  }

  @media (min-width: 1280px) {
    padding-bottom: 120px;

    .head {
      border-bottom: 1px solid var(--dark);
      margin-bottom: 50px;
    }

    .claims {
      display: flex;
      border-bottom: 1px solid var(--dark);
      padding-bottom: 90px;
    }

    .claim {
      flex: 1;
      padding: 50px 32px;
      border-bottom: 0;
    }

    .claim:first-child {
      padding-left: 0;
    }

    .claim:last-child {
      padding-right: 0;
    }

    .claim+.claim {
      border-left: 1px solid var(--dark);
    }
  }
}


#video {
  position: relative;
  width: 100%;

  video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
    transition: opacity 0.2s ease;
    z-index: 1;

    svg {
      width: 64px;
      height: 64px;
    }

    &:hover {
      opacity: 0.5;
    }

    &:focus-visible {
      outline: 2px solid var(--ink);
      border-radius: 50%;
    }
  }
}


#hasta_aqui {
  display: flex;
  flex-wrap: wrap-reverse;

  .caja-split {
    flex: 0 0 100%;
    min-height: 400px;
  }

  /* Bloque padre de foto */
  .caja-split:nth-of-type(1) {
    position: relative;
    overflow: hidden;

    padding: 0;
  }

  .img-ojo {
    background-image: url('../imgs/ojo.jpg');
    filter: url(#ripple);
  }

  /* Bloque texto */
  .caja-split:nth-of-type(2) {
    background-color: #FFAB97;
    display: flex;
    align-items: center;
    padding: 50px clamp(28px, calc(0.5 * 100vw - 163.5px), 200px);
  }

  .texto {
    display: flex;
    flex-direction: column;
    gap: 32px;

    p {
      font-family: var(--font-spacegrotesk);
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.02em;
      max-width: 16ch;
    }

    p.cta {
      font-weight: 500;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 0.1em;
    }
  }

  @media (min-width: 550px) {
    .caja-split {
      flex: 0 0 50%;
      min-height: 550px;
    }

    .caja-split:nth-of-type(2) {
      /* en split, el padding horizontal ya no necesita compensar el ancho completo */
      padding: 50px 8.5vw;
    }

    .texto p {
      font-size: 5vw;
      letter-spacing: -0.1rem;

    }
  }

  @media (min-width: 1280px) {
    .caja-split {
      min-height: 720px;
    }

    .caja-split:nth-of-type(2) {
      padding: 95px min(7.8125vw, 109px) 95px min(7.8125vw, 109px);
    }

    .texto p {
      font-size: min(3.75vw, 52px);
    }
  }
}

#hablamos {
  background: white;
  padding: 64px clamp(28px, calc(0.5 * 100vw - 163.5px), 64px) 80px;


  h2 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: min(10.666667vw, 96px);
    /* 48px a 375px hasta 96px */
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2.5%;
    text-underline-offset: 15%;
  }

  .subtitulo {
    padding-top: 10px;
    font-family: var(--font-spacegrotesk);
    font-weight: 300;
    font-size: clamp(2rem, 1.8rem + 0.85vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -1%;

  }

  .contacto {
    margin-top: min(16vw, 70.25px);
    /* 60px a 375 hasta 70.25px a 550px */

    a {
      font-family: var(--font-spacegrotesk);
      font-weight: 500;
      font-size: min(5.866666vw, 26px);
      /* 22px a 375px */
      line-height: 109%;
      letter-spacing: -0.05em;
      color: #212121;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  @media (min-width: 550px) {
    min-height: 528px;
    padding-top: 100px;
    padding-left: 8vw;
    padding-right: 10.5vw;

    h2 {
      font-size: min(12vw, 128px);
      /* 96px a 800px */
      text-underline-offset: 8%;
    }

    .subtitulo {
      padding-top: 18px;
      ;
      font-size: min(5vw, 48px);
      /* 40px a 800px */
    }

    .contacto a {
      font-size: min(4vw, 32px);
      margin-top: 102px;
    }
  }

  @media (min-width: 1280px) {
    margin-inline: auto;
    padding-top: 98px;
    padding-bottom: 100px;
    min-height: 625px;

    h2 {
      font-size: min(10vw, 140px);
      /* 128px a 1280px */
      line-height: 100%;
    }

    .subtitulo {
      font-size: min(3.75vw, 52.5px);
      /* 48px a1280px */
    }

    .contacto a {
      font-size: 32px;
      margin-top: 72px;
    }
  }
}


#end {
  background-color: #F4EFEA;
  color: #212121;
  padding: 64px 28px 64px;


  .logo {
    font-family: var(--font-mono);
    font-size: min(17.066667vw, 66px);
    /* 64px / 375, cap a 66px a 550px */
    font-weight: 400;
    line-height: 95%;
    color: #212121;
    text-decoration: none;
    padding-bottom: 32px;
  }

  .tagline {
    font-family: var(--font-mono);
    font-size: calc(64 / 375 * 100vw);
    font-weight: 400;
    line-height: 95%;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    padding: 33px 0;
    max-width: none;
  }


  .divider.inf {
    margin-top: 3px;
    width: 100%;
  }

  .meta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 42px 0 48px;

    .address {
      font-size: 16px;
      font-weight: 300;
      line-height: 129%;

      a {
        text-decoration: underline;
        text-decoration-thickness: 1px;
      }

      span {
        font-family: var(--font-spacegrotesk);
        font-size: 14px;
        line-height: 140%;
      }
    }

    .links {
      a {
        font-size: 14px;
        line-height: 140%;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .legal {
    display: flex;
    flex-direction: column;
    gap: 2px;

    span {
      font-family: var(--font-spacegrotesk);
      font-size: 0.8rem;
      font-weight: 400;
      color: var(--ink);
    }
  }

  @media (min-width: 550px) {
    padding-top: 56px;
    padding-bottom: 72px;
    padding-left: clamp(28px, 3.5vw, 44.765px);
    /* 28px min, 28px a 800, cap 44.765px a 1279 */


    .logo {
      font-size: min(12vw, 120px);
      /* 96px a 800px, cap 120px a 1279 */
      font-weight: 400;
      line-height: 1;
      color: var(--ink);
      text-decoration: none;
      padding-bottom: 32px;
    }

    .tagline {
      font-size: min(12vw, 120px);
      /* 12px a 800px cap a 120px a 1280 */
      font-weight: 400;
      line-height: 95%;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      padding: 33px 0;
      max-width: none;
    }

    .meta {
      flex-direction: row;
      gap: 60px;

      font-size: 20px;
      font-weight: 300;

      .address {
        a {
          font-size: 20px;
          line-height: 105%;
          text-decoration: none;
        }

        span {
          font-size: 14px;
          /* 3.733vw, cap a 1400px */
          line-height: 140%;
          font-weight: 300;
          color: var(--ink);
        }
      }
    }

    .legal {
      span {
        font-size: 14px;
        line-height: 140%;
      }
    }
  }


  @media (min-width: 1280px) {

    margin-inline: auto;
    padding-top: 64px;
    padding-bottom: min(6.25vw, 87.5px);
    /* 80px a 1280, cap 87.5px a 1400 */
    padding-left: 90px;
    padding-right: 90px;

    .tagline {
      font-size: min(9.375vw, 131.25px);
    }

    .logo {
      font-size: min(9.375vw, 131.25px);
      /* 120px a 1280px, cap 131.25px a 1400px */
      font-weight: 400;
      line-height: 1;
      color: var(--ink);
      text-decoration: none;
      padding-bottom: 32px;
    }
  }
}

/*
Classes for animations
*/

.animate {
  animation-play-state: paused;
  opacity: 0;
  will-change: transform, opacity, filter;
  animation-play-state: paused;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.animate.visible {
  animation-play-state: running;
}


.reveal-unblur {
  animation-name: revealUnblur;
}

@keyframes revealUnblur {

  0% {
    opacity: 0.7;
    filter: blur(12px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }

}


.reveal-pulse {
  animation-play-state: paused;
  animation-name: pulseReveal;
}

@keyframes pulseReveal {

  0% {
    opacity: 0;
    filter: blur(14px);
    transform: scale(0.9);
  }

  45% {
    opacity: 1;
    filter: blur(1.7px);
    transform: scale(1.04);
  }

  75% {
    filter: blur(0);

  }

  100% {
    opacity: 1;

    transform: scale(1);
  }

}

.reveal-left {
  animation-name: revealLeft;
}

@keyframes revealLeft {

  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(-60px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }

}


.reveal-right {
  animation-name: revealRight;
}

@keyframes revealRight {

  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(60px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }

}


.breathing-bg__img {

  position: absolute;

  inset: -18px;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;

  transform: scale(1.06);

  will-change: transform;

  z-index: 0;
}

/* Animación imagen del árbol */
.breathing-bg.visible .breathing-bg__img {
  opacity: 1;
  transform: scale(1.06);
  animation:
    bgBreathing 14s ease-in-out infinite 2.2s;
}




@keyframes bgIntro {

  0% {
    opacity: 0;
    transform:
      scale(1.12) translate3d(0, 12px, 0);
  }

  100% {
    opacity: 1;
    transform:
      scale(1.06) translate3d(0, 0, 0);
  }

}

@keyframes bgBreathing {

  0% {
    transform:
      scale(1.06) translate3d(0px, 0px, 0);
  }

  18% {
    transform:
      scale(1.065) translate3d(-2px, 1px, -3px);
  }

  42% {
    transform:
      scale(1.07) translate3d(2px, -3px, 0);
  }

  67% {
    transform:
      scale(1.064) translate3d(-2px, 3px, 1px);
  }

  100% {
    transform:
      scale(1.06) translate3d(0px, 0px, 0);
  }

}