@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/proxima-nova-regular.woff2') format('woff2'),
       url('../fonts/proxima-nova-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/proxima-nova-semibold.woff2') format('woff2'),
       url('../fonts/proxima-nova-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #C8102E;
  --dark: #211F1F;
  --gray-count: #D2C3C3;
  --page-w: 1024px;
  --font: proxima-nova, Arial, Helvetica Neue, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark);
  background: #fff;
  padding-top: 62px;
}

.wrap {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 40px;
}

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

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: var(--red);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
  z-index: 100;
}

.nav__topline {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 12px;
  background: #fff;
}

.nav__inner {
  width: 100%;
  height: 100%;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo img { display: block; height: 20px; width: auto; }

.nav__links {
  display: flex;
  gap: 28px;
}

.nav__links a {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .04em;
  color: #fff;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .6s ease-out, transform .6s ease-out, letter-spacing 1.2s ease;
}

.nav__links a.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.nav__links a:hover {
  letter-spacing: .12em;
}

/* Ítem cuya sección está activa en el viewport (scrollspy en
   scroll-effects.js). Debe ir después de .is-visible para ganarle
   la opacidad en cascada. */
.nav__links a.is-active {
  opacity: .5;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1);
  animation: hero-bg-zoom-out 2.4s ease-out forwards;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero__logo {
  display: block;
  width: 600px;
  max-width: 80vw;
  height: auto;
  margin: 0 auto 64px;
  opacity: 0;
  animation: hero-fade-in 1.8s ease-out .5s forwards;
}

.hero__title {
  margin: 0;
  color: #fff;
  font-size: 45px;
  line-height: .92;
  font-weight: 600;
  opacity: 0;
  animation: hero-fade-in-up 1s ease-out 1s forwards;
}

@keyframes hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-fade-in-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-bg-zoom-out {
  from { opacity: 0; transform: scale(1.15); }
  to { opacity: .09; transform: scale(1); }
}

/* ---------- Que hacemos ---------- */

.que-hacemos {
  height: 1050px;
  background: #fff;
  padding: 90px 0 90px;
}

/* Cascada de entrada de "que hacemos": frase, linea roja, titulo, parrafo,
   foto 1, foto 2, foto 3, en ese orden. transition-delay se aplica cada vez
   que la transicion arranca (no solo en la carga inicial de pagina), asi
   que estos delays son siempre relativos al momento en que cada elemento
   entra al viewport, no a la carga de la pagina. En desktop, fotos y texto
   comparten la misma fila (misma posicion de scroll), asi que el orden
   secuencial solo se nota gracias a este pequeno delay entre cada
   elemento. En tablet/mobile la fila se apila en columna (ver
   responsive.css) y esos elementos (titulo/parrafo/fotos) ya entran en su
   propio momento por posicion, asi que ahi se resetea a 0.
   Arrancan en 1s (no 0s) para darle margen a que la animacion del hero
   termine antes de que empiece esta cascada, cuando "que hacemos" ya es
   visible apenas se carga la pagina. Ese +1s esta sumado por igual a los
   7 pasos (no solo al primero) para no romper el orden relativo entre
   ellos — ver la lección de la iteración anterior en la memoria del
   proyecto antes de tocar esto. */
.section-intro[data-reveal] { transition-delay: 1s; }
.rule[data-reveal] { transition-delay: 1.15s; }
.brand-tag[data-reveal] { transition-delay: 1.3s; }
.que-hacemos__text p[data-reveal] { transition-delay: 1.45s; }
.collage-photo--a[data-reveal] { transition-delay: 1.6s; }
.collage-photo--b[data-reveal] { transition-delay: 1.75s; }
.collage-photo--c[data-reveal] { transition-delay: 1.9s; }

/* Cascada de "que compramos": linea, titulo, lista 1, lista 2, slideshow.
   Mismo esquema que "que hacemos" pero sin el +1s inicial (ese es solo
   para no pisarse con la animacion del hero; este bloque esta lejos del
   tope). Selectores scopeados: .section-title__rule tambien existe en
   proveedores. En tablet/mobile se resetea a 0 (ver responsive.css). */
.que-compramos .section-title__rule[data-reveal] { transition-delay: 0s; }
.que-compramos .section-title[data-reveal] { transition-delay: .15s; }
.que-compramos__col[data-reveal] { transition-delay: .3s; }
.que-compramos__col--shift[data-reveal] { transition-delay: .45s; }
.slideshow[data-reveal] { transition-delay: .6s; }

/* Cascada de "contacto": linea, titulo, datos (un grupo), foto d, e, f.
   .rule-white tambien existe en ventajas, por eso el scope. */
.contacto .rule-white[data-reveal] { transition-delay: 0s; }
.contacto .section-title[data-reveal] { transition-delay: .15s; }
.contacto__info p[data-reveal] { transition-delay: .3s; }
.collage-photo--d[data-reveal] { transition-delay: .45s; }
.collage-photo--e[data-reveal] { transition-delay: .6s; }
.collage-photo--f[data-reveal] { transition-delay: .75s; }

.section-intro {
  max-width: 780px;
  margin: 0 auto 54px;
  text-align: center;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--red);
}

