/* ==========================================================================
   MINDS & HEARTS CHILDCARE — Hoja de estilos principal
   Paleta extraída del logotipo oficial:
   Azul cielo #4893B0 · Azul profundo #2C6076 · Coral #FD989E
   Verde salvia #8FB86B · Dorado sol #F2AF3B · Crema #FBF3E7
   ========================================================================== */

:root {
  --mh-blue: #4893B0;
  --mh-blue-dark: #2C6076;
  --mh-blue-darker: #1E4552;
  --mh-pink: #FD989E;
  --mh-pink-dark: #E96F78;
  --mh-green: #8FB86B;
  --mh-green-dark: #6D9950;
  --mh-gold: #F2AF3B;
  --mh-gold-light: #FCCA73;
  --mh-cream: #FBF3E7;
  --mh-cream-dark: #F3E3CB;
  --mh-white: #FFFFFF;
  --mh-ink: #253A42;
  --mh-ink-soft: #4F6570;

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 10px 30px -12px rgba(37, 58, 66, 0.25);
  --shadow-pop: 0 16px 40px -14px rgba(72, 147, 176, 0.45);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--mh-ink);
  background-color: var(--mh-cream);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-display);
  color: var(--mh-blue-darker);
}

.text-brand-blue { color: var(--mh-blue); }
.text-brand-pink { color: var(--mh-pink-dark); }
.text-brand-green { color: var(--mh-green-dark); }
.bg-brand-cream { background-color: var(--mh-cream); }
.bg-brand-blue { background-color: var(--mh-blue); }

a { text-decoration: none; }

::selection { background: var(--mh-gold-light); color: var(--mh-blue-darker); }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--mh-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Navbar ---------- */
.mh-navbar {
  background: rgba(251, 243, 231, 0.92);
  backdrop-filter: blur(10px);
  transition: box-shadow .3s ease, padding .3s ease;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.mh-navbar.scrolled {
  box-shadow: 0 6px 24px -10px rgba(37,58,66,.25);
}
.mh-navbar .navbar-brand img { height: 52px; transition: height .3s ease; }
.mh-navbar.scrolled .navbar-brand img { height: 42px; }

.mh-navbar .nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--mh-blue-darker);
  margin: 0 .35rem;
  padding: .5rem .9rem !important;
  border-radius: 999px;
  position: relative;
  transition: background .25s ease, color .25s ease;
}
.mh-navbar .nav-link:hover,
.mh-navbar .nav-link:focus-visible {
  background: var(--mh-blue);
  color: #fff;
}
.mh-navbar .nav-link.active {
  background: var(--mh-blue-darker);
  color: #fff;
}

.lang-switch {
  display: inline-flex;
  border: 2px solid var(--mh-blue);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--mh-blue-darker);
  padding: .35rem .75rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lang-switch button.active {
  background: var(--mh-blue);
  color: #fff;
}

/* ---------- Buttons (botones dinámicos) ---------- */
.btn-mh {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  padding: .75rem 1.9rem;
  border: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, color .25s ease;
}
.btn-mh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--mh-pink) 0%, var(--mh-gold) 100%);
  transform: translateX(-101%);
  transition: transform .35s ease;
}
.btn-mh:hover::before,
.btn-mh:focus-visible::before { transform: translateX(0); }

.btn-mh-primary {
  background: var(--mh-blue);
  color: #fff;
  box-shadow: var(--shadow-pop);
}
.btn-mh-primary:hover, .btn-mh-primary:focus-visible {
  color: var(--mh-blue-darker);
  transform: translateY(-3px) scale(1.02);
}

.btn-mh-outline {
  background: transparent;
  color: var(--mh-blue-darker);
  border: 2px solid var(--mh-blue-darker);
}
.btn-mh-outline::before { background: var(--mh-blue-darker); }
.btn-mh-outline:hover, .btn-mh-outline:focus-visible {
  color: #fff;
  transform: translateY(-3px) scale(1.02);
}

.btn-mh-light {
  background: #fff;
  color: var(--mh-blue-darker);
}
.btn-mh-light:hover { color: var(--mh-blue-darker); transform: translateY(-3px) scale(1.02); }

.btn-mh .wheel-spin {
  transition: transform .5s ease;
}
.btn-mh:hover .wheel-spin { transform: rotate(300deg); }

/* ---------- Hero / Carousel ---------- */
.mh-hero { position: relative; }
.mh-hero .carousel-item {
  min-height: 88vh;
}
@media (max-width: 767px) {
  .mh-hero .carousel-item { min-height: 78vh; }
}
.mh-hero .slide-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mh-hero .slide-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  animation: kenburns 9s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.08) translate(0,0); }
  to { transform: scale(1.16) translate(-1.5%, -1%); }
}
.mh-hero .slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,69,82,.55) 0%, rgba(30,69,82,.72) 100%);
}
.mh-hero .slide-content {
  position: relative;
  z-index: 2;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .mh-hero .slide-content { min-height: 78vh; }
}
.mh-hero .eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  font-family: var(--font-display);
  font-size: .85rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.mh-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  text-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.mh-hero p.lead { color: rgba(255,255,255,.92); }

