/* ===================================================================
 *  01. webfonts and iconfonts - (_document-setup)
 * ------------------------------------------------------------------- */

@import url("font-awesome/css/font-awesome.min.css");
@import url("micons/micons.css");
@import url("fonts.css");

/* ==========================================================
 *  Registo dos Pesos Finos da Montserrat
 * ========================================================== */

@font-face {
    font-family: 'MontserratCustom';
    src: url('fonts/montserrat/montserrat-light-webfont.woff2') format('woff2'),
         url('fonts/montserrat/montserrat-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MontserratCustom';
    src: url('fonts/montserrat/montserrat-thin-webfont.woff2') format('woff2'),
         url('fonts/montserrat/montserrat-thin-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
html {
    background-color: transparent !important;
    height: 100%;
    font-size: 10px;
}

body {
    background-color: transparent !important;
    
    /* 👇 A TUA NOVA DEFESA DUPLA PARA A IMAGEM DE FUNDO 👇 */
    /* 1º Plano de Emergência: Lido pelos "calhambeques" e iPhones antigos */
    background-image: url('../images/bg.jpg') !important;
    
    /* 2º Plano Moderno: Lido por navegadores recentes */
    background-image: -webkit-image-set(url('../images/bg.webp') type('image/webp'), url('../images/bg.jpg') type('image/jpeg')) !important;
    background-image: image-set(url('../images/bg.webp') type('image/webp'), url('../images/bg.jpg') type('image/jpeg')) !important;
    /* 👆 FIM DA DEFESA 👇 */

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    line-height: 1.875;
    color: #cccccc;
}
/* ------------------------------------------------------------------- 
 * links - (_document-setup) 
 * ------------------------------------------------------------------- */

a,
a:visited {
  color: #d4af37;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
  color: #d4af37;
}

/* ===================================================================
 *  03. typography & general theme styles 
 * ------------------------------------------------------------------- */

h2, h3, h4, h5, h6,  
.h02, .h03, .h04, .h05, .h06 {
  font-family: "montserrat-regular", sans-serif;
  font-size: 1.8rem;            
  font-weight: 200 !important; 
  line-height: 1.25;
  letter-spacing: -.05rem;
  margin-bottom: 1.5rem;        
  text-transform: none;        
}

p img {
  margin: 0;
}

p.lead {
  font-family: "muli-light", sans-serif;
  font-size: 2.1rem;
  line-height: 1.857;
  color: #838383;
  margin-bottom: 3.6rem;
}

em, i, strong, b {
  font-size: 1.6rem;
  line-height: 1.875;
  font-style: normal;
  font-weight: normal;
}
em, i {
  font-family: "muli-italic", sans-serif;
}
strong, b {
  font-family: "muli-bold", sans-serif;
}

small {
  font-size: 1.1rem;
  line-height: inherit;
}

blockquote {
  margin: 3rem 0;
  padding-left: 5rem;
  position: relative;
}

blockquote:before {
  content: "\201C";
  font-size: 10rem;
  line-height: 0px;
  margin: 0;
  color: rgba(0, 0, 0, 0.3);
  font-family: arial, sans-serif;
  position: absolute;
  top: 3.6rem;
  left: 0;
}

blockquote p {
  font-family: "muli-light", sans-serif;
  padding: 0;
  font-size: 1.9rem;
  line-height: 1.895;
}

blockquote cite {
  display: block;
  font-size: 1.3rem;
  font-style: normal;
  line-height: 1.615;
}

blockquote cite:before {
  content: "\2014 \0020";
}

blockquote cite a,
blockquote cite a:visited {
  color: #838383;
  border: none;
}

abbr {
  font-family: "muli-bold", sans-serif;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: .05rem;
  color: #838383;
}

pre {
  padding: 2.4rem 3rem 3rem;
  background: #F1F1F1;
}

code {
  font-size: 1.4rem;
  margin: 0 .2rem;
  padding: .3rem .6rem;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 3px;
}

pre>code {
  display: block;
  white-space: pre;
  line-height: 2;
  padding: 0;
  margin: 0;
}

del {
  text-decoration: line-through;
}






/* ===================================================================
 *  04. preloader
 * ------------------------------------------------------------------- */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cccccc;
  z-index: 800;
  height: 100%;
  width: 100%;
}

.no-js #preloader,
.oldie #preloader {
  display: none;
}

/* ===================================================================
 *  08. common and reusable theme styles 
 * ------------------------------------------------------------------- */

h1.intro-header {
  font-family: "montserrat-regular", sans-serif;
  font-size: 2.1rem;
  line-height: .85;
  color: #cccccc;
  position: relative;
  padding-bottom: 3.6rem;
}

h1.intro-header::before {
  display: block;
  content: "";
  height: 2px;
  width: 70px;
  background-color: #000000;
  position: absolute;
  left: 0;
  bottom: 0;
}

.wide {
  max-width: 1300px;
}

.narrow {
  max-width: 800px;
}

/* ===================================================================
 *  09. header styles
 * ------------------------------------------------------------------- */

#header {
  width: 100%;
  height: 72px;
  background-color: rgba(17, 17, 17, 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: fixed;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 501;
  display: flex !important;
  align-items: center !important;     
  justify-content: space-between !important;
  padding-top: 8px !important;    
  padding-bottom: 8px !important; 
}

.header-logo {
  position: absolute;
  left: 40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 501;
}

.header-logo a {
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  border: none;
  width: 97px;
  height: 22px;
  background: url("../images/logo.png") no-repeat center;
  background-size: 97px 22px;
  font: 0/0 a;
  color: transparent;
}

.header-main-nav {
  margin-top: -22px; 
}

.header-main-nav li a, 
.header-main-nav .botao-idioma-nav {
  font-family: "montserrat-regular", sans-serif !important;
  font-weight: 100 !important; 
  letter-spacing: 0.05rem;     
  text-transform: uppercase;   
  font-size: 1.0rem;            
}

.header-menu-toggle {
  display: none;
}

#header-nav-wrap {
  font-family: "montserrat-light", sans-serif;
  font-size: 14px;
  position: absolute;
  top: 0;
  right: 40px;
  display: block !important;
}

#header-nav-wrap .header-main-nav {
  display: inline-block;
  list-style: none;
  height: 72px;
  margin: 0 1rem 0 0;
}

#header-nav-wrap .header-main-nav li {
  display: inline-block;
  padding-left: 0;
  margin-right: 1.5rem;
}

#header-nav-wrap .header-main-nav li a {
  display: block;
  line-height: 72px;
  color: rgba(255, 255, 255, 0.45);
}

#header-nav-wrap .header-main-nav li a:hover,
#header-nav-wrap .header-main-nav li a:focus {
  color: #cccccc;
}

#header-nav-wrap .header-main-nav li.current a {
  color: #cccccc;
}

/* ===================================================================
 *  10. home
 * ------------------------------------------------------------------- */

#home {
  width: 100%;
  height: 786px;
  min-height: 786px;
  background-color: transparent !important; 
  position: relative;
  display: table;
}

#home .shadow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .1;
  background: linear-gradient(to right, black 0%, black 20%, transparent 100%);
}

#home .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .1;
  background-color: #000000;
}

.home-content {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}

.home-content .contents {
  position: relative;
}

.home-content-left {
  padding: 15rem 0 12rem 40px;
  position: relative;
  width: 50%;
  transform: translateY(-80px) !important;
}

.home-content-left h3 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.6rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.35rem !important;
  margin-bottom: 2.4rem;
  font-family: 'MontserratCustom', sans-serif !important;
  font-weight: 400 !important;
}

.home-content-left h1 {
  font-family: 'MontserratCustom', sans-serif !important;
  font-size: 2.0rem;            
  font-weight: 300 !important; 
  letter-spacing: 0.15rem !important;
  line-height: 1.2;
  color: #cccccc;
  margin-bottom: 9rem;
}

.home-content-left .button.stroke {
  color: #cccccc !important;
  border-color: #cccccc;
  margin: 0 .6rem 1.2rem;
  padding: 0 2.2rem;
  min-width: 188px;
}

.home-content-left .button.stroke:hover,
.home-content-left .button.stroke:focus {
  background-color: white !important;
  color: #000000 !important;
}

.home-image-right {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-top: 21rem;
  z-index: 500;
  width: 50%;
  text-align: right;
}

.home-image-right img {
  vertical-align: bottom;
  width: 75%;
}

.home-social-list {
  position: absolute;
  right: 42px;
  top: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 2.2rem;
  line-height: 1.75;
  text-align: center;
  -webkit-transform: translateY(-55%);
  -ms-transform: translateY(-55%);
  transform: translateY(-55%);
}

.home-social-list::before {
  display: block;
  content: "";
  width: 2px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.15);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}

.home-social-list li {
  padding-left: 0;
}

.home-social-list li a,
.home-social-list li a:visited {
  color: #cccccc;
}

.home-social-list li a:hover,
.home-social-list li a:focus,
.home-social-list li a:active {
  color: #d4af37 !important;
  fill: #d4af37 !important;
}

.home-scrolldown {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  float: right;
}

.home-scrolldown i {
  padding-left: 9px;
}

.home-scrolldown a:hover,
.home-scrolldown a:focus,
.home-scrolldown a:hover span, 
.home-scrolldown a:hover i {
  color: #d4af37 !important;
}