.rule {
  display: block;
  width: 60px;
  height: 6px;
  margin: 0 auto 120px;
  background: var(--red);
}

.que-hacemos__row {
  display: flex;
  align-items: center;
  gap: 60px;
}

.que-hacemos__text { flex: 0 0 420px; }

.brand-tag {
  margin: 0 0 32px;
  font-weight: 600;
  font-size: 48px;
  line-height: .85;
  color: var(--red);
}

.brand-tag__sub {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  font-weight: 600;
}

.brand-tag__sac { font-size: 14px; }

.que-hacemos__text p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 26px;
  font-weight: 300;
  color: var(--dark);
}

.que-hacemos__collage {
  position: relative;
  flex: 0 0 480px;
  height: 480px;
}

.collage-photo {
  position: absolute;
  border-radius: 0 18px 0 18px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}

.collage-photo--a {
  width: 480px;
  height: 240px;
  top: 0;
  right: 0;
  box-shadow: none;
  border-radius: 0 18px 0 0;
  z-index: 1;
}

.collage-photo--b {
  width: 340px;
  height: 170px;
  top: 195px;
  left: -120px;
  box-shadow: none;
  border-radius: 0 18px 0 0;
  z-index: 2;
}

.collage-photo--c {
  width: 320px;
  height: 160px;
  top: 320px;
  right: 0;
  box-shadow: none;
  border-radius: 0 18px 0 0;
  z-index: 1;
}

/* ---------- Analizador ---------- */

.analizador {
  height: 290px;
  background: var(--red);
  display: flex;
  align-items: center;
}

.analizador__row {
  display: flex;
  align-items: center;
  gap: 60px;
}

.analizador__text {
  flex: 1;
  margin: 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 300;
}

.analizador__photo {
  position: relative;
  flex: 0 0 315px;
  height: 236px;
  border-radius: 0 18px 0 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(200, 16, 46, 0), rgba(200, 16, 46, .6) 100%);
  pointer-events: none;
}

/* ---------- Que compramos (fondo oscuro) ---------- */

