header,
.header--container,
main,
.main--intro,
.oilGas--intro,
.nosotros--intro,
.nosotros--content,
.main--lines,
.oilGas--ourWork,
.nosotros--ourWork,
.oilGas--CTA,
.nosotros--CTA,
.main--clients,
footer
{
    min-width: 280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
header {
    width: 100%;
    height: 450px;
    margin-top: 113px;
    text-align: center;
    background-color: var(--TS-black);
}
.header--container figure.header--image,
.header--container figure.header--image.header--oil {
    width: 100%;
    max-width: 100vw;
    height: 450px;
    background-image: url('../images/header-home-full.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}
.header--container figure.header--image.header--oil {
    background-image: url('../images/header-oilGas.jpg');
}
.header--container figure.header--image.header--nosotros {
    background-image: url('../images/header-oilGas.jpg');
}
.header--title,
.header--title-oil {
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--TS-yellow);
    width: 100%;
    max-width: 85vw;
    min-width: 280px;
    text-align: initial;
    z-index: 1000;
}
.header--title-oil {
    top: 55%;
}
.header--title h1 {
    font-size: 2.6rem;
    margin-bottom: 10px;
    font-weight: 500;
    text-shadow: 2px 2px 6px var(--just-black);
}
.header--title h2 {
    font-family: "RBNo3.1-Black";
    font-size: 6rem;
    color: var(--TS-white);
    margin-bottom: 10px;
    text-shadow: 2px 2px 6px var(--just-black);
}
.header--title.header--title-oil h2 {
    font-size: 5rem;
}
.header--title h1 span {
    font-weight: 600;
}
.header--title p {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--TS-white);
    max-width: 600px;
    line-height: 2.5rem;
    text-shadow: 1px 1px 4px var(--just-black);

}
.header--button,
.CTA--button {
    margin-top: 50px;
    width: 280px;
    height: 50px;
    background-color: var(--TS-yellow);
    border-radius: 50px;
    cursor: pointer;
}
.header--button a,
.CTA--button a {
    color: var(--TS-black);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header--button:hover,
.CTA--button:hover {
    background-color: var(--TS-dark-gray);
}
.header--button:hover a,
.CTA--button:hover a {
    color: var(--TS-white);
}
main {
    z-index: 2;
}
.main--intro,
.oilGas--intro,
.nosotros--intro {
    width: 100%;
    max-width: 85vw;
    color: var(--TS-white);
    font-size: 1.7rem;
    font-weight: 400;
    margin-bottom: 40px;
    align-items: flex-start;
}
.main--intro p,
.oilGas--intro p,
.nosotros--intro p {
    font-size: 1.6rem;
    line-height: 2.4rem;
    width: 100%;
    min-width: 280px;
    max-width: 633px;
}
/* LINES */
.main--lines,
.oilGas--ourWork,
.nosotros--ourWork {
    width: 100%;
    margin-bottom: 40px;
    padding-top: 60px;
}
.lines,
.ourWork {
    width: 100%;
    min-width: 280px;
    max-width: 1024px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}
.lines a,
.ourWork a {
    text-decoration: none;
}
.lines article,
.ourWork article {
    border: 2px solid var(--TS-yellow);
    height: fit-content;
    width: 284px;
    margin-bottom: 40px;
}
.lines article figure,
.ourWork article figure {
    width: 100%;
}
.lines article figure img,
.ourWork article figure img {
    width: 100%;
}
.lines article figure figcaption,
.ourWork article figure figcaption {
    height: 50px;
    width: 100%;
    background-color: var(--TS-yellow);
    margin-top: -5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.lines article figure figcaption h3,
.ourWork article figure figcaption h3 {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--TS-black);
    text-align: center;
    line-height: 70px;
}
.lines article figure figcaption i,
.ourWork article figure figcaption i {
    color: var(--TS-black);
    font-weight: 600;
}

/* BASE CARDS  */
.lines article,
.ourWork article {
  position: relative;
  overflow: hidden;
  transition: box-shadow .35s ease, transform .35s ease, filter .35s ease;
  will-change: transform, box-shadow;
}
.lines article figure,
.ourWork article figure {
  position: relative;
  overflow: hidden;
}
.lines article figure img,
.ourWork article figure img {
  width: 100%;
  height: auto; 
  display: block;
  transform-origin: center;
  transition: transform .35s ease, filter .35s ease;
}
.lines article figure figcaption,
.ourWork article figure figcaption {
  position: relative;
  z-index: 4;
}
.lines article figure figcaption i,
.ourWork article figure figcaption i {
  color: transparent;
  position: relative;
  display: inline-block;
  width: 1em;
  text-align: center;
}
.lines article figure figcaption i::before,
.ourWork article figure figcaption i::before {
  content: "+";
  color: var(--TS-black);
  transition: transform .25s ease, opacity .25s ease;
}
.lines article .card-overlay,
.ourWork article .card-overlay {
  position: absolute;
  left: 22px; right: 22px; top: 22px;
  max-width: 100%;
  z-index: 2;               /* por encima de la imagen/gradiente y debajo del figcaption */
  pointer-events: none;     /* no bloquea clicks del card */
  opacity: 0;               /* oculto por defecto, se anima en desktop.css */
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease;
  display: flex;
  flex-direction: column;
}
.lines article .overlay-head,
.ourWork article .overlay-head {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--TS-yellow);
  letter-spacing: .1px;
  margin: 0 0 30px 0;
  align-self: flex-start;
}
.lines article .overlay-desc,
.ourWork article .overlay-desc {
  font-size: 1.4rem;
  font-weight: 200;
  letter-spacing: 1px;
  color: var(--TS-white);
  line-height: 1.6rem;
  margin: 0;
  align-self: flex-end;
}
@media (prefers-reduced-motion: reduce){
  .lines article .card-overlay,
  .lines article,
  .lines article figure img,
  .ourWork article .card-overlay,
  .ourWork article,
  .ourWork article figure img { transition: none !important; }
}
/* CLIENTES */

.clients {
    min-width: 280px;
    width: 100%;
    max-width: 1024px;
    color: var(--TS-light-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
}
.clients h3 {
    font-size: 1.8rem;
}
.clients div {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 50px;
}
.clients figure {
    width: 22%;
    margin-bottom: 20px;
}
.clients figure img {
    width: 100%;
}
.clients figure img {
    width: 100%;
    height: auto;
}
/* OIL & GAS */ 
.oilGas--intro,
.nosotros--intro {
    max-width: 100vw;
}
.oilGas--intro figure,
.nosotros--intro figure {
    width: 100%;
    max-width: 500px;
    min-width: 320px;
}
.nosotros--intro figure {
    display: none;
}
.oilGas--intro figure img,
.nosotros--intro figure img {
    width: 100%;
}
.oilGas--ourWork h2,
.oilGas--introTxt h2,
.nosotros--ourWork h2,
.nosotros--introTxt h2,
.nosotros--content h2 {
    border-top: 3px solid var(--TS-yellow);
    padding-top: 10px;
    font-family: "RBNo3.1-Black";
    font-size: 2.1rem;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--TS-white);
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
    max-width: 280px;
}
.oilGas--introTxt,
.nosotros--introTxt {
    padding: 0 20px;
}
.oilGas--introTxt h2,
.nosotros--introTxt h2 {
    border: none;
    text-align: initial;
    margin-top: 30px;
}
.oilGas--introTxt h4,
.nosotros--introTxt h4 {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--TS-yellow);
}
.oilGas--introTxt p,
.nosotros--introTxt p,
.nosotros--content p {
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: var(--TS-white);
    max-width: 600px;
    margin-bottom: 20px;
}
.oilGas--introBottom,
.nosotros--introBottom {
    display: none;
}
.oilGas--CTA,
.nosotros--CTA {
    margin-bottom: 40px;
    margin-top: 40px;
}
.CTA {
    width: 100%;
    min-width: 280px;
    max-width: 1024px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.CTA h3 {
    font-size: 1.8rem;
    color: var(--TS-white);
    text-align: center;
    margin-bottom: 20px;
    font-weight: 400;
}
.CTA h3 strong {
    color: var(--TS-yellow);
}
.CTA--button, .CTA--button a {
    margin-top: 0;
}
.nosotros--content {
    align-items: flex-start;
}
.nosotros--content h2 {
    text-align: initial;
    margin-left: 20px;
}
.nosotros--content p {
    text-align: center;
    padding: 0 20px;
    font-size: 1.8rem;
    line-height: 2.8rem;
    text-align: initial;
    max-width: 740px;
}

/* FOOTER */
footer
{
    background-color: var(--just-black);
    color: var(--TS-light-gray);
    height: auto;
    text-align: center;
    padding: 30px 0;
}
footer figure
{
    width: 170px;
    margin-top: 30px;
}
footer figure img
{
    width: 100%;
    height: auto;
}