/* ==========================================================
   cursodebisuteria.com — taller luminoso: blanco roto, vino,
   fucsia y oro. A proposito distinta de las demas webs.
   ========================================================== */
:root{
  --papel:#fff8fb;
  --papel2:#ffffff;
  --papel3:#fdeef5;
  --tinta:#2a1020;
  --tinta2:#6b4457;
  --vino:#98164a;
  --fucsia:#e0207e;
  --fucsia2:#ff4fa3;
  --oro:#c9a227;
  --oro2:#f0cf5a;
  --verde:#128a5b;
  --borde:#f3d7e4;
  --sombra:0 16px 40px rgba(152,22,74,.13);
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:16px/1.64 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.14;margin:0 0 .5em;letter-spacing:-.018em}
h1{font-size:clamp(1.85rem,5.4vw,3.15rem);font-weight:900}
h2{font-size:clamp(1.5rem,3.9vw,2.35rem);font-weight:900}
h3{font-size:1.1rem;font-weight:800}
p{margin:0 0 1em}
.wrap{width:min(1140px,92vw);margin-inline:auto}
section{padding:62px 0;position:relative}
.eyebrow{
  display:inline-block;font-size:.74rem;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fucsia);margin-bottom:.7em;
}
.lead{font-size:clamp(1rem,2.1vw,1.15rem);color:var(--tinta2);max-width:56ch}
.center{text-align:center}
.center .lead{margin-inline:auto}
.oscuro{background:linear-gradient(160deg,#3a0f27,#5c1338);color:#ffeaf3}
.oscuro .lead{color:#f3c9dc}
.oscuro .eyebrow{color:var(--oro2)}
.rosa{background:var(--papel3)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:13px 24px;border-radius:999px;font-weight:900;cursor:pointer;
  border:2px solid transparent;transition:transform .18s,box-shadow .18s,background .18s;
  text-align:center;line-height:1.2;
}
.btn-rosa{background:linear-gradient(180deg,var(--fucsia2),var(--fucsia));color:#fff;
  box-shadow:0 12px 28px rgba(224,32,126,.32)}
.btn-rosa:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(224,32,126,.44)}
.btn-oro{background:linear-gradient(180deg,var(--oro2),var(--oro));color:#3a2c00;
  box-shadow:0 12px 28px rgba(201,162,39,.32)}
.btn-oro:hover{transform:translateY(-2px)}
.btn-linea{border-color:var(--borde);color:var(--vino);background:#fff}
.btn-linea:hover{background:var(--papel3)}
.oscuro .btn-linea{border-color:rgba(255,255,255,.28);color:#ffeaf3;background:rgba(255,255,255,.07)}
.btn-lg{padding:16px 30px;font-size:1.06rem}
.btn-sm{padding:9px 17px;font-size:.9rem}
.btn-attn{animation:latido 2.6s ease-in-out infinite}
@keyframes latido{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.btn-attn{animation:none}}

/* ---------- barra fija ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:14px;
  align-items:center;justify-content:center;flex-wrap:wrap;
  padding:11px 16px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--borde);transform:translateY(105%);transition:transform .3s;
  box-shadow:0 -8px 28px rgba(152,22,74,.1);
}
.sticky-cta.is-visible{transform:none}
.sticky-cta span{font-weight:700;font-size:.93rem;color:var(--tinta2)}
.sticky-cta b{color:var(--vino)}

/* ---------- cabecera ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,248,251,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0}
.brand{font-weight:900;letter-spacing:.03em;font-size:1.02rem;display:flex;align-items:center;gap:.42em;
  color:var(--vino)}
.brand span{color:var(--fucsia)}

/* ---------- hero ---------- */
.hero{
  padding:42px 0 54px;
  background:
    radial-gradient(820px 440px at 8% -12%,rgba(224,32,126,.14),transparent 62%),
    radial-gradient(700px 420px at 96% 4%,rgba(201,162,39,.18),transparent 60%),
    var(--papel);
}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center}
.tagline{
  display:inline-flex;align-items:center;gap:.5em;background:#fff;
  border:1px solid var(--borde);color:var(--vino);
  padding:6px 14px;border-radius:999px;font-weight:800;font-size:.83rem;margin-bottom:.85em;
  box-shadow:0 6px 18px rgba(152,22,74,.08);
}
.hero h1 em{color:var(--fucsia);font-style:normal}
.cta-row{display:flex;gap:11px;flex-wrap:wrap;margin:20px 0 14px}
.trust{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;color:var(--tinta2);font-weight:700}
.hero-art{position:relative}
.hero-tag{
  position:absolute;right:-4px;bottom:-12px;background:var(--vino);color:#fff;
  font-weight:900;font-size:.82rem;padding:8px 15px;border-radius:999px;box-shadow:var(--sombra);
}

/* imagen clicable con su cartelito */
.img-cta{position:relative;display:inline-block;cursor:pointer;line-height:0;
  transition:transform .28s ease}
.img-cta:hover{transform:translateY(-3px)}
.img-cta-tip{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--fucsia2),var(--fucsia));color:#fff;
  font-weight:800;font-size:.82rem;padding:9px 16px;border-radius:999px;opacity:0;
  transition:opacity .28s,transform .28s;white-space:nowrap;box-shadow:var(--sombra);
}
.img-cta:hover .img-cta-tip{opacity:1;transform:translateX(-50%) translateY(-4px)}
@media(hover:none){
  .img-cta-tip{opacity:1;animation:tipLatido 2.4s ease-in-out infinite}
  @keyframes tipLatido{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-5px)}}
}

