/* ============================================================================
   curso-grow.css — Rediseño de las landings de curso de webgrow a la estética
   de /emprendimientos. Cargar DESPUÉS de style-test.css y contenido.css, y SOLO
   en las páginas de curso (data, estrategia, finanzas, etc. comparten template).
   Receta: memoria reference-rediseno-curso-recipe.
   ============================================================================ */
:root{
  --violeta:#563454; --violeta-dark:#3d2540;
  --lima:#dafb37; --lima-dark:#c4e420;
  --gris-claro:#f7f7f9; --texto:#1a1a2e; --texto-suave:#6c757d;
}
body.cnt-page{ font-family:'Poppins',sans-serif; color:var(--texto); }

/* ── Botones lima (primario, como /emprendimientos) ── */
.btn-hero{
  background:var(--lima)!important; color:var(--violeta-dark)!important;
  font-weight:700!important; border:none!important; border-radius:50px!important;
  padding:14px 34px!important; box-shadow:none!important; transition:all .2s;
}
.btn-hero:hover{ background:var(--lima-dark)!important; color:var(--violeta-dark)!important; transform:translateY(-2px); box-shadow:0 8px 25px rgba(218,251,55,.35); }
.btn-hero span{ color:var(--violeta-dark)!important; }

/* ── HERO oscuro con glows ── */
#hero.hero{
  background:linear-gradient(135deg,#0d0d1a 0%,#1e1030 50%,#0d1a1a 100%)!important;
  position:relative; overflow:hidden; margin-top:-60px!important; padding:92px 0 66px!important; min-height:auto!important;
}
#hero.hero::before{ content:""; position:absolute; top:-50%; left:-20%; width:600px; height:600px; background:radial-gradient(circle,rgba(86,52,84,.4) 0%,transparent 70%); animation:cgPulso 6s ease-in-out infinite alternate; }
#hero.hero::after{ content:""; position:absolute; bottom:-30%; right:-10%; width:420px; height:420px; background:radial-gradient(circle,rgba(218,251,55,.12) 0%,transparent 70%); animation:cgPulso 8s ease-in-out infinite alternate-reverse; }
@keyframes cgPulso{ from{transform:scale(1)} to{transform:scale(1.2)} }
#hero.hero .container{ position:relative; z-index:1; }
#hero.hero h1{ color:#fff!important; font-weight:700!important; font-size:clamp(1.9rem,4.6vw,3rem)!important; line-height:1.16!important; }
#hero.hero h1 span{ color:#fff!important; }
#hero.hero h2{ color:rgba(255,255,255,.78)!important; font-size:1.05rem!important; line-height:1.7; font-weight:400!important; }
#hero.hero .youtube-facade{ box-shadow:0 24px 70px rgba(0,0,0,.5)!important; }

/* ── Títulos de sección (mismo tono; header sin fondo blanco) ── */
#main header, #main .section-header, #main .section-title{ background:transparent!important; }
#main .titulo-seccion, #main .section-header h2, #main .section-header p, #main .section-header .titulo, #main .section-title h2{
  color:var(--texto)!important; font-weight:700!important; font-size:clamp(1.5rem,3.4vw,2.1rem)!important; text-transform:none!important;
}
#main .section-header p.titulo-seccion{ font-size:1rem!important; color:var(--texto-suave)!important; font-weight:500!important; }

/* ── VALUES (tarjetas del nuevo diseño) ── */
#values{ background:#fff; padding:60px 0; }
#values .acerca{ padding-left:12px!important; padding-right:12px!important; }
#values .box, #carouselComoEs .box{ background:var(--gris-claro)!important; border-radius:18px; padding:34px 24px; height:100%; border:1px solid rgba(86,52,84,.08); border-top:3px solid var(--lima); box-shadow:none!important; text-align:center; transition:transform .2s,box-shadow .2s; }
#values .box:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(86,52,84,.10); }
#values .box h4, #carouselComoEs .box h4{ color:var(--violeta)!important; font-size:1.2rem; font-weight:700; margin-top:14px; }
#values .box p, #carouselComoEs .box p{ color:var(--texto-suave)!important; font-size:.95rem; margin:0; }
#values .box img, #carouselComoEs .box img{ max-height:56px; width:auto; }

