/* 清除默认间距、设置盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* 整体背景：淡粉-淡紫渐变，可依需求更换 */
body {
  background: linear-gradient(to right, #f8cedf, #cedff8);

}
.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;        /* 使用 Flex 实现左右布局 */
  flex-wrap: wrap;      /* 让在小屏时可折行 */
  align-items: center;
  justify-content: space-between;

}

/* 头部区域 */
.header {
 
  text-align: center;
 
  /* 这里暂时不指定高度，让内容自动撑开 */
}

/* 导航栏容器：左右分布，中间留空间给导航 */
.navbar {
  gap: 20px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  position: fixed;  /* 固定定位 */
  /* box-shadow: 0 -2px 8px rgba(0,0,0,0.1); */
   /* 底部横幅可加向上的阴影 */
  z-index: 9999;    /* 确保浮动横幅显示在最前面 */
  background: linear-gradient(to right, #f8cedf, #cedff8);
}

/* Logo & 文案容器 */
.logo-container {
  display: flex;
  align-items: center;
  gap: 8px; /* 图标与文字之间的间距 */
}

.logo-img {
  width: 192px; /* 视需要可调整 */
  height: auto;
}

/* Logo文字设置 */
.logo-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: #000; /* 或与你的品牌色一致 */
}

/* 中间导航链接列表：白色椭圆背景 */
.nav-links {
  display: flex;
  list-style: none;
  background-color: #fff; 
  border-radius: 9999px; /* 使容器呈现圆角 */
  padding: 8px 24px;     /* 容器上下左右的内边距 */
  gap: 32px;            /* 各菜单项间距 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 轻微阴影可选 */
}

/* 菜单项 */
.nav-links li a {
  text-decoration: none;
  font-size: 0.95rem;
  color: #555;
  transition: color 0.2s ease;
}

/* 当前页面或鼠标悬停效果可自定义 */
.nav-links li a.active,
.nav-links li a:hover {
  color: #5176f3; /* 示例：高亮链接的颜色 */
}

