/* Section backdrops and one-off blocks, mapped 1:1 to the original layout. */

/* ---- Home: "Algunos trabajos" ---- */

/* Full bleed, no container: a 1/3 + 2/3 split edge to edge. The wood texture is
   the section background and shows through the left column untouched; the right
   column paints over it. */
.works-highlight {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background-color: var(--c-gray);
  background-image: url("../img/101-B.jpg");
  background-blend-mode: multiply;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.works-highlight__works {
  padding: 80px 60px;
}

.works-highlight .section-title {
  color: #fff;
}

.works-highlight .service-card {
  --icon-size: 56px;
  margin-bottom: var(--sp-7);
}

.works-highlight .service-card__icon {
  color: #fff;
}

/* Right column: the paint photo darkened 30%, with the quality card on top and
   the white LinkedIn band pinned to the bottom. The 1fr row does the pushing,
   so the gap adapts instead of relying on a fixed margin. */
.works-highlight__aside {
  display: grid;
  grid-template-rows: 1fr auto;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url("../img/pinturas.jpg");
  background-image: image-set(url("../img/pinturas.webp") type("image/webp"), url("../img/pinturas.jpg") type("image/jpeg"));
  background-blend-mode: multiply;
  background-position: center;
  background-size: cover;
}

/* Equal breathing room above and below the card: the padding is symmetric and
   any leftover height from the 1fr row is split evenly instead of piling up
   underneath. */
.works-highlight__quality {
  display: grid;
  align-content: center;
  padding: 10% 8vw;
}

.quality-box {
  padding: 19px;
  border-radius: 20px;
  background: var(--c-gray);
  box-shadow: 10px 0 34px 16px rgba(0, 0, 0, 0.68);
  text-align: center;
}

.quality-box img {
  width: 85px;
  height: 85px;
  margin: 0 auto var(--sp-5);
}

.quality-box h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2em;
  color: #fff;
}

.quality-box p {
  font-family: var(--f-heading);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.3em;
  color: #fff;
}

.linkedin-box {
  padding-block: var(--sp-7);
  background: #fff;
  text-align: center;
  box-shadow: 0 30px 65px -30px rgba(0, 0, 0, 0.35);
}

.linkedin-box h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.4em;
  color: #000;
}

/* 5% of the column in the original; the bounds keep it sane at either extreme. */
.linkedin-box img {
  width: 5%;
  min-width: 48px;
  max-width: 80px;
  height: auto;
  margin-inline: auto;
}

/* ---- Home: certified personnel ---- */

.certified {
  padding-block: 10vw;
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/12667-A.jpg");
  background-position: center;
  background-size: cover;
  color: #fff;
  .border-top {
    position: relative;
    &:before{
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      content: "";
      display: block;
      width: 50px;
      height: 5px;
      background-color: var(--c-accent);
    }
  }
}

.certified .section-title {
  font-family: var(--f-display);
  color: #fff;
}

.certified p {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* ---- Contact section (shared by home, quienes-somos, servicios, trabajos) ---- */

/* Full bleed, two halves. The photo is the section backdrop but only shows
   through the details block: the form panel and the social strip cover it. */
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: rgba(255, 255, 255, 0.57);
  background-image: url("../img/7b80b695-f8e4-40dd-922d-99c4991f4bc9.jpg");
  background-image: image-set(url("../img/7b80b695-f8e4-40dd-922d-99c4991f4bc9.webp") type("image/webp"), url("../img/7b80b695-f8e4-40dd-922d-99c4991f4bc9.jpg") type("image/jpeg"));
  background-blend-mode: lighten;
  background-position: center;
  background-size: cover;
}

.contact-section__form {
  padding: 80px 6vw;
  background: var(--c-muted);
}

/* Short heavy rule under a heading, standing in for Divi's divider module,
   which carries its own vertical space above and below. */
.rule {
  display: block;
  width: 50px;
  margin-block: 40px 30px;
  border-top: 5px solid var(--c-dark);
}

.rule--accent {
  border-top-color: var(--c-accent);
}

