/* ============================================================================
   Cotizador de mayoreo (/mayoreo#precios). Sólo lo carga mayoreo.html; se apoya en axkan.css (colores, tipografía,
   botones). Maqueta aprobada por Iván el 2026-09-30: el total de protagonista, sólo tinta y rosa, nada de controles a la
   vista, el nombre del producto en contorno detrás de la pieza y la lupa en tinta con aro rosa.
   ============================================================================ */
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cot [hidden], .mas [hidden] { display: none !important; }
/* copia de lo que se va: se queda en su lugar mientras se desvanece (fantasma() en cotizador.js) */
.fantasma, .fantasma * { pointer-events: none !important; transition: none !important; }

/* ---------- la sección: una pantalla completa para cotizar ---------- */
/* fondo y z-index como .seccion: tapa al hero (su foto se mueve con el scroll) */
.cot { position: relative; z-index: 3; min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  isolation: isolate; overflow: clip; background: var(--papel); }
.cot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 44% at 76% 42%, rgba(231, 42, 136, .08), transparent 70%), radial-gradient(40% 40% at 62% 66%, rgba(240, 106, 169, .06), transparent 70%); }
/* arriba deja el alto del menú fijo del sitio (--nav-h): la lupa no queda debajo de él */
.cot__cuerpo { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; padding: calc(var(--nav-h) + clamp(18px, 4vh, 48px)) var(--g) 0;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 56px); align-items: center; min-height: 0; }
.cot__charla { display: grid; gap: clamp(20px, 3.2vh, 34px); align-content: center; min-width: 0; }
.cot__charla > * { min-width: 0; }
.cot__cab { display: grid; gap: 14px; margin-bottom: 6px; }
.cot__titulo { margin: 0; font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: .96; letter-spacing: -.045em; font-weight: 750; text-wrap: balance; }
.cot__lead { margin: 0; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.35; color: var(--tinta-2); max-width: 30ch; }
/* ya eligió producto: la pregunta quedó contestada y su frase pasa a ser el titular */
.con-producto .cot__cab { display: none; }

/* ---------- la barra (aro y halo sólo rosa, girando despacio) ---------- */
/* recorta lo de adentro: al cerrarse sobre la lupa, el borde "se traga" el texto y el botón; el aro va por dentro */
.cot-barra { position: relative; display: flex; align-items: center; gap: 10px; height: 70px; padding: 8px 8px 8px 22px; border-radius: 999px; background: #fff;
  box-shadow: 0 18px 50px -22px rgba(231, 42, 136, .45), 0 0 44px -14px rgba(231, 42, 136, .28); animation: halo-cot 6s ease-in-out infinite; overflow: hidden; }
.cot-barra::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--giro), #e72a88, #f06aa9, #fbc3dc, #f06aa9, #e72a88);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: giro-cot 9s linear infinite; opacity: .85; transition: opacity .8s; }
.cot-barra:focus-within::before { opacity: 1; }
.cot-barra svg { width: 22px; height: 22px; color: var(--tinta-3); flex: none; transition: color .8s; }
.cot-barra input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 18px; color: var(--tinta); }
.cot-barra input::-webkit-search-cancel-button { display: none; }
.cot-barra .btn { min-height: 54px; padding-inline: 26px; }
/* al buscar: la barra se cierra sobre la lupa y la lupa viaja arriba a la derecha (sale del flujo; la pieza crece). Al tocarla, se abre.
   La lupa: círculo en tinta con lupa blanca y el aro rosa (Iván, 2026-09-30: "tinta black") */
.con-producto .cot-barra { position: absolute; z-index: 6; top: calc(var(--nav-h) + clamp(18px, 4vh, 48px)); right: var(--g); margin: 0;
  transition: background-color .45s var(--expo), box-shadow .45s var(--expo); }
/* la lupa no se centra: se queda a la izquierda con el margen justo para verse centrada en el círculo (así viaja pegada a la barra) */
.con-producto .cot-barra:not(.abierta) { width: 54px; height: 54px; padding: 0 0 0 16px; cursor: pointer;
  background: var(--tinta); box-shadow: 0 16px 34px -14px rgba(22, 18, 14, .6), 0 0 32px -8px rgba(231, 42, 136, .5); }