.mh-hero .carousel-indicators [data-bs-target] {
  width: 42px; height: 5px; border-radius: 999px;
  background-color: rgba(255,255,255,.5);
}
.mh-hero .carousel-indicators .active { background-color: var(--mh-gold); }

.mh-hero .carousel-control-prev, .mh-hero .carousel-control-next { width: 6%; }
.mh-hero .carousel-control-prev-icon, .mh-hero .carousel-control-next-icon {
  background-color: rgba(255,255,255,.18);
  border-radius: 50%;
  padding: 1.4rem;
  backdrop-filter: blur(3px);
}

.photo-circle-hero {
  position: relative;
  padding: 8.6rem 0 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--mh-blue);
}
.photo-circle-hero .photo-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(30,69,82,.68), rgba(72,147,176,.78)),
    url("../assets/images/fotos/home%20page.jpg") center / cover no-repeat;
  transform: scale(1.03);
}
.photo-circle-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 32%, rgba(253,152,158,.38), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(242,175,59,.34), transparent 24%),
    linear-gradient(90deg, rgba(72,147,176,.42), rgba(143,184,107,.32));
}
.photo-hero-title {
  max-width: 820px;
  margin: 0 auto 3rem;
  text-align: center;
}
.photo-circle-hero .eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.46);
  color: #fff;
  font-family: var(--font-display);
  font-size: .88rem;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.photo-circle-hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 4.65rem);
  line-height: 1.02;
  text-shadow: 0 8px 28px rgba(30,69,82,.36);
}
.photo-circle-hero p.lead {
  color: rgba(255,255,255,.94);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.circle-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  padding-bottom: 5.5rem;
}
.circle-photo-card {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background: rgba(72,147,176,.86);
  box-shadow: 0 18px 38px -18px rgba(30,69,82,.55);
}
.circle-photo {
  position: relative;
  width: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.56);
  box-shadow: inset 0 0 0 1px rgba(30,69,82,.2), 0 18px 30px -18px rgba(30,69,82,.7);
}
.circle-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,69,82,.08), rgba(30,69,82,.42));
}
.circle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.circle-photo-card:hover .circle-photo img {
  transform: scale(1.06);
}
.circle-photo h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 86%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 4px 16px rgba(30,69,82,.56);
}
@media (max-width: 991px) {
  .photo-circle-hero { padding-top: 7.6rem; }
  .circle-photo-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 575px) {
  .photo-circle-hero { padding-top: 6.8rem; }
  .circle-photo-grid { padding-bottom: 4rem; }
  .circle-photo-card { aspect-ratio: 1 / .92; }
}

/* wave divider under hero */
.wave-divider { display: block; width: 100%; line-height: 0; }
.wave-divider svg { width: 100%; height: 70px; display: block; }

/* ---------- Track / rail signature element ---------- */
.rail-line {
  position: relative;
}
.rail-line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 6px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    to bottom, var(--mh-gold) 0 14px, transparent 14px 28px
  );
  opacity: .55;
  z-index: 0;
}
@media (max-width: 991px) {
  .rail-line::before { display: none; }
}

.stop-marker {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--mh-white);
  border: 4px solid var(--mh-blue);
  display: flex; align-items: center; justify-content: center;
  color: var(--mh-blue);
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-soft);
}
.stop-marker::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed var(--mh-gold);
  animation: spin-slow 14s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---------- Section basics ---------- */
.section-pad { padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (max-width: 767px) { .section-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; } }

.section-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--mh-pink-dark);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
}

.section-title { font-weight: 600; }

.divider-dots {
  display: flex; gap: .4rem; align-items: center;
}
.divider-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mh-blue);
}
.divider-dots span:nth-child(2) { background: var(--mh-pink); }
.divider-dots span:nth-child(3) { background: var(--mh-gold); }

/* ---------- Cards ---------- */
.mh-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform .35s ease, box-shadow .35s ease;
  height: 100%;
}
.mh-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); }

.mh-card .card-icon-wrap {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  margin-bottom: 1rem;
}

.mh-photo-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--mh-blue), var(--mh-green));
  aspect-ratio: 4 / 3;
}
.mh-photo-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.mh-photo-frame:hover img { transform: scale(1.08); }
.mh-photo-frame .fallback-icon {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: .5rem;
  color: #fff;
  font-size: 2.2rem;
  text-align: center;
  padding: 1rem;
}
.mh-photo-frame.img-failed img { display: none; }
.mh-photo-frame.img-failed .fallback-icon { display: flex; }
.mh-photo-frame .frame-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(30,69,82,.85), transparent);
  color: #fff;
  padding: 1.4rem 1rem .8rem;
  font-family: var(--font-display);
  font-weight: 500;
}

/* Gallery filter buttons */
.filter-pill {
  border: 2px solid var(--mh-blue);
  background: transparent;
  color: var(--mh-blue-darker);
  font-family: var(--font-display);
  font-weight: 500;
  border-radius: 999px;
  padding: .45rem 1.1rem;
  transition: all .25s ease;
}
.filter-pill.active, .filter-pill:hover {
  background: var(--mh-blue);
  color: #fff;
}