/* ---------- franja de prueba social ---------- */
.franja{background:var(--vino);color:#fff;padding:18px 0}
.franja-in{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center}
.franja b{display:block;font-size:1.32rem;color:var(--oro2);line-height:1.1}
.franja small{color:#f6d3e2;font-size:.82rem;font-weight:600}

/* ---------- rejillas y fichas ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--papel2);border:1px solid var(--borde);border-radius:var(--r);
  padding:22px;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 18px rgba(152,22,74,.05);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.card .ico{font-size:1.7rem;line-height:1;margin-bottom:.4em;display:block}
.card p{margin:0;color:var(--tinta2);font-size:.95rem}
.oscuro .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#ffeaf3}
.oscuro .card p{color:#f3c9dc}

/* ---------- galeria de piezas ---------- */
.piezas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pieza{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--borde);
  box-shadow:0 6px 18px rgba(152,22,74,.07)}
.pieza img{aspect-ratio:1;object-fit:cover;width:100%}
.pieza figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 12px 10px;
  background:linear-gradient(transparent,rgba(42,16,32,.82));
  color:#fff;font-weight:800;font-size:.86rem;
}
.pieza b{display:block;color:var(--oro2);font-size:.76rem;font-weight:900;letter-spacing:.05em}

/* ---------- calculadora de ganancias ---------- */
.calc-caja{
  max-width:760px;margin-inline:auto;background:#fff;border:2px solid var(--borde);
  border-radius:24px;padding:28px;box-shadow:var(--sombra);
  /* OJO: este recuadro es BLANCO pero vive dentro de una seccion oscura, que
     pinta el texto de rosa claro. Si no se reponen los colores aqui, las
     etiquetas de las barras se leen apenas. */
  color:var(--tinta);
}
.calc-fila label{color:var(--tinta)}
.tecnicas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.tec{
  padding:9px 16px;border-radius:999px;border:1.5px solid var(--borde);background:#fff;
  font-weight:800;font-size:.88rem;cursor:pointer;color:var(--tinta2);transition:.18s;
}
.tec:hover{border-color:var(--fucsia)}
.tec.on{background:var(--fucsia);border-color:var(--fucsia);color:#fff}
.calc-fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.calc-fila label{font-weight:800;font-size:.95rem;flex:1 1 210px}
.calc-val{font-weight:900;color:var(--fucsia);font-size:1.2rem;min-width:4.2em;text-align:right}

/* Las barras de serie casi no se ven: aqui llevan carril con borde de color
   y un tirador grande, que ademas se agarra mejor con el dedo. */
.calc-caja input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:2 1 250px;height:34px;background:transparent;cursor:pointer;margin:0;
}
.calc-caja input[type=range]:focus{outline:none}
.calc-caja input[type=range]::-webkit-slider-runnable-track{
  height:14px;border-radius:999px;border:2px solid var(--vino);
  background:linear-gradient(90deg,#ffd9ec,var(--fucsia2));
}
.calc-caja input[type=range]::-moz-range-track{
  height:14px;border-radius:999px;border:2px solid var(--vino);
  background:linear-gradient(90deg,#ffd9ec,var(--fucsia2));
}
.calc-caja input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border-radius:50%;
  background:#fff;border:4px solid var(--fucsia);
  box-shadow:0 3px 12px rgba(152,22,74,.45);transition:transform .15s;
}
.calc-caja input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid var(--fucsia);
  box-shadow:0 3px 12px rgba(152,22,74,.45);
}
.calc-caja input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.calc-caja input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(224,32,126,.3)}