.con-producto .cot-barra:not(.abierta) input, .con-producto .cot-barra:not(.abierta) .btn { display: none; }
/* al pasar el mouse crece la lupita y se aviva el aro, no la barra (a la barra la mueve la animación) */
.con-producto .cot-barra:not(.abierta) svg { color: #fff; stroke-width: 2.2; transition: color .8s, transform .8s var(--expo); }
.con-producto .cot-barra:not(.abierta):hover svg { transform: scale(1.12); }
.con-producto .cot-barra:not(.abierta):hover::before { opacity: 1; }
.con-producto .cot-barra.abierta { width: min(440px, calc(100% - 2 * var(--g))); height: 54px; padding: 5px 5px 5px 18px; }
.con-producto .cot-barra.abierta input { font-size: 16px; } .con-producto .cot-barra.abierta .btn { min-height: 44px; padding-inline: 18px; font-size: 15px; }
/* el render crece con el espacio que dejó la barra */
.con-producto .cot__escena { height: min(74vh, 720px); }
@keyframes giro-cot { to { --giro: 360deg; } }
@keyframes halo-cot { 50% { box-shadow: 0 22px 60px -20px rgba(231, 42, 136, .5), 0 0 54px -12px rgba(240, 106, 169, .4); } }
@media (prefers-reduced-motion: reduce) { .cot-barra, .cot-barra::before { animation: none; } }
.cot__aviso { margin: -8px 4px 0; font-size: 15px; color: var(--tinta-2); }

/* ---------- marquesina: las piezas recortadas pasan solas, sin cajas ---------- */
.cot__marquesina { min-width: 0; padding: clamp(10px, 2vh, 22px) 0 clamp(16px, 3vh, 34px); }
.marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marq__pista { display: flex; width: max-content; animation: marq 54s linear infinite; }
.marq:hover .marq__pista, .marq:focus-within .marq__pista { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marq__it { flex: none; display: grid; justify-items: center; gap: 2px; margin-right: clamp(30px, 4.4vw, 76px); padding: 6px 4px; cursor: pointer; text-align: center; }
.marq__it img { width: auto; height: clamp(74px, 11vh, 112px); object-fit: contain; filter: drop-shadow(0 12px 12px rgba(22, 18, 14, .18)); transition: transform .6s var(--expo); }
.marq__it:hover img { transform: translateY(-7px) rotate(-3deg) scale(1.06); }
.marq__it b { margin-top: 8px; font-size: 15px; letter-spacing: -.01em; }
.marq__it small { font-size: 12.5px; color: var(--tinta-3); }
@media (prefers-reduced-motion: reduce) { .marq { overflow-x: auto; } .marq__pista { animation: none; } }

/* ---------- la frase: una etiqueta chica, "100 imanes grandes" (lo rosa se toca) y el TOTAL de protagonista ---------- */
.cot__frase { display: grid; justify-items: start; }
.cot__frase .eyebrow { margin-bottom: 16px; }
.cot__frase p { margin: 0; }
.cot__frase .frase__que { font-size: clamp(1.75rem, 3.1vw, 2.7rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 680; max-width: 18ch; text-wrap: balance; }
.cot__frase .frase__pista { margin-top: 12px; font-size: 13.5px; line-height: 1.4; font-weight: 450; color: var(--tinta-3); }
.cot__frase .frase__total { margin-top: clamp(22px, 3.6vh, 36px); font-size: clamp(4rem, 7.2vw, 7.2rem); line-height: .86; letter-spacing: -.06em; font-weight: 740; white-space: nowrap; }
.cot__frase .frase__total .serif { margin-left: .22em; font-size: .3em; letter-spacing: -.005em; font-weight: 400; font-style: italic; color: var(--rosa); }
.cot__frase .frase__cada { margin-top: 14px; font-size: 15.5px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; color: var(--tinta-2); }
/* las palabras que se tocan: sólo rosa y un subrayado fino */
.tok { display: inline; padding: 0; font: inherit; color: var(--rosa); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .14em;
  text-decoration-color: color-mix(in srgb, var(--rosa) 30%, transparent); transition: text-decoration-color .6s var(--expo), color .6s var(--expo); }
.tok:hover, .tok--abierta { text-decoration-color: var(--rosa); }
.tok--falta { color: var(--tinta-3); text-decoration-color: var(--linea-2); }
/* las opciones se abren entre el título y el total: la pregunta siempre va arriba del precio */
.sels__menu { display: grid; gap: 0; margin: 18px 0 2px; }
.cot__frase .sels__menu .q { margin: 0 0 10px; font-size: 12px; line-height: 1.3; font-weight: 650; letter-spacing: .14em; color: var(--tinta-3); }

/* ---------- preguntas: pastillas finas, sólo texto ---------- */
.q { margin: 0 0 12px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.pastillas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pas { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-2); font-size: 15px; font-weight: 560; cursor: pointer;
  transition: box-shadow .3s, background-color .3s, color .3s; }
.pas small { font-size: 13px; font-weight: 450; color: var(--tinta-3); }
.pas:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
.pas.on { background: var(--tinta); color: #fff; box-shadow: none; } .pas.on small { color: rgba(255, 255, 255, .65); }
.otra { display: inline-flex; align-items: center; height: 40px; padding: 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-2); transition: box-shadow .3s; }
.otra:focus-within { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.otra input { width: 70px; height: 38px; padding: 0 4px; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; font-weight: 560; text-align: center; -moz-appearance: textfield; }
.otra input::-webkit-outer-spin-button, .otra input::-webkit-inner-spin-button { appearance: none; }

/* ---------- la respuesta: el empujón (tinta, la cifra en rosa), el botón y los datos plegados ---------- */
.cot__respuesta { display: grid; justify-items: start; }
.cot__respuesta > * { max-width: 100%; }
.empujon { display: inline-flex; align-items: center; gap: .4em; font-size: 15px; color: var(--tinta-2); cursor: pointer; transition: color .5s var(--expo); }
.empujon b { font-weight: 650; color: var(--rosa); }
.empujon .flecha { width: 15px; height: 15px; color: var(--rosa); transition: transform .5s var(--expo); }
.empujon:hover { color: var(--tinta); } .empujon:hover .flecha { transform: translateX(3px); }
.cot__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; width: 100%; margin-top: clamp(20px, 3vh, 28px); }
.cot__acciones .enlace, .cot__lleva .enlace { color: var(--tinta-2); font-weight: 520; font-size: 15px; text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: .25em; }
.cot__acciones .enlace:hover, .cot__lleva .enlace:hover { color: var(--tinta); text-decoration-color: var(--tinta); }
/* "Más detalles": un renglón entre dos líneas finas, como las preguntas frecuentes; cerrado de entrada */
.detalles { display: grid; width: 100%; margin-top: clamp(28px, 4.4vh, 44px); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.detalles__boton { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 17px 2px; font: inherit; font-size: 15px; font-weight: 600; color: var(--tinta); cursor: pointer; }
.detalles__boton .chev { width: 15px; height: 15px; transition: transform .9s var(--expo); }
.detalles.abierta .detalles__boton .chev { transform: rotate(180deg); }
.datos { margin: 0; color: var(--tinta-2); font-size: clamp(15px, 1.15vw, 16.5px); }
.datos b { color: var(--tinta); font-weight: 620; }
.datos--vinetas { list-style: none; display: inline-grid; gap: 10px; padding: 0 2px 20px; text-align: left; }
.datos--vinetas li { display: flex; align-items: center; gap: 12px; }
.datos--vinetas li i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--tinta-3); opacity: .7; }
.cot__lleva { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tinta-2); }
.cot__lleva b { color: var(--tinta); font-weight: 650; }
.nota__x { width: 26px; height: 26px; border-radius: 50%; font-size: 16px; color: var(--tinta-3); cursor: pointer; } .nota__x:hover { background: var(--papel-2); color: var(--tinta); }

/* ---------- la escena: la pieza en 3D, su medida y su nombre en contorno detrás ---------- */
.cot__escena { position: relative; height: min(62vh, 620px); min-height: 360px; container-type: inline-size; }
.cot__escena canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.cot__escena canvas:active { cursor: grabbing; }
.cot__foto { position: absolute; z-index: 1; left: 22%; top: 12%; width: 56%; height: 70%; object-fit: contain; border-radius: 10px; filter: drop-shadow(0 26px 30px rgba(22, 18, 14, .2)); }
.cot__escena--foto canvas { visibility: hidden; }
.cot__escena.sin-3d canvas, .cot__escena.sin-3d .cot__lineas { display: none; }
.cot__lineas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cot__cota { transition: opacity .6s var(--expo); }
.cot__cota path { stroke: var(--tinta-3); stroke-width: 1; }
.cot__cota text { font: 600 15px var(--sans); fill: var(--tinta-2); letter-spacing: .01em; }
.cot__medidas { position: absolute; z-index: 1; left: 0; right: 0; bottom: 4%; margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--tinta-2); }
/* el nombre del producto detrás de la pieza, en contorno de su color (como .prod-fantasma): siempre ~95 % del ancho del
   escenario, sea "Imán" o "Portallaves" (el tamaño sale del ancho, cqw, entre el largo del nombre, --n) */
