/* ==========================================================================
   PÁGINAS — estilos propios de cada pantalla
   ========================================================================== */

/* ---------- Banner (Inicio y Sobre nosotros) ---------- */

.hero {
  margin-top: 41px;
}

.hero__img {
  width: 100%;
  aspect-ratio: 1280 / 536;
  object-fit: cover;
  border-radius: var(--radius-banner);
  background: var(--color-sky);
}

@media (max-width: 700px) {
  .hero__img {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Inicio: clientes ---------- */

.clients__row {
  display: flex;
  align-items: stretch;
  gap: 63px;
  margin-top: 24px;
}

.clients__brand {
  display: flex;
  flex: 0 0 545px;
  align-items: center;
  justify-content: center;
  height: 289px;
  padding: 24px 48px;
  border-radius: var(--radius-card);
  background: var(--brand, var(--color-thermotek));
}

.clients__brand img {
  max-height: 100%;
  object-fit: contain;
}

.clients__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  max-width: 499px;
}

.clients__text {
  font-size: var(--fs-body);
  line-height: 1.3;
  color: #000;
}

.clients__next {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 88px;
  height: 87px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-orange);
  transition: background-color 0.2s;
}

.clients__next:hover {
  background: var(--color-orange-dark);
}

.clients__next img {
  width: 36px;
  height: 36px;
}

@media (max-width: 1100px) {
  .clients__row {
    flex-wrap: wrap;
    gap: 24px;
  }

  .clients__brand {
    flex: 1 1 100%;
    height: 240px;
  }

  .clients__info {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .clients__brand {
    height: 200px;
    padding: 20px 24px;
  }

  .clients__next {
    width: 64px;
    height: 63px;
  }
}

/* ---------- Sobre nosotros ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 625px) minmax(0, 542px);
  justify-content: space-between;
  gap: 48px 40px;
  margin-top: 45px;
}

.about__intro {
  padding-block: 20px;
}

.about__kicker {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-orange);
}

.about__subtitle {
  margin-top: 14px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
  color: #1a4576;
}

.about__text {
  margin-top: 14px;
  font-size: var(--fs-lead);
  line-height: 1.2;
  color: var(--color-ink);
}

.about__text p + p {
  margin-top: 0;
}

.about__block {
  margin-top: 45px;
}

.about__block--mission {
  margin-top: 71px;
}

.about__block h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
  color: #1a4576;
}

.about__block > p {
  margin-top: 22px;
  font-size: var(--fs-lead);
  line-height: 1.2;
  color: #000;
}

.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 31px 21px;
  padding-block: 9px;
  margin-top: 4px;
}

.value {
  display: flex;
  align-items: center;
  gap: 22px;
}

.value__icon {
  flex: none;
  width: 81px;
  height: 81px;
  border-radius: 50%;
  object-fit: cover;
}

.value__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

.value__text {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.brands {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-radius: var(--radius-brand);
  background: var(--brand);
}

.brand-card--thermotek {
  --brand: var(--color-thermotek);
  min-height: 406px;
}

.brand-card--impac {
  --brand: var(--color-impac);
  min-height: 343px;
}

.brand-card--osel {
  --brand: var(--color-osel);
  min-height: 323px;
}

.brand-card--thermotek img {
  width: min(410px, 100%);
  height: auto;
}

.brand-card--impac img {
  width: min(300px, 100%);
  height: auto;
}

.brand-card--osel img {
  width: min(380px, 100%);
  height: auto;
}

@media (max-width: 1100px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .brands {
    gap: 24px;
  }

  .brand-card--thermotek,
  .brand-card--impac,
  .brand-card--osel {
    min-height: 260px;
  }
}

@media (max-width: 700px) {
  .values {
    grid-template-columns: minmax(0, 1fr);
  }

  .value__icon {
    width: 64px;
    height: 64px;
  }

  .about__block--mission {
    margin-top: 48px;
  }
}

/* ---------- Producto ---------- */

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 648px) minmax(0, 1fr);
  gap: 24px 87px;
  margin-top: 41px;
}

.product-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  aspect-ratio: 648 / 535;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-product-bg);
}

.product-hero__media img {
  width: 80.5%;
  height: 97.5%;
  object-fit: contain;
}

.product-hero__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-navy);
  text-wrap: balance;
}

.product-hero__text {
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--color-ink);
}

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

.product-faq {
  display: flex;
  flex-direction: column;
  gap: 45px;
  margin-top: 65px;
}

.product-faq__download {
  align-self: center;
  width: min(630px, 100%);
}

.contact-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 706px);
  align-items: start;
  gap: 32px 48px;
  margin-top: 123px;
}

.contact-box__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-navy);
}

.contact-box__lead {
  margin-top: 55px;
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-heading-alt);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 257px;
  padding: 24px;
  border-radius: var(--radius-panel);
  background: var(--color-panel);
}

.contact-form .btn {
  align-self: flex-end;
  min-width: 197px;
}

@media (max-width: 1100px) {
  .product-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-faq {
    gap: 24px;
  }

  .contact-box {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 72px;
  }

  .contact-box__lead {
    margin-top: 16px;
  }
}

@media (max-width: 700px) {
  .product-hero__controls {
    gap: 12px;
  }
}

/* ---------- Cotización ---------- */

.quote-title {
  margin-top: 60px;
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-navy);
  text-wrap: balance;
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 628px) minmax(0, 549px);
  align-items: start;
  justify-content: space-between;
  gap: 40px 24px;
  margin-top: 40px;
}

.quote-list {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.quote-item {
  display: grid;
  grid-template-columns: 143px minmax(0, 1fr);
  gap: 17px;
}

.quote-item__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 156px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-surface);
}

.quote-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quote-item__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-navy);
}

.quote-item__text {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: #000;
}

.quote-item__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 14px;
}

.quote-item__controls .stepper {
  width: 146px;
}

.quote-item__controls .stepper:nth-child(2) {
  width: 142px;
}

.quote-item__controls .btn {
  min-height: 51px;
  padding-inline: 31px;
  font-size: var(--fs-body);
}

.quote-panel {
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.quote-panel__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-navy);
}

.quote-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 28px;
  font-size: var(--fs-small);
  color: var(--color-ink);
}

.quote-summary li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.quote-panel .field {
  margin-top: 8px;
}

.quote-panel .btn {
  display: flex;
  width: min(386px, 100%);
  min-height: 51px;
  margin: 24px auto 0;
}

.quote-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  border-radius: var(--radius-card);
  background: var(--color-sky);
  text-align: center;
}

.quote-empty p {
  margin-bottom: 24px;
  font-size: var(--fs-lead);
  color: var(--color-navy);
}

@media (max-width: 1100px) {
  .quote-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-title {
    margin-top: 40px;
  }
}

@media (max-width: 700px) {
  .quote-item {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .quote-item__media {
    height: 120px;
  }

  .quote-item__controls .stepper {
    width: calc(50% - 9px);
  }

  .quote-item__controls .stepper:nth-child(2) {
    width: calc(50% - 9px);
  }

  .quote-panel {
    padding: 24px 20px;
  }
}

/* ---------- Páginas de texto (aviso de privacidad) ---------- */

.legal {
  max-width: 820px;
  margin-top: 60px;
}

.legal h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  color: var(--color-navy);
}

.legal p {
  margin-top: 20px;
  font-size: var(--fs-lead);
  line-height: 1.4;
}

.catalog-intro {
  margin-top: 60px;
}

.quote-item__controls .stepper {
  min-width: 0;
}