
:root{
  --ow-primary:#6f42c1;
  --ow-bg:#f6f2ff;
  --ow-text:#1f1f1f;
  --ow-muted:#6b6b6b;
}

body{ color:var(--ow-text); }
.text-ow{ color: var(--ow-primary) !important; }
.bg-ow-soft{ background: var(--ow-bg); }

.btn-ow{ background: var(--ow-primary); border-color: var(--ow-primary); color:#fff; border-radius:10px; }
.btn-ow:hover{ filter:brightness(.95); color:#fff; box-shadow:0 10px 22px rgba(111,66,193,.22); }

/* Banner */
.top-banner{ position:relative; border-bottom:1px solid rgba(0,0,0,.06); background:linear-gradient(90deg, rgba(111,66,193,.14), rgba(111,66,193,.06)); }
.top-banner .banner-inner{ display:flex; gap:.75rem; align-items:center; justify-content:space-between; padding:.65rem 0; }
.top-banner .banner-left{ display:flex; gap:.75rem; align-items:center; }
.top-banner .banner-badge{ background:var(--ow-primary); color:#fff; font-weight:700; font-size:.78rem; padding:.25rem .6rem; border-radius:999px; }
.top-banner .banner-image{ width:44px; height:44px; border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,.06); background:#fff; flex:0 0 auto; }
.top-banner .banner-image img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:576px){ .top-banner .banner-inner{ flex-direction:column; align-items:stretch; } .top-banner .banner-actions{ width:100%; display:flex; gap:.5rem; } .top-banner .banner-actions a{ flex:1; text-align:center; } }

/* Hero */
.hero-wrap{ background: radial-gradient(1200px 500px at 85% 40%, rgba(111,66,193,.14), transparent 60%), linear-gradient(180deg, #ffffff 0%, #fbfaff 100%); position:relative; overflow:hidden; }
.hero-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:28px; min-height:100%; animation:heroIn .7s ease-out both; }

/* CAMBIA ESTA PARTE */
.hero-visual{ 
  position:relative; 
  border:1px solid rgba(0,0,0,.06); 
  border-radius:18px; 
  overflow:hidden; 
  min-height:450px !important; /* Forzamos altura */
  background-image: url('../assets/img/gallery/7.jpg') !important; /* Ruta relativa desde la carpeta CSS */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: block !important;
}
.hero-visual::after{ content:""; position:absolute; inset:0; background: radial-gradient(700px 350px at 40% 30%, rgba(111,66,193,.12), transparent 60%), radial-gradient(650px 320px at 70% 70%, rgba(111,66,193,.08), transparent 60%); pointer-events:none; }

/* Puzzles decoration */
.hero-wrap::before, .hero-wrap::after{ content:""; position:absolute; width:420px; height:420px; opacity:.14; pointer-events:none; background-size:contain; background-repeat:no-repeat; filter:saturate(1.1); }
.hero-wrap::before{ top:-120px; right:-120px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 200 200'%3E%3Cpath fill='%236f42c1' d='M55 25h45c5 0 10 4 10 10v9c0 6 4 10 10 10s10-4 10-10v-9c0-6 4-10 10-10h20c6 0 10 4 10 10v35c0 6-4 10-10 10h-9c-6 0-10 4-10 10s4 10 10 10h9c6 0 10 4 10 10v45c0 6-4 10-10 10H25c-6 0-10-4-10-10V95c0-6 4-10 10-10h9c6 0 10-4 10-10s-4-10-10-10h-9c-6 0-10-4-10-10V35c0-6 4-10 10-10h30z'/%3E%3C/svg%3E"); }
.hero-wrap::after{ bottom:-140px; left:-140px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 200 200'%3E%3Cpath fill='%236f42c1' d='M25 55V25c0-6 4-10 10-10h35c6 0 10 4 10 10v9c0 6 4 10 10 10s10-4 10-10v-9c0-6 4-10 10-10h45c6 0 10 4 10 10v150c0 6-4 10-10 10H95c-6 0-10-4-10-10v-9c0-6-4-10-10-10s-10 4-10 10v9c0 6-4 10-10 10H35c-6 0-10-4-10-10v-20c0-6 4-10 10-10h9c6 0 10-4 10-10s-4-10-10-10h-9c-6 0-10-4-10-10z'/%3E%3C/svg%3E"); }

/* Animations */
@media (prefers-reduced-motion: reduce) { *{ animation:none !important; transition:none !important; } }
@keyframes heroIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; will-change:opacity, transform; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.card, .shadow-sm{ transition:transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.08); }

/* Misc */
.floating-whatsapp{ position:fixed; right:16px; bottom:16px; z-index:999; width:54px; height:54px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#25D366; color:#fff; text-decoration:none; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.floating-whatsapp:hover{ filter:brightness(.95); color:#fff; }
.section-pad{ padding:4rem 0; }
@media (min-width:992px){ .hero-wrap{ padding-top:14px; } .hero-card{ padding:34px; } }
.stats-section {
  background: #f8f9fa;
}

.stat-item {
  padding: 30px 10px;
}

.stat-number {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--ow-primary);
  margin-bottom: 10px;
}

.stat-item p {
  font-size: 1rem;
  color: #555;
}

@media (min-width: 992px) {
  .stat-number {
    font-size: 4.5rem;
  }
}
.essence-card {
  background: #fff;
  padding: 35px 25px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.essence-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px rgba(0,0,0,0.08);
}

.essence-icon {
  font-size: 2.5rem;
  color: var(--ow-primary);
  margin-bottom: 15px;
}

.highlight {
  border: 2px solid var(--ow-primary);
}
.value-card {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 18px;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
  border: 1px solid #f1f1f1;
}

.value-card:hover {
  transform: translateY(-5px);
  border-color: var(--ow-primary);
  box-shadow: 0 15px 30px rgba(0,0,0,0.06);
}

.value-icon {
  font-size: 2rem;
  color: var(--ow-primary);
  margin-bottom: 12px;
}
.program-card:hover .btn-ow {
  background: #fff;
  color: var(--ow-primary);
  border: 2px solid var(--ow-primary);
}
.btn-ow {
  background: var(--ow-primary);
  border: 2px solid var(--ow-primary);
  color: #fff;
  border-radius: 10px;
  transition: all .3s ease;
}

.btn-ow:hover {
  background: #fff;
  color: var(--ow-primary);
  box-shadow: 0 10px 22px rgba(111,66,193,.22);
}
.gallery-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  cursor: pointer;
}
.img-carousel {
  max-height: 420px;
  object-fit: cover;
  border-radius: 20px;
}
