/* Mirage Tienda UI — formato de las fichas de producto (descripciones con datos oficiales, 25-sep-2026).
   El HTML de cada ficha vive en WooCommerce con clases m-*; aquí solo el estilo. Variables en tienda.css. */

body.m-ui .m-intro { font-size: 15px; line-height: 1.55; color: var(--m-text); margin: 0 0 10px !important; }
body.m-ui .m-datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
body.m-ui .m-datos li {
  margin: 0 !important;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--m-soft);
  border: 1px solid var(--m-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--m-ink);
}

body.m-ui .m-ficha { color: var(--m-text); font-size: 15px; line-height: 1.6; }
body.m-ui .m-ficha h2 {
  font-size: clamp(18px, 3.8vw, 22px) !important;
  font-weight: 800 !important;
  color: var(--m-ink) !important;
  margin: 26px 0 10px !important;
  border: 0 !important;
  padding: 0 !important;
}
body.m-ui .m-ficha h2:first-child { margin-top: 0 !important; }
body.m-ui .m-beneficios { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
body.m-ui .m-beneficios li {
  margin: 0 !important;
  padding: 12px 14px;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  background: #fff;
}
body.m-ui .m-beneficios strong { display: block; color: var(--m-ink); margin-bottom: 2px; }
body.m-ui .m-ficha table.m-specs {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--m-line) !important;
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
  margin: 0 !important;
}
body.m-ui .m-ficha table.m-specs th,
body.m-ui .m-ficha table.m-specs td {
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--m-line) !important;
  text-align: left;
  vertical-align: top;
  background: #fff !important;
}
body.m-ui .m-ficha table.m-specs tr:last-child th,
body.m-ui .m-ficha table.m-specs tr:last-child td { border-bottom: 0 !important; }
body.m-ui .m-ficha table.m-specs th { width: 42%; font-weight: 600; color: var(--m-muted); background: var(--m-soft) !important; }
body.m-ui .m-ficha .m-fuente { font-size: 12.5px; color: var(--m-muted); margin: 8px 0 0 !important; }
body.m-ui .m-ficha .m-fuente a { color: var(--m-muted); text-decoration: underline; }
body.m-ui .m-ficha .m-instalacion { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 8px; }
body.m-ui .m-ficha .m-instalacion li {
  margin: 0 !important;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--m-line);
  border-radius: 12px;
}
body.m-ui .m-ficha .m-instalacion li span { color: var(--m-muted); font-size: 13.5px; display: block; }
body.m-ui .m-ficha .m-instalacion li b { color: var(--m-ink); white-space: nowrap; }