/* The rule already provides the separation, so the form drops its own top
   margin when it follows one. */
.rule + .contact-form {
  margin-top: 0;
}

.contact-section__aside {
  display: grid;
  grid-template-rows: auto 1fr;
}

.contact-section__social {
  margin: 0;
  padding-block: 40px;
  background: var(--c-dark);
  text-align: center;
}

.contact-section__social a {
  display: inline-block;
  color: #fff;
}

.contact-section__social svg {
  width: 32px;
  height: 32px;
}

.contact-section__details {
  padding: 80px 6vw;
}

.contact-section__details > picture img {
  width: 100%;
  height: auto;
  margin-bottom: var(--sp-8);
}

/* ---- Page headers per page ---- */

/* Type scale of this header, straight from the original: 64px title stepping
   down to 44 and 32, and a 22px lead stepping down to 18. */
.page-header--quienes-somos .page-header__title {
  font-size: 64px;
  text-wrap: balance;
}

.page-header--quienes-somos .page-header__lead {
  margin-top: 0;
  padding-block: 20px;
  font-size: 22px;
  line-height: 1.6em;
}

@media (max-width: 980px) {
  .page-header--quienes-somos .page-header__title {
    font-size: 44px;
  }

  .page-header--quienes-somos .page-header__lead {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .page-header--quienes-somos .page-header__title {
    font-size: 32px;
  }
}

.page-header--quienes-somos {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/construction-21.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/construction-21.webp") type("image/webp"), url("../img/construction-21.jpg") type("image/jpeg"));
}

.page-header--servicios {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/construction-13.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/construction-13.webp") type("image/webp"), url("../img/construction-13.jpg") type("image/jpeg"));
}

.page-header--trabajos {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/construction-34.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/construction-34.webp") type("image/webp"), url("../img/construction-34.jpg") type("image/jpeg"));
}

.page-header--contacto {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/construction-20.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/construction-20.webp") type("image/webp"), url("../img/construction-20.jpg") type("image/jpeg"));
}

.page-header--colbun {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/449-Nehuenco-I-011-1110x645-1.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/449-Nehuenco-I-011-1110x645-1.webp") type("image/webp"), url("../img/449-Nehuenco-I-011-1110x645-1.jpg") type("image/jpeg"));
}

.page-header--gnl {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/gnl-quintero02.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/gnl-quintero02.webp") type("image/webp"), url("../img/gnl-quintero02.jpg") type("image/jpeg"));
}

.page-header--metro {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/metro-2-1280x720-1.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/metro-2-1280x720-1.webp") type("image/webp"), url("../img/metro-2-1280x720-1.jpg") type("image/jpeg"));
}

.page-header--nestle {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/01.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/01.webp") type("image/webp"), url("../img/01.jpg") type("image/jpeg"));
}

.page-header--panagro {
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    url("../img/cherry-produccion.jpg");
  background-image: radial-gradient(
      circle at top left,
      rgba(40, 40, 40, 0.79) 0%,
      rgba(40, 40, 40, 0.86) 100%
    ),
    image-set(url("../img/cherry-produccion.webp") type("image/webp"), url("../img/cherry-produccion.jpg") type("image/jpeg"));
}

/* ---- Quienes Somos: what we do panel ---- */

/* Sits straight on the photo in the original — no panel behind it. */
.what-we-do {
  color: #fff;
}

.what-we-do__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2em;
  color: var(--c-accent);
  margin-bottom: var(--sp-7);
}

.what-we-do .service-card {
  --icon-size: 60px;
  margin-bottom: var(--sp-7);
  align-items: center;
}

/* The ETmodules glyphs are solid discs with the symbol knocked out, so amber
   fill is all it takes to get the original's amber circles. */
.what-we-do .service-card__icon {
  color: var(--c-accent);
}

/* These cards carry no paragraph, so the title spans the whole card and sits
   centred against the icon instead of hugging its top edge. */
.what-we-do .service-card__title {
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
  font-size: var(--fs-h4);
  color: #fff;
}

