/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  padding-top: 38px; /* Adjust based on header height */
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 20px;
  top: 80px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: #0077cc;
  color: #fff;
  z-index: 10001;
  border-radius: 6px;
  text-decoration: none;
}


/* HEADER section */
header {
  position: fixed;      /* Make it fixed */
  width: 100%;          /* Take full width */
  top: 0;               /* Stick to the top */
  z-index: 10000;        /* Ensure it stays above other content */  
  background-color: rgba(255, 255, 255, 0.8);  /* Slight transparency */
  backdrop-filter: blur(5px);  /* Optional: Blur background */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Subtle shadow */
  transition: background-color 0.3s ease; /* Smooth transition */
  padding: 0 20px;         /* Horizontal padding */
  height: 65px;            /* Set a fixed height */
  display: flex;           /* Enable flexbox */
  align-items: center;     /* Center content vertically */
}
.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;      /* Center vertically */
  height: 100%;             /* Take full height of header */
  padding: 0 20px;          /* Add horizontal padding to prevent content from touching edges */
}
.logo-container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: -10px; /* Adjust this value as needed */
}
.logo {
  width: 60px;
  height: auto;
}
.logo-name {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1f1f1f;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.8px;
  margin-top: 4px;
}
/* NAVIGATION Menu */
.main-nav ul, nav ul {
  display: flex;
  align-items: center;     /* Center items vertically */
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a, nav ul li a {
  text-decoration: none;
  font-size: 1rem;
  color: #333;
  font-weight: bold;  /* Added */
  transition: color 0.2s ease;
}
.main-nav a:hover, nav ul li a:hover {
  color: #007acc;
}
nav ul li:first-child a {
  font-size: 1.9rem;
}
.icono-gris {
  color: rgb(46, 46, 46);
  opacity: 0.4;
  transition: opacity 0.3s ease;
  font-size: 1.1em;
  display: flex;         /* Flexbox for centering */
  align-items: center;   /* Center vertically */
  justify-content: center; /* Center horizontally */
  margin-top: -8px;  /* Shift slightly upwards */
}
.icono-gris:hover {
  opacity: 1;
}
nav ul li {
  margin-left: 20px;
}
/* END HEADER section */



/* HERO section */
.hero {
  position: relative;
  width: 100vw;
  overflow: hidden;
  margin-top: 20px;
}
.hero-img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-text {
  position: absolute;
  top: 50%;
  left: 78%;
  transform: translate(-50%, -50%);
  color: rgb(43, 43, 43);
  background: rgba(223, 223, 223, 0.7); /* Fondo semitransparente para legibilidad */
  padding: 20px 30px;
  border-radius: 20px;
  text-align: center;
  font-size: 1.4rem;
  max-width: 90%;
  font-family: 'Poppins', sans-serif;
  width: 600px;       /* Make it a fixed width */
  max-width: 90%;     /* Still keeps it responsive on smaller screens */
}
.hero-text h1 {
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
/* Boton "Learn More" */
.btn {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 12px 24px;
  margin-top: 20px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #555;
}
.hero .btn {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 20px;
}
/*Intro section*/
.intro-section {
  padding: 100px 20px;
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
}
.intro-subtitle {
  color: #0073c6; /* Cosymbio blue */
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.intro-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 30px;
  line-height: 1.3;
}
.intro-description {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
.intro-btn {
  background-color: #007bff;
  color: #fff;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 35px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background-color 0.3s ease;
  display: inline-block;
}
.intro-btn:hover {
  background-color: #005fc4;
}
/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
  .hero {
      height: 70vh; /* Reduce la altura en móviles */
  }
  .hero-text {
      font-size: 1.5rem;
      padding: 15px;
  }
}
/* Logo over background hero image*/
.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.hero-logo img {
  width: 48px;   /* tamaño del logo */
  height: auto;
}
.logo-name-inline {
  font-size: 1.6rem;      /* hace que el texto acompañe bien al logo */
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: rgb(43, 43, 43);
}
/* END HERO section */



/* WHAT IS ORBITHUB Section*/
/* Intro text (title + description) */
.intro-section {
  padding: 60px 20px 40px 20px;  /* top, right, bottom, left */
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
}
/* Subtitle and main title */
.intro-subtitle {
  color: #0073c6;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-bottom: 15px;
}
.intro-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 25px;
  line-height: 1.3;
}
.intro-description {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 30px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
/* Three feature cards (images + text) */
.feature-section {
  display: flex;
  justify-content: center;
  gap: 80px;
  padding: 5px 50px 40px 50px; /* reduced top padding */
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
}
.feature-card {
  flex: 1 1 340px;
  max-width: 400px;
  text-align: left;
}
.feature-card img {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 20px;
  object-fit: cover;
  height: 280px;
}
.feature-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1f1f1f;
}
.feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}
/* Centered button under the three cards */
/*
.feature-btn-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 5px;  /* tighter spacing 
}*/
/* END / WHAT IS ORBITHUB Section */