.scroll-icon {
  display: inline-block;
  font-family: "montserrat-medium", sans-serif;
  font-size: 1.0rem;
  text-transform: uppercase;
  letter-spacing: .3rem;
  color: #cccccc !important;
  background: transparent;
  position: relative;
  top: 36px;
  right: 42px;
}

.scroll-icon i {
  font-size: 2.4rem;
  position: relative;
  bottom: -6px;
}

/* ===================================================================
 *  11. about
 * ------------------------------------------------------------------- */

#about {
  min-height: 786px;
  background: transparent !important; 
  padding-top: 18rem;
  overflow: hidden;
}

.about-intro {
  padding-bottom: 3.6rem;
}

.about-features .features-list {
  padding-top: 5.4rem;
}

.about-features .feature {
  margin-bottom: 1.8rem;
}

.about-features .feature .icon {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin-bottom: 25px !important;
}

.about-features .feature .icon img.gif-icone {
  width: 48px !important;
  height: auto !important;
  display: inline-block !important;
  margin: 0 auto !important;
}

.about-features .feature .service-content h3 {
  font-family: 'MontserratCustom', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.2rem !important;
  font-size: 1.1rem !important;
  text-align: center !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important; 
}

.about-features .feature .service-content p {
  text-align: left !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.about-how {
  padding-top: 7.2rem;
  padding-bottom: 6rem;
}

.about-how h1.intro-header {
  text-align: center;
}

#about .about-how h1.intro-header::before {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.about-how-content {
  position: relative;
  width: 100%;
  max-width: 1000px;
  min-height: 300px;
  margin-top: 7.2rem;
  margin-left: auto;
  margin-right: auto;
  clear: both;
}

.about-how-content::before,
.about-how-content::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 0;
}

.about-how-content::before {
  left: 0;
}

.about-how-content::after {
  left: 50%;
}

.about-how-content .about-how-steps {
  width: 100%;
}

.about-how-content .step {
  padding: 0 40px 1.5rem 60px;
  position: relative;
  min-height: 240px;
}

.about-how-content .step h3 {
  margin-bottom: 2.4rem;
}

.about-how-content .step::before {
  display: block;
  font-family: "muli-bold";
  font-size: 2rem;
  content: attr(data-item);
  color: #cccccc;
  height: 54px;
  width: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 50%;
  background-color: #39b54a;
  box-shadow: 0 0 0 15px #111111;
  z-index: 500;
  position: absolute;
  top: -12px;
  left: -27px;
}

/* ===================================================================
 *  15. footer styles
 * ------------------------------------------------------------------- */

footer {
  padding-top: 9rem;
  padding-bottom: 4.2rem;
  font-size: 1.5rem;
  line-height: 2.7rem;
  color: rgba(255, 255, 255, 0.25);
}

footer a,
footer a:visited {
  color: #39b54a;
}

footer a:hover,
footer a:focus {
  color: white;
}

footer h4 {
  color: white;
  font-size: 1.5rem;
  padding-bottom: 2.4rem;
  margin-bottom: 2.4rem;
  position: relative;
}

footer h4::before {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.05);
  position: absolute;
  left: 0;
  bottom: 0;
}

footer ul {
  list-style: none;
  margin: 0;
}

footer ul li {
  padding-left: 0;
}

footer ul a,
footer ul a:visited {
  color: rgba(255, 255, 255, 0.25);
}

.footer-logo {
  display: block;
  margin: 0 0 5.4rem 0;
  padding: 0;
  outline: 0;
  border: none;
  width: 93px;
  height: 21px;
  background: url("../images/logo.png") no-repeat center;
  background-size: 93px 21px;
  font: 0/0 a;
  color: transparent;
}

.footer-social-list {
  font-size: 1.8rem;
  margin-top: -1.5rem;
  margin-bottom: 3rem;
}

.footer-social-list li {
  display: inline-block;
  margin-right: 8px;
}

.footer-bottom {
  margin-top: 6.6rem;
  text-align: center;
}

.footer-bottom .copyright span::after {
  content: "|";
  display: inline-block;
  padding: 0 1rem 0 1.2rem;
  color: rgba(255, 255, 255, 0.1);
}

#go-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 600;
  display: none;
}

#go-top a,
#go-top a:visited {
  text-decoration: none;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  background: black;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  border-radius: 5px;
}

/* ===================================================================
 *  16. custom hyline & dark theme overrides
 * ------------------------------------------------------------------- */

.titulo-seccao {
    font-weight: 300 !important;
    font-size: 20px !important;
    color: #cccccc !important;
    position: relative !important;
}

.intro-header::before,
.titulo-seccao::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 2px !important;
    background-color: #d4af37 !important;
    margin-top: 6px !important;
    margin-bottom: 15px !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

p {
    font-size: 13px !important;
    text-align: left !important;
    color: #cccccc !important;
}

#loader {
    background-color: #d4af37 !important;
}

.timeline-item .timeline-content {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px);
    transition: all 0.4s ease-in-out;
    position: absolute;
    left: 100px;
    top: 0;
    width: 450px;
    z-index: 10;
}

.timeline-item:hover .timeline-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

header, 
.header-container, 
header .row {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    box-sizing: border-box !important;
}

header .row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* MENU DE IDIOMAS */
.dropdown-idioma-nav {
    position: relative;
    display: inline-block;
}

.botao-idioma-nav {
    background: transparent !important;
    color: #cccccc !important;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    text-decoration: none;
    padding: 10px 15px;
    cursor: pointer;
    display: block;
    transition: color 0.3s ease;
}

.botao-idioma-nav:hover,
.dropdown-idioma-nav:hover .botao-idioma-nav {
    color: #cccccc !important;
}

.submenu-idioma {
    display: none !important;
    flex-direction: column !important;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    background-color: rgba(17, 17, 17, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    min-width: 120px;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-radius: 6px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.4);
    z-index: 999;
}

.dropdown-idioma-nav:hover .submenu-idioma {
    display: flex !important;
}

.submenu-idioma li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.submenu-idioma li a {
    color: #cccccc !important;
    padding: 6px 16px !important;
    text-decoration: none !important;
    display: block !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.submenu-idioma li a:hover {
    background-color: rgba(212, 175, 55, 0.0) !important;
    color: #d4af37 !important;
}

.product-grid-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.product-col {
    width: 50% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

#contacts, 
#contacts * {
    box-sizing: border-box;
}

#contacts .intro-header {
    text-align: left !important;
}

#contacts .intro-header::after,
#contacts .intro-header::before {
    display: none !important;
}

#contacts h4,
#contacts p, 
#contacts p span, 
#contacts p a {
    font-size: 10px !important;
    color: #cccccc !important;
}

.contacts-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.texto-abaixo-gif {
    color: #cccccc !important;         
    font-size: 14px !important;         
    line-height: 1.7 !important;        
    text-align: left !important;        
    margin: 0 !important;                
    font-weight: 300 !important;        
}
/* ❌❌❌❌❌❌❌❌ TIMELINE DESKTOP (LIMPO E OTIMIZADO) ❌❌❌❌❌❌❌❌ */
.seccao-com-video {
    position: relative; 
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}

.video-fundo {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1; 
}

.pelicula-escura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.60); 
    z-index: 2; 
}

.hyline-section-header {
    text-align: left !important;
    margin-bottom: 25px !important;
}

.hyline-section-header .section-sub {
    display: block !important;
    margin-bottom: 5px !important;
    color: #a0a0a0 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border: none !important;
    background: none !important;
}

.hyline-section-header .section-line {
    width: 40px !important;
    height: 2px !important;
    background-color: #d4af37 !important;
    margin-bottom: 8px !important;
    border: none !important;
}

.hyline-section-header h1 {
    margin: 0 !important;
    color: #cccccc !important;
    font-size: 1.5rem !important;
    font-weight: 200 !important;
}

.hyart-btn, .map-btn.hyart-btn, .patentes-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 30px !important;
    color: #cccccc !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
}

.hyart-btn:hover, .map-btn.hyart-btn:hover, .map-btn.hyart-btn.active, .patentes-btn:hover {
    border-color: #d4af37 !important;
    color: #d4af37 !important;
    background: transparent !important;
}

#map-section {
    position: relative !important;
    display: block !important;
    background-color: transparent !important;
    padding: 20px 0 20px 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.map-layout-container {
    display: flex !important;
    justify-content: flex-start !important; 
    align-items: center !important;
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: 0 !important;    
    margin-right: auto !important; 
    padding-left: 0px !important; 
    box-sizing: border-box !important;
    gap: 80px !important; 
}

.map-sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.map-buttons-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; 
    align-items: flex-start !important; 
}

.map-btn {
    width: 130px !important; 
    text-align: left !important;
}

.map-content {
    flex: 1 !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#globe-container {
    width: 100% !important;
    max-width: 800px !important;
    height: 500px !important;
    min-height: 500px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
}

/* 📦 ESTANTE DOS ANOS (Espaçamento mais compacto e organizado) */
.minha-timeline {
    position: relative; 
    z-index: 10; 
    display: grid;
    grid-template-columns: repeat(7, 1fr); 
    gap: 30px 20px !important; /* Espaçamento reduzido para os anos ficarem harmoniosos */
    width: 90%;
    max-width: 1100px;
    margin: 0 auto; 
    padding: 30px 20px !important;
    box-sizing: border-box;
    justify-items: center; 
}

.linha-de-anos {
    display: contents; 
}

.ano-item {
    position: relative; 
    display: flex;
    flex-direction: column;
    cursor: pointer;
    align-items: center;        
    min-width: 45px;            
}