.what-we-do__actions {
  margin-top: var(--sp-9);
}

/* ---- Quienes Somos: certifications + counters ---- */

/* Full bleed: brushed-metal panel on the left, photo over the counters on the
   right. Same 1/3 + 2/3 split as the original specialty section. */
.certifications {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background-color: rgba(247, 247, 247, 0.48);
  background-image: url("../img/89546.png");
  background-image: image-set(url("../img/89546.webp") type("image/webp"), url("../img/89546.png") type("image/png"));
  background-blend-mode: lighten;
  background-position: center;
  background-size: cover;
}

.certifications__list {
  padding: 80px 60px 80px 60px;
}

.certifications__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2em;
}

.certifications .service-card {
  --icon-size: 56px;
  margin-bottom: var(--sp-7);
}

.certifications .service-card__icon {
  color: #000;
}

.certifications__video {
  margin-top: var(--sp-8);
  aspect-ratio: 16 / 9;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
}

.certifications__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* The photo takes whatever height is left; the counter strip sits under it. */
.certifications__aside {
  display: grid;
  grid-template-rows: 1fr auto;
}

.certifications__aside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.counters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  box-shadow: 0 30px 65px -30px rgba(0, 0, 0, 0.35);
}

.counter--accent {
  background: var(--c-accent);
  color: var(--c-dark);
}

.counter--dark {
  background: var(--c-dark);
  color: #fff;
}

/* ---- Servicios: instruments (solid dark panel) ---- */

/* Full bleed: dark copy panel on the left, video over a two-cell call to
   action on the right. */
.instruments {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: var(--c-dark);
  color: #fff;
}

.instruments__intro {
  padding: 80px 60px;
}

.instruments__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2em;
  color: #fff;
}

.instruments__text {
  margin-block: 30px;
  font-size: 15px;
  line-height: 1.8em;
}

.instruments__aside {
  display: grid;
  grid-template-rows: 1fr auto;
}

.instruments__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.instruments__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  box-shadow: 0 30px 65px -30px rgba(0, 0, 0, 0.35);
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.instruments__phone {
  padding: 25px 50px;
  background: var(--c-accent);
  color: var(--c-dark);
  a:hover{
    color: #fff;
  }
}

.instruments__phone h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.4em;
  color: var(--c-dark);
}

.instruments__phone p {
  margin: 0;
  font-family: var(--f-display);
  font-size: 24px;
  letter-spacing: 3px;
  line-height: 1.4em;
}

.instruments__action {
  display: grid;
  place-content: center;
  margin: 0;
  padding-block: 40px;
}

/* Same outline button as the contact submit, dark on the white cell. */
.instruments__action .btn {
  padding: 12px 30px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--c-dark);
  border-width: 2px;
}

.instruments__action .btn:hover {
  color: #fff;
  background: var(--c-dark);
  border-color: var(--c-dark);
}

/* ---- Servicios: training (photo darkened behind the accordions) ---- */

.training {
  padding-block: var(--sp-9);
  background-color: rgba(0, 0, 0, 0.71);
  background-image: url("../img/89546.png");
  background-image: image-set(url("../img/89546.webp") type("image/webp"), url("../img/89546.png") type("image/png"));
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.training h2,
.training h3,
.training h5 {
  color: #fff;
}

/* ---- Servicios: service lists ---- */

.service-list {
  padding-left: 0;
  list-style: none;
}

.service-list li {
  padding-left: 1.2em;
  margin-bottom: var(--sp-3);
  position: relative;
  line-height: var(--lh-body);
}

.service-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--c-accent);
}

/* ---- Contacto: form + LinkedIn ----
   Two equal columns inside the 1080px container, split by the original's 5.5%
   gutter. */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.5%;
  .contact-form {
    button.btn {
      border-color: var(--c-text-strong);
      color: var(--c-text-strong);
    }
  }
}

.linkedin-panel__text {
  font-size: 18px;
  line-height: var(--lh-loose);
}

.linkedin-panel__logo {
  display: block;
  margin-top: var(--sp-8);
  text-align: center;
}

