/* 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; } }
/* El fondo imita la mesa oscura de las fotos reales del cliente: negro cálido con
   una luz superior que enciende el oro, y un suelo con reflejo bajo la pieza. */
.mn-stage{ position:relative; aspect-ratio:1/1; border-radius:3px;
  background:
    radial-gradient(75% 55% at 50% 12%, rgba(197,164,101,.13), transparent 72%),
    radial-gradient(120% 100% at 50% 34%, #14100c 0%, #0b0906 58%, #060504 100%);
  border:1px solid rgba(197,164,101,.16); overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
/* Suelo: la pieza se apoya en algo, no flota en el vacío */
.mn-stage::before{ content:''; position:absolute; left:8%; right:8%; bottom:6%; height:24%;
  pointer-events:none; border-radius:50%;
  background:radial-gradient(60% 100% at 50% 0%, rgba(197,164,101,.11), transparent 70%);
  filter:blur(10px); }
/* Viñeta: cierra los bordes y concentra la mirada en la manilla */
.mn-stage::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(78% 78% at 50% 44%, transparent 52%, rgba(0,0,0,.55) 100%); }
#mn-svg{ width:90%; height:auto; position:relative; z-index:1; }

.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 ----------
   auto-fit: 6 columnas en la columna de pasos de escritorio y 3 en movil,
   sin media queries que haya que mantener a mano al anadir tamanos. */
.mn-sizes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:.55rem; }
.mn-size{ background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:3px; padding:.8rem .35rem .65rem;
  color:var(--ivory-soft); font-family:var(--sans); text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  min-height:112px; 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 .5rem; border-radius:50%; flex-shrink:0;
  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; }