.ano-texto {
    color: #cccccc;
    font-weight: lighter;
    font-size: 13px; 
    transform: rotate(-90deg);
    transform-origin: top left; 
    margin: 0 0 0 8px !important; 
    position: relative;
    z-index: 2;
}

.ano-item:hover .ano-texto {
    color: #d4af37; 
    transition: color 0.3s ease; 
}

.linha {
    /* 1. Removemos a "caixa" tradicional */
    width: 0px !important;    
    min-width: 0px !important;
    max-width: 0px !important;
    background-color: transparent !important;
    
    /* 2. Desenhamos a Borda Mágica */
    border-left: 1px solid #d4af37 !important; 
    
    /* 3. Mantemos a altura e blindagem */
    height: 100px !important;
    flex-shrink: 0 !important; 
}
/* 💻 DESKTOP: O cartão unificado que abre no centro */
    .quadro-info {
        position: fixed !important;  
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; 
        
        width: 480px !important;  
        max-height: 75vh !important;  
        overflow-y: auto !important;  
        
        background-color: rgba(15, 15, 15, 0.20) !important;  
        backdrop-filter: blur(16px) !important;  
        -webkit-backdrop-filter: blur(16px) !important;
        
       
        border-radius: 16px !important;
        
        /* 🎯 Damos 55px de espaço em cima para a cruz ter o seu próprio lugar */
        padding: 55px 30px 30px 30px !important;  
        text-align: center !important;
        
        color: #cccccc !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important; 
        
        z-index: 999999 !important;  
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.20) !important; 
        
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;  
        box-sizing: border-box !important;
    }

    /* O comando que torna o cartão visível */
    .quadro-info.mostrar-cartao {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* 🎯 AQUI ESTÁ O TRUQUE DA CRUZ: Forçamos o posicionamento absoluto dentro do ecrã do cartão */
    .quadro-info .fechar-cartao {
        position: absolute !important;
        top: 15px !important;
        right: 20px !important;
        font-size: 1.8rem !important;
        color: #d4af37 !important; /* Dourado elegante */
        cursor: pointer !important;
        line-height: 1 !important;
        font-weight: lighter!important;
        z-index: 9999999 !important;
        background: transparent !important;
        border: none !important;
        padding: 5px !important;
    }
/* Estilos decorativos inferiores (Slope Timeline) */
.slope-timeline-container {
    max-width: 1300px;
    margin: 80px auto 60px auto;
    padding: 0 40px;
    position: relative;
}

.slope-wrapper {
    position: relative;
    padding: 80px 0;
    height: 180px;
}

.slope-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0.90), rgba(255,255,255,0.4), rgba(212,175,55,0.9));
    transform: translateY(-50%) rotate(-6deg);
    z-index: 1;
}

.slope-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    height: 100%;
}

.slope-item {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.slope-item:nth-child(1) { top: 49px; } 
.slope-item:nth-child(2) { top: 26px; } 
.slope-item:nth-child(3) { top: 2px; }  
.slope-item:nth-child(4) { top: -21px;} 
.slope-item:nth-child(5) { top: -43px;} 

.slope-year {
    font-size: 0.85rem;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.slope-dot {
    width: 10px;
    height: 10px;
    background-color: #cccccc;
    border-radius: 50%;
    margin-bottom: 12px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.slope-value {
    font-size: 1.1rem;
    font-weight: 400;
    color: #cccccc;
}

.slope-item.destaque .slope-dot {
    background-color: #d4af37; 
    width: 14px;
    height: 14px;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.9);
}

.slope-item.destaque .slope-value,
.slope-item.destaque .slope-year {
    color: #d4af37;
    font-weight: 700;
}
/* ❌❌❌❌❌❌❌❌FIM TIMELINE DESKTOP (LIMPO E OTIMIZADO) ❌❌❌❌❌❌❌❌ */

/* BOTÃO PÍLULA E POP-UP DE VÍDEO */
.video-btn-wrapper {
    text-align: center;
    margin: 40px 0;
}


.btn-pilula-video {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: rgba(17, 17, 17, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 8px 22px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
}

.btn-pilula-video .icone-play {
    font-size: 14px;
    line-height: 1;
}

.btn-pilula-video:hover {
    color: #d4af37 !important;
    border-color: #d4af37 !important;
}

.popup-video-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.popup-video-container {
    position: relative;
    width: 90%;
    max-width: 900px;
}

.btn-fechar-popup {
    position: absolute !important;
    top: -50px !important;
    right: 0 !important;
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 32px !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}

.btn-fechar-popup:hover {
    color: #d4af37 !important;
}

.video-element {
    width: 100%;
    border-radius: 8px;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.seccao-mvv {
    margin-left: 6%; 
    margin-right: 4%; 
    width: 90%; 
    padding-top: 80px; 
    padding-bottom: 60px;
    box-sizing: border-box;
}

.caixa-cartoes-mvv {
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    margin: 0; 
    padding: 0;
}

.cartao-mvv {
    flex: 0 0 31%;
    max-width: 31%;
    margin: 0;
    padding: 0;
}

.cartao-mvv .gif-icone {
    width: 48px; 
    height: auto;
}

.seccao-about {
    padding-top: 60px; 
    padding-bottom: 40px;
}

.caixa-mestra-about {
    margin-left: 6%; 
    margin-right: 4%; 
    width: 90%; 
    display: flex; 
    align-items: flex-start; 
    justify-content: space-between; 
    gap: 30px; 
    box-sizing: border-box;
}

.coluna-esq-about {
    flex: 0 0 26%; 
    max-width: 26%; 
    padding-top: 5px; 
    margin: 0;
}

.sub-titulo-about {
    font-size: 1.15rem; 
    letter-spacing: 3px;
}

.linha-about {
    width: 50px; 
    margin-top: 8px; 
    margin-bottom: 15px;
    background-color: #d4af37;
}

.titulo-about {
    font-size: 2.0rem; 
    font-weight: 200; 
    color: #cccccc; 
    line-height: 1.1;
    margin: 0;
}

.coluna-dir-about {
    flex: 0 0 70%; 
    max-width: 70%; 
    display: flex; 
    justify-content: space-between; 
    gap: 40px; 
    text-align: left; 
    margin: 0;
}

.sub-coluna-about {
    flex: 1; 
    color: #cccccc; 
    font-size: 1.15rem; 
    line-height: 1.75;
}

.sub-coluna-about p {
    margin: 0 0 24px 0;
}

.sem-margem-fundo {
    margin-bottom: 0 !important;
}

/* THE PATH E PEOPLE */
.seccao-titulo-path { padding-top: 20px; padding-bottom: 40px; }
.caixa-mestra-path { margin-left: 6%; margin-right: 4%; width: 90%; box-sizing: border-box; }
.coluna-unica-path { max-width: 400px; padding-top: 5px; margin: 0; }
.sub-titulo-path { font-size: 1.15rem; letter-spacing: 3px; }
.linha-path { width: 50px; margin-top: 8px; margin-bottom: 15px; background-color: #d4af37; }
.titulo-path { font-size: 2.0rem; font-weight: 200; color: #cccccc; line-height: 1.1; margin: 0; }

.seccao-people { padding-top: 60px; padding-bottom: 40px; }
.caixa-mestra-people { margin-left: 6%; margin-right: 4%; width: 90%; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; box-sizing: border-box; }
.coluna-esq-people { flex: 0 0 26%; max-width: 26%; padding-top: 5px; margin: 0; }
.sub-titulo-people { font-size: 1.15rem; letter-spacing: 3px; }
.linha-people { width: 50px; margin-top: 8px; margin-bottom: 15px; background-color: #d4af37; }
.titulo-people { font-size: 2.0rem; font-weight: 200; color: #cccccc; line-height: 1.1; margin: 0; }
.coluna-dir-people { flex: 0 0 70%; max-width: 70%; display: flex; justify-content: space-between; gap: 40px; text-align: left; margin: 0; }
.sub-coluna-people { flex: 1; color: #cccccc; font-size: 1.15rem; line-height: 1.75; }
.sub-coluna-people p { margin: 0 0 24px 0; }


/* ==========================================================
   ❌❌❌❌❌❌💻 COMPUTADOR (DESKTOP) ❌❌❌❌❌❌ REGRAS GERAIS E LAYOUTS
   ========================================================== */

@media screen and (min-width: 1024px) {
  .timeline-card, .cartao-conteudo {
    position: relative !important; 
  }

  .close-btn, .cartao-fechar, [class*="close"], [class*="fechar"] {
    position: absolute !important;        
    top: 15px !important;                 
    right: 20px !important;               
    left: auto !important;                
    color: #FFD700 !important;            
    font-size: 22px !important;           
    cursor: pointer !important;           
    z-index: 9999 !important;             
  }

  .timeline-card-content, .cartao-texto, .timeline-card p, .timeline-card ul {
    padding-top: 35px !important;         
  }
}

@media screen and (min-width: 1024px) {
  .close-btn,  
  .cartao-fechar,    
  [class*="close"],    
  [class*="fechar"] {
    display: none !important;
  }
}

/* ---❌❌❌ SECÇÃO INNOVATION (COMPUTADOR)❌❌❌ --- */

.seccao-innovation { padding-top: 60px; padding-bottom: 40px; }

/* Nota de Mentor: No teu HTML original a classe chama-se 'innovation-master-box' e não 'caixa-mestra-innovation'. Usei a do HTML para garantir que funciona! */
.innovation-master-box { 
    margin-left: 6%; 
    margin-right: 4%; 
    width: 90%; 
    display: flex; 
    align-items: flex-start; 
    justify-content: space-between; 
    gap: 30px; 
    box-sizing: border-box; 
}

.coluna-esq-innovation { 
    flex: 0 0 26%; 
    max-width: 26%; 
    padding-top: 5px; 
    margin: 0; 
}

.sub-titulo-innovation { font-size: 1.15rem; letter-spacing: 3px; }
.linha-innovation { width: 50px; margin-top: 8px; margin-bottom: 15px; background-color: #d4af37; }
.titulo-innovation { font-size: 2.0rem; font-weight: 200; color: #cccccc; line-height: 1.1; margin: 0; }

.coluna-dir-innovation { 
    flex: 0 0 70%; 
    max-width: 70%; 
    display: flex; 
    justify-content: space-between; 
    gap: 40px; 
    text-align: left; 
    margin: 0; 
}

.sub-coluna-innovation { 
    flex: 1; 
    color: #cccccc; 
    font-size: 1.15rem; 
    line-height: 1.75; 
}

.sub-coluna-innovation p { margin: 0 0 24px 0; }
/* --- ❌❌❌VÍDEO POP-UP (COMPUTADOR) - VERSÃO LIMPA E FINAL❌❌❌ --- */

.btn-fechar-popup {
    /* 1. Posicionamento Colado ao Ecrã */
    position: fixed !important; 
    top: 30px !important;         
    right: 40px !important;       
    z-index: 99999 !important; /* Prioridade máxima absoluta */
    
    /* 2. Forçar a Existência (Anular as regras do template) */
    display: block !important;       
    visibility: visible !important;  
    opacity: 1 !important;           
    
    /* 3. Design Elegante (O vermelho sai, entra o minimalismo) */
    background-color: transparent !important; /* Volta a ser invisível */
    border: none !important; 
    color: #ffffff !important; /* A cruz volta a ser branca */
    font-size: 2rem !important; /* Tamanho generoso para ser fácil de clicar */
    font-weight: 200 !important; /* Letra mais fina (minimalista) */
    line-height: 1 !important;
    padding: 0 !important;
    
    /* 4. Interação (A mãozinha do rato) */
    cursor: pointer !important;    
    
    /* 5. Transição suave na cor quando se passa o rato (opcional mas fica bem) */
    transition: color 0.3s ease !important;
}

/* O pequeno toque de magia quando passas o rato por cima da cruz */
.btn-fechar-popup:hover {
    color: #d4af37 !important; /* Fica dourado HYLINE */
}
/* ❌❌❌AWARDS - COMPUTADOR❌❌❌ */
@media (min-width: 769px) {
  #awards .awards-master-box {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 60px !important;
  }
  #awards .awards-left-col {
    flex: 1 !important;
    min-width: 350px !important;
  }
  #awards .awards-video-col {
    flex: 1.2 !important;
    height: 350px !important;
    margin-top: 45px !important;
  }
  section#awards.awards-section-clean {
    position: relative !important;
    overflow: hidden !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  section#awards .awards-master-box {
    margin-left: 6% !important;
    margin-right: 4% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 60px !important;
    width: 90% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  section#awards .awards-left-col {
    flex: 1 !important;
    min-width: 350px !important;
    text-align: left !important;
    padding-right: 20px !important;
  }
  section#awards .awards-video-col {
    flex: 1.2 !important;
    height: 350px !important;
    position: relative !important;
    margin-top: 45px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
}

/* 4 GIFs - COMPUTADOR */
@media (min-width: 769px) {
  section#sustainable-future .sustainable-features-flex {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }
  
  section#sustainable-future .sustainable-item {
    flex: 0 0 23% !important;
    max-width: 23% !important;
  }
  
  section#sustainable-future h1.sustainable-title {
    white-space: nowrap !important;
  }

  /* ❌❌❌ NOVA REGRA: Centrar o GIF dentro da sua coluna ❌❌❌ */
  section#sustainable-future .sustainable-item .icon {
    display: block !important; /* Transforma o span numa caixa de largura total */
    text-align: center !important; /* Centra o GIF lá dentro */
    margin-bottom: 20px !important; /* Dá um espaço para o GIF não colar ao texto de baixo */
  }
}

/* 3 Colunas Lado a Lado - COMPUTADOR */
@media (min-width: 769px) {
  section#hyline-follow .follow-features-flex {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }
  
  section#hyline-follow .follow-item {
    flex: 0 0 31% !important;
    max-width: 31% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Mantém o texto alinhado à esquerda, como no teu design */
    text-align: left !important;
  }
  
  section#hyline-follow h1.follow-title {
    white-space: nowrap !important;
  }

  /* ❌❌❌ NOVA REGRA 1: Centrar o GIF dentro da sua coluna ❌❌❌ */
  /* Nota: Assumi que o teu HTML aqui usa as mesmas classes (icon) que a secção anterior. */
  section#hyline-follow .follow-item .icon {
    display: block !important;       /* Obriga a caixa do ícone a ocupar a largura total da coluna (31%) */
    width: 100% !important;          /* Reforço de segurança para garantir a largura total */
    text-align: center !important;   /* Puxa o ícone (o teu GIF) exatamente para o centro dessa caixa */
    margin-bottom: 20px !important;  /* Cria um espaço elegante antes do título */
  }

  /* ❌❌❌ NOVA REGRA 2: Reduzir o tamanho dos títulos (CONFIGURATION, etc.)❌❌❌ */
  /* Nota: Ajusta o valor '1.2rem' se quiseres maior ou menor. */
  section#hyline-follow .follow-item h3 {
    font-size: 1.2rem !important;    /* Reduz o tamanho da letra. (Tenta 1.1rem ou 1.0rem se ainda achares grande) */
    letter-spacing: 2px !important;  /* Adiciona um pequeno espaçamento entre letras (frequente em design editorial/branding) */
    margin-bottom: 10px !important;  /* Espaço entre o título e o subtítulo ("How you operate") */
    width: 100% !important;          /* Garante que o título tem espaço para "respirar" */
    text-align: center !important;   /* Opcional: Se quiseres que o título também fique centrado com o ícone, usa isto. Se preferires alinhado à esquerda (como na tua imagem), apaga esta linha! */
  }
}

