/* ==========================================================================
   GeniusPlace - estilos propios sobre la plantilla
   ========================================================================== */

/* Paleta cálida y amigable (encaja con el logo) */
body.theme-style5 {
  --theme-color: #F4506A;   /* coral */
  --theme-color2: #FFB200;  /* ámbar */
}

/* ---------- Cabecera: fondo blanco + nubes en blanco ---------- */
.th-header.header-layout8 .header-shape {
  display: block !important;
  filter: brightness(0) invert(1) !important; /* nube blanca pura */
}
/* Ocultar formas decorativas que la plantilla trae como placeholder gris */
.about-bg-shape9-1,
.course-bg-shape9-1,
.course-bg-shape9-2,
.why-bg-shape8-1,
.why-bg-shape8-2 { display: none !important; }
.th-header.header-layout8 .sticky-wrapper {
  background-color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(27, 35, 54, 0.07);
}
.th-header.header-layout8 .sticky-wrapper.sticky,
.th-header.header-layout8 .sticky-active {
  background-color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(27, 35, 54, 0.08);
}

/* ---------- Sección de contacto ---------- */
.gp-form-box {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(28, 35, 54, 0.10);
  height: 100%;
}
.contact-form .form-group {
  position: relative;
  margin-bottom: 22px;
}
.contact-form .form-control {
  width: 100%;
  height: 56px;
  padding: 0 22px 0 48px;
  border: 1px solid #ECECEC;
  border-radius: 14px;
  background: #F8F8FA;
  color: var(--title-color);
  font-size: 15px;
  transition: .25s ease;
}
.contact-form textarea.form-control {
  height: auto;
  padding-top: 16px;
  resize: vertical;
}
.contact-form .form-control::placeholder { color: #9aa4b2; }
.contact-form .form-control:focus {
  outline: none;
  border-color: var(--theme-color);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(244, 80, 106, .10);
}
.contact-form .form-group > i {
  position: absolute;
  left: 20px;
  top: 19px;
  color: var(--theme-color);
  font-size: 16px;
}
.contact-form textarea + i { top: 18px; }
.gp-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--body-color);
  margin: 4px 0 6px;
  padding-left: 4px;
}
.gp-consent input { margin-top: 3px; }
.gp-consent a { color: var(--theme-color); text-decoration: underline; }

/* ---------- Tarjeta de info de contacto ---------- */
.gp-contact-info {
  background: linear-gradient(160deg, var(--theme-color) 0%, #d83d57 100%);
  color: #fff;
  border-radius: 24px;
  padding: 40px;
  height: 100%;
  box-shadow: 0 24px 60px rgba(244, 80, 106, 0.22);
}
.gp-info-title {
  color: #fff;
  font-size: 24px;
  margin: 0 0 24px;
}
.gp-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.5;
}
.gp-info-item strong { font-weight: 700; }
.gp-info-item a { color: #fff; }
.gp-info-item a:hover { color: var(--theme-color2); }
.gp-info-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  font-size: 17px;
}
.gp-info-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.gp-info-btns .th-btn { padding: 12px 22px; }

/* ---------- Mapa ---------- */
.gp-map {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(28, 35, 54, 0.10);
  line-height: 0;
}
.gp-map iframe { display: block; }

/* ---------- CTA del footer ---------- */
.footer-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}
@media (max-width: 991px) {
  .footer-cta-btns { justify-content: center; }
}

/* ---------- Botones flotantes (WhatsApp + llamada) ---------- */
.gp-float {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gp-float a {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  transition: transform .2s ease;
}
.gp-float a:hover { transform: translateY(-3px) scale(1.05); color: #fff; }
.gp-float .gp-wa { background: #25D366; }
.gp-float .gp-call { background: var(--theme-color); }

/* ---------- Ajustes tarjeta de programa ---------- */
.course-card .box-text { margin-top: 10px; margin-bottom: 4px; }
.course-card .btn-wrap { justify-content: flex-start; }

/* Mejor legibilidad de la franja de info de contacto en el panel lateral */
.sidemenu-info .th-widget-contact .info-box { margin-bottom: 10px; line-height: 1.45; }

/* ---------- Fiabilidad de imágenes ----------
   El efecto WebGL (three.js) de hover puede no renderizar en algunos
   navegadores/dispositivos y dejaria las fotos en blanco. Lo neutralizamos
   para que las imagenes se vean siempre de forma nitida. */
.th--hover-img canvas { display: none !important; }
.th--hover-img img,
.th--hover-item img {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}