/* Ambientaza · el cotizador de piezas en el teléfono.
   Mismo lenguaje del pedido (css/pedido.css): letra del sistema, tarjetas blancas de esquinas
   redondas y controles grandes para el dedo. Solo aplica bajo 900 px; el escritorio no cambia. */
.producto__mas { display: none; }
.producto__total b { font-weight: inherit; }
.producto__total i, .producto__total em { font-style: normal; }

@media (max-width: 899px) {
  /* la guía de tres preguntas */
  .guia__abrir { border: 0; border-radius: 14px; background: #fff; padding: .95rem 1.1rem; font: 400 1rem/1.35 var(--ios); color: #4A524A; }
  .guia__abrir b { font-weight: 600; text-decoration: none; color: #2F6B3A; }
  .guia__panel { border: 0; border-radius: 18px; background: #fff; }
  .guia__resultado { border-left: 0; border-radius: 14px; font-family: var(--ios); }

  /* la foto y sus miniaturas */
  .producto { gap: 1.15rem; }
  .producto__marco { border-radius: 18px; }
  .producto__minis { gap: .5rem; }
  .mini { width: 58px; height: 58px; border: 0; border-radius: 12px; box-shadow: 0 0 0 1px rgba(20, 26, 19, .12); }
  .mini[aria-pressed="true"] { box-shadow: 0 0 0 2px #141A13; }

  /* nombre y opciones */
  .producto__ficha { font-family: var(--ios); color: #141A13; }
  .producto__ficha > .mono { font: 500 .86rem var(--ios); letter-spacing: 0; text-transform: none; color: #2F6B3A; }
  .producto__ficha h3 { margin-top: .15rem; font: 700 1.95rem/1.08 var(--ios); font-stretch: normal; letter-spacing: -.03em; }
  .producto__uso { margin-top: .45rem; font: 400 1.04rem/1.4 var(--ios); color: #4A524A; }
  .producto__grupo { margin-top: 1.3rem; }
  .producto__grupo legend { margin-bottom: .6rem; font: 600 1rem var(--ios); letter-spacing: -.01em; text-transform: none; color: #141A13; }
  .producto__grupo legend b { font-weight: 400; color: #6B7068; }
  .producto__chips { gap: .45rem; }
  .pchip span { display: grid; place-items: center; min-height: 46px; padding: .5rem 1.1rem; border: 0; background: #fff; box-shadow: inset 0 0 0 1px #DEDBD2; font: 500 1rem var(--ios); font-stretch: normal; color: #141A13; }
  .pchip input:checked + span { background: #141A13; color: #fff; font-weight: 600; box-shadow: none; }
  .producto__tallas .pchip span { min-height: 42px; padding: .4rem .85rem; font-size: .92rem; }
  .producto__otra { min-height: 40px; font: 500 .95rem var(--ios); color: #2F6B3A; }
  .producto__muestras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; padding: 4px; }
  .pmuestra img { width: 100%; height: auto; aspect-ratio: 1; }
  .producto__term-nota { font: 400 .92rem/1.35 var(--ios); color: #6B7068; }

  /* el precio por volumen */
  .producto__precio { margin-top: 1.4rem; padding: 1.1rem; border: 0; border-radius: 18px; background: #fff; }
  .producto__precio-t .mono { font: 600 1rem var(--ios); letter-spacing: -.01em; text-transform: none; color: #141A13; }
  .producto__precio-t .producto__ejemplo { padding: .25em .7em; border-radius: 999px; font: 500 .74rem var(--ios); }
  .producto__escalas { gap: .45rem; margin-top: .8rem; background: none; border: 0; }
  .producto__escalas li { padding: .6rem .5rem .65rem; border-radius: 12px; background: #F4F2EC; }
  .producto__escalas span { font: 400 .8rem var(--ios); letter-spacing: 0; text-transform: none; color: #6B7068; }
  .producto__escalas b { margin-top: .1rem; font: 600 1rem var(--ios); font-stretch: normal; color: #6B7068; }
  .producto__escalas li.es { background: #EEF2DD; box-shadow: inset 0 0 0 2px #2F6B3A; }
  .producto__escalas li.es span { color: #2F6B3A; }
  .producto__escalas li.es b { color: #141A13; }
  /* el precio de lista, tachado bajo el de cada escala (ver css/producto.css) */
  .producto__escalas small { margin-top: .3rem; font: 400 .74rem/1.35 var(--ios); letter-spacing: 0; text-transform: none; color: #8A9088; }
  .producto__escalas s { margin-top: .22rem; font: 400 .78rem/1.35 var(--ios); color: #8A9088; }
  .producto__cuenta { --cont: 9rem; flex-wrap: nowrap; justify-content: space-between; gap: .8rem; margin-top: 1rem; } /* --cont: ancho del contador */
  .producto__cuenta .contador { grid-template-columns: 2.875rem 3.25rem 2.875rem; height: 46px; border: 0; border-radius: 999px; background: #F0EEE8; overflow: hidden; }
  .producto__cuenta .contador button { font: 400 1.35rem/1 var(--ios); color: #141A13; }
  .producto__cuenta .contador button:hover { background: #E3E0D8; color: #141A13; }
  .producto__cuenta .contador input { border: 0; font: 600 1.05rem var(--ios); color: #141A13; }
  .producto__total { min-width: 0; display: grid; justify-items: end; text-align: right; font: 400 .88rem/1.25 var(--ios); color: #6B7068; }
  .producto__total i, .producto__total em { display: none; }
  .producto__total span { white-space: nowrap; }
  /* El total: 1.5rem, y más chico si la cifra es larga (--n = sus caracteres) o el teléfono angosto, para que
     nunca se salga de la tarjeta. Lo que queda libre = pantalla − márgenes − tarjeta − contador. */
  .producto__total b { order: -1; font: 700 1.5rem/1.1 var(--ios); font-size: min(1.5rem, calc((100vw - 2 * var(--margen) - 3rem - var(--cont)) / (var(--n, 10) * .6))); letter-spacing: -.03em; color: #141A13; font-variant-numeric: tabular-nums; }
  /* Con precio: una línea propia para el porcentaje en rojo, el precio por pieza y el de lista tachado; debajo, contador y total */
  .con-precio .producto__cuenta { flex-wrap: wrap; row-gap: .8rem; margin-top: 1.05rem; }
  .con-precio .producto__total { display: contents; }
  .con-precio .producto__total .pt-cu { order: -1; flex: 0 0 100%; white-space: normal; text-align: left; font: 400 .95rem/1.25 var(--ios); color: #6B7068; }
  .con-precio .producto__total .pt-cu strong { font: 700 1.3rem/1.2 var(--ios); letter-spacing: -.02em; color: #141A13; }
  .con-precio .producto__total .pt-baja { display: inline; margin-right: .12em; font: 300 1.36rem/1.2 var(--ios); letter-spacing: -.01em; color: var(--rebaja); }
  .con-precio .producto__total .pt-baja i, .con-precio .producto__total s i { display: inline; }
  .con-precio .producto__total .pt-cu s { margin-left: .4em; font: 400 .88rem/1.2 var(--ios); color: #8A9088; white-space: nowrap; }
  .con-precio .producto__total .pt-sub { margin-left: auto; text-align: right; }
  .producto__precio-nota { margin-top: .8rem; font: 400 .84rem/1.4 var(--ios); color: #8A9088; }

  /* sus medidas (cuando se abre la pieza en 3D) */
  .producto__medidas { margin-top: 1.3rem; padding: 1.1rem; border: 0; border-radius: 18px; background: #fff; }
  .producto__medidas > .mono { font: 600 1rem var(--ios); letter-spacing: -.01em; text-transform: none; color: #141A13; }
  .producto__medidas .campo legend, .producto__medidas .campo--rango > label { font: 500 .95rem var(--ios); letter-spacing: 0; text-transform: none; color: #4A524A; }
  .producto__medidas .campo--rango output { font: 600 .95rem var(--ios); color: #141A13; }
  .producto__medidas .interruptor { font: 500 1rem var(--ios); }

  /* la ficha: lo esencial a la vista, el resto se abre */
  .producto__datos { margin-top: 1.1rem; padding: .2rem 1.1rem; border: 0; border-radius: 18px; background: #fff; }
  .producto__datos div { grid-template-columns: 7.2rem minmax(0, 1fr); gap: .8rem; padding: .72rem 0; border-bottom: 1px solid #ECEAE3; }
  .producto__datos div:last-child { border-bottom: 0; }
  .producto__datos dt { padding-top: 0; font: 400 .92rem/1.35 var(--ios); letter-spacing: 0; text-transform: none; color: #6B7068; }
  .producto__datos dd { font: 500 .95rem/1.35 var(--ios); color: #141A13; }
  .producto__datos:not(.es-abierta) div:nth-child(n+6) { display: none; }
  .producto__datos:not(.es-abierta) div:nth-child(5) { border-bottom: 0; }
  .producto__mas { display: inline-flex; align-items: center; min-height: 40px; margin-top: .6rem; padding: .45rem .95rem; border: 0; border-radius: 999px; background: #E6E3DA; color: #141A13; font: 500 .92rem var(--ios); cursor: pointer; }

  /* agregar: un solo botón; el atajo de WhatsApp no va en el teléfono */
  .producto__ficha .acciones { margin-top: 1.1rem; }
  .producto__ficha .acciones #pr-agregar { width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: #141A13; color: #fff; font: 600 1.06rem var(--ios); font-stretch: normal; letter-spacing: -.01em; text-transform: none; }
  .producto__ficha .acciones #pr-wa { display: none; }
  .producto__ficha .nota { font: 400 .84rem/1.4 var(--ios); color: #8A9088; }
}

/* teléfonos angostos: el contador de la pieza cede ancho para que el total respire */
@media (max-width: 380px) {
  .producto__cuenta { --cont: 7.9rem; }
  .producto__cuenta .contador { grid-template-columns: 2.5rem 2.9rem 2.5rem; }
}