/* ❌❌❌INSPIRAÇÃO - COMPUTADOR❌❌❌ */
@media (min-width: 769px) {
  section#inspiration .inspiration-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  section#inspiration .inspiration-card {
    flex: 0 0 calc(33.333% - 20px) !important;
    max-width: calc(33.333% - 20px) !important;
  }
}
/* --- 💻 ❌❌❌ SECÇÃO DO MAPA (COMPUTADOR - LIMPO E UNIFICADO) ❌❌❌ --- */

.map-layout-container { 
    margin-left: 6% !important;  
    margin-right: 4% !important; 
    width: 90% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: flex-start !important; /* Alinha as colunas à esquerda */
    gap: 20px !important; /* Espaço entre os botões e o globo */
    box-sizing: border-box !important; 
}

/* Coluna Direita: O Globo empurrado para a direita */
.map-content { 
    flex: 0 0 70% !important; 
    max-width: 70% !important; 
    min-height: 600px !important; 
    display: flex !important;
    justify-content: flex-start !important; 
    margin-left: 40px !important; /* 🚀 Puxa o globo para a direita! (Aumenta ou diminui este valor se quiseres mais ou menos espaço) */
}

#globe-container {
    width: 100% !important;
    height: 600px !important;
}
/* ==========================================================
   📈 GRÁFICO DE PONTOS (SECÇÃO GROWTH) - COMPLETO E CORRIGIDO
   ========================================================== */

/* 1. O PALCO: Alarga a coluna e força a altura para não ficar esmagada */
.grafico-growth-sec .coluna-dir-people {
    flex: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 400px !important; /* 🎯 A SOLUÇÃO: Garante que o palco tem 400px de altura */
}

.grafico-growth-sec .cronologia-diagonal-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 2. OS ATORES: Os pontos começam parados, escondidos e SEM animação */
.ponto-marco {
    position: absolute;
    left: var(--posicao-left);
    bottom: var(--posicao-bottom);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, 50%);
    opacity: 0; 
}

/* 3. O INTERRUPTOR LIGADO: Quando o JS adiciona esta classe, a animação arranca! */
.arranca-animacao .ponto-marco {
    animation: aparecerPonto 0.8s ease-out forwards;
}

/* O efeito de escadinha (um ponto de cada vez) */
.arranca-animacao .ponto-marco:nth-child(1) { animation-delay: 0.2s; }
.arranca-animacao .ponto-marco:nth-child(2) { animation-delay: 0.6s; }
.arranca-animacao .ponto-marco:nth-child(3) { animation-delay: 0.8s; }
.arranca-animacao .ponto-marco:nth-child(4) { animation-delay: 0.10s; }
.arranca-animacao .ponto-marco:nth-child(5) { animation-delay: 1.10s; }

/* 4. OS FATOS DOS ATORES: Estilo padrão dos Círculos (Cinzento para 2010 a 2013) */
.circulo {
    width: 14px;
    height: 14px;
    background-color: #cccccc !important; 
    border: 2px solid #cccccc !important; 
    border-radius: 50% !important;
    margin-bottom: 10px !important;
}

/* O Círculo Final de 2026 (Destaque Dourado) */
.destaque-final {
    background-color: #d4af37 !important; 
    border-color: #d4af37 !important;
    transform: scale(1.2); /* Fica ligeiramente maior para destacar */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5) !important; /* Brilho suave */
}

