/* ============================================================
   Velas Artesanales — sistema de diseño (colores del curso)
   Rosa → lila → violeta + dorado. Moderno, femenino, mobile-first.
   ============================================================ */
:root {
  --cream:     #FCF5FB;
  --cream-2:   #F6EAF6;
  --card:      #FFFFFF;
  --ink:       #3A2B41;
  --ink-soft:  #7A6A82;
  --pink:      #E8509A;
  --pink-dk:   #C63C83;
  --lilac:     #A98BE0;
  --violet:    #7E86E6;
  --gold:      #C79A3F;
  --gold-soft: #E7C86A;
  --rose:      #F0B9D6;
  --wa:        #25D366;
  --wa-dk:     #16a34a;
  --line:      #EEDCEB;
  --grad:      linear-gradient(135deg, #E8509A 0%, #A98BE0 55%, #7E86E6 100%);
  --grad-soft: linear-gradient(135deg, #FBE3F0 0%, #EFE6Fb 60%, #E7EAFC 100%);
  --shadow:    0 14px 40px rgba(150, 55, 120, .14);
  --shadow-sm: 0 6px 18px rgba(150, 55, 120, .10);
  --radius:    22px;
  --radius-sm: 14px;
  --maxw:      920px;
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--cream); line-height: 1.6; font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6.4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; color: var(--ink-soft); }
strong { color: var(--ink); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 62px 0; }
.section--alt { background: var(--cream-2); }
.center { text-align: center; }
.lead { font-size: 1.12rem; color: var(--ink); }
.mb-0{margin-bottom:0}.mt-0{margin-top:0}
.spacer-bottom { padding-bottom: 96px; }

.eyebrow {
  display: inline-block; font-family: var(--sans); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; font-size: .72rem;
  color: var(--pink-dk); margin-bottom: .8rem;
}
.hl {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--pink-dk);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; text-align: center; cursor: pointer;
  padding: 16px 30px; border-radius: 999px; border: 0; line-height: 1.2;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  color: #fff; background: var(--grad);
  box-shadow: 0 10px 26px rgba(200, 70, 140, .38);
}
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 34px rgba(200, 70, 140, .46); }
.btn--wa { color: #fff; background: linear-gradient(135deg, #34d576, var(--wa-dk)); box-shadow: 0 10px 26px rgba(37, 211, 102, .34); }
.btn--wa:hover { transform: translateY(-2px); }
.btn--ghost { background: #fff; color: var(--pink-dk); border: 2px solid var(--rose); }
.btn--ghost:hover { background: #fff6fb; }
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 18px 36px; font-size: 1.12rem; }
.btn-note { font-size: .82rem; color: var(--ink-soft); margin-top: .6rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(120% 80% at 50% -20%, #ffffff 0%, rgba(255,255,255,0) 55%),
    var(--grad-soft);
  padding: 18px 0 52px;
}
@media (max-width: 720px) { .hero { padding: 6px 0 40px; } }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 80% 10%, rgba(232,80,154,.14), transparent 60%),
              radial-gradient(50% 40% at 15% 20%, rgba(126,134,230,.14), transparent 60%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { color: var(--ink); }
.hero .sub { font-size: 1.14rem; max-width: 640px; margin: 0 auto 1.7rem; }
.hero .cta-row { display: flex; flex-direction: column; gap: 12px; align-items: center; }
@media (min-width: 620px) { .hero .cta-row { flex-direction: row; justify-content: center; } }
/* los 2 botones del hero se mueven alternados, de lado a lado (sutil pero visible) */
.hero .cta-row .btn { animation: ctaNudge 3s ease-in-out infinite; }
.hero .cta-row .btn:nth-child(2) { animation-delay: 1.5s; }
@keyframes ctaNudge {
  0%, 55%, 100% { transform: translateX(0); }
  62% { transform: translateX(-7px); }
  70% { transform: translateX(6px); }
  78% { transform: translateX(-4px); }
  86% { transform: translateX(3px); }
  92% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .hero .cta-row .btn { animation: none; } }

.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 22px; font-size: .9rem; color: var(--ink-soft); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); color: var(--pink-dk);
  padding: 7px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  box-shadow: var(--shadow-sm); margin-bottom: 6px;
}

/* portada / imagen del hero */
.hero-cover {
  max-width: 360px; width: 100%; margin: 28px auto 0;
  border-radius: 24px; box-shadow: var(--shadow); border: 4px solid #fff;
}
/* carrusel del hero (rota cada 2s) */
.hero-carousel {
  position: relative; max-width: 340px; width: 100%; margin: 28px auto 0;
  aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow); border: 4px solid #fff; background: var(--cream-2);
}
.hero-carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.hero-carousel img.is-active { opacity: 1; }
.hero-carousel .dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 7px; justify-content: center; z-index: 2; }
.hero-carousel .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: background .3s; }
.hero-carousel .dots i.on { background: #fff; }

/* ---------- Listas con check ---------- */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.check-list li { position: relative; padding-left: 36px; color: var(--ink); }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad); color: #fff; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(200,70,140,.3);
}