.que-compramos {
  position: relative;
  height: 800px;
  overflow: hidden;
  background-color: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.que-compramos__bg {
  position: absolute;
  top: -90px;
  left: 0;
  right: 0;
  bottom: -90px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .1;
}

.que-compramos > .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

.section-title {
  margin: 0 0 40px;
  color: #fff;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 600;
}

.section-title__rule {
  display: block;
  width: 60px;
  height: 6px;
  margin: 0 0 24px;
  background: var(--red);
}

.section-title__eyebrow {
  display: block;
  color: var(--red);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 4px;
}

.proveedores .section-title__eyebrow { font-size: 20px; }

.section-title__main {
  display: block;
  color: var(--red);
  font-size: 35px;
  font-weight: 600;
  line-height: 1.1;
}

.que-compramos .wrap {
  padding-left: 24px;
  padding-right: 24px;
}

.que-compramos__row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.que-compramos__left {
  flex: 0 0 464px;
  width: 464px;
}

.que-compramos__lists {
  display: flex;
  gap: 40px;
}

.que-compramos__col {
  flex: 0 0 150px;
  color: #fff;
  font-weight: 300;
}

.que-compramos__col:nth-child(2) { flex: 1; }

.que-compramos__col--shift { margin-top: 80px; }

.col-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--red);
}

.col-title--wide { line-height: 1.3; }

.que-compramos__col ul,
.ventajas__list,
.proveedores__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.que-compramos__col li,
.ventajas__list li,
.proveedores__col li {
  position: relative;
  padding-left: 1em;
}

.que-compramos__col li::before,
.ventajas__list li::before,
.proveedores__col li::before {
  content: "-";
  position: absolute;
  left: 0;
}

.que-compramos__col li { margin: 0 0 6px; font-size: 15px; line-height: 1.26; }

.slideshow {
  position: relative;
  flex: 0 0 480px;
  min-width: 0;
  margin-top: 80px;
}

.slideshow__viewport {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 18px 0 18px 0;
  overflow: hidden;
  background: #000;
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease-in-out;
}

.slideshow__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 14px;
}

.slideshow__prev,
.slideshow__next {
  background: transparent;
  border: 0;
  color: var(--gray-count);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

.slideshow__count {
  color: var(--gray-count);
  font-size: 14px;
}

.ventajas { height: 600px; background: var(--red); padding: 90px 0 100px; }

.rule-white {
  display: block;
  width: 60px;
  height: 6px;
  margin: 0 0 24px;
  background: #fff;
}

.ventajas .section-title { margin-bottom: 80px; }

.ventajas__list { margin-bottom: 80px; }

.ventajas__list li {
  margin: 0 0 10px;
  color: #fff;
  font-size: 15px;
  line-height: .9;
  font-weight: 300;
}

.ventajas__note {
  margin: 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
}

/* ---------- Proveedores ---------- */

.proveedores { background: #fff; padding: 90px 0 110px; }

.proveedores__row {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
}

.proveedores__col li {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.44;
}

/* ---------- Contacto ---------- */

.contacto {
  position: relative;
  height: 590px;
  overflow: hidden;
  background-color: var(--red);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contacto__bg {
  position: absolute;
  top: -105px;
  left: 0;
  right: 0;
  bottom: -105px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .12;
}

.contacto > .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

.contacto__row {
  display: flex;
  align-items: center;
  gap: 80px;
}

.contacto__collage {
  position: relative;
  flex: 0 0 622px;
  height: 338px;
}

.contacto__collage .collage-photo { overflow: hidden; box-shadow: none; }
.contacto__collage .collage-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.collage-photo--d { width: 350px; height: 200px; top: 0; left: 135px; z-index: 1; border-radius: 0 18px 0 18px; }
.collage-photo--e { width: 242px; height: 144px; top: 194px; left: 0; z-index: 2; border-radius: 0 18px 0 18px; }
.collage-photo--f { width: 160px; height: 260px; top: 78px; left: 412px; z-index: 2; border-radius: 0 18px 0 18px; }

.contacto__info { flex: 1; }

.contacto__info .section-title { margin-bottom: 116px; }

.contacto__info p {
  margin: 0 0 10px;
  color: #fff;
  font-size: 15px;
  line-height: .9;
}

.contacto__info p a { text-decoration: underline; }

/* ---------- Footer ---------- */

.footer {
  position: relative;
  height: 170px;
  background: var(--dark);
  color: #fff;
  text-align: center;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer p { margin: 0; }

.footer__bottomline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 12px;
  background: #fff;
}

/* ---------- Scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}