/* 5. TEXTOS (Anos e Valores) */
.caixa-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ano {
    font-size: 0.9rem;
    color: #888888;
    margin-bottom: 2px;
}

.numero {
    font-size: 1.2rem;
    font-weight: bold;
    color: #cccccc;
}

/* 6. A COREOGRAFIA: Animação que faz os blocos surgirem de baixo para cima */
@keyframes aparecerPonto {
    from {
        opacity: 0;
        transform: translate(-50%, calc(50% + 20px)); /* Começa 20px mais abaixo */
    }
    to {
        opacity: 1;
        transform: translate(-50%, 50%); /* Sobe para a posição final e fica visível */
    }
}
/* ==========================================================
   ❌❌❌❌❌❌❌❌❌🎬 DESKTOPPPPPPPPPPP COREOGRAFIA DA ANIMAÇÃO HYLINE (VERSÃO LIMPA E PERFEITA)❌❌❌❌❌❌❌❌❌
   ========================================================== */

/* 1. A Caixa Principal (Centrada no topo da imagem do Home) */
/* Caixa principal: Agora sim, obrigada a subir e a posicionar-se onde quisermos */
/* 1. A Caixa Principal (Agora com o poder de crescer por inteiro) */
.centro-animacao-hyline {
    position: absolute !important; 
    top: 35% !important;           
    left: 50% !important;
    transform: translateX(-50%) scale(1.0) !important; /* 🎯 O SEGREDO: O scale(1.3) amplia o bloco inteiro para 130% do tamanho original! */
    display: flex;
    flex-direction: column; 
    align-items: center;    
    z-index: 10;
}

/* 2. Bloco do Texto Superior (EXCELLENCE) */
.bloco-topo {
    margin-bottom: 40px; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o texto e a linha dourada pela esquerda */
}

.texto-excellence {
    font-size: 13px;
    letter-spacing: 4.5px;
    color: #ffffff; /* 🎯 A COR PURA: O código #ffffff obriga o texto a ficar num branco brilhante e total! */
    margin: 0 0 0px 0; 
    opacity: 0; 
    animation: coreografiaExcellence 8s infinite; 
}

/* A palavra EXCELLENCE em destaque (mais grossa) */
.palavra-excellence {
    font-weight: 500; 
}



/* 3. Bloco do Logótipo SVG Oficial */
.bloco-logo {
    display: flex;
    align-items: center; 
}

.logo-hyline-svg {
    height: 32px; 
    width: auto;
    margin: 0 15px;
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); 
    animation: coreografiaHyline 8s infinite;
}

/* 4. Subtítulo Institutional ancorado no canto inferior esquerdo (Mais acima e mais compacto) */
.subtitulo-institucional {
    position: absolute !important;
    bottom: 180px !important;      /* 🎯 AQUI SOBE: Aumentámos para 140px para o bloco subir mais na imagem! */
    left: 6% !important;          /* Mantém rigorosamente os 6% de margem esquerda */
    text-align: left !important;  
    z-index: 10;
}

/* Estilo para as linhas de texto Institutional e Presentation (Mais juntas) */
.linha-sub {
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 1px 0;             /* 🎯 AQUI AJUNTAMOS: Reduzimos para 2px para as linhas ficarem bem pertinho uma da outra! */
}

/* A terceira linha: O ano 2026 em destaque dourado */
.ano-apresentacao {
    color: #d4af37;             
    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 600;
    margin: 0;
}
/* ==========================================================
   ❌❌❌❌❌❌❌❌❌🎭 AS REGRAS DE ANIMAÇÃO (@KEYFRAMES)❌❌❌❌❌❌❌❌❌
   ========================================================== */

