/* Tienda pública Joyería Oro & Empeños — mobile-first, elegante (oro/verde profundo). */
:root {
  --bg: #f7f4ec;
  --bg-2: #fbf8ef;
  --surface: #ffffff;
  --surface-2: #f1efe6;
  --ink: #172622;
  --muted: #64736e;
  --muted-2: #9aa6a1;
  --brand: #12332f;
  --brand-2: #1f5c50;
  --brand-3: #102c28;
  --gold: #c5a24d;
  --gold-2: #e2c46b;
  --gold-deep: #8d621b;
  --line: #dce3df;
  --line-2: #c9d2cd;
  --ok: #217a53;
  --warn: #865f12;
  --bad: #b73535;
  --shadow: 0 14px 32px rgba(18, 51, 47, .12), 0 4px 10px rgba(18, 51, 47, .06);
  --shadow-sm: 0 6px 16px rgba(18, 51, 47, .08);
  --radius: 14px;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(90deg, rgba(18, 51, 47, .03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(185, 139, 47, .035) 1px, transparent 1px),
    radial-gradient(900px 460px at 84% -12%, rgba(197, 162, 77, .16), transparent 62%),
    radial-gradient(760px 440px at -12% 112%, rgba(31, 92, 80, .12), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%, #eef3f1 100%);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}
/* Fondo temático (patrón de Sara Milagros): macro CC0 de joyería, fija, muy lavada y
   DETRÁS de todo. Opacidad baja a propósito: tiene que dar ambiente sin pelearse con el
   texto ni con las fotos de las piezas, que son lo que se vende. */
body::before {
  content: ""; position: fixed; inset: -4vh -4vw; z-index: -1; pointer-events: none;
  background: url("assets/fondos/joyas.jpg") center / cover no-repeat; opacity: .13;
  will-change: transform; animation: brillo 20s ease-in-out infinite alternate;
}
@keyframes brillo {
  0%   { transform: translate3d(0, 0, 0) scale(1.04); }
  50%  { transform: translate3d(-1.1%, .7%, 0) scale(1.07); }
  100% { transform: translate3d(.9%, -.5%, 0) scale(1.05); }
}
/* Quien pidió menos movimiento no debería recibir una animación de fondo. */
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* 16px en inputs evita el zoom automático de iOS */
input, select, textarea { font-size: 16px; }

/* ---------- Header ---------- */
.shop-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(11px + env(safe-area-inset-top)) 16px 11px;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
  color: #fff7d6;
  background:
    radial-gradient(circle at 32% 20%, #fff8d6, transparent 30%),
    linear-gradient(145deg, var(--gold-2), var(--gold) 52%, var(--gold-deep));
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), inset 0 -5px 8px rgba(65, 40, 4, .26), 0 8px 16px rgba(0, 0, 0, .2);
}
.brand-text { flex: 1; min-width: 0; }
.brand-text strong {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  color: var(--brand);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.shop-nav button {
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--brand);
  border-radius: 11px;
  padding: 9px 13px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.shop-nav button.on {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
  border-color: transparent;
}

/* ---------- Layout ---------- */
main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 18px;
  color: #f7fbf8;
  background:
    linear-gradient(135deg, rgba(213, 168, 75, .24), transparent 48%),
    linear-gradient(135deg, var(--brand-3), var(--brand-2));
  box-shadow: 0 18px 42px rgba(18, 51, 47, .2);
}
.hero::after {
  content: "◆";
  position: absolute;
  right: -14px;
  bottom: -30px;
  font-size: 150px;
  line-height: 1;
  color: rgba(226, 196, 107, .14);
  pointer-events: none;
}
.hero .eyebrow {
  color: #d8c37b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}
.hero h1 {
  margin: 6px 0 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.12;
  max-width: 22ch;
}
.hero p { color: #c9ddd7; font-size: 14px; line-height: 1.55; max-width: 42ch; }

/* ---------- Chips (filtros) ---------- */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin: 4px 0 18px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.chip.on {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
  border-color: transparent;
}

/* ---------- Grid de productos ---------- */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
@media (max-width: 520px) {
  .catalog-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.product-card {
  background: var(--surface);
  border: 1px solid rgba(18, 51, 47, .1);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:active { transform: scale(.98); }
@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(185, 139, 47, .42);
    box-shadow: 0 20px 40px rgba(20, 38, 34, .16);
  }
}
.pc-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #f7f2e8, #e2e9e4);
  overflow: hidden;
  cursor: zoom-in;
}
.pc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-foto .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 44px;
}
.pc-foto::after {
  content: "\2922";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #fff;
  background: rgba(16, 44, 40, .5);
  backdrop-filter: blur(2px);
}
/* Indicador de galería (más de una foto) */
.pc-multi {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  background: rgba(16, 44, 40, .62);
  backdrop-filter: blur(2px);
}
.pc-body { padding: 12px 13px 14px; }
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: var(--surface-2);
  color: var(--brand);
}
.pc-body h3 {
  margin: 9px 0 5px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.28;
}
.pc-detalle {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.price {
  font-family: var(--serif);
  color: var(--brand);
  font-size: 19px;
  font-weight: 700;
}

/* ---------- Estado vacío ---------- */
.estado {
  max-width: 460px;
  margin: 58px auto;
  text-align: center;
  color: var(--muted);
  padding: 0 20px;
}
.estado .ic { font-size: 46px; color: var(--gold); margin-bottom: 14px; }
.estado h2 { font-family: var(--serif); font-weight: 600; color: var(--brand); font-size: 21px; margin-bottom: 6px; }
.estado p { font-size: 14px; line-height: 1.5; }

/* ---------- Avalúo: ¿Cuánto vale tu oro? ---------- */
.avaluo-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px;
}
.av-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) { .av-form { grid-template-columns: 1fr 1fr; } .av-form .campo:first-child { grid-column: 1 / -1; } }
.av-form .campo { margin-bottom: 0; }
.av-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.av-form input, .av-form select {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 13px 14px;
  background: var(--bg-2);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.av-form input:focus, .av-form select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 162, 77, .22);
  background: #fff;
}
.av-out { margin-top: 18px; transition: opacity .15s ease; }
.av-out.cargando { opacity: .5; }
.av-guia {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 22px 8px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  background: var(--bg-2);
}
.av-guia.err-linea { color: var(--bad); border-color: rgba(183, 53, 53, .4); background: #fae2e2; }
.av-res {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) { .av-res { grid-template-columns: 1fr; } }
.av-big {
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.av-big.compra {
  color: #f7fbf8;
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(213, 168, 75, .22), transparent 55%),
    linear-gradient(135deg, var(--brand-3), var(--brand-2));
}
.av-big.prestamo {
  color: #2a2110;
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
}
.av-big .av-lbl {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .9;
}
.av-big.compra .av-lbl { color: #d8c37b; opacity: 1; }
.av-big strong {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
}
.av-comercial {
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.av-comercial b { color: var(--brand); font-weight: 800; }
.av-nota {
  margin-top: 14px;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

/* ---------- Mi cuenta: tabs + formularios ---------- */
.auth-wrap { max-width: 440px; margin: 8px auto 0; }
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--surface-2);
  padding: 5px;
  border-radius: 13px;
}
.tabs .t {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 11px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}
.tabs .t.on {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.card-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px;
}
.card-form h2 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--brand);
  font-size: 20px;
  margin-bottom: 4px;
}
.card-form .sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; line-height: 1.45; }
.campo { margin-bottom: 13px; }
.campo label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.campo input {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 13px 14px;
  background: var(--bg-2);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 162, 77, .22);
  background: #fff;
}
.btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 15px;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 10px 22px rgba(18, 51, 47, .26);
}
.btn:active { transform: translateY(1px); }
.btn.gold { color: #2a2110; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 10px 22px rgba(185, 139, 47, .28); }
.btn.sec {
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn:disabled { opacity: .55; }
.err { min-height: 18px; margin-top: 10px; color: var(--bad); font-size: 13px; font-weight: 600; text-align: center; }

/* ---------- Mi cuenta: panel ---------- */
.acc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background:
    linear-gradient(135deg, rgba(213, 168, 75, .22), transparent 52%),
    linear-gradient(135deg, var(--brand-3), var(--brand-2));
  color: #f7fbf8;
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.acc-head .eyebrow { color: #d8c37b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; }
.acc-head h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; margin-top: 3px; }
.acc-head .btn { width: auto; padding: 11px 15px; font-size: 13px; }

.resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 520px) { .resumen { grid-template-columns: 1fr; } }
.stat {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.stat::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -24px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(197, 162, 77, .12);
}
.stat .label { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.stat .valor { margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: 25px; color: var(--brand); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 16px;
  margin-bottom: 16px;
}
.panel > h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--brand);
  font-size: 18px;
  margin-bottom: 12px;
}
.account-list { display: grid; gap: 10px; }
.account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfb;
}
.account-row b { display: block; color: var(--brand); font-size: 14px; }
.account-row small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; }
.account-row .monto { text-align: right; }
.account-row .monto strong { color: var(--brand); font-family: var(--serif); font-size: 17px; font-weight: 700; white-space: nowrap; }
.account-row .estado-pill {
  display: inline-block;
  margin-top: 5px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--surface-2);
  color: var(--brand);
}
.estado-pill.ok { background: #e5f5ec; color: var(--ok); }
.estado-pill.warn { background: #fff1d6; color: var(--warn); }
.estado-pill.bad { background: #fae2e2; color: var(--bad); }
.vacio-linea { color: var(--muted); font-size: 13.5px; padding: 6px 2px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(9, 16, 15, .95);
  cursor: zoom-out;
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox figure { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  background: #f7f2e8;
}
.lightbox figcaption { text-align: center; color: #f4efe2; max-width: 34ch; }
.lightbox figcaption .lc-nombre { font-family: var(--serif); font-size: 18px; }
.lightbox figcaption .lc-precio { color: var(--gold-2); font-weight: 800; margin-top: 4px; }
.lightbox figcaption .lc-conteo { color: #b9c6c0; font-size: 12px; font-weight: 700; margin-top: 6px; letter-spacing: .5px; }
/* Flechas de navegación de la galería */
.lx-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.lx-nav.prev { left: calc(10px + env(safe-area-inset-left)); }
.lx-nav.next { right: calc(10px + env(safe-area-inset-right)); }
@media (hover: hover) { .lx-nav:hover { background: rgba(255, 255, 255, .28); } }
/* Tira de miniaturas */
.lx-thumbs {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 2px;
  margin-top: 12px;
  scrollbar-width: none;
}
.lx-thumbs::-webkit-scrollbar { display: none; }
.lx-th {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  background: #f7f2e8;
  opacity: .55;
  transition: opacity .15s, border-color .15s;
}
.lx-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-th.on { opacity: 1; border-color: var(--gold); }
.lightbox .lx {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 16px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 18px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  z-index: 120;
  background: var(--brand);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

footer {
  text-align: center;
  color: var(--muted-2);
  font-size: 12px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
/* Puerta del personal: la tienda ocupa el dominio, así que el sistema necesita un
   acceso visible pero discreto. No es un secreto —la seguridad está en el login con
   MFA—, pero tampoco compite con el catálogo. */
.pie-gestion {
  display: block;
  margin-top: 10px;
  color: inherit;
  text-decoration: none;
  opacity: .65;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.pie-gestion:hover { opacity: 1; border-bottom-color: var(--gold); }

/* ---------- Escritorio ---------- */
@media (min-width: 760px) {
  main { padding: 24px; }
  .hero { padding: 30px 28px; }
  .hero h1 { font-size: 34px; }
  .brand-text strong { font-size: 21px; }
}

/* Botón "Pedir este artículo" en la tarjeta */
.pc-pedir { width: 100%; margin-top: 10px; }

/* v4.1 · header móvil en dos filas (la marca no se corta) + botón pedir consistente */
@media (max-width: 560px) {
  .shop-top { flex-wrap: wrap; row-gap: 8px; }
  .brand-text { flex: 1 1 auto; }
  .brand-text strong { white-space: normal; overflow: visible; text-overflow: clip; font-size: 18px; }
  .brand-text span { font-size: 11px; }
  .shop-nav { order: 3; width: 100%; justify-content: space-between; gap: 6px; }
  .shop-nav button { flex: 1; padding: 9px 6px; font-size: 13px; }
}
.pc-pedir { min-height: 44px; }