/* ==========================================================================
   Landing Page Redesign — Conversion-Driven Spec (see specs/landing-page-redesign.md)
   Loaded after kidz.css. The vendored Bootstrap build is v5.0.2, which
   predates the 5.3 color-modes API (`data-bs-theme`) and a handful of
   5.2/5.3 utility classes the spec assumes (`.rounded-4`, `.fw-semibold`,
   `.border-secondary-subtle`, `.bg-body-tertiary`). Rather than upgrade the
   shared vendored Bootstrap (used by every page on the site), those are
   hand-implemented below, scoped to this stylesheet.
   ========================================================================== */

/* ---------- Typography ---------- */
:root {
  --bs-font-sans-serif: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

.display-hero {
  font-size: calc(2.5rem + 2vw); /* Fluid typography up to 4.5rem */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Roboto is the active font site-wide: kidz.css uses "Roboto" in its base
   and component rules (headings inherit from body), and the Google Fonts
   link in index.html loads Roboto 300-700. The .font-dosis utility class
   still exists in kidz.css but is unused on this page. Force Roboto
   explicitly on the few rules that bypass --bs-font-sans-serif anyway. */
body,
.tooltip,
.popover,
.font-base,
.card .card-body .card-title {
  font-family: var(--bs-font-sans-serif);
}

/* ---------- Theme B: Clean Light Minimalist (Autung brand colors) ---------- */
:root,
[data-bs-theme="light"] {
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #111827;
  /* Autung brand palette, taken from assets/img/LOGOTIPO_AUTUNG_SCHOOL.svg */
  --autung-yellow: #ffe006;
  --autung-turquoise: #15818a;
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.bg-body {
  background-color: #f8f9fa !important;
}

.text-body {
  color: #111827 !important;
}

.text-muted {
  color: #4b5563 !important;
}

.bg-body-tertiary,
.card {
  background-color: #ffffff;
}

.btn-accent {
  background: var(--autung-yellow);
  color: #0b0f19;
  border: none;
}

.btn-accent:focus,
.btn-accent:active,
.btn-accent:hover {
  color: #0b0f19;
}

/* kidz.css's own .navbar-white / dark nav-link text is already correct for
   this light theme, so no navbar override is needed here (see git history
   for the dark-theme version, which did need one). */

/* ---------- Utility fallbacks (not present in vendored Bootstrap 5.0.2) ---------- */
.rounded-4 {
  border-radius: 1.5rem !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.border-secondary-subtle {
  border-color: rgba(156, 163, 175, 0.35) !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* ---------- Preloader / splash screen ---------- */
/* kidz.css's .smooth-loader-wrapper is white and its .smooth-loader is
   centered with `translate(-50%, 50%)` (pushes it below center — likely a
   template bug); both are fixed here since the splash is now much more
   visible with a full logo instead of four small dots. */
.smooth-loader-wrapper {
  background-color: #f8f9fa !important;
}

.smooth-loader-wrapper .smooth-loader {
  transform: translate(-50%, -50%);
}

.loader-logo {
  width: 140px;
  height: auto;
  animation: loader-logo-pulse 1.4s ease-in-out infinite;
}

@keyframes loader-logo-pulse {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* ---------- 2.1 Layout Lock ---------- */
.container-landing {
  max-width: 1280px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

/* ---------- Section 2: Trust & Social Proof ---------- */
.trust-logo {
  max-height: 40px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.trust-logo:hover {
  opacity: 1;
}

/* ---------- Section 3: Feature cards ---------- */
.feature-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

.feature-icon.bg-turquoise {
  background-color: var(--autung-turquoise);
  color: #ffffff;
}

.feature-icon.bg-yellow {
  background-color: var(--autung-yellow);
  color: #0b0f19;
}

/* ---------- 3. Motion & Micro-interactions ---------- */
html {
  scroll-behavior: smooth;
}

.btn-accent,
.btn-primary {
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.btn-accent:hover,
.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* ---------- Shape & shadow language, adapted from educabot.com ---------- */
/* Colors and typeface are unchanged (Roboto + Autung brand palette per
   earlier instructions) — only the shape/shadow language observed on
   educabot.com is carried over: fully-rounded pill buttons, large soft
   card corners, and diffuse low-opacity shadows instead of crisp ones. */
.btn-accent {
  border-radius: 9999px;
}

.rounded-3 {
  border-radius: 1.25rem !important;
}

.shadow-lg {
  box-shadow: 0 20px 45px rgba(17, 24, 39, 0.12) !important;
}

.card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.08);
}

/* ---------- Scroll reveal (Features section) ---------- */
/* Elements start hidden/offset and get .is-visible added by JS (see the
   IntersectionObserver script at the bottom of index.html) the first time
   they scroll into view — mirrors educabot.com's fade/slide-in-on-scroll
   treatment for its feature content and imagery. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal-on-scroll.reveal-left {
  transform: translateX(-40px);
}

.reveal-on-scroll.reveal-right {
  transform: translateX(40px);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-scroll.reveal-left.is-visible,
.reveal-on-scroll.reveal-right.is-visible {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Footer, adapted from educabot.com ---------- */
/* educabot.com's real footer (fetched and inspected) is a light band with a
   logo/copyright column plus two link columns ("Nuestras redes", "Contacto")
   headed by a bold label with a colored bottom-border accent, and plain text
   links that go from muted to dark on hover — replacing this site's old
   dark image-background footer with the same structure/behavior, using
   Autung's own colors. */
.site-footer {
  background-color: #12818a;
}

.footer-logo {
  width: 160px;
  height: auto;
}

.footer-quote {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.footer-copyright {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer-heading {
  display: inline-block;
  font-weight: 700;
  font-size: 1.0625rem;
  color: #ffffff;
  border-bottom: 2px solid var(--autung-yellow);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.footer-link-list li {
  margin-bottom: 0.75rem;
}

.footer-link-list a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link-list a:hover {
  color: #ffe006;
}

/* ---------- Header, restyled like educabot.com ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  background-color: #12818a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}

.header > .navbar {
  background-color: #12818a !important;
}

.header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.navbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar .navbar-brand img {
  height: 54px;
  width: auto;
  transition: height 0.3s ease;
}

/* ---------- Hero: full-width background slider with overlaid copy ---------- */
/* Mirrors educabot.com's hero: a full-viewport media background with the
   headline/CTAs overlaid on the left. Slides fade in (carousel-fade). */
.hero-home {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 76px); /* Fixed header height */
  overflow: hidden;
  background-color: #111827;
}

.hero-slider,
.hero-slider .carousel-inner,
.hero-slider .carousel-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slider .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Left-weighted gradient scrim so the overlay text stays readable over
   any photo — darker on the left where the copy sits, lighter to the right. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(17, 24, 39, 0.82) 0%,
    rgba(17, 24, 39, 0.45) 45%,
    rgba(17, 24, 39, 0.05) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-copy {
  max-width: 640px;
  padding: 4rem 0;
}

.hero-copy .display-hero {
  color: #ffffff;
}

.hero-copy .lead {
  color: rgba(255, 255, 255, 0.92);
}

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
  z-index: 3;
}

@media (max-width: 767.98px) {
  .hero-home {
    min-height: 70vh;
  }

  .hero-copy {
    padding: 2.5rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider .carousel-item {
    transition: none;
  }
}

.header.scrolled .navbar-brand img {
  height: 46px;
}

.navbar .nav-link {
  font-weight: 500;
  font-size: 0.9375rem;
  color: #ffffff !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #ffe006 !important;
}

.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  color: #ffffff;
}

.navbar-toggler:focus {
  box-shadow: none;
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
  }

  .navbar .nav-link {
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem;
    color: #111827 !important;
  }

  .navbar .nav-link:hover {
    background-color: #f3f4f6;
    color: #15818a !important;
  }
}