/* A palavra EXCELLENCE */
@keyframes coreografiaExcellence {
    0%, 15% { opacity: 0; }
    25%, 85% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

/* A Cortina do Logótipo SVG */
@keyframes coreografiaHyline {
    0%, 15% { opacity: 1; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    35%, 90% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    95%, 100% { opacity: 0; }
}


/* ===================================================================
 *  ❌❌❌❌❌❌❌❌❌📱 FIM DESKTOP❌❌❌❌❌❌❌❌❌ -
 * =================================================================== */

/* ===================================================================
 *  ❌❌❌❌❌❌❌❌❌📱 TELEMÓVEL (MOBILE)❌❌❌❌❌❌❌❌❌ - TUDO O QUE AFETA ECRÃS ATÉ 768px
 * =================================================================== */
/* ==========================================================
   📱 ANOS 
   ========================================================== */

/* Esta regra aplica-se automaticamente em ecrãs com largura inferior ou igual a 768px (telemóveis e tablets) */
@media screen and (max-width: 768px) {

    /* 1. Centra o palco do gráfico por completo */
    .grafico-growth-sec .cronologia-diagonal-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* 2. Força o bloco dos anos e pontos a centrar-se horizontalmente no ecrã */
    .ponto-marco {
        position: relative !important; /* Liberta da posição absoluta para alinhar em coluna no telemóvel */
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 15px auto !important; /* Espaçamento vertical e centrado automático */
        text-align: center !important;
        align-items: center !important;
    }

    /* 3. Garante que os textos e números ficam perfeitamente ao centro */
    .caixa-texto {
        align-items: center !important;
        text-align: center !important;
    }
}
@media only screen and (max-width: 768px) {

    html {
        scroll-behavior: smooth !important;
    }

   /* ❌❌❌CABEÇALHO NO TELEMÓVEL❌❌❌ */
    #header {
        padding-left: 15px !important;
        padding-right: 15px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        background-color: rgba(17, 17, 17, 0.35) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .header-logo {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }

    .header-menu-toggle {
        display: block !important;
        width: 30px !important;
        height: 18px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        position: absolute !important;
        top: 50% !important;
        right: 20px !important; /* 👈 ALTERADO: Antes era 70px, agora aproxima-se mais da margem direita! */
        transform: translateY(-50%) !important;
        z-index: 600 !important;
        font-size: 0 !important;
        color: transparent !important;
        text-indent: -9999px !important;
    }

    .header-menu-toggle::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important; /* 👈 ALTERADO: Linhas ocupam a largura toda do botão para ficarem maiores */
        height: 1.5px !important;
        background-color: #ffffff !important;
        border-radius: 1px !important;
    }

    .header-menu-toggle span {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        width: 100% !important; /* 👈 ALTERADO */
        height: 1.5px !important;
        background-color: #ffffff !important;
        border-radius: 1px !important;
    }

    .header-menu-toggle::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 100% !important; /* 👈 ALTERADO */
        height: 1.5px !important;
        background-color: #ffffff !important;
        border-radius: 1px !important;
    }

    /*❌❌❌ MENU DESDOBRÁVEL❌❌❌ */
    #header-nav-wrap {
        display: none !important;
        position: absolute !important;
        top: 68px !important;
        right: 15px !important; /* 👈 Alinhado à direita */
        width: 180px !important;
        background-color: rgba(17, 17, 17, 0.25) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 20px 20px 25px 20px !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
        border-radius: 6px !important;
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6) !important;
        overflow: visible !important;
    }

    #header-nav-wrap.is-clicked,
    #header-nav-wrap[style*="block"] {
        display: block !important;
    }

    #header-nav-wrap .header-main-nav {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        text-align: right !important; /* 👈 ALTERADO: Palavras do menu justificadas/alinhadas à direita! */
    }

    #header-nav-wrap .header-main-nav li {
        display: block !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    #header-nav-wrap .header-main-nav li a,
    #header-nav-wrap .header-main-nav .botao-idioma-nav {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05rem !important;
        display: block !important;
        padding: 2px 0 !important;
        transition: color 0.2s ease !important;
    }

    #header-nav-wrap .header-main-nav li a:hover,
    #header-nav-wrap .header-main-nav li.current a {
        color: #d4af37 !important;
    }

    #header-nav-wrap .header-main-nav li ul,
    #header-nav-wrap .header-main-nav .submenu-idiomas,
    #header-nav-wrap .header-main-nav li .dropdown-content {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important; /* 👈 Alinhado à direita para os idiomas */
        margin-top: 5px !important;
        text-align: right !important; /* 👈 Idiomas também alinhados à direita */
    }

    #header-nav-wrap .header-main-nav li ul li a,
    #header-nav-wrap .header-main-nav .submenu-idiomas a {
        font-size: 1.00rem !important;
        color: #cccccc !important;
        padding: 2px 0 !important;
        display: block !important;
    }

    #header-nav-wrap .header-main-nav li ul li a:hover,
    #header-nav-wrap .header-main-nav .submenu-idiomas a:hover {
        color: #d4af37 !important;
    }
    /*❌❌❌ HOME - TELEMÓVE❌❌❌L */
    #home {
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        padding-top: 350px !important; 
        padding-bottom: 40px !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: center !important;
        background-color: transparent !important;
        position: relative !important;
    }

    .home-content {
        position: relative !important;
        width: 100% !important;
        padding-top: 3rem !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .home-content-left {
        width: 100% !important;
        padding: 0 20px !important;
        text-align: center !important;
        transform: none !important;
    }

    .home-content-left h3 {
        font-size: 1.3rem !important;
        letter-spacing: 0.15rem !important;
        margin-bottom: 0.8rem !important;
        text-align: center !important;
    }

    .home-content-left h3 span {
        display: block !important;
        margin-bottom: 0.3rem !important;
    }

    .home-content-left h3 .ano-titulo {
        color: #cccccc !important;
        font-size: 1rem !important;
        letter-spacing: 0.2rem !important;
        margin-top: 0.4rem !important;
    }

    .home-content-left h1 {
        font-size: 1.3rem !important;
        line-height: 1.25 !important;
        margin-top: 25px !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        padding-bottom: 20px !important;
    }

    .home-social-list {
        display: none !important;
    }

    .home-scrolldown {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 5px 0 0 0 !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 10 !important;
    }

    .home-scrolldown a {
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto !important;
        font-size: 0 !important;
        color: transparent !important;
        text-decoration: none !important;
        background: transparent !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    

    .home-scrolldown a span,
    .home-scrolldown a i {
        display: none !important;
    }

  /*❌❌❌❌❌❌❌❌❌ ABOUT - TELEMÓVEL❌❌❌❌❌❌❌❌❌ */
    .seccao-about {
        width: 100% !important;
        padding-top: 40px !important;
        padding-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    .caixa-mestra-about {
        flex-direction: column !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 40px !important; 
        padding-right: 40px !important;
        gap: 20px !important; 
    }

    /* SUPER-TRUNFO: Forçamos a coluna da esquerda a não ter margens internas */
    .caixa-mestra-about .coluna-esq-about,
    .caixa-mestra-about .hyline-section-header {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-left: 0 !important; 
        margin-left: 0 !important;  
    }

    /* SUPER-TRUNFO: Garantimos que nada dentro do cabeçalho tem margem marota */
    .caixa-mestra-about .coluna-esq-about h1,
    .caixa-mestra-about .coluna-esq-about span,
    .caixa-mestra-about .coluna-esq-about div {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
    }

    .linha-about {
        margin-right: auto !important; 
    }

    .coluna-dir-about {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        flex-direction: column !important; 
        gap: 0 !important; 
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .sub-coluna-about {
        width: 100% !important;
        text-align: left !important; 
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .sub-coluna-about p {
        font-size: 1.05rem !important; 
    }
    
    /*❌❌❌❌❌❌❌❌❌ MISSION, VISION, VALUES - TELEMÓVEL❌❌❌❌❌❌❌❌❌ */
.seccao-mvv {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 40px !important;
    /* Adicionamos isto para o telemóvel ficar com pouco espaço! */
    padding-bottom: 20px !important; 
    box-sizing: border-box !important;
}
    .caixa-cartoes-mvv {
        flex-direction: column !important;
        align-items: center !important;
        gap: 50px !important;
    }

    .cartao-mvv {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
    }
  .cartao-mvv p {
    font-size: 1.05rem !important;
}

    /* ❌❌❌❌❌❌❌❌❌THE PATH - TELEMÓVEL❌❌❌❌❌❌❌❌❌ */
    .the-path.seccao-titulo-path,
    .caixa-mestra-path {
        padding-top: 15px !important;    
        margin-top: 0 !important;
        padding-left: 10px !important;   
        padding-right: 20px !important;  
        box-sizing: border-box !important;
    }

    .hyline-section-header.coluna-unica-path {
        padding-left: 0 !important;     
        text-align: left !important;
        margin-bottom: 15px !important; 
    }

    .close-btn, 
    .cartao-fechar, 
    [class*="close"], 
    [class*="fechar"] {
        display: block !important;
    }

    .seccao-com-video,
    .minha-timeline,
    .linha-de-anos,
    .ano-item {
        transform: none !important;
        -webkit-transform: none !important;
        perspective: none !important;
        filter: none !important;
        will-change: auto !important;
    }

    .minha-timeline {
        display: flex !important;
        flex-wrap: wrap !important; 
        justify-content: center !important; 
        gap: 20px 2% !important; 
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .linha-de-anos {
        display: contents !important; 
    }

    .ano-item {
        width: 31% !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 20px !important; 
    }

    .ano-e-linha .linha,
    .linha-de-anos .linha,
    .ano-item::before,
    .ano-item::after { display: none !important; }

    .ano-e-linha {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        cursor: pointer !important; 
    }

    .ano-texto {
        writing-mode: horizontal-tb !important; 
        font-size: 1.4rem !important; 
        font-weight: lighter!important;
        color: #d4af37 !important;
        text-align: center !important;
        padding: 5px !important;
        transform: none !important;
    }

/* 🎯 ESTE BLOCO NO TELEMÓVEL ANULA QUALQUER "ABRE-ESQUERDA" OU "ABRE-DIREITA" DO DESKTOP */
    .ano-item .quadro-info,
    .ano-item.abre-esquerda .quadro-info,
    .ano-item.abre-direita .quadro-info,
    .quadro-info {
        position: fixed !important;  
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important; /* Puxa milimetricamente para o centro exato da tela */
        
        margin: 0 !important;
        width: 85vw !important;
        max-width: 340px !important;
        max-height: 75vh !important;  
        overflow-y: auto !important;  
        
        background-color: rgba(15, 15, 15, 0.20) !important;  
        backdrop-filter: blur(16px) !important;  
        -webkit-backdrop-filter: blur(16px) !important;
        
       
        border-radius: 16px !important;
        
        padding: 45px 25px 30px 25px !important;  
        text-align: center !important;
        color: #ffffff !important;
        
        z-index: 999999 !important;  
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.95)!important; 
        
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;  
        box-sizing: border-box !important;
    }

    /* O Botão de Fechar no canto superior direito do cartão */
    .fechar-cartao {
        position: absolute !important;
        top: 12px !important;
        right: 18px !important;
        font-size: 1.8rem !important;
        color: #d4af37 !important;
        cursor: pointer !important;
        line-height: 1 !important;
        font-weight: bold !important;
        z-index: 10 !important;
    }
 /* ----------------------------------------------------
   COR DOS ANOS: Normal vs. Quando o Cartão está Aberto
   ---------------------------------------------------- */

/* 1. Cor normal dos anos (enquanto o cartão está fechado) */
.ano-texto {
    color: #cccccc !important; /* Cinzento claro */
    transition: color 0.3s ease; /* Transição suave */
}

/* 2. Cor do ano ENQUANTO o cartão estiver aberto (estado ativo) */
/* Nota: Dependendo do teu template, o JavaScript pode usar .ativo, .open ou .is-active */
.ano-item.ativo .ano-texto,
.ano-item.open .ano-texto,
.ano-item.is-active .ano-texto {
    color: #d4af37 !important; /* O teu amarelo elegante */
}
/* 🎯 ESTA É A CHAVE MÁGICA QUE FALTAVA: Torna o cartão visível no centro quando ativado */
    .quadro-info.mostrar-cartao {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
 
/* ❌❌❌ AWARDS - TELEMÓVEL (LIMPO E ÚNICO) ❌❌❌ */
  section#awards.awards-section-clean {
        position: relative !important;
        min-height: auto !important;
        display: block !important;
        padding: 15px 0 !important; /* Reduzido de 70px para 15px para subir a secção */
        box-sizing: border-box !important;
        width: 100% !important;
        background-color: transparent !important;
    }

    section#awards .awards-master-box {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 30px !important;
    }

    /* Puxamos o título um pouco mais para a direita */
   /* Puxamos o título e texto mais para a esquerda e garantimos margem de segurança à direita */
    section#awards .awards-left-col {
        order: 1 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        
        padding-left: 20px !important;  /* Margem segura à esquerda para não colar à borda do telemóvel */
        padding-right: 50px !important; /* Margem segura à direita para o texto respirar */
        
        box-sizing: border-box !important;
        text-align: left !important;
    }

    section#awards h1 {
        font-size: 1.5rem !important;
        line-height: 1.05 !important;
        white-space: normal !important;
    }

    section#awards .section-line {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    section#awards ul li {
        font-size: 1.05rem !important;
        margin-bottom: 10px !important;
    }

  /* 📱 AJUSTES DA SECÇÃO DOS PRÉMIOS (Vídeo) PARA TELEMÓVEL 📱 */
@media screen and (max-width: 768px) {
    
    /* 1. Transforma a caixa numa torre (empilha as colunas) */
    .awards-master-box {
        flex-direction: column !important; 
        gap: 30px !important; 
    }

    /* 2. O Texto: Fica no 1º andar (topo) */
    .awards-left-col {
        order: 1 !important; /* Obriga o texto a ser o primeiro a aparecer */
        min-width: 100% !important; 
        width: 100% !important;
        padding-left: 30px !important; /* Mantém a margem que pediste antes */
        padding-right: 30px !important; /* Evita que o texto cole à borda direita */
    }

   /* 3. O Vídeo: Fica no 2º andar (por baixo do texto) */
    .awards-video-col {
        order: 2 !important; /* Obriga o vídeo a vir logo a seguir ao texto */
        width: 100% !important;
        min-height: 250px !important; 
        margin-top: -15px !important; /* 🚀 Aqui está a magia! Tenta -15px, -20px ou até -30px para subir mais */
    }
/* ❌❌❌ SUSTAINABLE FUTURE - TELEMÓVEL (PADRONIZADO) ❌❌❌ */
    
    /* 1. Caixa principal da secção */
    section#sustainable-future.sustainable-section-clean {
        padding: 40px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Caixa Mestra alinhada com as margens laterais */
    section#sustainable-future .caixa-mestra-people {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important; /* Espaçamento à esquerda igual às outras secções */
        padding-right: 20px !important; /* Espaçamento à direita */
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* 3. O Cabeçalho (Título e Subtítulo) rigorosamente igual às anteriores */
    section#sustainable-future .hyline-section-header.coluna-esq-people {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    /* 4. Título principal perfeitamente adaptado a telemóvel */
    section#sustainable-future .titulo-people {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1.5rem !important;    /* Tamanho equilibrado para não rebentar o ecrã */
        line-height: 1.3 !important;
        white-space: normal !important;  /* Permite que o texto mude de linha normalmente */
        word-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    /* 5. Linha decorativa encostada à esquerda */
    section#sustainable-future .linha-people {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* 6. Grelha dos itens sustentáveis abaixo do título */
    section#sustainable-future .sustainable-features-flex {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    section#sustainable-future .sustainable-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    section#sustainable-future .sustainable-item .icon {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 15px !important;
    }

    /* 7. Texto normal (parágrafos) e texto dos GIFs com novo tamanho, protegendo os títulos */
    section#sustainable-future .service-content p,
    section#sustainable-future .texto-abaixo-gif {
        font-size: 1.05rem !important; /* AQUI ESTÁ A MAGIA: alterado para 1.05rem */
        line-height: 1.6 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
/* ❌❌❌ HYLINE FOLLOW - TELEMÓVEL (PADRONIZADO) ❌❌❌ */
    
    /* 1. Caixa principal da secção */
    section#hyline-follow.follow-section-clean {
        padding: 40px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Caixa Mestra idêntica às outras secções, com margens laterais seguras de 20px */
    section#hyline-follow .caixa-mestra-people {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important; 
        padding-right: 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* 3. O Cabeçalho (Título e Subtítulo) rigorosamente alinhado à esquerda */
    section#hyline-follow .hyline-section-header.coluna-esq-people {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    /* 4. Título principal padronizado (tamanho equilibrado e sem cortes) */
    section#hyline-follow .titulo-people {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1.5rem !important;    
        line-height: 1.3 !important;
        white-space: normal !important;  
        word-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    /* 5. Linha decorativa encostada à esquerda */
    section#hyline-follow .linha-people {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* 6. Grelha dos itens de follow abaixo do título (mantendo o teu alinhamento centrado que estava ótimo) */
    section#hyline-follow .follow-features-flex {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    section#hyline-follow .follow-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;     
        text-align: center !important;      
    }

    section#hyline-follow .follow-item .service-content,
    section#hyline-follow .follow-item .service-content h3,
    section#hyline-follow .follow-item .service-content span,
    section#hyline-follow .follow-item .service-content p {
        text-align: center !important;
        width: 100% !important;
    }

    section#hyline-follow .service-content p,
    section#hyline-follow .texto-abaixo-gif {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }

  /* ❌❌❌ PEOPLE - TELEMÓVEL (COLUNA ÚNICA E ALINHADA) ❌❌❌ */
    section.seccao-people,
    .people {
        width: 100% !important;
        padding: 40px 0 !important;
        box-sizing: border-box !important;
    }

    /* A caixa mestra passa a ser uma coluna vertical */
    section.seccao-people .caixa-mestra-people,
    .people .caixa-mestra-people {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 30px !important;
    }

    /* Título alinhado à esquerda com 15px de padding-left */
    section.seccao-people .coluna-esq-people,
    .people .coluna-esq-people {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-left: 40px !important; /* Aumentámos de 20px para 35px para o empurrar para a direita */
        padding-right: 30px !important;
        box-sizing: border-box !important;
    }
    /* Garante que a linha amarela acompanha o alinhamento à esquerda */
    section.seccao-people .linha-people,
    .people .linha-people {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* A coluna da direita com os textos passa a coluna única */
    section.seccao-people .coluna-dir-people,
    .people .coluna-dir-people {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 15px !important;
    }

    /* Cada sub-coluna e respetivos parágrafos alinhados à esquerda com 15px */
    section.seccao-people .sub-coluna-people,
    .people .sub-coluna-people {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 40px !important; /* Aumentámos de 15px para 35px para acompanhar o título */
        padding-right: 30px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    section.seccao-people .sub-coluna-people p,
    .people .sub-coluna-people p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-align: left !important;
        margin-bottom: 15px !important;
    }
  /* 📱 AJUSTES DO GRÁFICO PARA TELEMÓVEL 📱 */
@media screen and (max-width: 768px) {

    /* 1. O Quadro em Branco: desliga o empilhamento e dá espaço em altura */
    .grafico-growth-sec .cronologia-diagonal-container {
        display: block !important; 
        position: relative !important;
        width: 100% !important;
        min-height: 350px !important; /* Altura da caixa. Aumenta se os pontos ficarem muito apertados */
        margin-top: 40px !important;
    }

    /* 2. Os Pontos: manda-os ler as coordenadas secretas do HTML */
    .grafico-growth-sec .ponto-marco {
        position: absolute !important;
        left: var(--posicao-left) !important;
        bottom: var(--posicao-bottom) !important;
        
        /* Se quiseres empurrar o gráfico inteiro mais para a direita no telemóvel, 
           aumenta este valor (ex: 30px ou 40px) */
        margin-left: 15px !important; 
    }
  section.grafico-growth-sec {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

}
  
  /* ❌❌❌ INNOVATION & PATENTS - TELEMÓVEL (ALINHADO À ESQUERDA) ❌❌❌ */
    section.seccao-innovation,
    .innovation {
        width: 100% !important;
        padding: 40px 0 !important;
        box-sizing: border-box !important;
    }

    /* A caixa mestra passa a coluna vertical */
    section.seccao-innovation .innovation-master-box,
    .innovation .innovation-master-box {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 30px !important;
    }

    /* Coluna do Título alinhada à esquerda com margem lateral */
    section.seccao-innovation .coluna-esq-innovation,
    .innovation .coluna-esq-innovation {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-left: 40px !important; 
        padding-right: 40px !important;
        box-sizing: border-box !important;
    }

    /* Garante que a linha amarela do título fica alinhada à esquerda */
    section.seccao-innovation .linha-innovation,
    .innovation .linha-innovation {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Coluna dos textos alinhada à esquerda */
    section.seccao-innovation .coluna-dir-innovation,
    .innovation .coluna-dir-innovation {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 25px !important;
    }

    /* Cada sub-coluna e os parágrafos com margem lateral e alinhados à esquerda */
    section.seccao-innovation .sub-coluna-innovation,
    .innovation .sub-coluna-innovation {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 40px !important; 
        padding-right: 40px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    section.seccao-innovation .sub-coluna-innovation p,
    .innovation .sub-coluna-innovation p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-align: left !important;
        margin-bottom: 15px !important;
    }

    /* 🎯 Mantém o botão do vídeo ou elementos interativos perfeitamente centrados */
    section.seccao-innovation .video-btn-container,
    section.seccao-innovation .btn-centro,
    .innovation .video-centrado {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 20px auto !important;
        text-align: center !important;
    }
  /* A caixa que envolve o vídeo serve de âncora e adapta-se perfeitamente */
    .popup-video-container {
        position: relative !important;
        width: 90% !important;
        max-width: 600px !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: auto !important;
    }

    /* O botão de fechar perfeitamente posicionado no canto superior direito da caixa */
    .btn-fechar-popup {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 2147483647 !important;
        background: rgba(0, 0, 0, 0.0) !important;
       
        color: #cccccc !important;
        font-size: 20px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
    }
    
 /* 1. O botão em formato de pílula mais compacto */
    .btn-pilula-video {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;               /* Garante que o botão só ocupa o espaço do texto */
        gap: 8px !important;                  /* Espaço ligeiramente menor entre o play e a palavra */
        padding: 8px 16px !important;         /* ✂️ Reduzimos o padding (antes era 12px 24px) para ficar mais pequeno */
        background-color: transparent !important; 
        color: #cccccc !important;            
        border: 1px solid #cccccc !important; 
        border-radius: 50px !important;       
        font-size: 0.9rem !important;         /* ✂️ Letra ligeiramente mais compacta (opcional) */
        font-weight: 400 !important;
        cursor: pointer !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        transition: all 0.3s ease !important; 
    }

    /* Ícone de play */
    .btn-pilula-video .icone-play {
        color: #cccccc !important;
        font-size: 0.85rem !important;        /* Ajusta o tamanho do ícone para acompanhar o texto */
        transition: color 0.3s ease !important;
    }

    /* 2. O estado quando se passa o dedo / clica por cima (Fica TUDO AMARELO) */
    .btn-pilula-video:hover,
    .btn-pilula-video:active,
    .btn-pilula-video:focus {
        background-color: transparent !important; 
        color: #d4af37 !important;            
        border-color: #d4af37 !important;     
    }

    .btn-pilula-video:hover .icone-play,
    .btn-pilula-video:active .icone-play,
    .btn-pilula-video:focus .icone-play {
        color: #d4af37 !important;            
    }
/* --- 📱 ❌❌❌SECÇÃO DO MAPA (TELEMÓVEL / RESPONSIVO - CENTRADO E PUXADO PARA CIMA)❌❌❌ --- */
@media screen and (max-width: 768px) {

    /* Transforma a caixa principal numa coluna vertical com margens simétricas */
   .map-layout-container {
        flex-direction: column !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        
        gap: 5px !important; /* <--- Reduzi de 15px para 5px para aproximar o globo dos botões/título */
    }

    /* Apanha a coluna da esquerda (Título + Botões) e empilha */
    .map-sidebar {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centra o conteúdo da barra lateral */
    }

  /* Alinha o título à esquerda, mas com um pequeno empurrão para a direita */
    .hyline-section-header {
        text-align: left !important;
        width: 100% !important;
        padding-left: 20px !important; /* 🚀 Puxa o título um bocadinho para a direita (podes ajustar para 20px ou 25px se quiseres mais!) */
        box-sizing: border-box !important;
    }

    /* Botões empilhados na vertical e perfeitamente centrados no ecrã */
    .map-buttons-group {
        display: flex !important;
        flex-direction: column !important; /* Força os botões a ficarem um abaixo do outro em coluna */
        align-items: center !important;    /* Centra cada botão no meio */
        gap: 10px !important;
        margin-top: 15px !important;
        width: 100% !important;
    }

    /* Cada botão ocupa uma largura generosa mas fica centrado */
    .map-buttons-group .map-btn {
        width: 45% !important;
        max-width: 280px !important;     /* Impede que fiquem exageradamente largos em telemóveis grandes */
        text-align: center !important;
        margin: 0 auto !important;       /* O segredo para centrar elementos em bloco */
    }
   /* Coluna da Direita (O Globo) vai para baixo */
   /* Coluna da Direita (O Globo) perfeitamente contida no ecrã */
    .map-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important; /* Impede que elementos saiam para fora e cortem */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: 0 !important;
        min-height: 250px !important;
        margin-top: 10px !important;
        box-sizing: border-box !important;
    }

    /* 🌍 Caixa principal do globo: reduzimos a altura para 300px para o fechar */
    #globe-container {
        width: 100% !important;
        height: 300px !important;     /* Reduz de 600px para 300px no telemóvel */
        min-height: 300px !important; /* Impede que ele estique demasiado */
        max-height: 300px !important;
        position: relative !important;
    }

    /* Garante que o canvas do globo gerado pelo JavaScript se adapta à largura disponível */
    #globe-container canvas {
        max-width: 100% !important;
        height: auto !important;
        
        /* Puxa o globo um bocadinho para cima se achares necessário */
        margin-top: -30px !important; 
    }
  /* 📱 ❌❌❌SECÇÃO DE PRODUTOS E TÍTULOS (PADRONIZADO PARA TELEMÓVEL)❌❌❌ */
    
    /* 1. Alinhamento e margens seguras para os títulos "Our systems" e "Options" */
    section#products,
    #options-title-section {
        width: 100% !important;
        padding: 30px 0 !important;
        box-sizing: border-box !important;
    }

    section#products .caixa-mestra-people,
    #options-title-section .caixa-mestra-people {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important; 
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 2. Cabeçalho dos títulos rigorosamente igual às outras secções */
    section#products .hyline-section-header.coluna-esq-people,
    #options-title-section .hyline-section-header.coluna-esq-people {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;}
       
