:root{
  --sf-graybar:#9aa6b2;
  --sf-sky:#c9d4e1;
  --sf-cream:#ffffff;
  --sf-blue:#2a4469;
  --sf-white:#ffffff;
  --sf-text:#0c2436;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Helvetica, Arial, sans-serif; color:var(--sf-text); background-color: var(--sf-white); font-size: 16px;}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.fullscreen{min-height:100vh;display:flex;align-items:center;position:relative; padding: 80px 0;}

/* General classes */
.section-title{font-size:clamp(28px,4vw,48px); font-weight:500; text-align:center; max-width:900px; margin:0 auto 40px}
.btn{display:inline-block; padding:.8rem 1.1rem; border-radius:30px; background:var(--sf-white); color:var(--sf-text); text-decoration:none; font-weight:700; border:1px solid rgba(0,0,0,.08); transition: all 0.2s ease;}
.btn:hover{background-color:var(--sf-blue); color:var(--sf-white)}

.bg-cream{background-color:var(--sf-cream);}
.bg-sky{background-color:var(--sf-sky);}

/* ===== HERO ===== */
#hero{color:var(--sf-white); padding: 0;}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.15) 100%)}

/* Logo positioning */
.hero-logo-container{position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:2; width:100%; text-align:center}
.hero-logo{display:block; margin:0 auto; width:min(120px,30vw); height:auto}

.hero-content{position:relative; z-index:1; width:100%; text-align:center; padding:min(8vw,80px) 0}
.hero-title{font-size:clamp(26px,3.8vw,48px); font-weight:500; line-height:1.12; margin:0 auto 20px; max-width:900px; text-shadow:0 2px 16px rgba(0,0,0,.35)}
.hero-subtitle{font-size:clamp(16px,2vw,22px); line-height:1.4; max-width:800px; margin:0 auto 10px; text-shadow:0 1px 8px rgba(0,0,0,.2)}
.hero-subhead{font-size:clamp(14px,1.8vw,18px); line-height:1.4; max-width:800px; margin:0 auto 30px; text-shadow:0 1px 8px rgba(0,0,0,.2)}
.hero-ctas .btn{background-color:var(--sf-white); color:var(--sf-blue)}
.hero-ctas .btn:hover{background-color:var(--sf-blue); color:var(--sf-white)}

/* ===== INTERACTION BAR (Sticky) ===== */
#ibar {
  background:var(--sf-graybar);
  color:var(--sf-white);
  position:sticky;
  top:0;
  z-index:100;
  min-height: auto;
  padding: 0;
}
#ibar .menu {
  display:flex;
  align-items: center;
  padding:14px 0;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  position: relative;
}
#ibar a {color:var(--sf-white); text-decoration:none; opacity:.95; transition:opacity .2s ease}
#ibar a:hover {opacity:1}

.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* --- ESTILO PARA BOTÓN DE IDIOMA --- */
.lang-switch {
  font-weight: bold;
  margin-left: auto; /* Empuja el botón a la derecha */
  padding: 5px 10px;
  border: 1px solid var(--sf-white);
  border-radius: 20px;
  flex-shrink: 0; /* Evita que el botón se encoja */
}

/* Hamburger Menu Styles */
.hamburger-icon {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  z-index: 102;
}
.hamburger-icon span {
  width: 2rem;
  height: 0.25rem;
  background-color: var(--sf-white);
  border-radius: 10px;
  transition: all 0.3s linear;
  position: relative;
  transform-origin: 1px;
}
.mobile-logo, .mobile-logo-link {
  display: none;
}

/* Grid for "How it works" */
#how-it-works .content, #proof .content, #buyers .content, #about .content {display: flex; flex-direction: column; justify-content: center; width: 100%; text-align: center;}
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; text-align:center;}
.grid-icon{width:80px; height:80px; margin:0 auto 20px; object-fit:contain;}

/* Split Section */
.grid-split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.split-title{font-size:clamp(28px,3vw,36px); font-weight:500; margin-bottom:1rem; text-align: left;}
.split-text {text-align: left;}
.split-text li{margin-bottom:10px}
.split-panel{width:100%; height:55vh; border-radius:28px; overflow:hidden}
.split-panel img{width:100%; height:100%; object-fit:cover; display:block}

/* === Proof Section & Stats Grid === */
#proof .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.stats-grid{width: 100%; display:flex; justify-content:space-around; text-align:center; margin-top:40px; margin-bottom: 20px;}
.stat-item{min-width:150px}
.number{font-size:clamp(3rem,6vw,5rem); font-weight:700; color:var(--sf-blue)}
.label{font-size:16px; font-weight:500; text-transform:uppercase; letter-spacing:.04em}
.impact-teaser{text-align:center; margin-top:30px; margin-bottom: 20px;}