/* Selector de moneda */
.moneda{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;margin-bottom:20px;font-weight:800;font-size:.92rem;color:var(--tinta2)}
.moneda select{
  font:inherit;font-weight:800;color:var(--vino);background:#fff;
  border:2px solid var(--fucsia);border-radius:999px;padding:8px 14px;cursor:pointer;
}
.moneda select:focus{outline:2px solid var(--fucsia2);outline-offset:2px}
.calc-res{background:linear-gradient(160deg,#fdeef5,#fff);border:1px solid var(--borde);
  border-radius:18px;padding:20px;text-align:center;margin-top:6px}
.calc-res b{display:block;font-size:clamp(2rem,7vw,2.8rem);color:var(--verde);line-height:1.1}
.calc-res small{color:var(--tinta2);font-size:.86rem;font-weight:600}
.calc-nota{margin:14px 0 0;font-size:.86rem;color:var(--tinta2);text-align:center}
.calc-nota b{color:var(--vino)}
.aviso{font-size:.78rem;color:var(--tinta2);opacity:.8;text-align:center;margin-top:10px}

/* ---------- temario ---------- */
/* align-items:start es lo que impide que al abrir un modulo de la izquierda se
   estire el de la derecha y parezca abierto pero vacio. */
.modulos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
.modulo{background:#fff;border:1px solid var(--borde);border-radius:16px;overflow:hidden}
.modulo summary{
  cursor:pointer;list-style:none;padding:15px 18px;font-weight:800;display:flex;
  align-items:center;gap:.7em;
}
.modulo summary::-webkit-details-marker{display:none}
.modulo summary::after{content:"+";margin-left:auto;color:var(--fucsia);font-size:1.35rem;font-weight:900}
.modulo[open] summary::after{content:"–"}
.modulo .num{
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--papel3);
  color:var(--vino);display:grid;place-items:center;font-size:.85rem;font-weight:900;
}
.modulo ul{margin:0;padding:0 20px 16px 62px;list-style:none}
.modulo li{font-size:.92rem;color:var(--tinta2);padding:4px 0;border-bottom:1px dotted var(--borde)}
.modulo li:last-child{border:0}

/* ---------- video ---------- */
.videobox{position:relative;max-width:920px;margin-inline:auto;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--borde);background:#000}
.videobox video{width:100%;display:block}
.playbtn{
  position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(42,16,32,.34);transition:opacity .25s;border:0;width:100%;
}
.playbtn span{
  width:74px;height:74px;border-radius:50%;background:var(--fucsia);color:#fff;
  display:grid;place-items:center;font-size:1.7rem;box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.playbtn.oculto{opacity:0;pointer-events:none}

/* ---------- testimonios ---------- */
.wa{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wa img{border-radius:16px;border:1px solid var(--borde);box-shadow:var(--sombra)}

/* ---------- precio ---------- */
.caja-precio{
  max-width:660px;margin-inline:auto;text-align:center;background:#fff;
  border:3px solid var(--oro);border-radius:26px;padding:34px 26px;box-shadow:var(--sombra);
}
.antes{color:var(--tinta2);text-decoration:line-through;font-size:1.1rem;font-weight:700}
.ahora{font-size:clamp(2.7rem,9vw,4rem);font-weight:900;color:var(--vino);line-height:1;margin:.06em 0}
.ahora sup{font-size:.42em;vertical-align:super;margin-right:.08em}
.incluye-lista{list-style:none;margin:20px 0;padding:0;text-align:left;
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px}
.incluye-lista li{font-size:.94rem;display:flex;gap:.5em;align-items:baseline}
.incluye-lista li::before{content:"✔";color:var(--verde);font-weight:900}
.sello{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:20px;
  flex-wrap:wrap;color:var(--tinta2);font-size:.87rem;text-align:left}
.sello img{width:78px}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid var(--borde);border-radius:14px;
  padding:15px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:800;list-style:none;display:flex;
  justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--fucsia);font-size:1.4rem;font-weight:900;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.8em 0 0;color:var(--tinta2);font-size:.95rem}

/* ---------- pie ---------- */
footer{background:#fff;border-top:1px solid var(--borde);padding:34px 0 92px;
  color:var(--tinta2);font-size:.85rem}
footer a{color:var(--vino)}
.legal{margin-top:12px;font-size:.78rem;opacity:.78;max-width:74ch}

/* ---------- variantes de landing (?v=b, ?v=c) ---------- */
[data-vonly]{display:none}
html[data-v="b"] [data-vonly~="b"],
html[data-v="c"] [data-vonly~="c"]{display:block}

/* ---------- movil ---------- */
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:22px}
  .hero-art{order:-1}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .piezas{grid-template-columns:repeat(3,1fr)}
  .modulos{grid-template-columns:1fr}
  .wa{grid-template-columns:1fr}
}
@media(max-width:640px){
  section{padding:44px 0}
  .hero{padding:22px 0 38px}
  .hero-art{display:flex;flex-direction:column;align-items:center;gap:10px}
  .hero-art img{max-width:min(350px,86vw)}
  /* En movil el cartelito se salia encima del pack y tapaba los modulos:
     aqui deja de flotar y se pone debajo, en su propia linea. */
  .hero-tag{position:static;transform:none;font-size:.78rem;align-self:center}
  .cta-row{margin:16px 0 12px;gap:9px}
  .btn-lg{padding:14px 22px;font-size:1rem;width:100%}
  .trust{gap:10px;font-size:.8rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .incluye-lista{grid-template-columns:1fr}
  .calc-caja{padding:20px 16px}
  .sticky-cta span{display:none}
  .sticky-cta{padding:9px 12px}
  .sticky-cta .btn{width:100%}
  .playbtn span{width:60px;height:60px;font-size:1.4rem}

  /* Las piezas: el rotulo encima de la foto no cabia y se comia el nombre de
     la tecnica. En movil el texto baja debajo de la foto y se lee entero. */
  .piezas{grid-template-columns:repeat(2,1fr);gap:12px}
  .pieza{background:#fff}
  .pieza figcaption{
    position:static;background:none;color:var(--tinta);
    padding:9px 10px 12px;font-size:.8rem;line-height:1.35;
  }
  .pieza b{color:var(--vino);font-size:.86rem;margin-bottom:.15em}

  /* Los pantallazos de WhatsApp ocupaban una pantalla entera cada uno.
     Ahora van en una tira que se desliza con el dedo. */
  .wa{
    display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;padding-bottom:8px;
  }
  .wa img{flex:0 0 min(250px,68vw);scroll-snap-align:center}
}