/* Regra exclusiva para puxar apenas o título Options para a esquerda */
    #options-title-section .hyline-section-header.coluna-esq-people {
        margin-left: -20px !important; 
    }
    section#products .titulo-people,
    #options-title-section .titulo-people {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    section#products .linha-people,
    #options-title-section .linha-people {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* 3. Ajuste das linhas de produtos para telemóvel (coluna única) */
    /* 1. Dá mais espaço nas margens laterais da linha de produtos */
    .product-grid-row {
        margin-bottom: 60px !important; 
        padding-left: 20px !important;
        padding-right: 40px !important; /* <--- Aumentámos de 20px para 35px para afastar da direita! */
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* 2. Garante que todos os parágrafos de texto ficam alinhados à esquerda e sem esticar */
  /* 2. Garante que todos os parágrafos de texto ficam alinhados à esquerda e sem esticar */
    .product-grid-row p {
        text-align: left !important;      /* Alinha o texto apenas à esquerda */
        text-justify: none !important;    /* Remove qualquer justificação forçada */
        font-size: 1.05rem !important;    /* <--- AQUI ESTÁ: Define o tamanho da letra para os textos */
        box-sizing: border-box !important;
    }
    .product-grid-row > div {
        flex-direction: column !important; /* Transforma o lado a lado numa coluna vertical */
        gap: 20px !important;
    }

    /* ... teu código anterior ... */

    /* 4. Imagens dos produtos centradas e seguras no ecrã */
    .product-grid-row img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

   .subtitulo-cinza-produto {
        margin-bottom: 30px !important; /* Aqui fica o teu espaço extra! */
    }
}
  /* ===================================================================
       🏛️ 1. AS PAREDES: ALINHAMENTO DE TÍTULOS (LISTA VIP)
       =================================================================== */
    section#hyart,
    section#inspiration, 
    section#contacts, 
    section#products,

    #options-title-section {
        width: 100% !important;
        padding: 30px 0 !important;
        box-sizing: border-box !important;
    }

    /* Puxar título e caixa da HYART, INSPIRATION e CONTACTS para a esquerda (0px) */
    section#hyart .caixa-mestra-people,
    section#hyart .hyline-section-header,
    section#inspiration .caixa-mestra-people,  
    section#inspiration .hyline-section-header,
    section#contacts .caixa-mestra-people,      /* 👈 Juntámos a caixa principal dos contactos */
    section#contacts .hyline-section-header {   /* 👈 Juntámos o título dos contactos */
        margin-left: 0 !important;
        padding-left: 0px !important; 
        padding-right: 0px !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* ===================================================================
       🖼️ 2. A MOBÍLIA: GRELHAS HYART E INSPIRATION (AS GÉMEAS)
       =================================================================== */
    
    /* --- HYART --- */
    #hyart .row,
    #hyart .col-eight,
    #hyart .col-four {
        display: flex !important;
        flex-direction: column !important; 
        gap: 15px !important; 
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #hyart .row > div,
    #hyart .col-eight > div,
    #hyart .col-four > div {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important; 
        margin-bottom: 0 !important; 
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    #hyart img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    #hyart .hyart-btn {
        padding: 5px 12px !important;
        font-size: 9px !important;
        letter-spacing: 0.5px !important;
    }

    /* --- INSPIRATION --- */
    section#inspiration .inspiration-grid {
        display: flex !important;
        flex-direction: column !important; 
        gap: 15px !important; 
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    section#inspiration .inspiration-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important; 
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    section#inspiration .inspiration-card img {
        width: 100% !important;
        height: 220px !important; 
        object-fit: cover !important;
        display: block !important;
        border-radius: 8px !important;
    }


    /* ===================================================================
       🌍 3. A MOBÍLIA: GRELHA DOS CONTACTOS
       =================================================================== */
    .contacts-grid {
        display: flex !important;
        flex-direction: column !important; 
        gap: 40px !important; 
    }


    /* ===================================================================
       🔍 4. JANELAS DE GALERIA (LIGHTBOX UNIVERSAL) - NOVO BOTÃO FECHAR
       =================================================================== */
    /* 1. O ROLO DE FILME (A caixa que segura as imagens) */
