/* Configurador de manillas — OROVERDE · 2026-08-01
   Usa las variables de css/styles.css (--emerald, --gold, --ivory, --serif, --sans) */

.mn-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem); }

/* ---------- Hero ---------- */
.mn-hero{ padding:clamp(7rem,14vh,10rem) 0 clamp(2.5rem,6vh,4rem); text-align:center; }
.mn-hero .eyebrow{ font-family:var(--sans); font-size:.7rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; }
.mn-hero h1{ font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,6.2vw,4.4rem); line-height:1.06; color:var(--ivory); margin-bottom:1.2rem; }
.mn-hero h1 em{ font-style:italic; color:var(--gold-bright); }
.mn-hero p{ max-width:52ch; margin:0 auto; color:var(--ivory-soft); font-size:1.02rem; line-height:1.7; }

/* ---------- Layout ---------- */
.mn-studio{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start; padding-bottom:clamp(4rem,10vh,7rem); }
@media (max-width:900px){ .mn-studio{ grid-template-columns:1fr; gap:2.5rem; } }

/* ---------- Vista previa ---------- */
.mn-preview{ position:sticky; top:6rem; }
@media (max-width:900px){ .mn-preview{ position:static; } }
.mn-stage{ position:relative; aspect-ratio:1/1; border-radius:3px;
  background:radial-gradient(120% 100% at 50% 30%, #16211b 0%, #0c110e 55%, #070a08 100%);
  border:1px solid rgba(197,164,101,.16); overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.mn-stage::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 50% 18%, rgba(197,164,101,.10), transparent 70%); }
#mn-svg{ width:88%; height:auto; }

.mn-caption{ margin-top:1rem; text-align:center; font-size:.82rem; color:var(--muted);
  letter-spacing:.04em; }
.mn-caption strong{ color:var(--ivory-soft); font-weight:500; }

/* ---------- Pasos ---------- */
.mn-step{ border-top:1px solid var(--line); padding:1.8rem 0; }
.mn-step:first-of-type{ border-top:0; padding-top:0; }
.mn-step-head{ display:flex; align-items:baseline; gap:.85rem; margin-bottom:.4rem; }
.mn-step-n{ font-family:var(--serif); font-size:1.5rem; color:var(--gold); line-height:1;
  min-width:1.4rem; }
.mn-step h2{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--ivory); }
.mn-step .hint{ font-size:.86rem; color:var(--muted); margin:0 0 1.1rem 2.25rem; line-height:1.6; }
@media (max-width:600px){ .mn-step .hint{ margin-left:0; } }

/* ---------- Selector de balín ---------- */
.mn-sizes{ display:flex; gap:.6rem; flex-wrap:wrap; }
.mn-size{ flex:1 1 0; min-width:64px; background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:3px; padding:.85rem .4rem .7rem;
  color:var(--ivory-soft); font-family:var(--sans); text-align:center;
  transition:border-color .25s, background .25s, transform .25s; }
.mn-size:hover{ border-color:rgba(197,164,101,.45); transform:translateY(-2px); }
.mn-size[aria-pressed="true"]{ border-color:var(--gold);
  background:linear-gradient(180deg, rgba(197,164,101,.14), rgba(197,164,101,.04)); }
.mn-size .dot{ display:block; margin:0 auto .55rem; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #f5e2ad, #c9a24a 55%, #8c6f3d 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.5); }
.mn-size .lab{ display:block; font-size:.95rem; font-weight:500; color:var(--ivory);
  font-variant-numeric:lining-nums tabular-nums; }
.mn-size .sub{ display:block; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-top:.15rem; }
.mn-size[aria-pressed="true"] .sub{ color:var(--gold); }

/* ---------- Cantidad ---------- */
.mn-qty{ display:flex; align-items:center; gap:1.2rem; }
.mn-qty button{ width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ivory);
  font-size:1.3rem; line-height:1; transition:border-color .25s, background .25s; }