/* 18% of the column in the original, centred. */
.linkedin-panel__logo img {
  width: 18%;
  min-width: 72px;
  height: auto;
  margin-inline: auto;
  transition: transform var(--transition);
}

.linkedin-panel__logo:hover img {
  transform: scale(1.1);
}

@media (max-width: 767px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* ---- Contacto: page header ----
   Full bleed. The photo column and the amber panel land at 70/30, which is what
   the original's 2/3 + 1/3 columns plus their gutter add up to. */

.page-header--contacto {
  display: grid;
  grid-template-columns: 7fr 3fr;
  padding-block: 0;
}

.page-header__intro {
  padding: 10vw 6vw;
  max-width: 800px;
}

.page-header__info {
  padding: 80px 40px;
  background: var(--c-accent);
  color: var(--c-dark);
}

.page-header__info-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2em;
  color: var(--c-dark);
}

.page-header__info .info-item {
  margin-bottom: var(--sp-7);
}

/* 56px white on the amber panel, per the original. Dark titles, light body. */
.page-header__info .info-item__icon {
  width: 56px;
  height: 56px;
  color: #fff;
}

.page-header__info .info-item__title {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.4em;
  color: var(--c-dark);
}

.page-header__info .info-item__text {
  font-size: 15px;
  color: #fff;
}

.page-header--contacto .page-header__title {
  font-size: 64px;
}

.page-header--contacto .page-header__lead {
  margin-top: 0;
  padding-block: 20px;
  font-size: 22px;
  line-height: 1.6em;
}

/* ---- Contacto: phone call-out strip ---- */

.call-strip {
  position: relative;
  z-index: 10;
  padding-block: 20px;
  background: #fff;
  box-shadow: 0 10px 105px 0 rgba(0, 0, 0, 0.12);
}

.call-strip__phone {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2em;
  color: var(--c-accent);
}

.call-strip__phone a:hover {
  color: var(--c-accent-dark);
}

.call-strip__tagline {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4em;
  color: var(--c-heading);
}

@media (max-width: 980px) {
  .page-header--contacto {
    grid-template-columns: 1fr;
  }

  .page-header__intro,
  .page-header__info {
    padding-inline: 10%;
  }

  .page-header--contacto .page-header__title {
    font-size: 44px;
  }

  .page-header--contacto .page-header__lead {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .page-header--contacto .page-header__title {
    font-size: 32px;
  }

  .call-strip__phone {
    font-size: 36px;
  }

  .call-strip__tagline {
    font-size: 22px;
  }
}

/* ---- Project pages ---- */

.project-body h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
}

.project-body img {
  margin-block: var(--sp-7);
}

@media (max-width: 980px) {
  /* Side by side stops working once the columns get narrow: the two halves
     stack and each keeps its own backdrop. */
  .works-highlight {
    grid-template-columns: 1fr;
  }

  .works-highlight__works {
    padding: var(--sp-8) 10%;
  }

  .works-highlight__quality {
    padding: var(--sp-8) 40px;
  }

  .contact-section {
    grid-template-columns: 1fr;
  }

  .contact-section__form,
  .contact-section__details {
    padding: var(--sp-8) 10%;
  }

  .certifications {
    grid-template-columns: 1fr;
  }

  .certifications__list {
    padding: var(--sp-8) 10%;
  }

  .instruments {
    grid-template-columns: 1fr;
  }

  .instruments__intro {
    padding: var(--sp-8) 40px;
  }
}

@media (max-width: 767px) {
  .counters {
    grid-template-columns: 1fr;
  }

  .certifications,
  .instruments__title {
    font-size: 36px;
  }

  .instruments__phone {
    padding: 25px 30px;
  }

  .instruments__phone h3 {
    font-size: 22px;
  }

  .instruments__phone p {
    font-size: 18px;
  }

  .certified {
    padding-block: var(--sp-8);
  }

  .quality-box h2 {
    font-size: 26px;
  }

  .quality-box p,
  .linkedin-box h3 {
    font-size: 18px;
  }
}