/* Inner pages (every page except the home) — the design system of the client-approved home, applied to the inside of the site.
   Loaded after public.css on inner pages only (build.js adds it and puts "inner-page" on <body>); the home never loads this file.
   Reference: designer corrections 2026-09-21 mavilor.es-company-01.svg / mavilor.es-products-01.svg (1920 px artboards, 1rem = 10px). */

/* #region type scale : identical to the home (52/56 titles, 18/28 intro copy, 56 px buttons) */
.inner-page .tag {
  letter-spacing: 0.01em;
}
.inner-page .tcon .tag + h1,
.inner-page .tcon .tag + h2 {
  margin-top: 1.04rem;
}
.inner-page .tcon h2 {
  line-height: 5.6rem;
  letter-spacing: 0px;
}
/* titles stay one colour on the inside pages, as on the home: red is kept for the hero word, the tag and the actions */
.inner-page .tcon h2 em {
  color: inherit;
}
.inner-page .tcon p,
.inner-page .lead {
  font-size: 1.8rem;
  line-height: 2.8rem;
}
.inner-page .tcon p + p {
  margin-top: 2.8rem;
}
.inner-page .tcon.center p {
  margin-left: auto;
  margin-right: auto;
}
.inner-page .btn,
.inner-page .btn_line {
  gap: 1.5rem;
  height: 5.6rem;
  padding: 0px 2.7rem;
  border-radius: 0.6rem;
  letter-spacing: 0px;
  text-transform: uppercase;
}
.inner-page .btn_line {
  border-color: var(--title);
}
/* #endregion */

/* #region inner hero : the home banner (full-height photo, uppercase 68 px title, bottom row, red / teal bar) */
.inner_hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 91.9rem;
  padding: 53.27rem 0px 6rem;
  background-color: var(--dark);
}
.inner_hero > img {
  object-position: center top;
}
.inner_hero::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 100%;
  height: 12.21rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 11, 20, 0.5) 0%, rgba(0, 11, 20, 0) 100%);
}
.inner_hero::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 11, 20, 0) 44%, rgba(0, 11, 20, 0.62) 78%, rgba(0, 11, 20, 0.92) 100%);
}
.inner_hero .tag {
  display: flex;
  gap: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: 0px;
}
.inner_hero .tag::before {
  width: 1.7rem;
  height: 1.9rem;
}
.inner_hero .tcon .tag + h1 {
  margin-top: 2rem;
}
.inner_hero .tcon h1 {
  max-width: 110rem;
  font-weight: 600;
  font-size: 6.8rem;
  line-height: 7.7rem;
  letter-spacing: 0px;
  text-transform: uppercase;
}
.inner_hero .tcon p {
  max-width: 72rem;
  margin-top: 2.4rem;
  color: rgba(255, 255, 255, 0.78);
}
/* bottom row : figures on the left, actions on the right (home banner) */
.inner_hero .bot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 3.4rem;
}
.inner_hero .stats {
  display: flex;
  gap: 2.4rem;
}
.inner_hero .stats li {
  min-width: 22.5rem;
}
.inner_hero .stats strong {
  display: block;
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 4.6rem;
  white-space: nowrap;
}
.inner_hero .stats span {
  display: block;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.71);
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2rem;
  text-transform: uppercase;
}
.inner_hero .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin-top: 1.2rem;
}
.inner_hero .btns .btn {
  padding: 0px 3.1rem;
}
.inner_hero .btns .btn.dark {
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.inner_hero .tcon + .btns {
  margin-top: 4.4rem;
}
/* in-page anchors : one row of equal translucent tiles across the content width */
.inner_hero .anchors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
  gap: 1.83rem;
  margin-top: 6.29rem;
}
.inner_hero .anchors a,
.inner_hero .anchors button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.6rem;
  padding: 0px 1.2rem;
  border-radius: 0.54rem;
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.1);
}
.inner_hero .anchors a:hover,
.inner_hero .anchors button:hover {
  border-color: var(--primary);
  background-color: var(--primary);
}
.inner_hero .bar {
  position: absolute;
  left: 0px;
  bottom: 0px;
  display: flex;
  width: 100%;
  height: 0.4rem;
}
.inner_hero .bar span {
  flex: 1;
  background-color: var(--red2);
}
.inner_hero .bar span + span {
  background-color: var(--teal);
}
/* shorter variant for detail pages (product, application, news) : same language, less height */
.inner_hero.short {
  min-height: 72rem;
  padding-top: 35rem;
}
/* #endregion */

/* #region icon rows : icon column + title + text, hairline dividers (home "Engineering Behind Every Solution") */
.icon_rows li {
  display: flex;
  align-items: flex-start;
}
.icon_rows .icon {
  flex-shrink: 0;
  width: 10.1rem;
  padding-top: 3.5rem;
}
.icon_rows .icon img {
  display: block;
  width: 4.6rem;
  height: auto;
}
.icon_rows .txt {
  flex: 1;
  min-width: 0px;
  padding: 2.48rem 0px 2.6rem;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s;
}
.icon_rows li:first-child .txt {
  border-top: 1px solid var(--line);
}
.icon_rows li:hover .txt {
  border-bottom-color: var(--primary);
}
.icon_rows h3 {
  color: var(--title2);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.5rem;
}
.icon_rows p {
  margin-top: 0.9rem;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 2.4rem;
}
/* #endregion */