.caixa-das-imagens-da-galeria {
    display: flex !important; /* Coloca as imagens lado a lado */
    flex-wrap: nowrap !important; /* Proíbe as imagens de caírem para a linha de baixo */
    overflow-x: auto !important; /* Cria o "carril" mágico: permite fazer scroll para os lados */
    overflow-y: hidden !important; /* Esconde o scroll para cima/baixo para não atrapalhar */
    
    /* Para ficar bonito no telemóvel e deslizar suavemente: */
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
}

/* 2. CADA IMAGEM DENTRO DO ROLO */
.imagem-individual-da-galeria {
    flex: 0 0 100% !important; /* Obriga cada imagem a ocupar 100% da largura do ecrã */
    scroll-snap-align: center; /* Faz com que a imagem "encaixe" no centro ao deslizar */
}

/* 3. O AUTOCOLANTE (O botão de fechar X) */
.botao-fechar-cruz {
    position: fixed !important; /* "Cola" o botão no vidro, independentemente do scroll */
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important; /* Garante que fica por cima de TODAS as imagens */
}
    /* Esconder o botão original e fixá-lo no canto superior direito */
    .mfp-close,         
    .sl-close,          
    .pswp__button--close,
    .fancybox-button--close,
    .fancybox-close-small,
    #swipebox-close,
    .vbox-close,
    .lg-close,
    button[title="Close (Esc)"],
    button[title="Close"] {
        font-size: 0 !important; 
        text-indent: -9999px !important; 
        position: fixed !important; 
        top: 20px !important; 
        right: 20px !important; 
        width: 44px !important;
        height: 44px !important;
        background-color: rgba(17, 17, 17, 0.6) !important; 
        border-radius: 50% !important; 
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999999 !important; 
        opacity: 1 !important;
    }

    /* Desenhar o novo "X" centrado dentro do círculo */
    .mfp-close::after,
    .sl-close::after,
    .pswp__button--close::after,
    .fancybox-button--close::after,
    .fancybox-close-small::after,
    #swipebox-close::after,
    .vbox-close::after,
    .lg-close::after,
    button[title="Close (Esc)"]::after,
    button[title="Close"]::after {
        content: '\00D7' !important; 
        font-size: 32px !important; 
        color: #ffffff !important; 
        text-indent: 0 !important; 
        line-height: 1 !important;
        display: block !important;
    }
  .home-section-bg {
  position: relative;
  width: 100%;
  min-height: 100vh !important; 
  height: 100% !important;
  /* Apontamos para o nome exato da imagem do cabeçalho que tens na pasta */
background-image: url('.../images/hero-bg2.webp') !important;  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important; 
}
  }  }