/* Email Capture */
#email-capture .card{background:rgba(255,255,255,.78); border:1px solid rgba(0,0,0,.06); border-radius:24px; padding:22px; max-width:880px; margin:0 auto; box-shadow:0 8px 24px rgba(0,0,0,.12); text-align:center}
.msg-wrap{display:flex; justify-content:center; align-items:center; gap:12px}
#email-input{width:100%; max-width:400px; padding:14px 16px; border-radius:16px; border:1px solid rgba(0,0,0,.12); font:inherit; text-align:center}
.msg-wrap .btn{background-color:var(--sf-blue); color:var(--sf-white)}

/* Footer */
footer{background:var(--sf-graybar); color:var(--sf-white); text-align:center; padding:40px 20px 60px; min-height: auto;}
footer a{color:var(--sf-white); text-decoration:underline}
footer p{margin-bottom:20px}
.newsletter-form{display:flex; flex-direction:column; align-items:center; margin-top:20px}
.newsletter-form label{display:none}
.newsletter-form input{width:100%; max-width:300px; padding:12px 16px; border-radius:30px; border:1px solid rgba(0,0,0,.12); font:inherit; text-align:center; margin-bottom:10px}
.newsletter-form .btn{background-color:var(--sf-blue); color:var(--sf-white)}

/* ESTILOS PARA NUEVAS SECCIONES */
.section-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  text-align: center;
  max-width: 800px;
  margin: -20px auto 40px;
  line-height: 1.5;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
  width: 100%;
}
.feature-item {
  background: rgba(255,255,255,0.5);
  padding: 25px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.05);
}
.feature-item h3 {
  font-size: 20px;
  color: var(--sf-blue);
  margin-top: 0;
}
.cta-section {
  margin-top: 40px;
  text-align: center;
}

/* =========================================== */
/* ===== AQUÍ ESTÁN LOS ESTILOS PARA TU IMAGEN ===== */
/* =========================================== */
#full-width-image-section {
  padding: 80px 0; /* Le da espacio arriba y abajo */
  text-align: center; /* Centra la imagen horizontalmente */
  background-color: var(--sf-white); /* O usa var(--sf-cream) si quieres que combine */
}

.centered-image-display {
  max-width: 100%; /* Asegura que la imagen no se salga del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 28px; /* Le da bordes redondeados como a tus otras imágenes */
  box-shadow: 0 8px 24px rgba(0,0,0,.1); /* Opcional: una sombra suave */
}


/* ===== MOBILE STYLES ===== */
@media (max-width: 880px) {
  /* Reducir tamaño de fuente de cuerpo en 10% (16px * 0.9 = 14.4px) */
  body {
    font-size: 14.4px;
  }
  
  .fullscreen {
    padding: 60px 0;
  }
  
  .hero-title {
    font-size: clamp(32px, 8vw, 40px);
  }
  .section-title {
    font-size: clamp(24px, 7vw, 32px);
  }
  .split-title {
    font-size: clamp(22px, 6vw, 28px);
  }
  .section-subtitle {
    font-size: 18px; /* Reducido de 20px */
  }

  /* Hamburguesa y Navegación */
  #ibar .menu {
    justify-content: space-between;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--sf-graybar);
    width: 100%;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    gap: 0;
    justify-content: flex-start;
  }
  .nav-links.active {
    display: flex;
  }
  .nav-links a {
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .hamburger-icon {
    display: flex;
  }
  .mobile-logo {
    display: block;
    height: 30px;
    width: auto;
  }
  .mobile-logo-link {
    display: block;
  }
  .lang-switch {
    position: absolute;
    right: 4rem; /* Lo posiciona al lado de la hamburguesa */
    top: 50%;
    transform: translateY(-50%);
  }

  .hamburger-icon.active span:nth-child(1) {
    transform: rotate(45deg);
  }
  .hamburger-icon.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
  }
  .hamburger-icon.active span:nth-child(3) {
    transform: rotate(-45deg);
  }

  /* Ajustes de Grids */
  .grid {grid-template-columns:1fr;}
  .grid-split{grid-template-columns:1fr; gap:20px}
  .split-panel{height:42vh; order: -1;}
  .split-title, .split-text {text-align: center;}
  
  /* Reducir botones en 20% */
  .btn {
    padding: .64rem .88rem; /* 20% menos que .8rem 1.1rem */
    font-size: 10px;
  }

  .stats-grid {
    flex-direction: column;
    gap: 20px;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
}