/* LOCATION Section */
.location-section {                     /* characteristics for the whole section */
text-align: center;
padding: 100px 20px;                  /* gives always space above/below and left/right. padding: [TOP/BOTTOM] [LEFT/RIGHT] */
max-width: none;                      /* allow full-width flexibility */
margin: 0 auto;                       /* centers the section horizontally */
font-family: 'Poppins', sans-serif;   /* centers the section horizontally */
}
.location-subtitle {
text-transform: uppercase;
font-weight: 600;
color: #0073c6;
font-size: 0.9rem;
letter-spacing: 1px;
margin-bottom: 20px;
}
.location-title {
font-size: 2.5rem;
font-weight: 700;
color: #1f1f1f;
margin-bottom: 25px;
}
.location-description {
font-size: 1.05rem;
line-height: 1.7;
color: #444;
margin-bottom: 50px;
max-width: 910px;
margin-left: auto;
margin-right: auto;
}
/* === OUTER WRAPPER === Acts as an outer container for the images + blue box. */
.location-highlight-wrapper {
width: 100%;                    /* makes the wrapper take up the full width of its parent (.location-section). */
max-width: 1600px;              /* Even though it can stretch to 100% of the page, it won’t exceed 1600px */
margin: 0 auto;                 /* Center horizontally */
display: flex;                  /* turns .location-highlight-wrapper into a flex container. That means its direct child elements 
                                will automatically be laid out using the Flexbox model, rather than the default block model. */
flex-direction: column; /* 👈 Make it stack child rows vertically */
justify-content: center;
align-items: center;     /* Optional: center each row */
gap: 2rem;  
}
/* === HORIZONTAL FLEX GROUP === */
.location-highlight {
display: flex;
gap: 0.5rem;                    /* This is the spacing between the three items */
justify-content: space-between;
align-items: stretch;
width: 82%;
max-width: 1600px;
}
/* === Individual items === */
.highlight-item {
display: flex;
justify-content: center;
align-items: center;
}
.left-image{
flex: 0.8;    /* Make the blue box 0.7 times wider compared to the other elements.*/
}
.left-image img{
width: 100%;
height: auto;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.center-image {
flex: 0.8;    /* Make the blue box 0.7 times wider compared to the other elements.*/
}
.center-image img {
width: 100%;
height: auto;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.highlight-content {
flex: 1.6;            /* Make the blue box 1.4 times wider compared to the other elements*/
/*background: linear-gradient(135deg, #007bff, #0097e6); */
color: white;
border-radius: 1rem;
padding: 2rem;
background: #0077cc;            /* light background for TESTING */
border: 0px solid red;          /* light background for TESTING helps seeing spacing added or removed around the text*/
display: flex;
flex-direction: column;
/* justify-content: center; */    /* removed for TESTING */
justify-content: flex-start;      /* added for TESTING */
text-align: center;
}
.highlight-content h3 {          /* TITLE BOX inside the blue box (highlight-content) */
font-size: 1.6rem;
font-weight: 600;
background: #0077cc;
padding: 0px 0px 0px 0px;       /* Top Right Bottom Left. Space all-around INSIDE the border of the TITLE BOX. It pushes the content inward */
margin: 0px 0px 30px 0px;       /* Top Right Bottom Left. Space all-around OUTSIDE the border of the TITLE BOX. It pushes the other elements away */
}
.highlight-content p {          /* TEXT BOX inside the blue box (highlight-content) */
font-size: 1.1rem;
line-height: 1.6;
background: #0077cc;
padding: 0px 0px 0px 0px;      /* Top Right Bottom Left. Space all-around INSIDE the border of the TEXT BOX. It pushes the content inward */
margin: 0px 0px 0px 0px;       /* Top Right Bottom Left. Space all-around OUTSIDE the border of the TEXT BOX. It pushes the other elements away */
}
/* .highlight-btn {
background-color: white;
color: #0077cc;
padding: 1rem 2.5rem;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
transition: 0.3s;
margin: 2rem auto 0;
display: inline-block;
}
.highlight-btn:hover {
background-color: #e6f0ff;
} */
/* === Responsive behavior === */
@media (max-width: 1024px) {
.location-highlight {
  flex-direction: column;
  align-items: center;
}
.highlight-item {
  width: 100%;
}
.highlight-content {
  align-items: center;
  text-align: center;
}
.highlight-btn {
  margin: 1.5rem auto 0;
}
}
/* END LOCATION section */



/* FEATURE DETAILS section */
.feature-details-section {
text-align: center;
padding: 5rem 2rem;
background-color: #fff;
font-family: 'Poppins', sans-serif;
}
.feature-details-subtitle {
color: #0077cc;
font-weight: 600;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.feature-details-title {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 1rem;
}
.feature-details-description {
font-size: 1.1rem;
color: #555;
max-width: 700px;
margin: 0 auto 3rem auto;
}
/* Only apply grid to icon area */
.feature-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Each icon card */
.feature-item {
display: flex;
flex-direction: column;
align-items: center;
}
.feature-item img {
width: 130px;
height: auto;
margin-bottom: 1rem;
}
img.icon-meeting {
width: 160px; /* or any size you prefer */
}
.feature-item p {
font-size: 1rem;
line-height: 1.4;
color: #222;
max-width: 260px;
}
.feature-details-section .container {
display: block;
}
/* Responsive Tweaks */
@media (max-width: 768px) {
.feature-details-title {
  font-size: 2rem;
}
.feature-details-description {
  font-size: 1rem;
}
.feature-item img {
  width: 44px;
}
.feature-details-grid {
  gap: 2rem;
}
}
/* END FEATURE DETAILS section */



/* ABOUT US Section */
.about-section {
  padding: 100px 20px;
  background-color: #ffffff;
  font-family: 'Poppins', sans-serif;
}
.about-container {
  max-width: 1200px;            /* mismo ancho máximo que otras secciones */
  margin: 0 auto;               /* centra horizontalmente en la página */
  text-align: center;           /* centra el texto dentro */
}
.about-text {
  max-width: 800px;             /* limita el ancho de lectura como Features */
  margin: 0 auto;               /* centra el bloque */
}
.about-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;          /* ↑↑  → aumenta separación título–texto */
  color: #1f1f1f;
}
.about-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 24px;          /* espacio más equilibrado entre párrafos */
}
/* .about-btn {
  display: inline-block;
  background-color: #0077cc;
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  margin-top: 30px;             
}
.about-btn:hover {
  background-color: #005fa3;
}
*/
/* Responsive */
@media (max-width: 768px) {
  .about-text h2 {
    font-size: 2rem;
  }
  .about-container {
    padding: 0 10px;
  }
}
/* END ABOUT US Section */




/* WHY JOIN US section */
.why-join-section {
padding: 80px 20px;
background-color: #fff;
font-family: 'Poppins', sans-serif;
}
.why-join-container {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.why-join-image img {
border-radius: 20px;
width: 98%;
max-width: 700px;
height: auto;
object-fit: cover;
}
.why-join-image {
transform: translateY(9px); /* moves image down */
}
.why-join-text {
flex: 1;
min-width: 300px;
}
.why-join-text h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.why-point {
margin-bottom: 1.5rem;
}
.why-point h4 {
color: #0077cc;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
margin-bottom: 5px;
}
.why-point p {
font-size: 1rem;
color: #333;
line-height: 1.6;
}
.btn-cta {
display: inline-block;
margin-top: 2rem;
background-color: #0077cc;
color: #fff;
padding: 12px 24px;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.btn-cta:hover {
background-color: #005fa3;
}
/* Responsive tweak */
@media (max-width: 768px) {
.why-join-container {
  flex-direction: column;
  text-align: center;
}
.why-join-text {
  padding: 0 10px;
}
}
/* END WHY JOIN US section */




/* TEAMS Section */
.teams-section {
margin-top: 110px;
text-align: center;
background-color: #fff;
font-family: 'Poppins', sans-serif;
}
.teams-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.teams-title {
font-size: 2rem;
font-weight: 700;
color: #1e1e1e;
margin-bottom: 60px;
}
.teams-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 40px;
margin-bottom: 180px
}
.teams-logos img {
max-height: 85px; /* Try 100, 120, or more */
object-fit: contain;
transition: transform 0.3s ease;
}
.teams-logos img:hover {
transform: scale(1.05);
}
/* End TEAMS Section */



/* SPONSORS & COLLABORATORS section */
.sponsor-section {
margin-top: 40px;
text-align: center;
background-color: #fff;
font-family: 'Poppins', sans-serif;
}
.sponsor-title {
font-size: 2rem;
font-weight: 700;
color: #1e1e1e;
margin-bottom: 80px;
}
.sponsor-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 120px;
margin-bottom: 180px
}
.sponsor-logos img {
max-height: 60px;
object-fit: contain;
transition: transform 0.3s ease;
}
.sponsor-logos img:hover {
transform: scale(1.05);
}
/* END SPONSORS & COLLABORATORS section */



/* FOOTER section */
footer {
  background-color: #333;
  /* color: #fff; */
  color: #1e1e1e;
  text-align: center;
  padding: 20px 0;
}
.site-footer {
/* background-color: #7cb5f9; /* Cosymbio/Nova blue */
background-color: rgba(223, 223, 223, 0.7); /* Fondo semitransparente para legibilidad */
color:  #1e1e1e;
padding: 40px 20px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
.footer-title {
font-size: 2.0rem;
font-weight: 700;
margin-bottom: 10px;
}
.footer-address {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 25px;
}
.footer-icon {
font-size: 1.2rem;
margin-left: 5px;
}
.footer-nav {
font-weight: 600;
font-size: 1rem;
margin-bottom: 20px;
}
.footer-nav a {
color:  #1e1e1e;
text-decoration: none;
padding: 0 5px;
}
.footer-nav a:hover {
text-decoration: underline;
}
.footer-legal {
font-size: 0.9rem;
opacity: 0.9;
}
.footer-legal a {
color:  #1e1e1e;
text-decoration: none;
padding: 0 5px;
}
.footer-legal a:hover {
text-decoration: underline;
}
/* END FOOTER section */



/* LEGAL FOOTER section */
.legal-footer {
background-color: #0d537a; /* From your screenshot */
padding: 20px 10px;
font-size: 1rem;
color: #ffffff;
text-align: center;
font-family: 'Poppins', sans-serif;
border-top: 1px solid #ccc;
}
.legal-footer .legal-container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.legal-footer a {
color: #ffffff;
text-decoration: none;
font-size: 1.4rem;
}
.legal-footer a:hover {
text-decoration: underline;
}
/* LinkedIn icon specific */
.linkedin-link i {
font-size: 1.8rem;    /* 🔹 Increase icon size (default is around 1rem) */
margin-left: 40px;    /* 🔹 Push the icon to the right */
color: #ffffff;       /* 🔹 Ensure icon is white */
transition: transform 0.2s ease;
}
.linkedin-link i:hover {
transform: scale(1.2); /* Optional: slight grow on hover */
color: #0077b5;        /* Optional: LinkedIn blue on hover */
}
/* Responsive adjustment */
@media (max-width: 600px) {
.legal-footer .legal-container {
  flex-direction: column;
  gap: 10px;
}
}
/* END LEGAL FOOTER section*/



/* COOKIES CONSENT section */
.cookie-consent-banner {
position: fixed;
bottom: 60px; /* Justo encima del botón */
left: 20px;
max-width: 320px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
padding: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
font-family: 'Poppins', sans-serif;
font-size: 0.9rem;
color: #333;
z-index: 10000;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-consent-banner.hidden {
display: none;
}
.cookie-actions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.cookie-actions button {
background-color: #ffffff;
color: #0d537a;
border: none;
padding: 8px 14px;
border-radius: 20px;
cursor: pointer;
font-size: 0.85rem;
transition: background-color 0.3s ease;
}
.cookie-actions button:hover {
background-color: #005fa3;
}
.manage-consent-tab {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #0077cc;
color: white;
font-size: 0.75rem;
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
z-index: 10001;
font-family: 'Poppins', sans-serif;
opacity: 0.8;
transition: opacity 0.3s;
}
.manage-consent-tab:hover {
opacity: 1;
}
/* END COOKIE CONSENT SECTION */