/* ── ABOUT ── */
#about.about{ background:var(--gris-claro)!important; padding:70px 0; }
#about .content{ background:transparent!important; }
#about .content h2{ color:var(--violeta)!important; }
#about .content p{ color:var(--texto-suave)!important; line-height:1.75; }
#about .content p b{ color:var(--texto)!important; }
#about .content h2{ display:none; } /* el título de la segunda franja repite el del hero -> no duplicar */
#about img{ border-radius:16px; }

/* ── TEMARIO (acordeón) ── */
#temario.temario{ background:#fff!important; padding:72px 0; }
#temario .accordion-item{ border:1px solid rgba(86,52,84,.12)!important; border-radius:12px!important; margin-bottom:10px; overflow:hidden; background:#fff; }
#temario .accordion-button{ font-weight:600; font-size:1rem; color:var(--violeta-dark)!important; background:#fff!important; padding:16px 20px; }
#temario .accordion-button:not(.collapsed){ color:var(--violeta)!important; background:rgba(86,52,84,.04)!important; box-shadow:none; }
#temario .accordion-button:focus{ box-shadow:none; }
#temario .accordion-button::after{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23563454' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); }
#temario .accordion-body{ font-size:.93rem; color:var(--texto-suave); line-height:1.65; background:#fff; }
#temario .accordion-body p{ margin:0 0 8px; padding-left:20px; position:relative; }
#temario .accordion-body p::before{ content:"•"; position:absolute; left:5px; top:-1px; color:var(--violeta); font-weight:700; }

/* ── PROFESORES ── */
#profesores.profesores{ background:var(--gris-claro)!important; padding:72px 0; }
#profesores .nombre{ color:var(--violeta)!important; font-weight:700; font-size:1.25rem; }
#profesores .resumen{ color:var(--texto-suave)!important; }
#profesores .descripcion, #profesores .collapse{ color:var(--texto)!important; line-height:1.7; font-size:.95rem; }
#profesores img{ border-radius:16px; }
#profesores .vermas, #profesores .vermas p{ color:var(--violeta)!important; font-weight:600; }

/* ── CLIENTS (prensa / empresas / graduados) — strip claro, logos en gris ── */
#clients.clients{ background:#fff; padding:52px 0; }
#clients .titulo-seccion{ font-size:clamp(1.4rem,3vw,1.9rem)!important; font-weight:700; text-transform:none; letter-spacing:normal; color:var(--texto)!important; margin-bottom:28px; }
#clients .swiper-slide img{ filter:grayscale(1); opacity:.55; transition:all .2s; max-height:46px; width:auto; margin:0 auto; }
#clients .swiper-slide img:hover{ filter:grayscale(0); opacity:1; }

/* ── TESTIMONIOS (tarjetas) ── */
#testimonials.testimonials{ background:var(--gris-claro)!important; padding:72px 0; }
#testimonials .section-header h2{ color:var(--texto)!important; }
#testimonials .testimonial-item{ background:#fff!important; border-radius:20px; padding:32px 28px; height:100%; border:1px solid rgba(86,52,84,.08); box-shadow:none!important; }
#testimonials .testimonial-item p{ font-size:.93rem; line-height:1.7; color:var(--texto)!important; font-style:italic; }
#testimonials .stars i{ color:var(--lima)!important; }
#testimonials .profile h3{ font-size:.95rem; color:var(--texto)!important; margin-top:10px; }
#testimonials .profile h4{ font-size:.82rem; color:var(--texto-suave)!important; font-weight:400; }
#testimonials .testimonial-img{ width:60px; height:60px; border-radius:50%; object-fit:cover; }
#testimonials .swiper-pagination-bullet-active{ background:var(--violeta); }
#testimonials .mas-videos{ color:var(--violeta)!important; }