/* El precio por unidad: es dato real y es lo primero que mira el comprador */
.mn-size .sub{ display:block; font-size:.72rem; color:var(--ivory-soft); margin-top:.2rem;
  font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.mn-size[aria-pressed="true"] .sub{ color:var(--gold-bright); }
.mn-size .tag{ display:block; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-top:.3rem; line-height:1.25; }
.mn-size[aria-pressed="true"] .tag{ 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; }

/* ---------- Vias del centro (sin centro / oro / esmeralda) ---------- */
.mn-vias{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
@media (max-width:560px){ .mn-vias{ grid-template-columns:1fr; } }
.mn-via{ text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:3px;
  background:transparent; padding:.9rem 1rem; color:var(--ivory-soft);
  font-family:var(--sans); transition:border-color .25s, background .25s, transform .25s; }
.mn-via:hover{ border-color:rgba(197,164,101,.45); transform:translateY(-2px); }
.mn-via[aria-pressed="true"]{ border-color:var(--gold);
  background:linear-gradient(180deg, rgba(197,164,101,.14), rgba(197,164,101,.04)); }
.mn-via .cname{ display:block; font-size:.92rem; color:var(--ivory); font-weight:500;
  margin-bottom:.2rem; }
.mn-via .cdesc{ display:block; font-size:.74rem; color:var(--muted); line-height:1.5; }

/* ---------- Galeria de centros: se elige por FOTO, no por nombre ---------- */
.mn-galeria{ margin-top:1.2rem; }
.mn-galeria-lab{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .75rem; font-weight:600; }
.mn-galeria .mn-centers{ grid-template-columns:repeat(4,1fr); gap:.6rem; }
@media (max-width:640px){ .mn-galeria .mn-centers{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:400px){ .mn-galeria .mn-centers{ grid-template-columns:repeat(2,1fr); } }
.mn-centro{ cursor:pointer; border:1px solid var(--line); border-radius:3px;
  background:transparent; padding:.55rem .5rem .7rem; color:var(--ivory-soft);
  font-family:var(--sans); text-align:center;
  transition:border-color .25s, background .25s, transform .25s; }
.mn-centro:hover{ border-color:rgba(197,164,101,.45); transform:translateY(-2px); }
.mn-centro[aria-pressed="true"]{ border-color:var(--gold);
  background:linear-gradient(180deg, rgba(197,164,101,.14), rgba(197,164,101,.04)); }
/* 🔴 GOTCHA DE SAFARI (medido en WebKit real el 2026-08-02, reportado por el cliente
   desde su iPhone: "se distorsiona bastante cuando se selecciona el centro en oro").

   El patron `aspect-ratio` en el contenedor + `height:100%` en la imagen de dentro
   crea una dependencia circular: el alto del hijo se resuelve contra el alto del
   padre, y el alto del padre sale de aspect-ratio, que depende de su ancho.
   Chromium la corta bien; WebKit NO. Medido a 390px de ancho:
       Chrome : .thumb 169x169  ·  img 149x149  ·  deformacion 0
       Safari : .thumb 169x188  ·  img 149x169  ·  deformacion 0,116
   La pista es que en Safari el `height` calculado de la img era 168,6px, o sea
   EL ANCHO DE LA COLUMNA: resolvia el 100% contra la medida equivocada y luego
   estiraba la caja. Resultado: medallas ovaladas y la rejilla descuadrada.

   La solucion es no pedirle al hijo un porcentaje del alto del padre: se posiciona
   en absoluto contra la caja ya resuelta. Funciona igual en los dos motores. */
.mn-centro .thumb{ position:relative; display:block; aspect-ratio:1; margin-bottom:.45rem; }
.mn-centro .thumb img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; }
.mn-centro .cname{ display:block; font-size:.76rem; color:var(--ivory); line-height:1.35; }
.mn-centro .cprice{ display:block; font-size:.66rem; color:var(--muted); margin-top:.18rem; }

/* ---------- Punteras ---------- */
.mn-punt .lab{ font-size:.95rem; }

/* ---------- 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-line[hidden]{ display:none; }
/* El unico numero real que ya tenemos confirmado: se destaca en dorado */
#mn-r-oro-row dd{ color:var(--gold-bright); }
.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-via, .mn-centro, .mn-cta{ transition:none; }
  .mn-size:hover, .mn-center:hover, .mn-via:hover, .mn-centro:hover, .mn-cta:hover{ transform:none; }
}

/* OJO: esta hoja la cargan DOS paginas (arma-tu-manilla y como-comprar). Toda
   regla sin acotar afecta a las dos. */

/* 2026-08-02: en movil la pildora de leads tapaba el copy del configurador
   ("Mas balines... mas liviana en precio"). Se mantiene para ambas paginas. */
@media (max-width: 620px) { .lead-trigger { display: none !important; } }

/* 2026-08-02: en ESCRITORIO la pildora (position:fixed abajo a la derecha) cae
   justo encima del resumen del configurador y tapaba la fila "Centro". Como esta
   pagina ya tiene su propio CTA ("Pedir la mia por WhatsApp"), la pildora sobra
   a cualquier ancho — pero solo aqui, no en como-comprar. */
.page-manilla .lead-trigger { display: none !important; }

/* 🔴 GOTCHA DE SAFARI Nº2 — la rejilla de centros no encogia al volver de horizontal
   (medido en WebKit el 2026-08-02, confirmado por el verificador contra produccion).

   Reproduccion: /arma-tu-manilla en iPhone, elegir "Centro en oro", girar a
   horizontal y volver a vertical. Medido a 390px:
     vertical  -> columnas 168,61px x2   (bien)
     horizontal-> columnas 346,17px x2   (bien)
     VUELTA    -> columnas 346,17px x2   con el contenedor ya en 352px
                  => scrollWidth 726 contra una pantalla de 390
   Todo lo demas SI recalculaba (wrap 390, estudio 352, la propia galeria 352):
   se quedaban clavadas solo las PISTAS del grid.

   Causa: `1fr` es en realidad `minmax(auto, 1fr)`, y ese `auto` no deja que la
   pista baje del min-content de su contenido. WebKit conserva el min-content
   calculado en horizontal y ya no lo recalcula al encoger. Con `minmax(0,1fr)`
   la pista puede volver a bajar, y `min-width:0` en el item impide que su
   contenido vuelva a inflar la columna. Es el par canonico para grid e flex. */
.mn-galeria .mn-centers{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:640px){ .mn-galeria .mn-centers{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:400px){ .mn-galeria .mn-centers{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mn-centers{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:480px){ .mn-centers{ grid-template-columns:minmax(0,1fr); } }
.mn-centro, .mn-center{ min-width:0; }
.mn-centro .cname, .mn-centro .cprice{ overflow-wrap:anywhere; }

/* ---- Fondo fotográfico del hero de /como-comprar (2026-08-06) --------------------
   Dos bodegones del empaque real que rotan cada 2 s: la caja y la tarjeta sobre el
   tablero con Boston lloviendo detrás, y el estuche abierto con la cadena sobre mármol.
   Dicen "esto es lo que llega", que es justo lo que la página tiene que responder.

   Va con MODIFICADOR porque .mn-hero lo comparte /arma-tu-manilla, que no lo lleva.

   El velo es VERTICAL y parejo, no lateral como el de /coleccion: aquí el texto va
   centrado (.mn-hero es text-align:center), así que oscurecer un lado dejaría media
   frase sobre la foto y media sobre negro. El mecanismo (.hero-fondo, .es-visible)
   es el mismo de /coleccion y vive en styles.css. */
.mn-hero--fondo {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line, rgba(197,164,101,0.18));
}

.mn-hero--fondo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.74) 52%,
    rgba(10, 10, 10, 0.92) 100%);
}

.mn-hero--fondo .mn-wrap { position: relative; z-index: 2; }

/* Las dos fotos llevan el producto a la IZQUIERDA y aire arriba. Bajando el encuadre
   entra más ambiente detrás del texto y el producto no queda pisado por el titular. */
.mn-hero--fondo .hero-fondo img {
  object-position: center 62%;
  /* El fundido por defecto son 1,6 s, pensados para el intervalo de 6,5 s de
     /coleccion. Aquí el cliente pidió 2 s: con 1,6 s de fundido la foto solo estaría
     quieta 0,4 s y se leería como un parpadeo continuo. Con 0,9 s queda ~1,1 s asentada. */
  transition-duration: 0.9s;
}

/* Con foto detrás el hero necesita algo más de alto para que respire. */
@media (min-width: 901px) {
  .mn-hero--fondo { padding-bottom: clamp(4rem, 9vh, 6rem); }
}