:root{
  --ee-green:#0b3d2e;
  --ee-green-2:#1f7a52;
  --ee-gold:#f2c14e;
  --ee-ink:#0f172a;
  --ee-muted:#64748b;
  --ee-bg:#f7faf9;
  --radius-xl:1.25rem;
}

html{scroll-behavior:smooth;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--ee-ink);
  background: var(--ee-bg);
}

.navbar{
  backdrop-filter: blur(10px);
}
.navbar .nav-link{
  font-weight: 600;
  color: rgba(15,23,42,.86);
}
.navbar .nav-link.active, .navbar .nav-link:hover{
  color: var(--ee-green);
}
.badge-ee{
  background: rgba(31,122,82,.12);
  color: var(--ee-green);
  border: 1px solid rgba(31,122,82,.20);
  font-weight: 700;
}

.btn-ee{
  background: linear-gradient(135deg, var(--ee-green), var(--ee-green-2));
  border: 0;
  color:#fff;
  font-weight: 800;
  border-radius: 999px;
  padding: .85rem 1.05rem;
  box-shadow: 0 10px 24px rgba(11,61,46,.18);
}
.btn-ee:hover{filter: brightness(1.05); color:#fff;}
.btn-ee-outline{
  border-radius: 999px;
  border: 2px solid rgba(11,61,46,.25);
  font-weight: 800;
  color: var(--ee-green);
  background: rgba(255,255,255,.72);
}
.btn-ee-outline:hover{
  border-color: rgba(11,61,46,.45);
  color: var(--ee-green);
  background: #fff;
}

.hero{
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  background: #0b3d2e;
}
.hero .hero-bg{
  position:absolute; inset:0;
  background: url("../img/hero.jpg") center/cover no-repeat;
  opacity: 1;
}
.hero .hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 70% 25%, rgba(242,193,78,.18), transparent 60%),
    linear-gradient(90deg, rgba(11,61,46,.92), rgba(11,61,46,.55) 55%, rgba(11,61,46,.25));
}
.hero .hero-fallback{
  position:absolute; inset:0;
  background: url("../img/placeholders/hero.svg") center/cover no-repeat;
  opacity: 1;
}
.hero .container{position:relative; z-index:2;}
.hero .eyebrow{
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 800;
  color: rgba(255,255,255,.82);
}
.hero h1{
  font-weight: 900;
  letter-spacing: -0.02em;
  color:#fff;
}
.hero p{
  color: rgba(255,255,255,.86);
  font-size: 1.05rem;
  max-width: 56ch;
}
.hero .stat{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: .85rem 1rem;
}
.hero .stat .k{
  color:#fff;
  font-weight: 900;
  font-size: 1.15rem;
}
.hero .stat .v{
  color: rgba(255,255,255,.82);
  font-weight: 700;
  font-size: .88rem;
}

.section{
  padding: 4.25rem 0;
}
.section-title{
  font-weight: 900;
  letter-spacing: -0.02em;
}
.section-lead{
  color: var(--ee-muted);
  max-width: 70ch;
}

