:root{
  --forest: #1B3A2F;
  --leaf: #2D6A4F;
  --leaf2: #40916C;
  --gold: #E3A008;
  --gold2: #F1B94E;
  --sky: #2E86AB;
  --cream: #F7F4EA;
  --bark: #3F3325;
  --ink: #1E2A22;
  --line: rgba(27,58,47,0.14);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2{
  font-family: 'Times New Roman', Times, serif;
  color: var(--forest);
  margin: 0 0 0.5em;
  line-height: 1.08;
}
/* ===== BARRA DE NAVEGACIÓN ===== */

.barra-navegadora{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #2a8d00;
    padding: 15px 30px;
    border-radius: 40px;
    margin: 20px;
    font-size: 30px;
}

.barra-navegadora a{
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 20px;
    transition: all 0.3s;
}

.barra-navegadora a:not(.logo):hover{
    background-color: #f1f1f1;
    color: #2a8d00;
    font-size: 45px;
}

.barra-navegadora .logo img{
    height: 60px;
    transition: all 0.3s;
    font-size: 45px;

}

.logo-colegio{
    margin-left: 16px;
}

.logo-colegio img{
    border-radius: 50%;
}

@media (max-width: 1024px){
  .barra-navegadora{
    padding: 10px 15px;
    border-radius: 20px;
    margin: 10px;
    font-size: 14px;
  }
  .barra-navegadora a{ padding: 4px 8px; font-size: 13px; }
  .barra-navegadora a:not(.logo):hover{ font-size: 13px; }
  .barra-navegadora .logo img{ height: 35px; }
  .logo-colegio{ margin-left: 10px; }
}

@media (max-width: 600px){
  .barra-navegadora{
    padding: 8px 10px;
    font-size: 12px;
  }
  .barra-navegadora a{ padding: 3px 6px; font-size: 11px; }
  .logo-colegio{ margin-left: 6px; }
}

/* ---------- Hero ---------- */
.hero{
  max-width: 760px;
  margin: 0 auto;
  padding: 84px 24px 56px;
  text-align: center;

}

.kicker{
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--leaf);
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.hero h1{
  font-size: clamp(6.4rem, 6vw, 4rem);
  font-weight: 600;
  margin-top: -60px;
}

.hero h1 em{
  font-style: italic;
  color: var(--gold);
}

.hero .lead{
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 1.5rem;
  color: #3C4A40;
}

/* ---------- Stats strip ---------- */
.stats{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 70px;
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  text-align: center;
}

.stat-num{
  display: block;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2.6rem;
  color: var(--gold);
  font-weight: 600;
}

.stat-label{
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #5C6B60;
}

/* ----------(Concientizar) ---------- */
.band{
  background: var(--forest);
  padding: 70px 24px;
}

.band-inner{
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.band h2{
  color: var(--gold2);
  font-size: 4.1rem;
  font-weight: 600;
}

.band p{
  color: #E4EDE7;
  font-size: 1.7rem;
}

/* ---------- Split section ---------- */
.split{
  max-width: 1040px;
  margin: 0 auto;
  padding: 84px 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.split-text h2{
  font-size: 3.8rem;
  font-weight: 600;
}

.split-text p{
  color: #3C4A40;
  max-width: 46ch;
  font-size: 1.2rem;
}

.split-visual{
  display: flex;
  align-items: right;
  justify-content: center;
  width: 450px;
  height: 220px;
  transform: translateY(-100px);
  border-radius: 90%;
  overflow: hidden;
  box-shadow: 0 14px 26px rgba(223, 128, 7, 0.18);
}

.split-visual-2{
  display: flex;
  align-items: right;
  justify-content: center;
  width: 450px;
  height: 220px;
  transform: translateY(-1000px);
  transform: translateX(542px);
  margin-top: -400px;
  border-radius: 90%;
  overflow: hidden;
  box-shadow: 0 14px 26px rgba(223, 128, 7, 0.18);
}

.split-visual img,
.split-visual-2 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-visual svg{ max-width: 260px; }

/* ---------- Acciones ---------- */
.acciones{
  max-width: 1040px;
  margin: 0 auto;
  padding: 90px 24px 20px;
  text-align: center;
}

.acciones h2{
  font-size: 4rem;
  font-weight: 600;
}

.acciones-lead{
  max-width: 520px;
  margin: 0 auto 44px;
  color: #3C4A40;
   font-size:1.9rem;
}

.tarjetas{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: left;
}

.tarjeta{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 20px;
}

.tarjeta h3{
  font-family: 'Times New Roman', Times, serif;
  color: var(--forest);
  font-size: 1.7rem;
  margin: 14px 0 8px;
}

.tarjeta p{
  font-size: 1.2rem;
  color: #56655B;
  margin: 0;
}

/* ---------- CTA ---------- */
.cta{
  background: linear-gradient(135deg, var(--leaf2), var(--leaf));
  width: calc(100% - 48px);
  max-width: 1040px;
  margin: 90px auto 0;
  border-radius: 24px;
  padding: 64px 24px;
}

.cta-inner{
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.cta h2{
  color: var(--cream);
  font-size: 2.7rem;
}

.cta p{
  color: #E4EDE7;
  margin: 0 0 26px;
  font-size: 1.5rem;
}

.cta-btn{
  display: inline-block;
  background: var(--gold);
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.cta-btn:hover{
  background: var(--gold2);
  transform: translateY(-2px);
}

/* ---------- Table ---------- */
.table-section{
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 24px 90px;
}

.table-section h2{
  text-align: center;
  font-size: 2.7rem;
  font-weight: 600;
  max-width: 600px;
  margin: 0 auto 32px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.table-wrap{
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

table{
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

thead th{
  text-align: left;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--cream);
  background: var(--leaf);
  padding: 16px 20px;
}

thead th:first-child{ border-top-left-radius: 18px; }
thead th:last-child{ border-top-right-radius: 18px; }

tbody td{
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  font-size: 1.35rem;
  vertical-align: top;
}

tbody td:first-child{
  font-weight: 600;
  color: var(--forest);
  white-space: nowrap;
}

tbody tr:nth-child(even){ background: rgba(45,106,79,0.05); }

/* ---------- Closing ---------- */
.closing{
  text-align: center;
  padding: 0 24px 90px;
}

.closing p{
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 2.4rem;
  color: var(--forest);
  max-width: 520px;
  margin: 0 auto;
  margin-top: 100px;
}

/* ---------- Footer ---------- */
.foot{
  text-align: center;
  padding: 26px 24px 40px;
  color: #6B7A70;
  font-size: 0.85rem;
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero{ padding: 60px 24px 40px; }
  .hero h1{ font-size: 3.2rem; margin-top: -20px; }
  .hero .lead{ font-size: 1.2rem; }

  .stats{ gap: 40px; padding: 0 24px 50px; }
  .stat-num{ font-size: 2.2rem; }

  .band{ padding: 50px 24px; }
  .band h2{ font-size: 3rem; }
  .band p{ font-size: 1.3rem; }

  .split{ padding: 60px 24px; gap: 32px; }
  .split-text h2{ font-size: 2.6rem; }
  .split-text p{ font-size: 1.05rem; }
  .split-visual, .split-visual-2{
    width: 320px;
    height: 180px;
    transform: none;
    margin-top: 0;
  }

  .acciones{ padding: 60px 24px 10px; }
  .acciones h2{ font-size: 2.6rem; }
  .acciones-lead{ font-size: 1.3rem; }
  .tarjetas{ grid-template-columns: 1fr 1fr; }

  .cta{ padding: 44px 24px; margin-top: 60px; }
  .cta h2{ font-size: 2.1rem; }
  .cta p{ font-size: 1.2rem; }

  .table-section h2{ font-size: 2.1rem; }
  thead th{ font-size: 1.2rem; padding: 12px 16px; }
  tbody td{ font-size: 1.05rem; padding: 12px 16px; }

  .closing p{ font-size: 1.7rem; margin-top: 60px; }
}

@media (max-width: 700px){
  .hero{ padding: 40px 20px 30px; }
  .hero h1{ font-size: 2.3rem; margin-top: 0; }
  .hero .lead{ font-size: 1.05rem; }

  .stats{ gap: 24px 32px; padding: 0 20px 40px; }
  .stat-num{ font-size: 1.8rem; }
  .stat-label{ font-size: 0.75rem; }

  .band{ padding: 36px 20px; }
  .band h2{ font-size: 2.1rem; }
  .band p{ font-size: 1.05rem; }

  .split{
    grid-template-columns: 1fr;
    text-align: left;
    padding: 40px 20px;
    gap: 24px;
  }
  .split-text h2{ font-size: 1.9rem; }
  .split-text p{ font-size: 1rem; }
  .split-visual{
    order: -1;
    width: 100%;
    max-width: 320px;
    height: 200px;
    margin: 0 auto;
    transform: none;
  }
  .split-visual-2{
    width: 100%;
    max-width: 320px;
    height: 200px;
    margin: 16px auto 0;
    transform: none;
  }

  .acciones{ padding: 40px 20px 10px; }
  .acciones h2{ font-size: 2rem; }
  .acciones-lead{ font-size: 1.05rem; margin-bottom: 28px; }
  .tarjetas{ grid-template-columns: 1fr 1fr; gap: 16px; }
  .tarjeta{ padding: 18px 16px; }
  .tarjeta h3{ font-size: 1.3rem; }
  .tarjeta p{ font-size: 1rem; }

  .cta{ padding: 32px 20px; margin-top: 40px; }
  .cta h2{ font-size: 1.7rem; }
  .cta p{ font-size: 1.05rem; }

  .table-section{ padding: 16px 16px 60px; }
  .table-section h2{ font-size: 1.7rem; }

  .closing p{ font-size: 1.4rem; margin-top: 40px; }
}

@media (max-width: 480px){
  .barra-navegadora .logo img{ height: 32px; }
  .logo-colegio{ margin-left: 4px; }
  .hero h1{ font-size: 1.9rem; }
  .hero .lead{ font-size: 0.95rem; }
  .band h2{ font-size: 1.8rem; }
  .band p{ font-size: 0.95rem; }
  .split-visual, .split-visual-2{ height: 160px; }
  .tarjetas{ grid-template-columns: 1fr; }
  .stats{ gap: 20px 24px; }
}