.mn-qty button:hover:not(:disabled){ border-color:var(--gold); background:rgba(197,164,101,.1); }
.mn-qty button:disabled{ opacity:.3; cursor:not-allowed; }
.mn-qty output{ font-family:var(--serif); font-size:2.4rem; color:var(--ivory);
  min-width:3ch; text-align:center; font-variant-numeric:lining-nums tabular-nums; }
.mn-qty .qlab{ font-size:.82rem; color:var(--muted); }
.mn-range{ width:100%; margin-top:1.1rem; accent-color:#c5a465; }

/* ---------- Centro ---------- */
.mn-centers{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:480px){ .mn-centers{ grid-template-columns:1fr; } }
.mn-center{ text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:3px;
  background:transparent; padding:.95rem 1rem; color:var(--ivory-soft);
  font-family:var(--sans); transition:border-color .25s, background .25s, transform .25s; }
.mn-center:hover{ border-color:rgba(197,164,101,.45); transform:translateY(-2px); }
.mn-center[aria-pressed="true"]{ border-color:var(--gold);
  background:linear-gradient(180deg, rgba(197,164,101,.14), rgba(197,164,101,.04)); }
.mn-center .cname{ display:block; font-size:.95rem; color:var(--ivory); font-weight:500;
  margin-bottom:.2rem; }
.mn-center .cdesc{ display:block; font-size:.76rem; color:var(--muted); line-height:1.5; }
.mn-center .badge{ display:inline-block; font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); border:1px solid rgba(197,164,101,.4);
  border-radius:2px; padding:.1rem .35rem; margin-left:.4rem; vertical-align:middle; }

/* ---------- Resumen ---------- */
.mn-summary{ margin-top:2rem; border:1px solid var(--line); border-radius:3px;
  background:rgba(15,81,50,.14); padding:1.5rem 1.6rem; }
.mn-summary h3{ font-family:var(--sans); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1rem; font-weight:600; }
.mn-line{ display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid rgba(197,164,101,.1); font-size:.9rem; }
.mn-line:last-of-type{ border-bottom:0; }
.mn-line dt{ color:var(--muted); }
.mn-line dd{ color:var(--ivory); text-align:right;
  font-variant-numeric:lining-nums tabular-nums; }
.mn-total{ display:flex; justify-content:space-between; align-items:baseline;
  margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(197,164,101,.3); }
.mn-total .tl{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.mn-total .tv{ font-family:var(--serif); font-size:1.9rem; color:var(--gold-bright);
  font-variant-numeric:lining-nums tabular-nums; }
.mn-total .tv.consulta{ font-size:1.05rem; font-family:var(--sans); color:var(--ivory-soft); }

.mn-cta{ display:block; width:100%; margin-top:1.4rem; text-align:center;
  padding:1.05rem 1.5rem; border-radius:3px; border:1px solid var(--gold);
  background:linear-gradient(180deg, rgba(197,164,101,.2), rgba(197,164,101,.07));
  color:var(--ivory); font-family:var(--sans); font-size:.88rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transition:background .3s, transform .3s; }
.mn-cta:hover{ background:linear-gradient(180deg, rgba(197,164,101,.34), rgba(197,164,101,.14));
  transform:translateY(-2px); }
.mn-note{ margin-top:.9rem; font-size:.76rem; color:var(--muted); line-height:1.6; text-align:center; }

/* ---------- Confianza ---------- */
.mn-trust{ border-top:1px solid var(--line); padding:clamp(3rem,7vh,5rem) 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media (max-width:760px){ .mn-trust{ grid-template-columns:1fr; gap:1.6rem; } }
.mn-trust .t{ font-family:var(--serif); font-size:1.15rem; color:var(--gold); margin-bottom:.45rem; }
.mn-trust p{ font-size:.86rem; color:var(--ivory-soft); line-height:1.7; }

@media (prefers-reduced-motion:reduce){
  .mn-size, .mn-center, .mn-cta{ transition:none; }
  .mn-size:hover, .mn-center:hover, .mn-cta:hover{ transform:none; }
}