/* #region icon grid : 4 to 6 items — 3 columns, icon above the title, hairline on top (never a photo stretched next to them) */
.icon_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 5.2rem 6rem;
}
.icon_grid li {
  padding-top: 3.2rem;
  border-top: 1px solid var(--line);
  transition: border-color 0.3s;
}
.icon_grid li:hover {
  border-top-color: var(--primary);
}
.icon_grid .icon img {
  display: block;
  width: auto;
  height: 4.6rem;
}
.icon_grid h3 {
  margin-top: 2.4rem;
  color: var(--title2);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.5rem;
}
.icon_grid p {
  margin-top: 0.9rem;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 2.4rem;
}
/* #endregion */

/* #region big rounded photo */
.photo_r {
  overflow: hidden;
  border-radius: 1.95rem;
}
/* #endregion */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .inner-page .tcon h2 {
    line-height: 1.22;
  }
  .inner_hero {
    min-height: 0px;
    padding: 30rem 0px 7rem;
  }
  .inner_hero.short {
    min-height: 0px;
    padding-top: 24rem;
  }
  .inner_hero .tcon h1 {
    font-size: 5.2rem;
    line-height: 6.2rem;
  }
  .inner_hero .bot {
    flex-direction: column;
    gap: 4rem;
  }
  .inner_hero .btns {
    margin-top: 0px;
  }
  .inner_hero .anchors {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    margin-top: 4.4rem;
  }
  .icon_rows .icon {
    width: 7rem;
  }
  .icon_grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 4rem;
  }
  .icon_rows .icon img {
    width: 4rem;
  }
}

@media screen and (max-width: 768px) {
  .inner-page .tcon h2 {
    line-height: 1.24;
  }
  .inner-page .tcon p,
  .inner-page .lead {
    font-size: 15px;
    line-height: 1.75;
  }
  .inner-page .tcon p + p {
    margin-top: 14px;
  }
  .inner-page .btn,
  .inner-page .btn_line {
    height: 46px;
    padding: 0px 20px;
    font-size: 14px;
  }
  .inner_hero {
    min-height: 0px;
    padding: 128px 0px 46px;
  }
  .inner_hero.short {
    min-height: 0px;
    padding-top: 112px;
  }
  .inner_hero::after {
    background: linear-gradient(180deg, rgba(0, 11, 20, 0.5) 0%, rgba(0, 11, 20, 0.4) 34%, rgba(0, 11, 20, 0.86) 74%, rgba(0, 11, 20, 0.94) 100%);
  }
  .inner_hero .tag {
    font-size: 12px;
    line-height: 16px;
  }
  .inner_hero .tcon .tag + h1 {
    margin-top: 12px;
  }
  .inner_hero .tcon h1 {
    font-size: 31px;
    line-height: 1.2;
  }
  .inner_hero .tcon p {
    margin-top: 14px;
  }
  .inner_hero .bot {
    display: block;
    margin-top: 150px;
  }
  .inner_hero .stats {
    gap: 10px;
  }
  .inner_hero .stats li {
    flex: 1;
    min-width: 0px;
  }
  .inner_hero .stats strong {
    font-size: 17px;
    line-height: 24px;
    white-space: normal;
  }
  .inner_hero .stats span {
    margin-top: 3px;
    font-size: 10px;
    line-height: 14px;
  }
  .inner_hero .btns {
    gap: 10px;
    margin-top: 26px;
  }
  .inner_hero .btns .btn {
    flex: 1;
    padding: 0px 12px;
    font-size: 13px;
  }
  .inner_hero .tcon + .btns {
    margin-top: 26px;
  }
  .inner_hero .anchors {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 8px;
    margin-top: 150px;
  }
  .inner_hero .anchors a,
  .inner_hero .anchors button {
    height: 42px;
    font-size: 12px;
  }
  .icon_rows .icon {
    width: 54px;
    padding-top: 22px;
  }
  .icon_rows .icon img {
    width: 34px;
  }
  .icon_rows .txt {
    padding: 18px 0px;
  }
  .icon_rows h3 {
    font-size: 19px;
    line-height: 1.35;
  }
  .icon_rows p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
  }
  .photo_r {
    border-radius: 12px;
  }
  .icon_grid {
    grid-template-columns: minmax(0px, 1fr);
    gap: 26px;
  }
  .icon_grid li {
    padding-top: 20px;
  }
  .icon_grid .icon img {
    height: 36px;
  }
  .icon_grid h3 {
    margin-top: 14px;
    font-size: 19px;
    line-height: 1.35;
  }
  .icon_grid p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
  }
}