/* 右侧按钮样式：渐变背景 + 圆角 */
.btn-apply {
  display: inline-block;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  padding: 10px 20px;
  border-radius: 9999px;
  /* 橙紫渐变背景，可自由替换 */
  background: linear-gradient(to right, #fbb37b, #c66df6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 可选 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 悬停按钮时增加轻微放大与阴影 */
.btn-apply:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

y {
  display: inline-block;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: 12px 24px;
  border-radius: 9999px;
  background: linear-gradient(to right, #fbb37b, #c66df6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 按钮悬停效果：略微放大 + 阴影加深 */
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* 英雄区容器 */
.hero {

  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;   /* 让上下左右留一些间距 */
  text-align: center;  /* 内容居中 */
}

.hero-container {
  max-width: 800px;    /* 控制内容最大宽度，避免在大屏幕过宽 */
  margin: 0 auto;
}

/* 辅助标题（小标题） */
.hero-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  color: #000;  /* 字体颜色可根据需要修改 */
  margin-bottom: 16px;
}

/* 主标题：大字 + 渐变文字（借助 .gradient-text） */
.hero-title {
  font-size: 2.5rem;   /* 根据需要调整大小 */
  line-height: 1.2;
  margin-bottom: 24px;
}

/* 给文字做渐变填充的技巧： 
   1. 使用 background-clip: text 以及 -webkit-text-fill-color: transparent
   2. background 即文字颜色所在的渐变*/
.gradient-text {
  background: linear-gradient(90deg, #f29340, #f06dda, #8883f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 一些浏览器前缀可视需求添加: background-clip: text; */
}

/* 英雄区说明文字 */
.hero-description {
  font-size: 1rem;
  color: #555;
  margin-bottom: 32px;
}

/* 主要按钮样式 */
.btn-primary {
  display: inline-block;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: 12px 24px;
  border-radius: 9999px;
  background: linear-gradient(to right, #fbb37b, #c66df6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 按钮悬停效果：略微放大 + 阴影加深 */
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* 父级容器：模拟圆角背景、内边距 */
.job-section {
  padding: 40px 20px; 
  background: linear-gradient(to right, #fafafa, #eef7ff);
  /* 也可以加大圆角来模拟截图中的弧形边角 */
  border-radius: 24px;
  max-width: 1200px;
  margin: 40px auto; /* 让容器居中 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 内部两列布局 */
.job-container {
  display: flex;
  flex-wrap: wrap;        /* 当屏幕较窄时自动换行 */
  justify-content: space-between;
  gap: 40px;
}

/* 左列：表单 */
.form-column {
  flex: 1 1 400px;        /* 最小宽度 */
}

/* 右列：文本与要点 */
.info-column {
  flex: 1 1 400px;
}

/* 标题与文字样式 */
.info-column h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
  font-weight: 700;
}

/* 渐变文字 (para 'disponibles') */
.gradient-text {
  background: linear-gradient(90deg, #f29340, #f06dda, #8883f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 要点列表 */
.job-features {
  list-style: none;
  color: #555;
  line-height: 1.6;
}
.job-features li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 24px;
}

/* 为每条li前面添加一个小图标，模拟 ▶ 或其他符号 */
.job-features li::before {
  content: "▶"; 
  color: #888;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  transform: translateY(4px);
}

/* 表单布局与样式 */
.job-form {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 间距 */
}

/* label 及 input 基础 */
.form-group label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #333;
}
.form-group input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 9999px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 1rem;
  transition: border-color 0.2s;
}
.form-group input:focus {
  border-color: #8883f9; /* 聚焦时的高亮边框色 */
}

/* 电话字段的特殊排版：左侧为下拉 + 右侧为输入 */
.phone-group .phone-wrapper {
  display: flex;
  gap: 8px;
}
.phone-code {
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  outline: none;
  font-size: 1rem;
}

/* 复选框 */
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* reCAPTCHA占位 */
.recaptcha-placeholder {
  height: 60px; 
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 提交按钮 */
.btn-submit {
  padding: 12px 24px;
  border: none;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(to right, #fbb37b, #c66df6);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-submit:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* 响应式：小屏幕时两列上下堆叠 */
@media(max-width: 768px){
  .job-container {
    flex-direction: column;
  }
}

/* 统计区父容器 */
.stats-section {
  /* 颜色渐变背景，可根据需求调整色值与方向 */
  background: linear-gradient(to right, #fbb37b, #f06dda, #8883f9);
  padding: 40px 20px;   
  color: #fff;          /* 白色文字 */
}

/* 控制内部宽度与布局 */
.stats-container {
  max-width: 1200px;
  margin: 0 auto;       /* 居中 */
  display: flex;
  justify-content: space-around;  /* 等间距分布 */
  align-items: center;  
  gap: 40px;            /* 若需要更大/更小间距可在此调整 */
}

/* 每个统计项 */
.stats-item {
  text-align: center;   /* 让数字和文字居中 */
}

/* 统计数字 */
.stats-number {
  font-size: 3rem;      /* 数字大小，可根据需求调整 */
  font-weight: 700;
  margin-bottom: 8px;
}

/* 标签文字（描述） */
.stats-label {
  font-size: 1.1rem;
  font-weight: 400;
}

/* 响应式适配（可选） */
@media (max-width: 768px) {
  .stats-container {
    flex-direction: column; /* 小屏时竖向排列 */
  }
  .stats-number {
    font-size: 2.5rem;
  }
  .stats-label {
    font-size: 1rem;
  }
}
/* 容器区：带有点状背景 */
.choose-us-section {
  /* 可以直接用线性渐变打底，也可以用纯色打底 */
  background: #fff;
  position: relative;
  padding: 60px 20px;
  text-align: center;
  
  /* 这里使用一个重复背景图案模拟散点效果 */
  background-image: radial-gradient(#ccc 1px, transparent 1px);
  background-size: 30px 30px;
  /* 根据需要可减少点的大小 (1px) 或增大网格间隙 (30px) */
  /* 如果想要更淡，可以改用 #eee 或减小点的半径 */
}

/* 用于限制宽度，居中对齐 */
.choose-us-container {
  max-width: 800px;
  margin: 0 auto;
}

/* 主标题样式 */
.choose-us-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;           /* 普通文字颜色 */
  margin-bottom: 16px;
}

/* 渐变文字：只给“elegirnos”部分做渐变 */
.gradient-text {
  background: linear-gradient(90deg, #f29340, #f06dda, #8883f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 一些浏览器需要前缀 background-clip: text; */
}

/* 副标题样式 */
.choose-us-subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 32px;
}

/* CTA 按钮样式 */
.btn-cta {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 9999px;
  background: linear-gradient(to right, #fbb37b, #c66df6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 悬停效果：略微放大并加深阴影 */
.btn-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* 整个版块的背景：点状（可根据需要调色/密度） */
.features-section {
  padding: 60px 20px;
  /* 使用点状背景：通过 radial-gradient + background-size 实现 */
  background-image: radial-gradient(#ccc 1px, transparent 1px);
  background-size: 30px 30px; 
}

/* 控制最大宽度、居中 */
.features-container {
  max-width: 1200px;
  margin: 0 auto;
  
  display: flex;
  flex-wrap: wrap;            /* 当屏幕窄时自动换行 */
  justify-content: space-between;
  gap: 20px;                  /* 卡片之间的间距 */
}

/* 每张卡片 */
.feature-box {
  background-color: #fff;     /* 白底 */
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  flex: 1 1 300px;            /* 宽度自适应，最小约300px */
  
  padding: 24px;
  text-align: left;           /* 内容居左 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

/* 图标区 */
.feature-icon {
  margin-bottom: 16px;
}
.icon-placeholder {
  font-size: 1.6rem;
  color: #f06dda;  /* 示例的粉紫色，可自由改动 */
}

/* 标题 */
.feature-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

/* 描述文字 */
.feature-desc {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
}

/* 响应式：当屏幕不足768px时，卡片竖向排列 */
@media (max-width: 768px) {
  .features-container {
    flex-direction: column;
  }
}

/* 父容器：两列布局 */
.employment-section {
  padding: 60px 20px;
}

.employment-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex; 
  flex-wrap: wrap;         /* 小屏时换行 */
  gap: 40px;               /* 两列间距 */
  align-items: flex-start; 
}

/* 左侧列 */
.employment-left {
  padding: 100px 100px;
  flex: 1 1 500px;         /* 宽度自适应,最少500px */
  min-width: 500px;
}

/* 大标题：Tipo de empleo */
.employment-title {
  font-size: 3.5rem;
  color: #333;
  margin-bottom: 20px;
  font-weight: 700;
}

/* 渐变文字仅应用在“empleo” */
.gradient-text {
  background: linear-gradient(90deg, #f29340, #f06dda, #8883f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 一些浏览器可能需要无前缀 background-clip: text; */
}

/* 左列描述文字 */
.employment-desc {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.6;
  max-width: 500px;
}

/* 右侧列 */
.employment-right {
  flex: 1 1 400px;
  min-width: 300px;
}

/* 浅粉卡片 */
.work-card {
  background: #ffeaf8;             /* 浅粉底色，可根据需要调整 */
  border-radius: 24px;            /* 圆角 */
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  
  /* 若想让背景稍微透明，可用 rgba 或 backdrop-filter */
  /* e.g. background: rgba(255, 234, 248, 0.8); */
}

/* 卡片标题与副标题 */
.work-card-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.work-card-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 20px;
}

/* 插画 */
.work-figure {
  /* text-align: center; */
  margin-bottom: 20px;
}
.work-figure img {
  max-width: 250px;   
  /* 宽度可根据插画大小适当调整 */
  height: auto;
}

/* 列表要点：带图标（✔）+ 标题+描述 */
.work-benefits {

  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100px;
}

.work-benefits li {
  display: flex;
  gap: 12px; /* 图标与文字的间距 */
  align-items: flex-start;
}

.icon-check {
  color: #ff7cb9; /* 粉色icon，可根据需要调整 */
  font-size: 1.5rem;
  flex-shrink: 0; /* 防止图标被压缩 */
}

/* 每条要点内部的标题与描述 */
.work-benefits li h3 {
  font-size: 1rem;
  color: #333;
  margin-bottom: 4px;
}

.work-benefits li p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
}

/* 响应式处理：当屏幕宽度小于768px，改为上下布局 */
@media (max-width: 768px) {
  .employment-container {
    flex-direction: column;
  }
}
/* 页脚整体 */
.footer {
  background-color: #f9f9f9; /* 或更深一些，如 #f5f5f5 */
  padding: 40px 20px;
  color: #777;              /* 基础文字色，可根据需要调整 */
}

/* 控制内部宽度及布局 */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;        /* 窄屏时自动换行 */
  justify-content: space-between;
  gap: 40px;              /* 列之间的间距 */
}

/* 每个列的基础 */
.footer-col {
  flex: 1 1 300px;        /* 自适应列宽，最小约300px */
  min-width: 240px;       /* 可以根据需要修改 */
}

/* 左列：简介与按钮 */
.footer-col-intro {
  max-width: 400px;       /* 如果想让简介区域有一个最大宽度，可设置 */
}
.footer-intro {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #888;            /* 略浅一些，可根据需求微调 */
}

/* “Postúlate Ahora”按钮 */
.btn-apply {
  display: inline-block;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: 12px 24px;
  border-radius: 9999px;
  background: linear-gradient(to right, #fbb37b, #c66df6);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-apply:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 中列：导航链接 */
.footer-col-links .footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col-links .footer-links li a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #666;
  transition: color 0.2s ease;
}
.footer-col-links .footer-links li a:hover {
  color: #333;
}
.active-link {
  color: #5176f3; /* 当前页面或强调的链接颜色 */
}

/* 右列：邮箱 + 位置 */
.footer-col-contact {
  text-align: right; /* 让文字右对齐（可选） */
}

.footer-email {
  font-size: 1.5rem;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
  /* 可以分段拼接颜色，这里使用 span + .gradient-text */
}
.gradient-text {
  background: linear-gradient(90deg, #f29340, #f06dda, #8883f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-location {
  font-size: 1.2rem;
  color: #777;
}

/* 响应式：小于768px时，列改为竖向 */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-col-contact {
    text-align: left; /* 移动端也可对齐左侧，避免不自然的右对齐 */
  }
}