/* ── PRECIO (sección oscura + recuadro violeta de la referencia) ── */
.precio, .pagos{ background:linear-gradient(135deg,#0d0d1a 0%,#1a0d28 100%)!important; padding:80px 0!important; }
.precio .contenedor-oferta{
  background:
    radial-gradient(circle at 88% -12%,rgba(218,251,55,.13) 0%,transparent 46%),
    radial-gradient(circle at 0% 112%,rgba(255,255,255,.05) 0%,transparent 46%),
    linear-gradient(135deg,#1d1627 0%,#271632 100%)!important;
  border:1.5px solid var(--violeta); border-radius:28px; overflow:hidden; max-width:960px; margin:0 auto; padding:0!important; gap:0;
}
.precio .img-principal-oferta{ max-width:42%; border-radius:0; align-self:stretch; object-fit:cover; }
.precio .contenedor-oferta > div{ padding:26px 30px 36px; }
.pagos .container-btn-pagos-informacion{ margin-bottom:26px; }
.precio h2, .pagos h2{ color:#fff!important; }
.precio .turquesa-grow, .pagos .turquesa-grow{ color:var(--lima)!important; }
.precio ul li, .pagos ul li{ color:rgba(255,255,255,.85)!important; }
.precio .oferta-precio p, .pagos .oferta-precio p{ color:#fff!important; }
/* Precio / badge / tachado legibles sobre fondo oscuro — funciona con o SIN wrapper .oferta-precio
   (curso.php usa .oferta-precio; estrategia y otros ponen <p style="color:#5b455b"> suelto) */
.precio p[style*="5b455b"], .pagos p[style*="5b455b"]{ color:var(--lima)!important; font-weight:800!important; }
.precio .badge[style*="5b455b"], .pagos .badge[style*="5b455b"]{ background:var(--lima)!important; color:var(--violeta-dark)!important; }
.precio [style*="line-through"], .pagos [style*="line-through"]{ color:rgba(255,255,255,.55)!important; }
.pagos{ padding:64px 0 40px!important; }

/* ── PREGUNTAS FRECUENTES ── */
#preguntas_frecuentes{ padding:70px 0; }
#preguntas_frecuentes .titulo-seccion{ color:var(--texto)!important; }
#preguntas_frecuentes .accordion-item{ border:1px solid rgba(86,52,84,.12)!important; border-radius:12px!important; margin-bottom:10px; overflow:hidden; }
#preguntas_frecuentes .accordion-button{ font-weight:600; font-size:1rem; color:var(--violeta-dark)!important; background:#fff!important; }
#preguntas_frecuentes .accordion-button:not(.collapsed){ color:var(--violeta)!important; background:rgba(86,52,84,.04)!important; box-shadow:none; }
#preguntas_frecuentes .accordion-button:focus{ box-shadow:none; }
#preguntas_frecuentes .accordion-body{ color:var(--texto-suave); line-height:1.7; }

/* ── RECUADRO "parte de la comunidad" (banda oscura + tarjeta blanca que resalta) ── */
.reco-band{ background:linear-gradient(135deg,#0d0d1a 0%,#1a0d28 100%); margin-top:-46px; padding:0 0 60px; }
.comunidad-reco{ max-width:940px; margin:0 auto; display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid rgba(86,52,84,.15); border-left:4px solid var(--lima); border-radius:16px; padding:24px 26px; }
.comunidad-reco .cr-ic{ font-size:1.8rem; color:var(--violeta); line-height:1; flex-shrink:0; }
.comunidad-reco h4{ font-size:1.05rem; color:var(--violeta)!important; margin:0 0 6px; font-weight:700; }
.comunidad-reco p{ font-size:.92rem; color:var(--texto-suave)!important; margin:0 0 10px; line-height:1.6; }
.comunidad-reco .cr-link{ color:var(--violeta)!important; font-weight:700; text-decoration:none; font-size:.9rem; }
.comunidad-reco .cr-link:hover{ color:var(--violeta-dark)!important; }
@media (max-width:600px){ .comunidad-reco{ flex-direction:column; gap:10px; } }

/* ── OTRAS COMUNIDADES (franja violeta de marca) ── */
#cursosAleatorios.services{ background:linear-gradient(135deg,var(--violeta-dark) 0%,var(--violeta) 100%)!important; padding:72px 0; }
#cursosAleatorios .section-title h2{ color:#fff!important; font-weight:700; }
#cursosAleatorios a{ text-decoration:none; }
#cursosAleatorios .icon-box{ background:rgba(255,255,255,.07)!important; border-radius:16px; padding:26px 22px; border:1px solid rgba(255,255,255,.14); border-left:4px solid var(--lima); box-shadow:none!important; transition:transform .2s,box-shadow .2s; }
#cursosAleatorios .icon-box:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.25)!important; }
#cursosAleatorios .icon-box .title{ font-size:1rem; font-weight:700; color:#fff!important; }
#cursosAleatorios .icon-box .description{ font-size:.87rem; color:rgba(255,255,255,.8)!important; line-height:1.5; }
#cursosAleatorios .icon-box::before, #cursosAleatorios .icon-box:hover::before{ display:none!important; content:none!important; background:none!important; }

@media (max-width:991px){
  .precio .contenedor-oferta{ flex-direction:column; }
  .precio .img-principal-oferta{ max-width:100%; }
}