/* ---------- Timeline (Historia) ---------- */
.timeline-item { position: relative; padding-left: 2.2rem; }
.timeline-item:not(:last-child) { padding-bottom: 2.2rem; border-left: 3px dotted var(--mh-gold); margin-left: 20px; }
.timeline-item .dot {
  position: absolute; left: -23px; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mh-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--mh-cream);
}

/* ---------- Values / Vision-Mission ---------- */
.vm-card {
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  height: 100%;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.vm-card.vm-mision { background: linear-gradient(145deg, var(--mh-blue), var(--mh-blue-darker)); }
.vm-card.vm-vision { background: linear-gradient(145deg, var(--mh-pink-dark), #c95863); }
.vm-card .vm-icon {
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin-bottom: 1.2rem;
}

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  height: 100%;
}
.testimonial-card .stars { color: var(--mh-gold); letter-spacing: 2px; }
.testimonial-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mh-blue); color: #fff; font-family: var(--font-display); font-weight: 600;
}

/* ---------- Forms ---------- */
.mh-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 2.4rem;
}
.mh-form-card .form-label {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--mh-blue-darker);
  font-size: .92rem;
}
.mh-form-card .form-control,
.mh-form-card .form-select {
  border-radius: var(--radius-sm);
  border: 2px solid #e6dcca;
  padding: .7rem 1rem;
  background: #fffaf3;
}
.mh-form-card .form-control:focus,
.mh-form-card .form-select:focus {
  border-color: var(--mh-blue);
  box-shadow: 0 0 0 .2rem rgba(72,147,176,.18);
  background: #fff;
}
.captcha-box {
  background: var(--mh-cream-dark);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-display);
}
.captcha-box .captcha-question { font-weight: 600; color: var(--mh-blue-darker); font-size: 1.05rem; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-feedback-msg { border-radius: var(--radius-sm); }

/* ---------- Social / contact icons ---------- */
.social-grid { display: flex; flex-wrap: wrap; gap: .8rem; }
.social-btn {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-soft);
}
.social-btn:hover { transform: translateY(-5px) rotate(-4deg); color: #fff; }
.social-btn.sb-whatsapp { background: #25D366; }
.social-btn.sb-facebook { background: #1877F2; }
.social-btn.sb-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-btn.sb-tiktok { background: #010101; }
.social-btn.sb-email { background: var(--mh-blue); }
.social-btn.sb-phone { background: var(--mh-green-dark); }

.info-row { display: flex; gap: 1rem; align-items: flex-start; }
.info-row .info-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--mh-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---------- Floating WhatsApp button ---------- */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 10px 25px rgba(37,211,102,.5);
  animation: wa-pulse 2.6s ease-in-out infinite;
}
.wa-float:hover { color: #fff; transform: scale(1.06); }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 10px 25px rgba(37,211,102,.5); }
  50% { box-shadow: 0 10px 25px rgba(37,211,102,.5), 0 0 0 12px rgba(37,211,102,.12); }
}
.wa-tooltip {
  position: fixed;
  bottom: 34px;
  right: 96px;
  z-index: 1049;
  background: #fff;
  color: var(--mh-blue-darker);
  padding: .5rem .9rem;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: .85rem;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.wa-float:hover + .wa-tooltip,
.wa-tooltip.show { opacity: 1; transform: translateX(0); }

@media (max-width: 575px) {
  .wa-float { width: 54px; height: 54px; font-size: 1.5rem; bottom: 16px; right: 16px; }
  .wa-tooltip { display: none; }
}

/* ---------- Footer ---------- */
.mh-footer {
  background: var(--mh-blue-darker);
  color: rgba(255,255,255,.85);
}
.mh-footer h6 { color: #fff; font-family: var(--font-display); }
.mh-footer a { color: rgba(255,255,255,.75); transition: color .2s ease; }
.mh-footer a:hover { color: var(--mh-gold-light); }
.mh-footer .footer-track {
  height: 4px;
  background-image: repeating-linear-gradient(to right, var(--mh-gold) 0 10px, transparent 10px 20px);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Stats strip ---------- */
.stat-box { text-align: center; }
.stat-box .stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
  color: var(--mh-blue);
}

/* ---------- Page header (inner pages) ---------- */
.page-header {
  padding-top: 9rem;
  padding-bottom: 4rem;
  background: linear-gradient(160deg, var(--mh-blue-darker) 0%, var(--mh-blue) 100%);
  position: relative;
  overflow: hidden;
}
.page-header h1 { color: #fff; }
.page-header p { color: rgba(255,255,255,.85); }
.page-header .breadcrumb-mh a { color: rgba(255,255,255,.75); }
.page-header .breadcrumb-mh span { color: #fff; }
.page-header::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}

/* Utility */
.rounded-mh { border-radius: var(--radius-md) !important; }
.shadow-mh { box-shadow: var(--shadow-soft) !important; }