:root {
  --black: oklch(15% 0.004 90);
  --black-soft: oklch(21% 0.006 90);
  --line: oklch(29% 0.008 90);
  --gold: oklch(78% 0.16 82);
  --paper: oklch(95.5% 0.005 250);
  --muted: oklch(65% 0.006 250);
  --sidebar-width: 264px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--black);
  font-family: "Inter", sans-serif;
}

button,
a {
  font: inherit;
}

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

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  overflow-y: auto;
  padding: 26px 22px 24px;
  border-right: 1px solid var(--line);
  background: var(--black);
  color: white;
}

.brand {
  display: block;
  width: 100%;
  margin-bottom: 26px;
}

.mobile-brand {
  display: none;
}

.mobile-brand img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.animated-logo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--black);
}

.animated-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-frame {
  animation: build-frame 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.logo-left {
  animation: build-left 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.logo-right {
  animation: build-right 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.logo-stroke {
  animation: build-stroke 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes build-frame {
  0% { opacity: 0; transform: scale(0.35) rotate(-20deg); }
  7%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
  100% { transform: scale(0.35) rotate(-20deg); }
}

@keyframes build-left {
  0% { opacity: 0; transform: translateX(-180px) rotate(-10deg); }
  10%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
  100% { transform: translateX(-180px) rotate(-10deg); }
}

@keyframes build-right {
  0% { opacity: 0; transform: translateX(180px) rotate(10deg); }
  13%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
  100% { transform: translateX(180px) rotate(10deg); }
}

@keyframes build-stroke {
  0% { opacity: 0; transform: translate(-130px, 90px) rotate(-18deg); }
  16%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
  100% { transform: translate(-130px, 90px) rotate(-18deg); }
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.main-nav a {
  padding: 11px 14px;
  border-radius: 8px;
  color: white;
  font-family: "Anton", sans-serif;
  font-size: 19px;
  letter-spacing: 0.45px;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  transform: translateX(3px);
  background: var(--black-soft);
  color: var(--gold);
  outline: none;
}

.main-nav a.active {
  background: var(--gold);
  color: var(--black);
}

.site-promotion-sidebar,
.site-promotion-mobile {
  display: none;
}

.mqf-promotion-active .site-promotion-sidebar {
  position: relative;
  display: flex;
  margin-top: 18px;
  padding: 12px;
  border: 2px solid white;
  border-radius: 4px;
  background: var(--gold);
  box-shadow: 5px 5px 0 white;
  color: var(--black);
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transform: rotate(-0.6deg);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.mqf-promotion-active .site-promotion-sidebar::after {
  position: absolute;
  right: -23px;
  bottom: -25px;
  width: 80px;
  height: 54px;
  background: repeating-linear-gradient(
    -15deg,
    rgb(11 11 11 / 18%) 0 3px,
    transparent 3px 8px
  );
  content: "";
  transform: rotate(-8deg);
}

.site-promotion-sidebar:hover,
.site-promotion-sidebar:focus-visible {
  box-shadow: 8px 8px 0 white;
  outline: none;
  transform: translateY(-2px) rotate(0);
}

.site-promotion__eyebrow,
.site-promotion__product,
.site-promotion__deadline,
.site-promotion__cta {
  position: relative;
  z-index: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.site-promotion__eyebrow {
  font-size: 11px;
  letter-spacing: 0.09em;
}

.site-promotion__discount {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin: 2px 0 1px;
}

.site-promotion__discount strong {
  font-family: "Anton", sans-serif;
  font-size: 43px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.site-promotion__discount em {
  max-width: 72px;
  padding-bottom: 3px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.05;
}

.site-promotion__product {
  max-width: 175px;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.15;
}

.site-promotion__deadline {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.site-promotion__cta {
  display: flex;
  min-height: 30px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  padding: 8px 9px;
  border-radius: 3px;
  background: var(--black);
  color: white;
  font-size: 10px;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-align: center;
}

.site-promotion__cta b {
  margin-left: 4px;
  color: var(--gold);
}

.mqf-promotion-active .sidebar-footer .quote-button {
  display: none;
}

.sidebar-footer {
  display: flex;
  margin-top: auto;
  flex-direction: column;
  gap: 18px;
  padding-top: 30px;
}

.languages {
  display: inline-flex;
  align-self: flex-start;
  gap: 3px;
  padding: 4px;
  /* oklch(40%) daba 2,14:1 sobre negro, por debajo del 3:1 de WCAG para
     componentes de interfaz. oklch(50%) da 3,1:1 sin cambiar el color. */
  border: 1px solid oklch(50% 0.006 250);
  border-radius: 999px;
}

.languages button {
  min-width: 39px;
  /* Area tactil: 21px -> 25px de alto. El tamano de letra no cambia. */
  padding: 8px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.languages button.active {
  background: var(--gold);
  color: var(--black);
}

.quote-button {
  padding: 14px 15px;
  border-radius: 7px;
  background: var(--gold);
  color: var(--black);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-align: center;
  text-transform: uppercase;
  transition: background 160ms ease, transform 160ms ease;
}

.quote-button:hover,
.quote-button:focus-visible {
  transform: translateY(-2px);
  background: white;
  outline: none;
}

.contact-mini {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 16px;
  border-top: 1px solid oklch(25% 0.006 90);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.sidebar-legal,
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.sidebar-legal a,
.footer-legal a {
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
  padding: 6px 0;
}

.sidebar-legal a:hover,
.sidebar-legal a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--gold);
  text-decoration-color: currentColor;
}

/* Enlace de salto: invisible hasta que recibe el foco de teclado. */
.skip-link {
  position: absolute;
  z-index: 100;
  top: -100px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 0 0 8px 8px;
  background: var(--gold);
  color: var(--black);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: top 140ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid white;
  outline-offset: 2px;
}

.site-content {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  background: var(--paper);
}

.hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 70px clamp(24px, 3.4vw, 64px) clamp(250px, 32vh, 330px);
  background: var(--black);
}

.hero-inner {
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.hero-copy {
  flex: 1 1 560px;
  max-width: 660px;
}

.hero-eyebrow {
  display: inline-block;
  margin-bottom: 26px;
  padding: 6px 16px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: fade-up 0.8s ease both;
}

/* Un solo <h1> con dos lineas. El margen inferior de 22px lo aportaba antes el
   segundo <h1>; la animacion escalonada 0,1s / 0,2s se traslada a los <span>.
   Resultado visual identico al de los dos <h1> anteriores. */
.hero h1 {
  margin: 0 0 22px;
  color: white;
  font-family: "Anton", sans-serif;
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 400;
  line-height: 1.03;
  text-transform: uppercase;
}

.hero h1 > span {
  display: block;
  animation: fade-up 0.8s ease 0.1s both;
}

.hero h1 > .hero-title-accent {
  color: var(--gold);
  animation-delay: 0.2s;
}

.paint-stroke {
  width: 120px;
  height: 13px;
  margin-bottom: 26px;
  background: var(--gold);
  clip-path: polygon(0% 45%, 14% 8%, 38% 32%, 63% 2%, 84% 28%, 100% 12%, 100% 68%, 82% 92%, 56% 62%, 32% 100%, 12% 72%, 0% 88%);
  animation: fade-up 0.8s ease 0.25s both;
}

.hero-subtitle {
  max-width: 520px;
  margin: 0 0 36px;
  color: oklch(85% 0.006 250);
  font-size: 18px;
  line-height: 1.6;
  animation: fade-up 0.8s ease 0.3s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  animation: fade-up 0.8s ease 0.4s both;
}

.primary-action,
.secondary-action {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.primary-action {
  background: var(--gold);
  color: var(--black);
}

.secondary-action {
  padding: 14px 28px;
  border: 2px solid white;
  color: white;
}

.primary-action:hover,
.primary-action:focus-visible,
.secondary-action:hover,
.secondary-action:focus-visible {
  transform: translateY(-3px);
  outline: none;
}

.primary-action:hover,
.primary-action:focus-visible {
  background: white;
}

.secondary-action:hover,
.secondary-action:focus-visible {
  background: white;
  color: var(--black);
}

.scene-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 38px;
  animation: fade-up 0.8s ease 0.5s both;
}

.scene-step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 9px;
  border: 1px solid oklch(38% 0.02 85);
  border-radius: 26px;
  background: oklch(15% 0.004 90 / 78%);
  transition: border-color 400ms ease, background 400ms ease;
}

.scene-step span {
  display: grid;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  background: oklch(30% 0.006 250);
  color: oklch(78% 0.006 250);
  font-family: "Anton", sans-serif;
  font-size: 13px;
}

.scene-step strong {
  color: oklch(72% 0.006 250);
  font-family: "Anton", sans-serif;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 400ms ease;
}

.scene-step.active {
  border-color: var(--gold);
  background: var(--gold);
}

.scene-step.active span {
  background: var(--black);
  color: oklch(85% 0.15 84);
}

.scene-step.active strong {
  color: var(--black);
}

.buy-card {
  flex: 1 1 540px;
  min-width: 320px;
  max-width: 620px;
  padding: 36px 36px 34px;
  border: 1px solid oklch(32% 0.02 85);
  border-radius: 22px;
  background: oklch(19% 0.006 90 / 82%);
  box-shadow: 0 30px 70px -34px rgb(0 0 0 / 80%);
  backdrop-filter: blur(6px);
  animation: fade-up 0.9s ease 0.45s both;
}

.buy-eyebrow {
  margin-bottom: 22px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.buy-option {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid oklch(30% 0.006 250);
  transition: opacity 180ms ease;
}

.buy-option:hover,
.buy-option:focus-visible {
  opacity: 0.75;
}

/* :focus-visible no se activa con raton ni con el dedo, asi que el aspecto
   normal y el de :hover no cambian. */
.buy-option:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.buy-option > img {
  width: 132px;
  height: 106px;
  flex-shrink: 0;
  object-fit: contain;
}

.buy-option strong,
.buy-option small {
  display: block;
}

.buy-option strong {
  color: white;
  font-family: "Anton", sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.12;
  text-transform: uppercase;
}

.buy-option small {
  margin-top: 5px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.buy-card > p {
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid oklch(30% 0.006 250);
  color: oklch(78% 0.006 250);
  font-size: 16px;
  line-height: 1.55;
}

.buy-option-main {
  padding: 18px 0 22px;
}

.buy-benefits {
  display: grid;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid oklch(30% 0.006 250);
  gap: 11px;
  list-style: none;
}

.buy-benefits li {
  position: relative;
  padding-left: 27px;
  color: oklch(88% 0.006 250);
  font-size: 14px;
  line-height: 1.4;
}

.buy-benefits li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--gold);
  content: "✓";
  font-weight: 800;
}

.buy-card > p.install-note {
  margin-top: 0;
  padding: 16px 18px;
  border: 1px solid oklch(35% 0.012 85);
  border-radius: 10px;
  background: oklch(22% 0.008 90);
  font-size: 13px;
}

.install-note strong {
  color: white;
}

.scene-band {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: clamp(250px, 34vh, 350px);
  overflow: hidden;
  pointer-events: none;
}

.scene-skyline {
  position: absolute;
  right: 0;
  bottom: 104px;
  left: 0;
  height: 150px;
  background: url("/assets/img/mqf-skyline-v2-700.webp") repeat-x 0 center / 700px auto;
  background-image: -webkit-image-set(url("/assets/img/mqf-skyline-v2-700.webp") 1x, url("/assets/img/mqf-skyline-v2-1400.webp") 2x);
  background-image: image-set(url("/assets/img/mqf-skyline-v2-700.webp") 1x, url("/assets/img/mqf-skyline-v2-1400.webp") 2x);
  opacity: 0.4;
}

.scene-factory {
  position: absolute;
  bottom: 92px;
  left: -2%;
  z-index: 2;
  height: 68%;
  filter: brightness(1);
  transition: filter 500ms ease;
}

.scene-factory > div {
  position: relative;
  height: 100%;
}

.scene-factory > div > img,
.scene-house img,
.scene-stack img,
.scene-person img {
  display: block;
  width: auto;
  height: 100%;
}

.scene-house {
  position: absolute;
  right: -1%;
  bottom: 92px;
  z-index: 2;
  height: 60%;
  filter: brightness(0.66);
  transition: filter 500ms ease;
}

.scene-stack {
  position: absolute;
  right: 15%;
  bottom: 94px;
  z-index: 3;
  height: 27%;
  transform: translateY(-14px);
  opacity: 0;
  transition: opacity 400ms ease, transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scene-person {
  position: absolute;
  bottom: 92px;
  height: 57%;
  transform-origin: bottom center;
  transition: opacity 500ms ease, filter 500ms ease, transform 500ms ease;
}

.scene-person-home {
  right: 3%;
  z-index: 8;
  transform: scale(1.07);
  filter: brightness(1);
  opacity: 1;
}

.scene-person-wave {
  right: 4%;
  z-index: 4;
  filter: brightness(0.6);
  opacity: 0;
}

.scene-road {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 104px;
  background: url("/assets/img/mqf-road-v2-520.webp") repeat-x 0 center / 520px auto;
  background-image: -webkit-image-set(url("/assets/img/mqf-road-v2-520.webp") 1x, url("/assets/img/mqf-road-v2-1040.webp") 2x);
  background-image: image-set(url("/assets/img/mqf-road-v2-520.webp") 1x, url("/assets/img/mqf-road-v2-1040.webp") 2x);
}

.scene-van {
  --van-left: 16%;
  --van-duration: 0s;
  position: absolute;
  bottom: 26px;
  left: var(--van-left);
  z-index: 5;
  width: clamp(190px, 24%, 320px);
  transform: translateX(-50%);
  filter: brightness(0.6);
  transition: left var(--van-duration) cubic-bezier(0.45, 0.05, 0.55, 0.95), filter 500ms ease;
}

.van-body {
  position: relative;
  width: 100%;
  transform-origin: 60% 100%;
  animation: van-bob 1.05s ease-in-out infinite;
}

.van-body img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 400ms ease;
}

.van-empty {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.speed-lines {
  position: absolute;
  top: 32%;
  left: -24px;
  opacity: 0;
  transition: opacity 300ms ease;
}

.speed-lines i {
  display: block;
  width: 66px;
  height: 4px;
  margin: 7px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold));
  animation: speed-line 1.2s ease-in infinite;
}

.speed-lines i:nth-child(2) {
  width: 46px;
  background: linear-gradient(90deg, transparent, white);
  opacity: 0.7;
  animation-duration: 1.5s;
  animation-delay: 0.3s;
}

.speed-lines i:nth-child(3) {
  width: 58px;
  animation-duration: 1.35s;
  animation-delay: 0.6s;
}

.scene-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  height: 70px;
  background: linear-gradient(to bottom, transparent, var(--paper));
}

.hero.phase-1 .scene-factory,
.hero.phase-2 .scene-factory,
.hero.phase-3 .scene-factory {
  filter: brightness(0.7);
}

.hero.phase-1 .scene-van,
.hero.phase-2 .scene-van {
  filter: brightness(1);
}

.hero.phase-1 .speed-lines,
.hero.phase-3 .speed-lines {
  opacity: 1;
}

.hero.phase-1 .scene-person-home {
  z-index: 4;
  transform: scale(1);
  filter: brightness(0.5);
  opacity: 0.4;
}

.hero.phase-2 .scene-person-home,
.hero.phase-3 .scene-person-home {
  z-index: 4;
  transform: scale(1);
  filter: brightness(0.5);
  opacity: 0;
}

.hero.phase-2 .scene-house,
.hero.phase-3 .scene-house {
  filter: brightness(1);
}

.hero.phase-2 .scene-stack,
.hero.phase-3 .scene-stack {
  transform: translateY(0);
  opacity: 1;
}

.hero.phase-2 .scene-person-wave {
  opacity: 0.55;
}

.hero.phase-3 .scene-person-wave {
  z-index: 8;
  transform: scale(1.07);
  filter: brightness(1);
  opacity: 1;
}

.hero.phase-2 .van-loaded,
.hero.phase-3 .van-loaded {
  opacity: 0;
}

.hero.phase-2 .van-empty,
.hero.phase-3 .van-empty {
  opacity: 1;
}

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

@keyframes van-bob {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}

@keyframes speed-line {
  0% { transform: translateX(80px); opacity: 0; }
  25% { opacity: 0.8; }
  100% { transform: translateX(-320px); opacity: 0; }
}

.home-section {
  padding: 110px clamp(28px, 6vw, 92px);
  background: var(--paper);
}

.section-heading {
  max-width: 800px;
  margin-bottom: 58px;
}

.section-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 15px;
  border: 2px solid var(--black);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.section-heading h2,
.factory-copy h2,
.supply-card h2,
.installation-card h2,
.final-cta h2 {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 400;
  line-height: 1.06;
  text-transform: uppercase;
}

.section-heading > p {
  max-width: 650px;
  margin: 22px 0 0;
  color: oklch(43% 0.008 250);
  font-size: 17px;
  line-height: 1.65;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.process-grid article {
  position: relative;
  min-height: 300px;
  padding: 30px 26px;
  overflow: hidden;
  border: 1px solid oklch(88% 0.008 250);
  border-radius: 16px;
  background: white;
}

.process-grid article::after {
  position: absolute;
  right: -30px;
  bottom: -44px;
  width: 118px;
  height: 118px;
  border: 18px solid oklch(78% 0.16 82 / 18%);
  border-radius: 50%;
  content: "";
}

.process-grid article > span {
  display: block;
  margin-bottom: 45px;
  color: var(--gold);
  font-family: "Anton", sans-serif;
  font-size: 34px;
}

.process-grid h3,
.materials-grid h3 {
  margin: 0 0 12px;
  font-family: "Anton", sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.12;
  text-transform: uppercase;
}

.process-grid p,
.materials-grid p {
  margin: 0;
  color: oklch(45% 0.008 250);
  font-size: 14px;
  line-height: 1.6;
}

.process-grid a,
.materials-grid a {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 20px;
  border-bottom: 2px solid var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.factory-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  padding: 90px clamp(28px, 6vw, 92px);
  overflow: hidden;
  background: var(--black);
  color: white;
}

.section-eyebrow-light {
  border-color: var(--gold);
  color: var(--gold);
}

.factory-copy h2 {
  max-width: 760px;
}

.factory-copy > p {
  max-width: 680px;
  margin: 24px 0 30px;
  color: oklch(78% 0.006 250);
  font-size: 17px;
  line-height: 1.65;
}

.factory-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.factory-points span {
  padding: 9px 13px;
  border: 1px solid oklch(38% 0.02 85);
  border-radius: 999px;
  color: oklch(88% 0.006 250);
  font-size: 12px;
  font-weight: 700;
}

.factory-visual {
  position: relative;
  width: min(620px, 118%);
  justify-self: end;
  isolation: isolate;
  padding: 32px 22px 30px;
  background: var(--black);
  box-shadow: 0 28px 40px rgb(0 0 0 / 45%);
}

.factory-photo {
  position: relative;
  z-index: 0;
  display: block;
  width: 86%;
  height: auto;
  margin: 7px auto 5px;
  transform: rotate(-5.4deg);
  transform-origin: center;
}

.factory-grunge-frame,
.factory-grunge-brush {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: none;
  pointer-events: none;
}

.factory-grunge-frame {
  inset: 2px 0 0;
  width: 100%;
  height: calc(100% - 2px);
  object-fit: fill;
  transform: rotate(0.45deg);
}

.factory-grunge-brush {
  right: 3%;
  bottom: -7px;
  left: 3%;
  width: 94%;
  height: 24px;
  object-fit: fill;
  transform: rotate(-1deg);
}

.materials-section {
  background: oklch(92% 0.006 250);
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.materials-grid article {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(220px, 1.15fr);
  min-height: 370px;
  align-items: center;
  gap: 24px;
  padding: 30px;
  border-radius: 18px;
  background: white;
}

.materials-grid article > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid oklch(88% 0.008 250);
  border-radius: 14px;
  background: oklch(96% 0.006 80);
  object-fit: contain;
  box-shadow: 0 18px 34px rgb(20 20 18 / 9%);
}

.materials-grid article div > span {
  display: inline-block;
  margin-bottom: 15px;
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.supply-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
  padding: 110px clamp(28px, 6vw, 92px);
  background: var(--paper);
}

.supply-card,
.installation-card {
  border-radius: 20px;
}

.supply-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 40px;
  padding: 48px;
  border: 1px solid oklch(88% 0.008 250);
  background: white;
}

.supply-card h2,
.installation-card h2 {
  font-size: clamp(28px, 3.5vw, 43px);
}

.supply-card ul {
  display: grid;
  align-content: center;
  margin: 0;
  padding: 0;
  gap: 13px;
  list-style: none;
}

.supply-card li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid oklch(90% 0.006 250);
  font-size: 14px;
  font-weight: 700;
}

.supply-card li::before {
  position: absolute;
  left: 0;
  color: var(--gold);
  content: "✓";
  font-size: 18px;
  font-weight: 800;
}

.installation-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 430px;
  padding: 38px;
  overflow: hidden;
  background: var(--black);
  color: white;
}

.installation-card > img {
  position: absolute;
  top: -25px;
  right: -45px;
  width: 300px;
  /* Obligatorio antes de declarar width/height en el <img>: sin esta linea el
     atributo height del HTML se aplica y la ilustracion pasa de 300x218 a
     300x435. Reproducido en banco antes de tocar el HTML. */
  height: auto;
  opacity: 0.36;
}

.installation-card > div {
  position: relative;
  z-index: 1;
}

.installation-card span,
.final-cta span {
  display: block;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.installation-card p {
  margin: 18px 0 24px;
  color: oklch(78% 0.006 250);
  font-size: 14px;
  line-height: 1.6;
}

.installation-card a {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--black);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.final-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 90px clamp(28px, 6vw, 92px);
  background: var(--gold);
  color: var(--black);
}

.final-cta > div:first-child {
  max-width: 780px;
}

.final-cta span {
  color: var(--black);
}

.final-cta p {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

.final-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 10px;
}

.final-actions a {
  min-width: 240px;
  padding: 15px 20px;
  border: 2px solid var(--black);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.final-actions a:first-child {
  background: var(--black);
  color: white;
}

/* Montaje: apunte secundario dentro del bloque de acciones. Se neutralizan a
   propósito los estilos de `.final-cta span` y `.final-actions a`, que
   convertirían el aviso en otro botón del tamaño de la calculadora. */
.final-install {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 240px;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.final-cta .final-install span {
  display: block;
  margin: 0;
  color: var(--black);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.final-actions .final-install a {
  align-self: flex-start;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--black);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-content footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 30px clamp(28px, 6vw, 92px);
  background: var(--black);
  color: oklch(70% 0.006 250);
  font-size: 12px;
}

.site-content footer strong {
  color: white;
}

.site-content footer > div {
  display: grid;
  gap: 5px;
}

.site-content footer .footer-legal {
  justify-content: flex-end;
}

.site-content footer .footer-legal a {
  color: white;
  font-size: 13px;
}

.menu-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
  display: none;
  width: 48px;
  height: 48px;
  place-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--black);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  margin: 0 auto;
  background: white;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 820px) {
  .mqf-promotion-active .site-promotion-sidebar {
    display: none;
  }

  .mqf-promotion-active .site-promotion-mobile {
    position: absolute;
    top: 12px;
    right: 82px;
    left: 98px;
    z-index: 19;
    display: flex;
    height: 70px;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    border: 2px solid var(--black);
    border-radius: 7px;
    background: var(--gold);
    box-shadow: 3px 3px 0 var(--black);
    color: var(--black);
    text-transform: uppercase;
  }

  .site-promotion-mobile strong {
    font-family: "Anton", sans-serif;
    font-size: clamp(25px, 7vw, 34px);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
  }

  .site-promotion-mobile span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.05;
  }

  .site-promotion-mobile small {
    margin-top: 3px;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
  }

  .mobile-brand {
    background: var(--black);
    border-radius: 9px;
    display: block;
    height: 70px;
    left: 16px;
    overflow: hidden;
    position: absolute;
    top: 12px;
    width: 70px;
    z-index: 19;
  }

  .menu-toggle {
    display: grid;
  }

  .sidebar {
    width: min(86vw, 310px);
    transform: translateX(-105%);
    box-shadow: 18px 0 45px rgb(0 0 0 / 28%);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .site-content {
    margin-left: 0;
  }

  .hero {
    min-height: 100svh;
    padding: 112px 24px clamp(300px, 38vh, 380px);
  }

  .hero-inner {
    flex-direction: column;
  }

  .hero-copy,
  .buy-card {
    width: 100%;
    max-width: none;
  }

  .buy-card {
    min-width: 0;
  }

  .scene-factory {
    left: -18%;
  }

  .scene-house {
    right: -18%;
  }

  .scene-person {
    right: -5%;
  }

  .process-grid,
  .factory-section,
  .materials-grid,
  .supply-section,
  .supply-card {
    grid-template-columns: 1fr;
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-visual {
    width: 100%;
    max-width: 700px;
    justify-self: center;
  }

  .materials-grid article {
    grid-template-columns: minmax(130px, 0.7fr) minmax(200px, 1.3fr);
  }

  .final-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .mqf-promotion-active .site-promotion-mobile {
    right: 78px;
    left: 94px;
    gap: 6px;
    padding-inline: 7px;
  }

  .site-promotion-mobile strong {
    font-size: clamp(22px, 7vw, 29px);
  }

  .site-promotion-mobile span {
    font-size: 9px;
  }

  .scene-band {
    height: 230px;
  }

  .scene-skyline {
    bottom: 72px;
    height: 112px;
    background-size: 480px auto;
  }

  .scene-road {
    height: 72px;
    background-size: 380px auto;
  }

  .scene-factory {
    bottom: 66px;
    left: -10%;
    height: 42%;
  }

  .scene-house {
    right: -10%;
    bottom: 66px;
    height: 38%;
  }

  .scene-stack {
    right: 12%;
    bottom: 68px;
    height: 20%;
    transform: translateY(-8px);
  }

  .scene-person {
    bottom: 66px;
    height: 38%;
  }

  .scene-person-home {
    right: -2%;
  }

  .scene-person-wave {
    right: 0;
  }

  .scene-van {
    bottom: 18px;
    width: clamp(112px, 31vw, 124px);
  }

  .scene-fade {
    height: 52px;
  }

  .home-section,
  .factory-section,
  .supply-section,
  .final-cta {
    padding: 76px 22px;
  }

  .process-grid,
  .materials-grid article {
    grid-template-columns: 1fr;
  }

  .process-grid article {
    min-height: 260px;
  }

  .materials-grid article > img {
    max-height: 210px;
  }

  .supply-card {
    padding: 30px 24px;
  }

  .site-content footer {
    flex-direction: column;
  }

  .site-content footer .footer-legal {
    justify-content: flex-start;
  }
}

@media (max-height: 1000px) {
  .sidebar {
    padding: 14px 18px;
    scrollbar-width: none;
  }

  .sidebar::-webkit-scrollbar {
    display: none;
  }

  .brand {
    width: 132px;
    margin: 0 auto 10px;
  }

  .animated-logo {
    border-radius: 10px;
  }

  .main-nav a {
    padding: 7px 12px;
    font-size: 17px;
  }

  .sidebar-footer {
    gap: 10px;
    padding-top: 12px;
  }

  .mqf-promotion-active .site-promotion-sidebar {
    margin-top: 10px;
    padding: 9px 10px;
    box-shadow: 3px 3px 0 white;
  }

  .site-promotion__discount strong {
    font-size: 36px;
  }

  .site-promotion__product {
    margin-top: 3px;
  }

  .site-promotion__deadline {
    margin-top: 3px;
  }

  .site-promotion__cta {
    margin-top: 6px;
    min-height: 28px;
    padding: 5px 8px;
    line-height: 1.1;
  }

  .languages button {
    min-width: 36px;
    padding: 5px 8px;
  }

  .quote-button {
    padding: 11px 13px;
  }

  .contact-mini {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .animated-logo,
  .animated-logo img {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .van-body,
  .speed-lines i {
    animation: none !important;
  }
}

.mqf-whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 84px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px 0 16px;
  /* Amarillo mostaza corporativo plano con icono negro: ni verde de marca, ni
     dorado metalico, ni resplandor. El borde y la sombra son discretos y solo
     sirven para despegarlo del fondo claro de las paginas legales. */
  border: 2px solid rgba(11, 11, 10, 0.3);
  border-radius: 999px;
  background: #f2b400;
  color: #0b0b0a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.mqf-whatsapp-float:hover {
  transform: translateY(-3px);
  border-color: rgba(11, 11, 10, 0.6);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.mqf-whatsapp-float:focus-visible {
  outline: 3px solid #0b0b0a;
  outline-offset: 3px;
}

.mqf-whatsapp-float__icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  color: #0b0b0a;
  fill: currentColor;
}

@media (max-width: 640px) {
  .mqf-whatsapp-float {
    right: 16px;
    bottom: 82px;
    width: 58px;
    min-height: 58px;
    justify-content: center;
    padding: 0;
  }

  .mqf-whatsapp-float__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ==========================================================================
   Primera pantalla movil de la portada (`index.html`, `body.home-page`).

   Solo existe por debajo de 820px, que es el punto en el que la portada ya
   cambiaba a la cabecera compacta (logo + promocion + menu). En escritorio se
   queda en `display: none` y la portada arranca en `.hero` exactamente igual
   que antes. Nada de lo que hay debajo -hero, animacion de la furgoneta y
   resto de secciones- se toca: esta pantalla se antepone, no sustituye.
   ========================================================================== */

.mobile-cover {
  display: none;
}

@media (max-width: 820px) {
  .home-page .mobile-cover {
    position: relative;
    z-index: 1;
    display: grid;
    overflow: hidden;
    min-height: 100svh;
    /* Deja libre la cabecera compacta, que es absoluta sobre el documento:
       12px de margen + 70px del logo y de la promocion. */
    padding: calc(96px + env(safe-area-inset-top, 0px)) 22px 14px;
    background: var(--black);
    grid-template-rows: 1fr auto auto;
  }

  /* Resplandor calido detras de la ventana, sin brillo metalico sobre el
     amarillo plano de la promocion ni del boton. */
  .home-page .mobile-cover::before {
    position: absolute;
    z-index: 0;
    top: 14%;
    right: -38%;
    width: 100%;
    height: 64%;
    background: radial-gradient(closest-side, rgba(242, 180, 0, 0.32), rgba(242, 180, 0, 0) 72%);
    content: "";
    pointer-events: none;
  }

  /* Velo que garantiza el contraste del texto sobre la ventana. */
  .home-page .mobile-cover::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(100deg, var(--black) 26%, rgba(11, 11, 10, 0.55) 62%, rgba(11, 11, 10, 0) 100%);
    content: "";
    pointer-events: none;
  }

  .home-page .mobile-cover__product {
    position: absolute;
    z-index: 0;
    top: 47%;
    right: -36%;
    width: auto;
    height: min(64%, 520px);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .home-page .mobile-cover__copy {
    position: relative;
    z-index: 2;
    align-self: center;
    width: 100%;
    max-width: 520px;
    padding-block: 6px;
  }

  .home-page .mobile-cover__eyebrow {
    display: block;
    /* Ancho ajustado al texto para que el filete dorado termine donde termina
       la linea, como en la referencia. */
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px;
    padding-bottom: 11px;
    border-bottom: 2px solid var(--gold);
    color: var(--gold);
    font-size: clamp(9px, 2.7vw, 12px);
    font-weight: 800;
    letter-spacing: 0.075em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .home-page .mobile-cover__title {
    margin: 0 0 14px;
    color: white;
    font-family: "Anton", sans-serif;
    font-size: clamp(36px, 11.4vw, 60px);
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 0.95;
    text-transform: uppercase;
  }

  .home-page .mobile-cover__title span {
    display: block;
  }

  .home-page .mobile-cover__title-accent {
    color: var(--gold);
  }

  .home-page .mobile-cover__text {
    max-width: 21em;
    margin: 0 0 18px;
    color: oklch(85% 0.006 250);
    font-size: clamp(13px, 3.9vw, 16px);
    line-height: 1.45;
  }

  /* Amarillo plano, sin degradado ni resplandor: tiene que leerse como boton
     y no como etiqueta. */
  .home-page .mobile-cover__cta {
    display: flex;
    width: 100%;
    max-width: 430px;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 11px 18px;
    border-radius: 6px;
    background: var(--gold);
    color: var(--black);
    font-family: "Anton", sans-serif;
    font-size: clamp(16px, 4.8vw, 21px);
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.08;
    text-align: left;
    text-transform: uppercase;
    transition: background 180ms ease, transform 180ms ease;
  }

  .home-page .mobile-cover__cta:hover,
  .home-page .mobile-cover__cta:focus-visible {
    background: white;
    outline: none;
    transform: translateY(-2px);
  }

  .home-page .mobile-cover__cta:focus-visible {
    outline: 3px solid white;
    outline-offset: 3px;
  }

  .home-page .mobile-cover__cta-icon {
    width: clamp(26px, 7.4vw, 32px);
    height: clamp(26px, 7.4vw, 32px);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  /* Informacion secundaria: separador fino, sin caja, sin fondo y sin aspecto
     de boton. */
  .home-page .mobile-cover__trust {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid oklch(38% 0.02 85);
  }

  .home-page .mobile-cover__trust-icon {
    width: clamp(28px, 8vw, 34px);
    height: clamp(28px, 8vw, 34px);
    flex: none;
    color: var(--gold);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .home-page .mobile-cover__trust strong {
    display: block;
    color: white;
    font-family: "Anton", sans-serif;
    font-size: clamp(15px, 4.4vw, 19px);
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .home-page .mobile-cover__trust span {
    display: block;
    margin-top: 3px;
    color: oklch(72% 0.006 250);
    font-size: clamp(9.5px, 3vw, 12px);
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  /* Indicacion discreta de que la pagina continua debajo. */
  .home-page .mobile-cover__scroll {
    position: relative;
    z-index: 2;
    display: flex;
    width: 46px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0;
    color: var(--gold);
    animation: mqf-cover-nudge 2.4s ease-in-out infinite;
  }

  .home-page .mobile-cover__scroll svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }

  @keyframes mqf-cover-nudge {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(5px);
    }
  }

  /* El hero ya no tiene que reservar hueco para el logo ni para la promocion,
     que ahora viven sobre la pantalla nueva; solo para el boton de menu, que
     es fijo y llega hasta los 66px. Es el unico ajuste que necesita el
     recorrido actual para arrancar justo despues del primer pantallazo. */
  .home-page .hero {
    padding-top: 78px;
  }

  /* Promocion de la cabecera con la composicion de la referencia: descuento y
     mes en la primera linea, vigencia debajo. Los textos y las fechas siguen
     saliendo de `promotion.js`; aqui solo cambia la colocacion. */
  .mqf-promotion-active .home-page .site-promotion-mobile {
    flex-wrap: wrap;
    gap: 1px 7px;
    padding: 6px 8px;
    line-height: 1;
  }

  .home-page .site-promotion-mobile > span {
    display: contents;
  }

  .home-page .site-promotion-mobile strong {
    font-size: clamp(21px, 6.2vw, 29px);
  }

  .home-page .site-promotion-mobile b {
    font-family: "Anton", sans-serif;
    font-size: clamp(19px, 5.8vw, 27px);
    font-weight: 400;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .home-page .site-promotion-mobile small {
    width: 100%;
    margin-top: 1px;
    font-size: clamp(8px, 2.5vw, 10px);
    text-align: center;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .home-page .mobile-cover__scroll {
    animation: none;
  }
}

/* Tabletas verticales: con la columna de texto limitada a 520px, la ventana se
   quedaba fuera de plano por la derecha. Se recupera dentro del encuadre. */
@media (min-width: 600px) and (max-width: 820px) {
  .home-page .mobile-cover::before {
    right: -12%;
    width: 72%;
  }

  .home-page .mobile-cover__product {
    right: -6%;
    height: min(58%, 560px);
  }
}

/* Moviles cortos (320x568) y apaisados estrechos: la pantalla se compacta para
   que el boton principal siga viendose sin desplazar. */
@media (max-width: 820px) and (max-height: 620px) {
  .home-page .mobile-cover {
    padding-top: calc(90px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
  }

  .home-page .mobile-cover__eyebrow {
    margin-bottom: 9px;
    padding-bottom: 8px;
  }

  .home-page .mobile-cover__title {
    margin-bottom: 10px;
    font-size: clamp(31px, 9.8vw, 44px);
  }

  .home-page .mobile-cover__text {
    margin-bottom: 13px;
    font-size: clamp(12.5px, 3.6vw, 15px);
  }

  .home-page .mobile-cover__cta {
    min-height: 52px;
    font-size: clamp(15px, 4.4vw, 19px);
  }

  .home-page .mobile-cover__trust {
    margin-top: 12px;
    padding-top: 10px;
  }

  .home-page .mobile-cover__scroll {
    height: 24px;
    margin-top: 6px;
  }
}

/* ==========================================================================
   Escritorio estrecho (821px - 1150px): tableta y movil en apaisado.

   Por encima de 820px la web ya usa el diseno de escritorio, pero dos rejillas
   llevaban minimos en pixeles que no caben en un ancho de 844px (movil en
   apaisado): la tarjeta de compra del hero y las fichas de materiales. El
   documento crecia hasta 990px y el texto de las fichas quedaba cortado.

   A partir de 1151px el documento ya no desborda con los minimos originales,
   asi que la franja se corta ahi: por encima no se aplica ninguna de estas
   reglas y 1366 y 1920 quedan intactos (verificado por estilo computado).
   ========================================================================== */

@media (min-width: 821px) and (max-width: 1150px) {
  .buy-card {
    min-width: 0;
  }

  /* Con la tarjeta ya estrecha, el texto de cada opcion de compra debe poder
     partirse: sin esto el bloque de texto conserva su ancho minimo y sobresale
     unos pixeles por el borde derecho (visible en ingles a 821px). */
  .buy-option > span {
    min-width: 0;
  }

  /* Las fichas de materiales pasan a una columna, igual que ya hacen por
     debajo de 820px: con dos columnas no caben sus minimos (150px + 220px)
     y el texto quedaba cortado por el borde derecho. */
  .materials-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .materials-grid article {
    grid-template-columns: minmax(130px, 0.7fr) minmax(200px, 1.3fr);
  }
}