/* ---------- Tarjetas / grids ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-top: .3rem; }
.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3,1fr); } }

.pain-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding:18px 20px; box-shadow: var(--shadow-sm); }
.pain-card p { margin:0; }
.pain-card .q { color: var(--ink); font-style: italic; }

/* módulos */
.mod { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding:18px 20px; display:flex; gap:14px; align-items:flex-start; box-shadow: var(--shadow-sm); }
.mod .n {
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:#FCEFF6; border:2px solid var(--gold-soft); color:var(--pink-dk);
  font-family: var(--serif); font-weight:700; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.mod h3 { margin:.15rem 0 .25rem; font-family: var(--sans); font-size:1.02rem; font-weight:700; }
.mod p { margin:0; font-size:.92rem; }

/* ---------- Galería de fotos reales (masonry) ---------- */
.gallery { column-count: 2; column-gap: 14px; margin-top: 28px; }
@media (min-width: 760px) { .gallery { column-count: 3; } }
.gallery img { width: 100%; margin: 0 0 14px; border-radius: 16px; box-shadow: var(--shadow-sm); border: 3px solid #fff; break-inside: avoid; display: inline-block; }
.gallery-note { text-align:center; font-size:.82rem; color:var(--ink-soft); margin-top:16px; }

/* ---------- Banner 16:9 (showcase) ---------- */
.showcase { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); border: 3px solid #fff; }
.showcase img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.showcase .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px 20px;
  background: linear-gradient(to top, rgba(58,18,48,.78), rgba(58,18,48,.28) 55%, transparent);
  color: #fff; font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem); line-height: 1.2; text-shadow: 0 2px 14px rgba(0,0,0,.5); }

/* ---------- Feature split (imagen cuadrada/vertical + texto) ---------- */
.feature { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 760px){ .feature { grid-template-columns: 1fr 1fr; gap: 46px; }
  .feature.rev .ph { order: 2; } }
.feature .ph { position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 4px solid #fff; }
.feature .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature .ph.sq { aspect-ratio: 1/1; }
.feature .ph.v  { aspect-ratio: 3/4; max-width: 340px; margin: 0 auto; }
.feature .ph::after { content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 -70px 60px -46px rgba(58,18,48,.4); }
.feature h2 { margin-bottom: .35em; }

/* ---------- Glow cálido de vela (acento temático) ---------- */
.section--glow { position: relative; overflow: hidden; }
.section--glow::before { content:""; position:absolute; width:520px; height:520px; right:-170px; top:-150px;
  background: radial-gradient(circle, rgba(231,200,106,.30), rgba(232,80,154,.10) 45%, transparent 70%);
  pointer-events:none; }
.section--glow::after { content:""; position:absolute; width:460px; height:460px; left:-190px; bottom:-170px;
  background: radial-gradient(circle, rgba(169,139,224,.24), transparent 70%); pointer-events:none; }
.section--glow > .container { position: relative; z-index: 1; }

/* vitrina vertical 9:16 */
.vshow { max-width: 300px; margin: 26px auto 0; border-radius: var(--radius); overflow: hidden;
  border: 4px solid #fff; box-shadow: var(--shadow); position: relative; }
.vshow img { width: 100%; display: block; aspect-ratio: 9/16; object-fit: cover; }
.vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
@media (min-width: 640px){ .vgrid { grid-template-columns: repeat(3, 1fr); } }
.vgrid .vshow { margin: 0; max-width: none; }

/* ---------- Oferta ---------- */
.offer {
  background: #fff; border: 0; border-radius: 26px;
  box-shadow: var(--shadow); padding: 32px 26px; text-align: center;
  max-width: 580px; margin: 0 auto; position: relative;
  outline: 2px solid var(--rose); outline-offset: -2px;
}
.offer .ribbon { display:inline-block; background: var(--grad); color:#fff; font-weight:700; padding:7px 18px; border-radius:999px; font-size:.8rem; letter-spacing:.04em; margin-bottom: 14px; box-shadow:0 6px 16px rgba(200,70,140,.34); }
.offer .incluye { text-align:left; margin: 20px auto; max-width: 430px; }
.offer .price { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); margin: 10px 0 18px; }

/* ---------- Testimonios ---------- */
.tcard { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding:18px; box-shadow: var(--shadow-sm); }
.tcard .stars { color: var(--gold); letter-spacing:2px; }
.tcard .who { font-weight:600; color: var(--ink); font-size:.9rem; margin-top:8px; }
.tgallery{ column-count:2; column-gap:12px; margin-top: 4px; }
@media (min-width:760px){ .tgallery{ column-count:3; } }
.tgallery img{ width:100%; margin:0 0 12px; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-sm); break-inside:avoid; display:inline-block; }

/* ---------- FAQ ---------- */
.faq details { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 20px; margin-bottom:10px; box-shadow: var(--shadow-sm); }
.faq summary { cursor:pointer; font-weight:600; padding:13px 0; list-style:none; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--pink); font-weight:700; font-size:1.2rem; }
.faq details[open] summary::after { content:"–"; }
.faq p { margin: 0 0 14px; }

/* ---------- Barra CTA fija (móvil) ---------- */
.sticky-cta {
  position: fixed; left:0; right:0; bottom:0; z-index:50;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(150,55,120,.10);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px; transform: translateY(120%); transition: transform .25s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex:1; padding:13px 16px; font-size:.98rem; }
@media (min-width: 760px){ .sticky-cta{ display:none; } }

/* ---------- Footer ---------- */
.footer { background: #2f2434; color:#e9ddec; padding: 38px 0; font-size:.86rem; }
.footer a { color:#f3b6da; }
.footer .disc { color:#b8a9bf; font-size:.78rem; margin-top:14px; line-height:1.5; }
.footer .brand { font-family: var(--serif); font-size:1.3rem; color:#fff; }

/* ---------- Sección del curso (imagen real) ---------- */
.curso-in { display:grid; grid-template-columns: .9fr 1.1fr; gap:40px; align-items:center; }
.curso-img { display:block; border-radius:24px; overflow:hidden; box-shadow: var(--shadow); border:4px solid #fff; transition:.2s; }
.curso-img:hover { transform: translateY(-4px); }
.curso-img img { display:block; width:100%; height:auto; }
.curso-list { list-style:none; display:grid; gap:10px; margin:16px 0 24px; padding:0; }
.curso-list li { position:relative; padding-left:30px; }
.curso-list li::before { content:"¹3"; position:absolute; left:0; top:0; width:20px; height:20px;
  border-radius:50%; background:var(--grad-cta,#e8509a); color:#fff; font-size:.7rem; font-weight:800;
  display:grid; place-items:center; }
@media (max-width: 820px) {
  .curso-in { grid-template-columns:1fr; text-align:center; gap:24px; }
  .curso-img { order:-1; max-width:340px; margin:0 auto; }
  .curso-list { text-align:left; max-width:380px; margin-inline:auto; }
}

/* ---------- Alumnas: testimonios del grupo, sus velas y el apoyo ---------- */
.tcab{text-align:center;max-width:58ch;margin:0 auto 1.5rem}
.tcab p{color:var(--muted,#7a6a70)}
.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.tgrid img{width:100%;border-radius:14px;border:1px solid rgba(0,0,0,.07);
  box-shadow:0 10px 26px rgba(120,40,70,.12)}
.ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.ogrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.apoyo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem}
.apoyo>div{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:18px;
  padding:1.2rem;text-align:center;box-shadow:0 10px 26px rgba(120,40,70,.08)}
.apoyo img{width:100%;max-width:190px;margin:0 auto .8rem;border-radius:12px;
  aspect-ratio:1;object-fit:cover}
.apoyo h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.apoyo p{margin:0;font-size:.92rem;color:var(--muted,#7a6a70)}
.apoyo-ico{font-size:3.2rem;line-height:1;display:block;margin:.6rem 0 1rem}
@media(max-width:860px){
  .tgrid{grid-template-columns:repeat(3,1fr)}
  .ogrid{grid-template-columns:repeat(3,1fr)}
  .apoyo{grid-template-columns:1fr}
}
@media(max-width:560px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .ogrid{grid-template-columns:repeat(2,1fr)}
}