.cot__fantasma { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding-bottom: 8%; font-size: min(44cqw, calc(172cqw / var(--n, 4))); font-weight: 800;
  letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c, #e72a88) 30%, transparent); white-space: nowrap; pointer-events: none; user-select: none; }

/* ---------- con ese presupuesto también podrías llevar: su propia franja, mucho aire ---------- */
.mas { position: relative; z-index: 3; background: var(--papel); }
.cot__tambien { max-width: var(--max); margin: 0 auto; padding: clamp(44px, 8vh, 90px) var(--g) clamp(30px, 6vh, 70px); text-align: center; }
.tam__titulo { margin: 0 auto clamp(30px, 5vh, 54px); font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 640; max-width: 30ch; text-wrap: balance; }
.tam__titulo em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; color: var(--rosa); letter-spacing: -.01em; }
.marq--pres .marq__pista { animation-duration: 38s; }
.tam { display: grid; justify-items: center; gap: 3px; margin-right: clamp(36px, 5vw, 84px); cursor: pointer; }
.tam img { height: clamp(70px, 8vw, 92px); width: auto; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(22, 18, 14, .16)); transition: transform .6s var(--expo); }
.tam:hover img { transform: translateY(-6px) rotate(-3deg); }
.tam b { margin-top: 10px; font-size: 15px; font-weight: 620; letter-spacing: -.01em; }
.tam small { font-size: 13px; color: var(--tinta-3); }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .cot__cuerpo { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding-top: calc(var(--nav-h) + 22px); }
  .cot__charla { display: contents; }
  .cot__cab { order: 1; margin: 0; gap: 10px; } .cot-barra { order: 2; } .cot__aviso { order: 3; } .cot__escena { order: 4; } .cot__frase { order: 5; } .cot__pregunta { order: 6; } .cot__respuesta { order: 7; } .cot__lleva { order: 8; }
  .cot-barra { height: 62px; padding-left: 16px; } .cot-barra input { font-size: 16.5px; } .cot-barra .btn { min-height: 48px; padding-inline: 18px; }
  .con-producto .cot-barra { top: calc(var(--nav-h) + 16px); }
  .con-producto .cot-barra:not(.abierta) { width: 50px; height: 50px; padding-left: 14px; }
  .con-producto .cot-barra.abierta { width: calc(100% - 2 * var(--g)); height: 52px; }
  /* antes de elegir, la pieza llena lo que queda entre la barra y la marquesina; después, deja lugar a la respuesta */
  .cot__escena { flex: 1 1 200px; height: auto; min-height: 200px; }
  .con-producto .cot__escena { flex: none; height: clamp(250px, 36svh, 320px); }
  .cot__foto { left: 20%; top: 4%; width: 60%; height: 80%; }
  .cot__cota text { font-size: 14px; }
  .con-producto .cot__cuerpo { padding-bottom: 26px; }
  .cot__frase .frase__que { font-size: clamp(1.6rem, 7.4vw, 2.1rem); max-width: none; }
  .cot__frase .frase__total { font-size: clamp(3.6rem, 18vw, 4.8rem); }
}