.card-ee{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.card-ee .card-header{
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.75);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

.icon-pill{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(242,193,78,.22);
  color: #6b4b00;
  border: 1px solid rgba(242,193,78,.32);
}

.feature{
  display:flex;
  gap: 1rem;
}
.feature h6{
  margin:0;
  font-weight: 900;
}
.feature p{
  margin:.15rem 0 0;
  color: var(--ee-muted);
}

.level-card{
  position: relative;
  overflow:hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
}
.level-card .thumb{
  height: 180px;
  background: url("../img/placeholders/section.svg") center/cover no-repeat;
}
.level-card .thumb.primary{ background-image: url("../img/level-primary.jpg"), url("../img/placeholders/section.svg");}
.level-card .thumb.secondary{ background-image: url("../img/level-secondary.jpg"), url("../img/placeholders/section.svg");}
.level-card .thumb.preschool{ background-image: url("../img/level-preschool.jpg"), url("../img/placeholders/section.svg");}
.level-card .body{
  padding: 1.15rem 1.15rem 1.25rem;
}
.level-card .body h5{
  font-weight: 900;
  margin-bottom: .25rem;
}
.level-card .meta{
  color: var(--ee-muted);
  font-weight: 600;
  font-size: .92rem;
}
.level-card .actions{
  margin-top: .9rem;
  display:flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.gallery-grid img{
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}
.gallery-note{
  color: var(--ee-muted);
  font-size: .92rem;
}

.cta{
  border-radius: var(--radius-xl);
  background:
    radial-gradient(900px 460px at 20% 20%, rgba(242,193,78,.22), transparent 60%),
    linear-gradient(135deg, rgba(11,61,46,.96), rgba(31,122,82,.92));
  color:#fff;
  padding: 2.1rem;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 52px rgba(11,61,46,.18);
}
.cta h3{font-weight: 900; letter-spacing: -.02em;}
.cta p{color: rgba(255,255,255,.86); margin: .5rem 0 1rem;}

.footer{
  background: #061e16;
  color: rgba(255,255,255,.80);
  padding: 2.25rem 0;
}
.footer a{color: rgba(255,255,255,.88); text-decoration:none;}
.footer a:hover{text-decoration: underline;}
.footer .brand{
  display:flex;
  gap: .9rem;
  align-items:center;
}
.footer .brand img{
  width: 52px; height: 52px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.footer .small{color: rgba(255,255,255,.65);}

.page-hero{
  padding: 3.1rem 0;
  background:
    radial-gradient(900px 460px at 20% 20%, rgba(242,193,78,.16), transparent 60%),
    linear-gradient(135deg, rgba(11,61,46,.92), rgba(31,122,82,.88));
  color:#fff;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}
.page-hero h1{font-weight: 900;}
.page-hero p{color: rgba(255,255,255,.86); max-width: 70ch;}

.form-control, .form-select{
  border-radius: 14px;
  border-color: rgba(15,23,42,.12);
}

/* --- Enhancements requested (Dec 2025) --- */
:root{
  --ceeb-font-base: 17px;
  --ceeb-icon-lg: 1.15rem;
}
html{font-size: var(--ceeb-font-base);} 

.section-title h2{font-size: clamp(1.6rem, 2.4vw, 2.2rem);} 
.hero h1{font-size: clamp(2.0rem, 4.2vw, 3.4rem);} 
.hero p{font-size: clamp(1.05rem, 1.3vw, 1.25rem);} 

.card .bi, .card i, .icon-box i{font-size: var(--ceeb-icon-lg);} 

/* WhatsApp floating button */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  z-index: 9999;
}
.whatsapp-float:hover{filter: brightness(0.96); color: #fff;}
.whatsapp-float i{font-size: 1.6rem;}

/* Course (Udemy-style) */
.course-udemy-card{border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.06);} 
.course-udemy-card .course-cover{aspect-ratio: 16/9; background-size: cover; background-position: center;} 
.course-udemy-card .course-meta{font-size: .95rem; color: rgba(0,0,0,.68);} 
.course-pill{display:inline-flex; gap:.35rem; align-items:center; padding:.35rem .6rem; border-radius: 999px; background: rgba(13,110,253,.08);} 
.course-learn-list li{margin-bottom:.4rem;}


/* Udemy-like floating course details */
.card-ee{position:relative;}
.course-float{
  position:absolute;
  top:14px;
  right:14px;
  width:min(320px, 92%);
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  padding:14px 14px 12px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:all .18s ease;
  z-index:40;
}
.card-ee:hover .course-float{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.course-float .title{font-weight:800; font-size:1.02rem; margin:0 0 8px;}
.course-float ul{margin:0; padding-left:1.1rem;}
.course-float li{margin:0 0 .25rem; font-size:.95rem;}
.course-float .meta{font-size:.85rem; color:rgba(0,0,0,.65); margin-top:8px;}

/* === v3: Escala tipográfica e iconografía (mejor legibilidad) === */
:root{ --ceeb-base-font: 17px; }
html{ font-size: var(--ceeb-base-font); }
body{ line-height: 1.65; }

/* Títulos más sólidos */
h1,.display-1,.display-2,.display-3{ letter-spacing: -0.02em; }

/* Botones un poco más grandes */
.btn{ padding: .75rem 1.1rem; font-weight: 600; }
.btn-lg{ padding: .9rem 1.35rem; }

/* Iconos en accesos rápidos */
.icon-circle{ width: 46px; height: 46px; display:inline-flex; align-items:center; justify-content:center; border-radius: 14px; }
.icon-circle i{ font-size: 1.15rem; }

/* Tarjetas con mejor aire */
.card{ border-radius: 18px; }
.card .card-body{ padding: 1.25rem; }

/* Navegación */
.navbar .nav-link{ font-weight: 600; }

/* WhatsApp flotante */
.ceeb-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}
.ceeb-whatsapp a{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.ceeb-whatsapp a i{ font-size: 1.6rem; }

/* Cursos estilo "Udemy": sidebar flotante en desktop */
.course-hero{ border-radius: 22px; overflow:hidden; }
.course-meta{ position: sticky; top: 96px; }
.course-syllabus li{ margin-bottom: .45rem; }